chore: sync v11 branch with main

package.json

@@ -37,24 +37,24 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.35.0",
-    "carbon-components-react": "^7.35.0",
-    "@carbon/elements": "^10.34.0",
-    "@carbon/icons": "^10.32.0",
-    "@carbon/icons-react": "^10.32.0",
+    "carbon-components": "^10.36.0",
+    "carbon-components-react": "^7.36.0",
+    "@carbon/elements": "^10.35.0",
+    "@carbon/icons": "^10.33.0",
+    "@carbon/icons-react": "^10.33.0",
     "gatsby-remark-images": "^3.3.33"
   },
   "dependencies": {
     "@carbon/charts-react": "0.41.62",
-    "@carbon/elements": "^10.34.0",
-    "@carbon/icons": "^10.32.0",
-    "@carbon/icons-react": "^10.32.0",
-    "@carbon/pictograms": "^11.10.0",
-    "@carbon/pictograms-react": "^11.10.0",
+    "@carbon/elements": "^10.35.0",
+    "@carbon/icons": "^10.33.0",
+    "@carbon/icons-react": "^10.33.0",
+    "@carbon/pictograms": "^11.11.0",
+    "@carbon/pictograms-react": "^11.11.0",
     "@loadable/component": "^5.12.0",
     "@slack/web-api": "^5.11.0",
-    "carbon-components": "^10.35.0",
-    "carbon-components-react": "^7.35.0",
+    "carbon-components": "^10.36.0",
+    "carbon-components-react": "^7.36.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",

src/components/ComponentDemo/ComponentDemo.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useState, useContext } from 'react';
 import getTheme from 'gatsby-theme-carbon/src/components/Code/getTheme';
@@ -85,6 +86,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
     });
   };
 
+  const labelText = `Live editor for the ${components[0].label} component`;
+
   // TODO max width editor handle multiple clicks use regex for individual props?
   // allow for write-in props
   // Tests/cleanup context
@@ -162,11 +165,15 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
               )}
 
               <Code links={links} code={code} src={src} className={codeRow}>
+                <label htmlFor="live-editor-label">
+                  <span className="live-editor-label">{labelText}</span>
+                </label>
                 <LiveEditor
                   padding={16}
                   style={{ overflowX: 'auto', whiteSpace: 'pre' }}
                   onChange={(updatedCode) => setCode(updatedCode)}
                   className={editorContainer}
+                  textareaId="live-editor-label"
                 />
               </Code>
               {knobs && (

src/components/ComponentDemo/ComponentDemo.module.scss

@@ -477,3 +477,16 @@ body {
     }
   }
 }
+
+:global(.live-editor-label) {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}

src/data/nav-items.yaml

@@ -198,6 +198,8 @@
       path: /patterns/overflow-content/
     - title: Search
       path: /patterns/search-pattern/
+    #    - title: Status indicators
+    #      path: /patterns/status-indicator-pattern/
     - title: Text toolbar
       path: /patterns/text-toolbar-pattern/
 - title: Community assets

src/pages/all-about-carbon/partners.mdx

@@ -133,11 +133,6 @@ increases the internal and external eminence of Carbon Design System and IBM.
 
 ![Linda Carotenuto headshot](/images/team/carotenuto_linda.png)
 
-</Profile>
-<Profile name="Jan Child" title="Content Design and Strategy Lead, Carbon">
-
-![Jan Child headshot](/images/team/child_jan.png)
-
 </Profile>
 <Profile name="David Levinson" title="IBM Design Principal, IBM Cloud and Cognitive Software">
 

src/pages/all-about-carbon/the-carbon-ecosystem.mdx

@@ -27,7 +27,7 @@ assets and guidance but Carbon is more than one website.
 
 At its core, Carbon has universal assets–elements, components, patterns, and
 code–and guidance for how to design and build with them. These assets are
-considered universal or fundamental in nature, which means they can used as a
+considered universal or fundamental in nature, which means they can be used as a
 base for the widest variety of situations, and extended or adapted for the
 specific business use cases.
 

src/pages/components/accordion/style.mdx

@@ -101,11 +101,8 @@ of the accordion panel.
 
 ## Sizes
 
