@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

package/lib/globals/settings.js

@@ -26,7 +26,7 @@ const selectorTabbable = `
   textarea:not([disabled]):not([tabindex='-1']),
   iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],
   ${prefix}-accordion-item,
-  ${prefix}-btn,
+  ${prefix}-button,
   ${prefix}-breadcrumb-link,
   ${prefix}-checkbox,
   ${prefix}-code-snippet,

package/lib/globals/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","names":["prefix","exports","selectorTabbable"],"sources":["globals/settings.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst prefix = 'cds';\n\n/**\n * A selector selecting tabbable nodes.\n * Borrowed from `carbon-angular`. tabbable === focusable.\n */\nconst selectorTabbable = `\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],\n  ${prefix}-accordion-item,\n  ${prefix}-btn,\n  ${prefix}-breadcrumb-link,\n  ${prefix}-checkbox,\n  ${prefix}-code-snippet,\n  ${prefix}-combo-box,\n  ${prefix}-content-switcher-item,\n  ${prefix}-copy-button,\n  ${prefix}-table-header-row,\n  ${prefix}-table-row,\n  ${prefix}-table-toolbar-search,\n  ${prefix}-date-picker-input,\n  ${prefix}-dropdown,\n  ${prefix}-input,\n  ${prefix}-link,\n  ${prefix}-number-input,\n  ${prefix}-modal,\n  ${prefix}-modal-close-button,\n  ${prefix}-multi-select,\n  ${prefix}-inline-notification,\n  ${prefix}-toast-notification,\n  ${prefix}-overflow-menu,\n  ${prefix}-overflow-menu-item,\n  ${prefix}-page-sizes-select,\n  ${prefix}-pages-select,\n  ${prefix}-progress-step,\n  ${prefix}-radio-button,\n  ${prefix}-search,\n  ${prefix}-slider,\n  ${prefix}-slider-input,\n  ${prefix}-structured-list,\n  ${prefix}-tab,\n  ${prefix}-filter-tag,\n  ${prefix}-textarea,\n  ${prefix}-clickable-tile,\n  ${prefix}-expandable-tile,\n  ${prefix}-radio-tile,\n  ${prefix}-selectable-tile,\n  ${prefix}-toggle,\n  ${prefix}-tooltip,\n  ${prefix}-tooltip-definition,\n  ${prefix}-tooltip-icon,\n  ${prefix}-header-menu,\n  ${prefix}-header-menu-button,\n  ${prefix}-header-menu-item,\n  ${prefix}-header-name,\n  ${prefix}-header-nav-item,\n  ${prefix}-side-nav-link,\n  ${prefix}-side-nav-menu,\n  ${prefix}-side-nav-menu-item\n`;\n\n// Because we're going to have a bunch of exports\nexport { prefix, selectorTabbable };\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMA,MAAM,GAAG,KAAK;;AAEpB;AACA;AACA;AACA;AAHAC,OAAA,CAAAD,MAAA,GAAAA,MAAA;AAIA,MAAME,gBAAgB,GAAI;AAC1B;AACA;AACA;AACA;AACA,IAAIF,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,CAAC;;AAED;AAAAC,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}
+{"version":3,"file":"settings.js","names":["prefix","exports","selectorTabbable"],"sources":["globals/settings.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst prefix = 'cds';\n\n/**\n * A selector selecting tabbable nodes.\n * Borrowed from `carbon-angular`. tabbable === focusable.\n */\nconst selectorTabbable = `\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],\n  ${prefix}-accordion-item,\n  ${prefix}-button,\n  ${prefix}-breadcrumb-link,\n  ${prefix}-checkbox,\n  ${prefix}-code-snippet,\n  ${prefix}-combo-box,\n  ${prefix}-content-switcher-item,\n  ${prefix}-copy-button,\n  ${prefix}-table-header-row,\n  ${prefix}-table-row,\n  ${prefix}-table-toolbar-search,\n  ${prefix}-date-picker-input,\n  ${prefix}-dropdown,\n  ${prefix}-input,\n  ${prefix}-link,\n  ${prefix}-number-input,\n  ${prefix}-modal,\n  ${prefix}-modal-close-button,\n  ${prefix}-multi-select,\n  ${prefix}-inline-notification,\n  ${prefix}-toast-notification,\n  ${prefix}-overflow-menu,\n  ${prefix}-overflow-menu-item,\n  ${prefix}-page-sizes-select,\n  ${prefix}-pages-select,\n  ${prefix}-progress-step,\n  ${prefix}-radio-button,\n  ${prefix}-search,\n  ${prefix}-slider,\n  ${prefix}-slider-input,\n  ${prefix}-structured-list,\n  ${prefix}-tab,\n  ${prefix}-filter-tag,\n  ${prefix}-textarea,\n  ${prefix}-clickable-tile,\n  ${prefix}-expandable-tile,\n  ${prefix}-radio-tile,\n  ${prefix}-selectable-tile,\n  ${prefix}-toggle,\n  ${prefix}-tooltip,\n  ${prefix}-tooltip-definition,\n  ${prefix}-tooltip-icon,\n  ${prefix}-header-menu,\n  ${prefix}-header-menu-button,\n  ${prefix}-header-menu-item,\n  ${prefix}-header-name,\n  ${prefix}-header-nav-item,\n  ${prefix}-side-nav-link,\n  ${prefix}-side-nav-menu,\n  ${prefix}-side-nav-menu-item\n`;\n\n// Because we're going to have a bunch of exports\nexport { prefix, selectorTabbable };\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMA,MAAM,GAAG,KAAK;;AAEpB;AACA;AACA;AACA;AAHAC,OAAA,CAAAD,MAAA,GAAAA,MAAA;AAIA,MAAME,gBAAgB,GAAI;AAC1B;AACA;AACA;AACA;AACA,IAAIF,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,IAAIA,MAAO;AACX,CAAC;;AAED;AAAAC,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}

package/lib/globals/wrappers/createReactCustomElementType.js

@@ -9,7 +9,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = require("react");
-var _on = _interopRequireDefault(require("carbon-components/umd/globals/js/misc/on"));
+var _on = _interopRequireDefault(require("../mixins/on"));
 /**
  * @license
  *
@@ -116,7 +116,7 @@ const attachEventListeners = (elem, descriptor, callback) => {
  * import { render } from 'react-dom';
  * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType';
  *
- * const BXDropdown = createCustomElementType(`${prefix}-dropdown`, {
+ * const CDSDropdown = createCustomElementType(`${prefix}-dropdown`, {
  *   disabled: {
  *     // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise
  *     serialize: booleanSerializer,
@@ -133,14 +133,14 @@ const attachEventListeners = (elem, descriptor, callback) => {
  *
  * render(
  *   (
- *     <BXDropdown
+ *     <CDSDropdown
  *       disabled={true}
  *       helperText="some-helper-text"
  *       onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}>
  *       <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
  *       <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
  *       <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
- *     </BXDropdown>
+ *     </CDSDropdown>
  *   )
  *   document.body
  * );

package/lib/globals/wrappers/createReactCustomElementType.js.map

@@ -1 +1 @@
-{"version":3,"file":"createReactCustomElementType.js","names":["_react","require","_on","_interopRequireDefault","mergeRefs","refs","el","forEach","ref","Object","current","convertProp","prop","descriptor","event","serialize","undefined","convertProps","props","keys","reduce","acc","propName","descriptorItem","converted","attribute","_objectSpread2","default","attachEventListeners","elem","callback","handles","Set","eventDescriptor","name","options","add","on","release","handle","delete","createReactCustomElementType","nonAttributeProps","filter","CustomElementType","Component","constructor","args","_defineProperty2","listener","call","currentTarget","_elem","_eventListenersHandle","_handleEvent","updateProps","prevProps","prevValue","value","componentDidMount","componentDidUpdate","render","_this$props","children","innerRef","_objectWithoutProperties2","mergedRef","_handleElemRef","createElement","forwardRef","booleanSerializer","exports","numberSerializer","String","objectSerializer","JSON","stringify","_default"],"sources":["globals/wrappers/createReactCustomElementType.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React, { Component, createElement, forwardRef } from 'react';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport Handle from '../internal/handle';\n\n/**\n * A descriptor for a React event prop of a custom element.\n */\ninterface CustomElementEventDescriptor {\n  /**\n   * The event name.\n   */\n  name: string;\n\n  /**\n   * A boolean to detemine usage of capture mode or the event options.\n   */\n  options?: boolean | EventListenerOptions;\n}\n\n/**\n * A descriptor for a React prop for an attribute of a custom element.\n */\ninterface CustomElementPropDescriptor {\n  /**\n   * The attribute name for the prop.\n   */\n  attribute?: string | false;\n\n  /**\n   * The event name (or descriptor) for the prop.\n   */\n  event?: string | CustomElementEventDescriptor;\n\n  /**\n   * A function that takes a property value and returns the corresponding attribute value.\n   */\n  serialize?: (value: any) => string | void;\n}\n\n/**\n * A descriptor for a set of React props for attributes of a custom element.\n */\ninterface CustomElementPropsDescriptor {\n  [propName: string]: CustomElementPropDescriptor;\n}\n\n/**\n * React props for the component `createCustomElementType()` generates.\n */\ninterface CustomElementTypeProps {\n  /**\n   * Ordinal prop.\n   */\n  [propName: string]: any;\n\n  /**\n   * Child nodes.\n   */\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: React.ReactNode;\n}\n\n/**\n * @param refs List of React refs to merge.\n * @returns Merged React ref.\n */\nconst mergeRefs =\n  <T>(...refs: React.Ref<T>[]) =>\n  (el) => {\n    refs.forEach((ref) => {\n      // https://github.com/facebook/react/issues/13029#issuecomment-410002316\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (Object(ref) === ref) {\n        // `React.Ref.current` is read-only for regular use case, but we update it here\n        (ref as { current: T }).current = el;\n      }\n    });\n  };\n\n/**\n * @param prop A prop value.\n * @param descriptor A React prop descriptor.\n * @returns The corresponding attribute value for the given prop value.\n */\nconst convertProp = (prop: any, descriptor: CustomElementPropDescriptor) => {\n  if (!descriptor) {\n    return prop;\n  }\n  const { event, serialize } = descriptor;\n  if (event) {\n    // Events are not set as props, we use DOM `addEventListener()` instead\n    return undefined;\n  }\n  return !serialize ? prop : serialize(prop);\n};\n\n/**\n * @param props A set of React props.\n * @param descriptor A set of React prop desciptor.\n * @returns The set of React props to set to a custom element, corresponding to the given React props.\n */\nconst convertProps = (\n  props: CustomElementTypeProps,\n  descriptor: CustomElementPropsDescriptor\n) =>\n  Object.keys(props).reduce((acc, propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const converted = convertProp(props[propName], descriptorItem);\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false\n      ? acc\n      : {\n          ...acc,\n          [attribute || propName]: converted,\n        };\n  }, {});\n\n/**\n * Attaches listeners of custom events, to a custom element.\n *\n * @param elem The custom element.\n * @param descriptor An object, keyed by prop name, of data that may have custom event names.\n * @param callback A callback function that runs as the custom events fire.\n * @returns A handle that allows to release all event listeners attached.\n */\nconst attachEventListeners = (\n  elem: HTMLElement,\n  descriptor: CustomElementPropsDescriptor,\n  callback: (name: string, event: Event) => void\n): Handle => {\n  const handles = new Set<Handle>();\n  Object.keys(descriptor).forEach((propName) => {\n    if (descriptor[propName]) {\n      const { event: eventDescriptor } = descriptor[propName];\n      const name =\n        Object(eventDescriptor) !== eventDescriptor\n          ? (eventDescriptor as string)\n          : (eventDescriptor as CustomElementEventDescriptor).name;\n      const options =\n        Object(eventDescriptor) !== eventDescriptor\n          ? undefined\n          : (eventDescriptor as CustomElementEventDescriptor).options;\n      if (name) {\n        handles.add(\n          on(\n            elem,\n            name,\n            (event) => {\n              callback(propName, event);\n            },\n            options\n          )\n        );\n      }\n    }\n  });\n  return {\n    release() {\n      handles.forEach((handle) => {\n        handle.release();\n        handles.delete(handle);\n      });\n      return null;\n    },\n  };\n};\n\n/**\n * @param name The tag name of the custom element.\n * @param descriptor A descriptor for a set of React props for attributes of a custom element.\n * @returns A React component working as a wrapper for the given custom element.\n * @example\n * import { render } from 'react-dom';\n * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType';\n *\n * const BXDropdown = createCustomElementType(`${prefix}-dropdown`, {\n *   disabled: {\n *     // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise\n *     serialize: booleanSerializer,\n *   },\n *   helperText: {\n *     // Maps `helperText` React prop to `helper-text` attribute\n *     attribute: 'helper-text',\n *   },\n *   onBeforeSelect: {\n *     // Sets `onBeforeSelect` React prop value as a listener of `cds-dropdown-beingselected` custom event\n *     event: `${prefix}-dropdown-beingselected`,\n *   },\n * });\n *\n * render(\n *   (\n *     <BXDropdown\n *       disabled={true}\n *       helperText=\"some-helper-text\"\n *       onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}>\n *       <cds-dropdown-item value=\"all\">Option 1</cds-dropdown-item>\n *       <cds-dropdown-item value=\"cloudFoundry\">Option 2</cds-dropdown-item>\n *       <cds-dropdown-item value=\"staging\">Option 3</cds-dropdown-item>\n *     </BXDropdown>\n *   )\n *   document.body\n * );\n */\nconst createReactCustomElementType = (\n  name: string,\n  descriptor: CustomElementPropsDescriptor\n) => {\n  /**\n   * Array of React prop names that should be mapped to DOM properties instead of attributes.\n   */\n  const nonAttributeProps = Object.keys(descriptor).filter((propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false;\n  });\n\n  /**\n   * A React component working as a wrapper for the custom element.\n   */\n  class CustomElementType extends Component<CustomElementTypeProps> {\n    /**\n     * The element.\n     */\n    private _elem: HTMLElement | null = null;\n\n    /**\n     * The handle that allows to release all event listeners attached to this custom element.\n     */\n    private _eventListenersHandle: Handle | null = null;\n\n    /**\n     * The callback function that runs as the custom events fire.\n     *\n     * @param propName The React prop name associated with the event listener.\n     * @param event The event.\n     */\n    private _handleEvent = (propName: string, event: Event) => {\n      const { [propName]: listener } = this.props;\n      if (listener) {\n        listener.call(event.currentTarget, event);\n      }\n    };\n\n    /**\n     * Handles getting/losing the React `ref` object of this custom element.\n     *\n     * @param elem The custom element.\n     */\n    private _handleElemRef = (elem: HTMLElement) => {\n      this._elem = elem;\n      if (this._eventListenersHandle) {\n        this._eventListenersHandle.release();\n        this._eventListenersHandle = null;\n      }\n      if (elem) {\n        this._eventListenersHandle = attachEventListeners(\n          elem,\n          descriptor,\n          this._handleEvent\n        );\n      }\n    };\n\n    /**\n     * Reflects change in React props to DOM properties.\n     *\n     * @param prevProps The previous props.\n     */\n    updateProps(prevProps: { [key: string]: any } = {}) {\n      const { props, _elem: elem } = this;\n      nonAttributeProps.forEach((propName) => {\n        const { [propName]: prevValue } = prevProps;\n        const { [propName]: value } = props;\n        if (prevValue !== value) {\n          elem![propName] = value;\n        }\n      });\n    }\n\n    componentDidMount() {\n      this.updateProps();\n    }\n\n    componentDidUpdate(prevProps) {\n      this.updateProps(prevProps);\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { children, innerRef, ...props } = this.props;\n      const mergedRef = mergeRefs<HTMLElement>(innerRef, this._handleElemRef);\n      return createElement(\n        name,\n        { ref: mergedRef, ...convertProps(props, descriptor) },\n        children\n      );\n    }\n  }\n\n  return forwardRef<HTMLElement, CustomElementTypeProps>((props, ref) =>\n    createElement(CustomElementType, { ...props, innerRef: ref })\n  );\n};\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a boolean attribute in a custom element.\n */\nexport const booleanSerializer = (value) => (!value ? undefined : '');\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a number attribute in a custom element.\n */\nexport const numberSerializer = (value) =>\n  value == null ? value : String(value);\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a object attribute in a custom element.\n */\nexport const objectSerializer = (value) =>\n  value == null ? value : JSON.stringify(value);\n\nexport default createReactCustomElementType;\n"],"mappings":"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"}
+{"version":3,"file":"createReactCustomElementType.js","names":["_react","require","_on","_interopRequireDefault","mergeRefs","refs","el","forEach","ref","Object","current","convertProp","prop","descriptor","event","serialize","undefined","convertProps","props","keys","reduce","acc","propName","descriptorItem","converted","attribute","_objectSpread2","default","attachEventListeners","elem","callback","handles","Set","eventDescriptor","name","options","add","on","release","handle","delete","createReactCustomElementType","nonAttributeProps","filter","CustomElementType","Component","constructor","args","_defineProperty2","listener","call","currentTarget","_elem","_eventListenersHandle","_handleEvent","updateProps","prevProps","prevValue","value","componentDidMount","componentDidUpdate","render","_this$props","children","innerRef","_objectWithoutProperties2","mergedRef","_handleElemRef","createElement","forwardRef","booleanSerializer","exports","numberSerializer","String","objectSerializer","JSON","stringify","_default"],"sources":["globals/wrappers/createReactCustomElementType.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React, { Component, createElement, forwardRef } from 'react';\nimport on from '../mixins/on';\nimport Handle from '../internal/handle';\n\n/**\n * A descriptor for a React event prop of a custom element.\n */\ninterface CustomElementEventDescriptor {\n  /**\n   * The event name.\n   */\n  name: string;\n\n  /**\n   * A boolean to detemine usage of capture mode or the event options.\n   */\n  options?: boolean | EventListenerOptions;\n}\n\n/**\n * A descriptor for a React prop for an attribute of a custom element.\n */\ninterface CustomElementPropDescriptor {\n  /**\n   * The attribute name for the prop.\n   */\n  attribute?: string | false;\n\n  /**\n   * The event name (or descriptor) for the prop.\n   */\n  event?: string | CustomElementEventDescriptor;\n\n  /**\n   * A function that takes a property value and returns the corresponding attribute value.\n   */\n  serialize?: (value: any) => string | void;\n}\n\n/**\n * A descriptor for a set of React props for attributes of a custom element.\n */\ninterface CustomElementPropsDescriptor {\n  [propName: string]: CustomElementPropDescriptor;\n}\n\n/**\n * React props for the component `createCustomElementType()` generates.\n */\ninterface CustomElementTypeProps {\n  /**\n   * Ordinal prop.\n   */\n  [propName: string]: any;\n\n  /**\n   * Child nodes.\n   */\n  // eslint-disable-next-line react/no-unused-prop-types\n  children?: React.ReactNode;\n}\n\n/**\n * @param refs List of React refs to merge.\n * @returns Merged React ref.\n */\nconst mergeRefs =\n  <T>(...refs: React.Ref<T>[]) =>\n  (el) => {\n    refs.forEach((ref) => {\n      // https://github.com/facebook/react/issues/13029#issuecomment-410002316\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (Object(ref) === ref) {\n        // `React.Ref.current` is read-only for regular use case, but we update it here\n        (ref as { current: T }).current = el;\n      }\n    });\n  };\n\n/**\n * @param prop A prop value.\n * @param descriptor A React prop descriptor.\n * @returns The corresponding attribute value for the given prop value.\n */\nconst convertProp = (prop: any, descriptor: CustomElementPropDescriptor) => {\n  if (!descriptor) {\n    return prop;\n  }\n  const { event, serialize } = descriptor;\n  if (event) {\n    // Events are not set as props, we use DOM `addEventListener()` instead\n    return undefined;\n  }\n  return !serialize ? prop : serialize(prop);\n};\n\n/**\n * @param props A set of React props.\n * @param descriptor A set of React prop desciptor.\n * @returns The set of React props to set to a custom element, corresponding to the given React props.\n */\nconst convertProps = (\n  props: CustomElementTypeProps,\n  descriptor: CustomElementPropsDescriptor\n) =>\n  Object.keys(props).reduce((acc, propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const converted = convertProp(props[propName], descriptorItem);\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false\n      ? acc\n      : {\n          ...acc,\n          [attribute || propName]: converted,\n        };\n  }, {});\n\n/**\n * Attaches listeners of custom events, to a custom element.\n *\n * @param elem The custom element.\n * @param descriptor An object, keyed by prop name, of data that may have custom event names.\n * @param callback A callback function that runs as the custom events fire.\n * @returns A handle that allows to release all event listeners attached.\n */\nconst attachEventListeners = (\n  elem: HTMLElement,\n  descriptor: CustomElementPropsDescriptor,\n  callback: (name: string, event: Event) => void\n): Handle => {\n  const handles = new Set<Handle>();\n  Object.keys(descriptor).forEach((propName) => {\n    if (descriptor[propName]) {\n      const { event: eventDescriptor } = descriptor[propName];\n      const name =\n        Object(eventDescriptor) !== eventDescriptor\n          ? (eventDescriptor as string)\n          : (eventDescriptor as CustomElementEventDescriptor).name;\n      const options =\n        Object(eventDescriptor) !== eventDescriptor\n          ? undefined\n          : (eventDescriptor as CustomElementEventDescriptor).options;\n      if (name) {\n        handles.add(\n          on(\n            elem,\n            name,\n            (event) => {\n              callback(propName, event);\n            },\n            options\n          )\n        );\n      }\n    }\n  });\n  return {\n    release() {\n      handles.forEach((handle) => {\n        handle.release();\n        handles.delete(handle);\n      });\n      return null;\n    },\n  };\n};\n\n/**\n * @param name The tag name of the custom element.\n * @param descriptor A descriptor for a set of React props for attributes of a custom element.\n * @returns A React component working as a wrapper for the given custom element.\n * @example\n * import { render } from 'react-dom';\n * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType';\n *\n * const CDSDropdown = createCustomElementType(`${prefix}-dropdown`, {\n *   disabled: {\n *     // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise\n *     serialize: booleanSerializer,\n *   },\n *   helperText: {\n *     // Maps `helperText` React prop to `helper-text` attribute\n *     attribute: 'helper-text',\n *   },\n *   onBeforeSelect: {\n *     // Sets `onBeforeSelect` React prop value as a listener of `cds-dropdown-beingselected` custom event\n *     event: `${prefix}-dropdown-beingselected`,\n *   },\n * });\n *\n * render(\n *   (\n *     <CDSDropdown\n *       disabled={true}\n *       helperText=\"some-helper-text\"\n *       onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}>\n *       <cds-dropdown-item value=\"all\">Option 1</cds-dropdown-item>\n *       <cds-dropdown-item value=\"cloudFoundry\">Option 2</cds-dropdown-item>\n *       <cds-dropdown-item value=\"staging\">Option 3</cds-dropdown-item>\n *     </CDSDropdown>\n *   )\n *   document.body\n * );\n */\nconst createReactCustomElementType = (\n  name: string,\n  descriptor: CustomElementPropsDescriptor\n) => {\n  /**\n   * Array of React prop names that should be mapped to DOM properties instead of attributes.\n   */\n  const nonAttributeProps = Object.keys(descriptor).filter((propName) => {\n    const { [propName]: descriptorItem } = descriptor;\n    const { attribute } = descriptorItem ?? {};\n    return attribute === false;\n  });\n\n  /**\n   * A React component working as a wrapper for the custom element.\n   */\n  class CustomElementType extends Component<CustomElementTypeProps> {\n    /**\n     * The element.\n     */\n    private _elem: HTMLElement | null = null;\n\n    /**\n     * The handle that allows to release all event listeners attached to this custom element.\n     */\n    private _eventListenersHandle: Handle | null = null;\n\n    /**\n     * The callback function that runs as the custom events fire.\n     *\n     * @param propName The React prop name associated with the event listener.\n     * @param event The event.\n     */\n    private _handleEvent = (propName: string, event: Event) => {\n      const { [propName]: listener } = this.props;\n      if (listener) {\n        listener.call(event.currentTarget, event);\n      }\n    };\n\n    /**\n     * Handles getting/losing the React `ref` object of this custom element.\n     *\n     * @param elem The custom element.\n     */\n    private _handleElemRef = (elem: HTMLElement) => {\n      this._elem = elem;\n      if (this._eventListenersHandle) {\n        this._eventListenersHandle.release();\n        this._eventListenersHandle = null;\n      }\n      if (elem) {\n        this._eventListenersHandle = attachEventListeners(\n          elem,\n          descriptor,\n          this._handleEvent\n        );\n      }\n    };\n\n    /**\n     * Reflects change in React props to DOM properties.\n     *\n     * @param prevProps The previous props.\n     */\n    updateProps(prevProps: { [key: string]: any } = {}) {\n      const { props, _elem: elem } = this;\n      nonAttributeProps.forEach((propName) => {\n        const { [propName]: prevValue } = prevProps;\n        const { [propName]: value } = props;\n        if (prevValue !== value) {\n          elem![propName] = value;\n        }\n      });\n    }\n\n    componentDidMount() {\n      this.updateProps();\n    }\n\n    componentDidUpdate(prevProps) {\n      this.updateProps(prevProps);\n    }\n\n    render() {\n      // eslint-disable-next-line react/prop-types\n      const { children, innerRef, ...props } = this.props;\n      const mergedRef = mergeRefs<HTMLElement>(innerRef, this._handleElemRef);\n      return createElement(\n        name,\n        { ref: mergedRef, ...convertProps(props, descriptor) },\n        children\n      );\n    }\n  }\n\n  return forwardRef<HTMLElement, CustomElementTypeProps>((props, ref) =>\n    createElement(CustomElementType, { ...props, innerRef: ref })\n  );\n};\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a boolean attribute in a custom element.\n */\nexport const booleanSerializer = (value) => (!value ? undefined : '');\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a number attribute in a custom element.\n */\nexport const numberSerializer = (value) =>\n  value == null ? value : String(value);\n\n/**\n * @param value A React prop value.\n * @returns Serialized version of React prop value, as a object attribute in a custom element.\n */\nexport const objectSerializer = (value) =>\n  value == null ? value : JSON.stringify(value);\n\nexport default createReactCustomElementType;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "publishConfig": {
     "access": "public"
   },
@@ -69,8 +69,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.19.0",
-    "flatpickr": "4.6.13",
+    "@carbon/styles": "^1.27.0",
+    "flatpickr": "4.6.1",
     "lit": "^2.6.0",
     "lodash-es": "^4.17.21"
   },
@@ -90,8 +90,8 @@
     "@babel/preset-modules": "~0.1.5",
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.12.0",
-    "@carbon/icon-helpers": "^10.28.0",
-    "@carbon/icons": "^10.48.0",
+    "@carbon/icon-helpers": "^10.39.0",
+    "@carbon/icons": "^11.18.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.8.1",

package/scss/components/button/button.scss

@@ -13,7 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/popover/index';
 @use '@carbon/styles/scss/components/tooltip';
 
-:host(#{$prefix}-btn),
+:host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
   display: inline-flex;
 
@@ -23,15 +23,15 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-btn[kind='ghost']:hover) .#{$prefix}--btn--ghost,
-:host(#{$prefix}-btn[kind='ghost']) .#{$prefix}--btn--ghost:active {
+:host(#{$prefix}-button[kind='ghost']:hover) .#{$prefix}--btn--ghost,
+:host(#{$prefix}-button[kind='ghost']) .#{$prefix}--btn--ghost:active {
   outline: none;
 }
 
-:host(#{$prefix}-btn-set) {
+:host(#{$prefix}-button-set) {
   @extend .#{$prefix}--btn-set;
 
-  ::slotted(#{$prefix}-btn) {
+  ::slotted(#{$prefix}-button) {
     width: 100%;
     // 196px from design kit
     max-width: rem(196px);

package/scss/components/checkbox/checkbox.scss

@@ -16,5 +16,13 @@ $css--plex: true !default;
   @extend .#{$prefix}--form-item;
   @extend .#{$prefix}--checkbox-wrapper;
 
-  outline: none;
+  &[readonly] {
+    @extend .#{$prefix}--checkbox-wrapper--readonly;
+  }
+}
+
+:host(#{$prefix}-checkbox-skeleton) {
+  .#{$prefix}--checkbox-label {
+    cursor: default;
+  }
 }

package/scss/components/combo-box/combo-box.scss

@@ -8,13 +8,17 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/combo-box/combo-box';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/text-input/text-input';
+@use '../dropdown/dropdown.scss';
 
 :host(#{$prefix}-combo-box) {
+  @extend :host(#{$prefix}-dropdown);
+
   outline: none;
 
   .#{$prefix}--assistive-text {
@@ -23,10 +27,6 @@ $css--plex: true !default;
     top: -100%;
   }
 
-  .#{$prefix}--label[hidden] {
-    display: none;
-  }
-
   .#{$prefix}--list-box__field,
   // To get more specifity than:
   // https://github.com/carbon-design-system/carbon/blob/v10.16.0/packages/components/src/components/list-box/_list-box.scss#L126
@@ -35,20 +35,28 @@ $css--plex: true !default;
   }
 
   .#{$prefix}--list-box__menu {
+    outline: none;
     top: 100%;
     margin-top: 1px;
   }
-}
 
-:host(#{$prefix}-combo-box[type='inline']) {
-  @extend .#{$prefix}--list-box__wrapper--inline;
+  &[isClosable] {
+    .#{$prefix}--list-box__invalid-icon {
+      right: rem(66px) !important;
+    }
+  }
 
-  .#{$prefix}--list-box__field {
-    padding-left: 0;
+  &[disabled],
+  &[read-only] {
+    .#{$prefix}--list-box__selection {
+      pointer-events: none;
+    }
   }
 
-  .#{$prefix}--text-input {
-    border-bottom: none;
+  &[read-only] {
+    .#{$prefix}--list-box__selection svg {
+      fill: $icon-disabled;
+    }
   }
 }
 
@@ -58,47 +66,48 @@ $css--plex: true !default;
   display: block;
 
   .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+    height: auto;
   }
-}
-
-:host(#{$prefix}-combo-box-item[size='sm']) {
-  height: rem(32px);
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+  &[disabled] {
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-disabled;
+      text-decoration: none;
+    }
   }
-}
-
-:host(#{$prefix}-combo-box-item[size='xl']) {
-  height: rem(48px);
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
+  &[highlighted] {
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
   }
-}
 
-:host(#{$prefix}-combo-box-item[disabled])
-  .#{$prefix}--list-box__menu-item__option {
-  color: $text-disabled;
-  text-decoration: none;
-}
+  &[selected] {
+    @extend .#{$prefix}--list-box__menu-item--active;
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
 
-:host(#{$prefix}-combo-box-item[highlighted]) {
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
-}
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-primary;
+    }
 
-:host(#{$prefix}-combo-box-item[selected]) {
-  @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
+    .#{$prefix}--list-box__menu-item__selected-icon {
+      display: block;
+    }
+  }
 
-  .#{$prefix}--list-box__menu-item__option {
-    color: $text-primary;
+  &[size='sm'] {
+    height: $spacing-07;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(7px);
+      padding-bottom: rem(7px);
+    }
   }
 
-  .#{$prefix}--list-box__menu-item__selected-icon {
-    display: block;
+  &[size='lg'] {
+    height: $spacing-09;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(15px);
+      padding-bottom: rem(15px);
+    }
   }
 }

package/scss/components/copy-button/copy-button.scss

@@ -7,10 +7,30 @@
 
 $css--plex: true !default;
 
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/keyframes' as *;
+@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/components/copy-button/index';
 
 :host(#{$prefix}-copy-button) {
   display: inline-flex;
   outline: none;
 }
+
+.#{$prefix}--snippet__icon {
+  width: rem(16px);
+  height: rem(16px);
+  fill: $icon-primary;
+  transition: all $duration-fast-01 motion(standard, productive);
+}
+
+.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out {
+  // https://github.com/stylelint/stylelint/issues/2363
+  animation: $duration-fast-02 motion(standard, productive) hide-feedback;
+}
+
+.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in {
+  animation: $duration-fast-02 motion(standard, productive) show-feedback;
+}

package/scss/components/date-picker/date-picker.scss

@@ -10,6 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/date-picker/date-picker' as *;
 
@@ -69,11 +70,15 @@ $css--plex: true !default;
   @extend .#{$prefix}--date-picker-container;
 
   outline: none;
-}
 
-:host(#{$prefix}-date-picker-input[color-scheme='light'])
-  .#{$prefix}--date-picker__input {
-  background: $field-02;
+  .#{$prefix}--form-requirement[hidden] {
+    display: none;
+  }
+}
+:host(#{$prefix}-date-picker-input[warn]) {
+  .#{$prefix}--form-requirement {
+    color: $text-primary;
+  }
 }
 
 :host(#{$prefix}-date-picker-input[kind='simple']),
@@ -81,13 +86,16 @@ $css--plex: true !default;
   .#{$prefix}--date-picker__input {
     width: rem(120px);
   }
+
+  .#{$prefix}--date-picker__input--invalid,
+  .#{$prefix}--date-picker__input--warn {
+    width: rem(152px);
+  }
 }
 
 /* stylelint-disable selector-pseudo-class-parentheses-space-inside */
-:host(#{$prefix}-date-picker-input[kind='simple'][size-horizontal='short']),
-:host(
-    #{$prefix}-date-picker-input-skeleton[kind='simple'][size-horizontal='short']
-  ) {
+:host(#{$prefix}-date-picker-input[kind='simple'][short]),
+:host(#{$prefix}-date-picker-input-skeleton[kind='simple'][short]) {
   .#{$prefix}--date-picker__input {
     width: rem(90px);
   }
@@ -119,12 +127,18 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-date-picker-input) ::slotted(.#{$prefix}--date-picker__icon) {
-  position: absolute;
-  right: 1rem;
-  fill: $icon-primary;
-  cursor: pointer;
-  z-index: 1;
+:host(#{$prefix}-date-picker-input) {
+  .#{$prefix}--date-picker__icon {
+    @extend .#{$prefix}--date-picker__icon;
+  }
+
+  .#{$prefix}--date-picker__icon--warn {
+    @extend .#{$prefix}--date-picker__icon--warn;
+  }
+
+  .#{$prefix}--date-picker__icon--invalid {
+    @extend .#{$prefix}--date-picker__icon--invalid;
+  }
 }
 
 :host(#{$prefix}-date-picker-input-skeleton) {

package/scss/components/dropdown/dropdown.scss

@@ -8,9 +8,11 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/list-box/list-box' as *;
+@use '@carbon/styles/scss/components/dropdown' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
@@ -34,11 +36,61 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu {
     top: 100%;
     margin-top: 1px;
+    outline: 1px solid $focus;
   }
-}
 
-:host(#{$prefix}-dropdown[type='inline']) {
-  @extend .#{$prefix}--list-box__wrapper--inline;
+  &[open] {
+    .#{$prefix}--list-box__field {
+      outline: none;
+    }
+  }
+
+  &[invalid] {
+    .#{$prefix}--list-box__field {
+      outline: none;
+    }
+
+    .#{$prefix}--form__helper-text {
+      color: $text-error;
+    }
+  }
+
+  &[read-only] {
+    @extend .#{$prefix}--dropdown--readonly;
+
+    .#{$prefix}--list-box {
+      background-color: transparent;
+      border-bottom-color: $border-subtle;
+    }
+  }
+
+  &[direction='top'] {
+    @extend .#{$prefix}--list-box--up;
+
+    .#{$prefix}--list-box__menu {
+      top: auto;
+    }
+  }
+
+  &[type='inline'] {
+    @extend .#{$prefix}--list-box__wrapper--inline;
+
+    grid-gap: 0 $spacing-06;
+
+    &[warn] {
+      .#{$prefix}--list-box__field {
+        padding-left: $spacing-05;
+        padding-right: calc(#{$spacing-08} + #{$spacing-05});
+      }
+    }
+
+    &[warn],
+    &[invalid] {
+      .#{$prefix}--form__helper-text {
+        grid-column: 2;
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-dropdown-item) {
@@ -47,48 +99,49 @@ $css--plex: true !default;
   display: block;
 
   .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+    height: auto;
   }
-}
 
-:host(#{$prefix}-dropdown-item[size='sm']) {
-  height: rem(32px);
-
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+  &[highlighted] {
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
   }
-}
-
-:host(#{$prefix}-dropdown-item[size='xl']) {
-  height: rem(48px);
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
+  &[disabled] {
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-disabled;
+      text-decoration: none;
+    }
   }
-}
 
-:host(#{$prefix}-dropdown-item[disabled])
-  .#{$prefix}--list-box__menu-item__option {
-  color: $text-disabled;
-  text-decoration: none;
-}
+  &[selected] {
+    @extend .#{$prefix}--list-box__menu-item--active;
+    @extend .#{$prefix}--list-box__menu-item--highlighted;
 
-:host(#{$prefix}-dropdown-item[highlighted]) {
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
-}
+    .#{$prefix}--list-box__menu-item__option {
+      color: $text-primary;
+    }
 
-:host(#{$prefix}-dropdown-item[selected]) {
-  @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
+    .#{$prefix}--list-box__menu-item__selected-icon {
+      display: block;
+    }
+  }
 
-  .#{$prefix}--list-box__menu-item__option {
-    color: $text-primary;
+  &[size='sm'] {
+    height: $spacing-07;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(7px);
+      padding-bottom: rem(7px);
+    }
   }
 
-  .#{$prefix}--list-box__menu-item__selected-icon {
-    display: block;
+  &[size='lg'] {
+    height: $spacing-09;
+
+    .#{$prefix}--list-box__menu-item__option {
+      padding-top: rem(15px);
+      padding-bottom: rem(15px);
+    }
   }
 }