-| Element         | Size         | Height (px/rem) |
-| --------------- | ------------ | ------------ |
-| Header          | Small (sm)   | 32 / 2         |
-|                 | Medium (md)  | 40 / 2.5       |
-|                 | Large (lg)   | 48 / 3         |
-
-
-
+| Element | Size        | Height (px/rem) |
+| ------- | ----------- | --------------- |
+| Header  | Small (sm)  | 32 / 2          |
+|         | Medium (md) | 40 / 2.5        |
+|         | Large (lg)  | 48 / 3          |

src/pages/components/dropdown/usage.mdx

@@ -218,13 +218,12 @@ height.
 </Column>
 </Row>
 
-| Dropdown size | Height (px/rem) | Use case          |
-| ------------- | --------------- | ----------------- |
-| Small (sm)    | 32  / 2         | Use when space is constricted or when placing a dropdown in a form that is long and complex. |
-| Medium (md)   | 40 / 2.5        | This is our default size and should be used whenever possible. | 
+| Dropdown size | Height (px/rem) | Use case                                                                                                                                                                           |
+| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Small (sm)    | 32 / 2          | Use when space is constricted or when placing a dropdown in a form that is long and complex.                                                                                       |
+| Medium (md)   | 40 / 2.5        | This is our default size and should be used whenever possible.                                                                                                                     |
 | Large (lg)    | 48 / 3          | Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter. |
 
-
 When the menu is open, each option in the menu should be the same height as the
 field. Use a consistent size of form components on the same page. For example,
 if you are using a medium size dropdown also use the same size text inputs,

src/pages/components/file-uploader/style.mdx

@@ -122,8 +122,8 @@ The file and button heights should always match.
 | Element | Size        | Height px / rem |
 | ------- | ----------- | --------------- |
 | File    | Small (sm)  | 32 / 2          |
-|         | Medium (md) | 40 / 2.5        | 
-|         | Large  (lg) | 48 / 3          |
+|         | Medium (md) | 40 / 2.5        |
+|         | Large (lg)  | 48 / 3          |
 | Button  | Small (sm)  | 32 / 2          |
 |         | Medium (md) | 40 / 2.5        |
 |         | Large (lg)  | 48 / 3          |

src/pages/components/modal/style.mdx

@@ -95,11 +95,11 @@ other components may still expand to the full width of a modal window.
 
 ## Sizes
 
-There are four modal sizes: extra small, small, medium, and large. Each modal size has a
-responsive width that changes based on the browser size. As the browser
-decreases, the modal width percentage increases thus maintaining a proper ratio
-between the modal and browser. Modal widths are defined as percentages of the
-browser but will still align to columns on the 2x grid.
+There are four modal sizes: extra small, small, medium, and large. Each modal
+size has a responsive width that changes based on the browser size. As the
+browser decreases, the modal width percentage increases thus maintaining a
+proper ratio between the modal and browser. Modal widths are defined as
+percentages of the browser but will still align to columns on the 2x grid.
 
 <Row>
 <Column colLg={8}>

src/pages/components/modal/usage.mdx

@@ -243,11 +243,11 @@ of the modal.
 
 ### Sizing
 
-There are four responsive [modal sizes](/components/modal/style#sizes): extra small, 
-small, medium, and large. Choose a size that works best for the amount of modal
-content you have. Modals with short messages should use a extra small or small modal to
-avoid long single lines; for complex components, like data table the default or
-large modal will be more accommodating.
+There are four responsive [modal sizes](/components/modal/style#sizes): extra
+small, small, medium, and large. Choose a size that works best for the amount of
+modal content you have. Modals with short messages should use a extra small or
+small modal to avoid long single lines; for complex components, like data table
+the default or large modal will be more accommodating.
 
 <Row>
 <Column colLg={8}>

src/pages/components/text-input/style.mdx

@@ -99,10 +99,10 @@ should be three words or less.
 
 <Caption>Structure and spacing measurements for text area | px / rem</Caption>
 
-## Sizes 
+## Sizes
 
-| Element     | Size        | Height (px / rem)  |
-| ----------  | ----------- | ------------------ | 
-| Input       | Small (sm)  | 32 / 2             |
-|             | Medium (md) | 40 / 2.5           |
-|             | Large (lg)  | 48 / 3             |
+| Element | Size        | Height (px / rem) |
+| ------- | ----------- | ----------------- |
+| Input   | Small (sm)  | 32 / 2            |
+|         | Medium (md) | 40 / 2.5          |
+|         | Large (lg)  | 48 / 3            |

src/pages/components/tooltip/style.mdx

@@ -10,12 +10,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive tooltip
 
-| Class                   | Property         | Color token   |
-| ----------------------- | ---------------- | ------------- |
-| Label                   | text color       | `$text-secondary`    |
-| Trigger icon            | svg              | `$icon-primary`    |
-| Container               | background-color | `$background-inverse` |
-| Text                    | color       | `$text-inverse` |
+| Class        | Property         | Color token           |
+| ------------ | ---------------- | --------------------- |
+| Label        | text color       | `$text-secondary`     |
+| Trigger icon | svg              | `$icon-primary`       |
+| Container    | background-color | `$background-inverse` |
+| Text         | color            | `$text-inverse`       |
 
 <div className="image--fixed">
 
@@ -27,29 +27,29 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Icon tooltip
 
-| Class                       | Property         | Color token   |
-| --------------------------- | ---------------- | ------------- |
-| Trigger icon                | background-color | `$icon-primary` |
-| Container                   | background-color | `$background-inverse` |
-| Text                        | color       | `$text-inverse` |
+| Class        | Property         | Color token           |
+| ------------ | ---------------- | --------------------- |
+| Trigger icon | background-color | `$icon-primary`       |
+| Container    | background-color | `$background-inverse` |
+| Text         | color            | `$text-inverse`       |
 
 ### Definition tooltip
 
-| Class                      | Property         | Color token       |
-| -------------------------- | ---------------- | ----------------- |
-| Label                      | color       | `$text-secondary`        |
-| Dotted underline           | border-bottom    | `$interactive` |
-| Container                  | background-color | `$background-inverse`     |
-| Text                       | color       | `$text-inverse`     |
+| Class            | Property         | Color token           |
+| ---------------- | ---------------- | --------------------- |
+| Label            | color            | `$text-secondary`     |
+| Dotted underline | border-bottom    | `$interactive`        |
+| Container        | background-color | `$background-inverse` |
+| Text             | color            | `$text-inverse`       |
 
 ## Typography
 
 Tooltip labels and text should be set in sentence case.
 
-| Property              | Font-size (px/rem) | Font-weight   | Type token       |
-| --------------------- | ------------------ | ------------- | ---------------- |
-| Label                 | 12 / 0.75          | Regular / 400 | `$label-01`      |
-| Body copy             | 14 / 0.875         | Regular / 400 | `$body-short-01` |
+| Property  | Font-size (px/rem) | Font-weight   | Type token       |
+| --------- | ------------------ | ------------- | ---------------- |
+| Label     | 12 / 0.75          | Regular / 400 | `$label-01`      |
+| Body copy | 14 / 0.875         | Regular / 400 | `$body-short-01` |
 
 ## Structure
 
@@ -58,13 +58,13 @@ contain.
 
 ### Interactive tooltip
 
-| Element                     | Property      | px / rem | Spacing token |
-| --------------------------- | ------------- | -------- | ------------- |
-| Container                   | max-width     | 240 / 15 | –             |
-|                             | padding       | 16 / 1   | `$spacing-05` |
-|                             | margin-top    | 8 / 0.5  | `$spacing-03` |
-| Trigger icon                | height, width | 16 / 1   | –             |
-|                             | margin-left   | 8 / 0.5  | `$spacing-03` |
+| Element      | Property      | px / rem | Spacing token |
+| ------------ | ------------- | -------- | ------------- |
+| Container    | max-width     | 240 / 15 | –             |
+|              | padding       | 16 / 1   | `$spacing-05` |
+|              | margin-top    | 8 / 0.5  | `$spacing-03` |
+| Trigger icon | height, width | 16 / 1   | –             |
+|              | margin-left   | 8 / 0.5  | `$spacing-03` |
 
 <div className="image--fixed">
 
@@ -78,13 +78,13 @@ contain.
 
 ### Definition tooltip
 
-| Class        | Property                    | px / rem | Spacing token |
-| ------------ | --------------------------- | -------- | ------------- |
-| Container    | max-width                   | 176 / 11 | –             |
-|              | padding-top, padding bottom | 8 / 0.5  | `$spacing-03` |
-|              | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| Underline    | border-bottom               | 1px      | –             |
-| Caret        | margin-top                  | 4px      | `$spacing-02` |
+| Class     | Property                    | px / rem | Spacing token |
+| --------- | --------------------------- | -------- | ------------- |
+| Container | max-width                   | 176 / 11 | –             |
+|           | padding-top, padding bottom | 8 / 0.5  | `$spacing-03` |
+|           | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Underline | border-bottom               | 1px      | –             |
+| Caret     | margin-top                  | 4px      | `$spacing-02` |
 
 <div className="image--fixed">
 
@@ -98,12 +98,12 @@ contain.
 
 ### Icon tooltip
 
-| Class      | Property                    | px / rem  | Spacing token |
-| ---------- | --------------------------- | --------- | ------------- |
-| Container  | max-width                   | 176 / 11  | –             |
-|            | padding-left, padding-right | 16 / 1    | `$spacing-05` |
-|            | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
-| Caret      | margin-top                  | 8 / 0.5   | `$spacing-03` |
+| Class     | Property                    | px / rem  | Spacing token |
+| --------- | --------------------------- | --------- | ------------- |
+| Container | max-width                   | 176 / 11  | –             |
+|           | padding-left, padding-right | 16 / 1    | `$spacing-05` |
+|           | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
+| Caret     | margin-top                  | 8 / 0.5   | `$spacing-03` |
 
 <div className="image--fixed">
 

src/pages/contributing/overview.mdx

@@ -64,7 +64,7 @@ Regardless of how you choose to contribute, we encourage you to open an issue as
 early as possible in the process.
 
 If working with GitHub sounds like a lot, check out
-[this free video series](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+[this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
 It's one of our favorite resources.
 
 ## The Carbon community

src/pages/designing/get-started.mdx

@@ -99,7 +99,6 @@ jump in to help you out.
 
 - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)
 - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)
-- [#carbon-elements](https://ibm-studios.slack.com/archives/CDHHNNZQR)
 - [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H)
 
 And be sure to sign up for the latest Carbon news at

src/pages/developing/get-started.mdx

@@ -97,7 +97,6 @@ question to you and will jump in to help you out.
 
 - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)
 - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)
-- [#carbon-elements](https://ibm-studios.slack.com/archives/CDHHNNZQR)
 - [#carbon-react](https://ibm-studios.slack.com/archives/C2K6RFJ1G)
 - [#carbon-ng](https://ibm-studios.slack.com/archives/CBZC0LM2N)
 - [#carbon-vue](https://ibm-studios.slack.com/archives/CAM5P6NR1)

src/pages/developing/vue-tutorial/step-1.mdx

@@ -156,7 +156,7 @@ using the Vue CLI. These include:
 - `@vue/cli-plugin-babel`: To ensure we produce well supported code.
 - `@vue/cli-plugin-eslint`: To allow us to catch potential errors.
 - `@vue/cli-plugin-unit-jest`: To allow us to unit test our code.
-- `node-sass`: To allow us to use the sass css precompiler.
+- `sass-loader`: To allow us to use the sass css precompiler.
 
 NOTE: We could have installed these separately but using the CLI to set this up
 for us ensures a good base config for these dependencies.
@@ -422,9 +422,7 @@ each individual icon we will use.
 <!-- prettier-ignore-start -->
 ```javascript path=src/components/TutorialHeader/TutorialHeader.vue
 <script>
-import Notification20 from "@carbon/icons-vue/es/notification/20";
-import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
-import AppSwitcher20 from "@carbon/icons-vue/es/app-switcher/20";
+import { Notification20, UserAvatar20, AppSwitcher20 } from '@carbon/icons-vue';
 
 export default {
   name: "TutorialHeader",