@carbon/web-components 2.38.0-rc.0 → 2.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/custom-elements.json +1 -7
  2. package/dist/accordion.min.js +1 -1
  3. package/dist/ai-label.min.js +1 -1
  4. package/dist/breadcrumb.min.js +5 -5
  5. package/dist/button-B8Pyi7VT.js +93 -0
  6. package/dist/{button-skeleton-Db1vtWNy.js → button-skeleton-Gu5vABsl.js} +6 -6
  7. package/dist/button.min.js +1 -1
  8. package/dist/chat-button.min.js +3 -3
  9. package/dist/{checkbox-BGausZxz.js → checkbox-DVx3ui3h.js} +1 -1
  10. package/dist/checkbox.min.js +3 -3
  11. package/dist/code-snippet.min.js +1 -1
  12. package/dist/combo-box.min.js +1 -1
  13. package/dist/combo-button.min.js +2 -2
  14. package/dist/content-switcher.min.js +1 -1
  15. package/dist/copy-button.min.js +1 -1
  16. package/dist/data-table.min.js +7 -7
  17. package/dist/date-picker.min.js +1 -1
  18. package/dist/dropdown-item-B6uTaLa3.js +96 -0
  19. package/dist/dropdown.min.js +1 -1
  20. package/dist/file-uploader.min.js +1 -1
  21. package/dist/floating-menu.min.js +1 -1
  22. package/dist/grid.min.js +2 -2
  23. package/dist/host-listener-BCnAWDV7.js +28 -0
  24. package/dist/host-listener-BJsBtsIt.js +28 -0
  25. package/dist/icon-button.min.js +1 -1
  26. package/dist/icon-indicator.min.js +1 -1
  27. package/dist/{icon-loader-4nsiZm0x.js → icon-loader-CqB9WRMP.js} +1 -1
  28. package/dist/{icon-loader-utils-j7RXY3bH.js → icon-loader-utils-DUl0vwdh.js} +1 -1
  29. package/dist/icon.min.js +1 -1
  30. package/dist/inline-loading.min.js +1 -1
  31. package/dist/loading.min.js +1 -1
  32. package/dist/menu-button.min.js +2 -2
  33. package/dist/menu.min.js +3 -3
  34. package/dist/modal.min.js +4 -4
  35. package/dist/multi-select.min.js +1 -1
  36. package/dist/notification.min.js +3 -3
  37. package/dist/number-input.min.js +1 -1
  38. package/dist/overflow-menu.min.js +1 -1
  39. package/dist/pagination.min.js +1 -1
  40. package/dist/password-input.min.js +13 -13
  41. package/dist/popover.min.js +2 -2
  42. package/dist/progress-bar.min.js +4 -4
  43. package/dist/progress-indicator.min.js +1 -1
  44. package/dist/radio-button.min.js +3 -3
  45. package/dist/search-5sjwuFeV.js +57 -0
  46. package/dist/search.min.js +1 -1
  47. package/dist/{select-P2I1T8B7.js → select-N1IlMFgF.js} +1 -1
  48. package/dist/select.min.js +1 -1
  49. package/dist/shape-indicator.min.js +1 -1
  50. package/dist/side-panel.min.js +2 -2
  51. package/dist/slider.min.js +1 -1
  52. package/dist/slug.min.js +1 -1
  53. package/dist/structured-list.min.js +3 -3
  54. package/dist/tabs.min.js +1 -1
  55. package/dist/tag.min.js +8 -8
  56. package/dist/tearsheet.min.js +2 -2
  57. package/dist/{text-input-CQeOn3_E.js → text-input-FSx1F405.js} +3 -3
  58. package/dist/text-input.min.js +3 -3
  59. package/dist/textarea.min.js +1 -1
  60. package/dist/tile.min.js +5 -5
  61. package/dist/time-picker.min.js +1 -1
  62. package/dist/toggle-tip.min.js +2 -2
  63. package/dist/toggle.min.js +7 -9
  64. package/dist/tooltip-content-DOwidNjk.js +30 -0
  65. package/dist/tooltip.min.js +1 -1
  66. package/dist/tree-view.min.js +8 -8
  67. package/dist/ui-shell.min.js +20 -20
  68. package/es/components/accordion/accordion.scss.js +1 -1
  69. package/es/components/breadcrumb/breadcrumb-skeleton.d.ts +15 -1
  70. package/es/components/breadcrumb/breadcrumb-skeleton.js +37 -3
  71. package/es/components/breadcrumb/breadcrumb-skeleton.js.map +1 -1
  72. package/es/components/button/button-set.d.ts +8 -0
  73. package/es/components/button/button-set.js +27 -0
  74. package/es/components/button/button-set.js.map +1 -1
  75. package/es/components/button/button.scss.js +1 -1
  76. package/es/components/chat-button/chat-button.scss.js +1 -1
  77. package/es/components/checkbox/checkbox-group.d.ts +1 -4
  78. package/es/components/checkbox/checkbox-group.js +1 -4
  79. package/es/components/checkbox/checkbox-group.js.map +1 -1
  80. package/es/components/icon-button/icon-button.scss.js +1 -1
  81. package/es/components/toggle/toggle.d.ts +0 -4
  82. package/es/components/toggle/toggle.js +6 -24
  83. package/es/components/toggle/toggle.js.map +1 -1
  84. package/es-custom/components/accordion/accordion.scss.js +1 -1
  85. package/es-custom/components/breadcrumb/breadcrumb-skeleton.d.ts +15 -1
  86. package/es-custom/components/breadcrumb/breadcrumb-skeleton.js +37 -3
  87. package/es-custom/components/breadcrumb/breadcrumb-skeleton.js.map +1 -1
  88. package/es-custom/components/button/button-set.d.ts +8 -0
  89. package/es-custom/components/button/button-set.js +27 -0
  90. package/es-custom/components/button/button-set.js.map +1 -1
  91. package/es-custom/components/button/button.scss.js +1 -1
  92. package/es-custom/components/chat-button/chat-button.scss.js +1 -1
  93. package/es-custom/components/checkbox/checkbox-group.d.ts +1 -4
  94. package/es-custom/components/checkbox/checkbox-group.js +1 -4
  95. package/es-custom/components/checkbox/checkbox-group.js.map +1 -1
  96. package/es-custom/components/icon-button/icon-button.scss.js +1 -1
  97. package/es-custom/components/toggle/toggle.d.ts +0 -4
  98. package/es-custom/components/toggle/toggle.js +6 -24
  99. package/es-custom/components/toggle/toggle.js.map +1 -1
  100. package/lib/components/breadcrumb/breadcrumb-skeleton.d.ts +15 -1
  101. package/lib/components/button/button-set.d.ts +8 -0
  102. package/lib/components/checkbox/checkbox-group.d.ts +1 -4
  103. package/lib/components/toggle/toggle.d.ts +0 -4
  104. package/package.json +6 -6
  105. package/scss/components/accordion/accordion.scss +0 -10
  106. package/scss/components/button/button.scss +26 -0
  107. package/dist/button-B1IQnnUK.js +0 -93
  108. package/dist/dropdown-item-PlkQBvZw.js +0 -96
  109. package/dist/host-listener-L4RyNnzf.js +0 -28
  110. package/dist/search-ClUn-wPm.js +0 -57
  111. package/dist/tooltip-content-hZhbj7RB.js +0 -30
@@ -370,10 +370,6 @@ declare class CDSToggle extends CDSToggle_base {
370
370
  * Handles `click` event on the `<button>` in the shadow DOM.
371
371
  */
372
372
  protected _handleChange(): void;
373
- /**
374
- * Handles `keydown` event on the toggle button.
375
- */
376
- protected _handleKeydown: (event: KeyboardEvent) => Promise<void>;
377
373
  protected _renderCheckmark(): import("lit-html").TemplateResult<1> | undefined;
378
374
  /**
379
375
  * Specify another element's id to be used as the label for this toggle
@@ -14,7 +14,6 @@ import { prefix } from '../../globals/settings.js';
14
14
  import CDSCheckbox from '../checkbox/checkbox.js';
15
15
  import { TOGGLE_SIZE } from './defs.js';
16
16
  import styles from './toggle.scss.js';
17
- import HostListener from '../../globals/decorators/host-listener.js';
18
17
  import HostListenerMixin from '../../globals/mixins/host-listener.js';
19
18
  import { carbonElement } from '../../globals/decorators/carbon-element.js';
20
19
 
@@ -36,15 +35,6 @@ import { carbonElement } from '../../globals/decorators/carbon-element.js';
36
35
  let CDSToggle = class CDSToggle extends HostListenerMixin(CDSCheckbox) {
37
36
  constructor() {
38
37
  super(...arguments);
39
- /**
40
- * Handles `keydown` event on the toggle button.
41
- */
42
- this._handleKeydown = async (event) => {
43
- const { key } = event;
44
- if (key === ' ' || key === 'Enter') {
45
- this._handleChange();
46
- }
47
- };
48
38
  /**
49
39
  * The text for the checked state.
50
40
  */
@@ -83,18 +73,17 @@ let CDSToggle = class CDSToggle extends HostListenerMixin(CDSCheckbox) {
83
73
  * Handles `click` event on the `<button>` in the shadow DOM.
84
74
  */
85
75
  _handleChange() {
86
- const { checked, indeterminate } = this._checkboxNode;
76
+ const { checked } = this._checkboxNode;
87
77
  if (this.disabled || this.readOnly) {
88
78
  return;
89
79
  }
90
80
  this.checked = !checked;
91
- this.indeterminate = indeterminate;
92
81
  const { eventChange } = this.constructor;
93
82
  this.dispatchEvent(new CustomEvent(eventChange, {
94
83
  bubbles: true,
95
84
  composed: true,
96
85
  detail: {
97
- indeterminate,
86
+ checked: this.checked,
98
87
  },
99
88
  }));
100
89
  }
@@ -167,15 +156,13 @@ let CDSToggle = class CDSToggle extends HostListenerMixin(CDSCheckbox) {
167
156
  type="button"
168
157
  aria-checked=${checked}
169
158
  aria-labelledby=${ifDefined(ariaLabelledby)}
170
- .checked="${checked}"
159
+ .checked=${checked}
171
160
  name="${ifDefined(name)}"
172
161
  value="${ifDefined(value)}"
173
162
  ?disabled=${disabled}
174
- id="${id}"></button>
175
- <label
176
- for="${id}"
177
- class="${prefix}--toggle__label"
178
- @click=${handleChange}>
163
+ id="${id}"
164
+ @click=${handleChange}></button>
165
+ <label for="${id}" class="${prefix}--toggle__label">
179
166
  ${labelText
180
167
  ? html `<span class="${labelTextClasses}">${labelText}</span>`
181
168
  : null}
@@ -199,11 +186,6 @@ CDSToggle.styles = styles;
199
186
  __decorate([
200
187
  query('button')
201
188
  ], CDSToggle.prototype, "_checkboxNode", void 0);
202
- __decorate([
203
- HostListener('keydown')
204
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
205
- // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
206
- ], CDSToggle.prototype, "_handleKeydown", void 0);
207
189
  __decorate([
208
190
  property({ type: String, attribute: 'aria-labelledby' })
209
191
  ], CDSToggle.prototype, "ariaLabelledby", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n @query('button')\n protected _checkboxNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on the `<button>` in the shadow DOM.\n */\n protected _handleChange() {\n const { checked, indeterminate } = this._checkboxNode;\n if (this.disabled || this.readOnly) {\n return;\n }\n this.checked = !checked;\n this.indeterminate = indeterminate;\n const { eventChange } = this.constructor as typeof CDSCheckbox;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n indeterminate,\n },\n })\n );\n }\n\n /**\n * Handles `keydown` event on the toggle button.\n */\n @HostListener('keydown')\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n protected _handleKeydown = async (event: KeyboardEvent) => {\n const { key } = event;\n\n if (key === ' ' || key === 'Enter') {\n this._handleChange();\n }\n };\n\n protected _renderCheckmark() {\n if (this.size !== TOGGLE_SIZE.SMALL) {\n return undefined;\n }\n return html`\n <svg\n class=\"${prefix}--toggle__check\"\n width=\"6px\"\n height=\"5px\"\n viewBox=\"0 0 6 5\">\n <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n </svg>\n `;\n }\n\n /**\n * Specify another element's id to be used as the label for this toggle\n */\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby?: string;\n\n /**\n * The text for the checked state.\n */\n @property({ attribute: 'label-a' })\n labelA = 'On';\n\n /**\n * Hide label text.\n */\n @property({ reflect: true, type: Boolean })\n hideLabel = false;\n\n /**\n * Read only boolean.\n */\n @property({ reflect: true, attribute: 'read-only', type: Boolean })\n readOnly = false;\n\n /**\n * Toggle size.\n */\n @property({ reflect: true })\n size = TOGGLE_SIZE.REGULAR;\n\n /**\n * The text for the unchecked state.\n */\n @property({ attribute: 'label-b' })\n labelB = 'Off';\n\n /**\n * Private references of external <label> elements that are\n * `for=\"this-toggle-element-id\"`\n */\n private _externalLabels: HTMLLabelElement[] = [];\n\n /**\n * Handles `click` on external `<label>`\n */\n private _onExternalLabelClick = () => {\n this._checkboxNode?.focus();\n this._handleChange();\n };\n\n /**\n * Finds external toggle `<label>`s and attaches handlers.\n */\n private _attachExternalLabels() {\n const doc = this.ownerDocument || document;\n\n const found = this.id\n ? [...doc.querySelectorAll<HTMLLabelElement>(`label[for=\"${this.id}\"]`)]\n : [];\n\n this._externalLabels = Array.from(new Set(found));\n this._externalLabels.forEach((lbl) => {\n lbl.addEventListener('click', this._onExternalLabelClick);\n });\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n this._attachExternalLabels();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._externalLabels.forEach((lbl) =>\n lbl.removeEventListener('click', this._onExternalLabelClick)\n );\n }\n\n render() {\n const {\n checked,\n disabled,\n labelText,\n hideLabel,\n id,\n name,\n size,\n labelA,\n labelB,\n value,\n _handleChange: handleChange,\n } = this;\n const inputClasses = classMap({\n [`${prefix}--toggle__appearance`]: true,\n [`${prefix}--toggle__appearance--${size}`]: size,\n });\n const toggleClasses = classMap({\n [`${prefix}--toggle__switch`]: true,\n [`${prefix}--toggle__switch--checked`]: checked,\n });\n\n const labelTextClasses = classMap({\n [`${prefix}--toggle__label-text`]: labelText,\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n\n let stateText = '';\n\n if (hideLabel) {\n stateText = labelText || '';\n } else {\n stateText = checked ? labelA : labelB;\n }\n\n const labelId = id ? `${id}_label` : undefined;\n\n const hasLabelText = (this.labelText ?? '') !== '';\n\n const ariaLabelledby = this.ariaLabelledby ?? (hasLabelText && labelId);\n\n return html`\n <button\n class=\"${prefix}--toggle__button\"\n role=\"switch\"\n type=\"button\"\n aria-checked=${checked}\n aria-labelledby=${ifDefined(ariaLabelledby)}\n .checked=\"${checked}\"\n name=\"${ifDefined(name)}\"\n value=\"${ifDefined(value)}\"\n ?disabled=${disabled}\n id=\"${id}\"></button>\n <label\n for=\"${id}\"\n class=\"${prefix}--toggle__label\"\n @click=${handleChange}>\n ${labelText\n ? html`<span class=\"${labelTextClasses}\">${labelText}</span>`\n : null}\n <div class=\"${inputClasses}\">\n <div class=\"${toggleClasses}\">${this._renderCheckmark()}</div>\n <span class=\"${prefix}--toggle__text\" aria-hidden=\"true\"\n >${stateText}</span\n >\n </div>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this changebox changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-toggle-changed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSToggle;\n"],"names":["customElement"],"mappings":"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"}
1
+ {"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss?lit';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n @query('button')\n protected _checkboxNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on the `<button>` in the shadow DOM.\n */\n protected _handleChange() {\n const { checked } = this._checkboxNode;\n if (this.disabled || this.readOnly) {\n return;\n }\n this.checked = !checked;\n const { eventChange } = this.constructor as typeof CDSToggle;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n checked: this.checked,\n },\n })\n );\n }\n\n protected _renderCheckmark() {\n if (this.size !== TOGGLE_SIZE.SMALL) {\n return undefined;\n }\n return html`\n <svg\n class=\"${prefix}--toggle__check\"\n width=\"6px\"\n height=\"5px\"\n viewBox=\"0 0 6 5\">\n <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n </svg>\n `;\n }\n\n /**\n * Specify another element's id to be used as the label for this toggle\n */\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby?: string;\n\n /**\n * The text for the checked state.\n */\n @property({ attribute: 'label-a' })\n labelA = 'On';\n\n /**\n * Hide label text.\n */\n @property({ reflect: true, type: Boolean })\n hideLabel = false;\n\n /**\n * Read only boolean.\n */\n @property({ reflect: true, attribute: 'read-only', type: Boolean })\n readOnly = false;\n\n /**\n * Toggle size.\n */\n @property({ reflect: true })\n size = TOGGLE_SIZE.REGULAR;\n\n /**\n * The text for the unchecked state.\n */\n @property({ attribute: 'label-b' })\n labelB = 'Off';\n\n /**\n * Private references of external <label> elements that are\n * `for=\"this-toggle-element-id\"`\n */\n private _externalLabels: HTMLLabelElement[] = [];\n\n /**\n * Handles `click` on external `<label>`\n */\n private _onExternalLabelClick = () => {\n this._checkboxNode?.focus();\n this._handleChange();\n };\n\n /**\n * Finds external toggle `<label>`s and attaches handlers.\n */\n private _attachExternalLabels() {\n const doc = this.ownerDocument || document;\n\n const found = this.id\n ? [...doc.querySelectorAll<HTMLLabelElement>(`label[for=\"${this.id}\"]`)]\n : [];\n\n this._externalLabels = Array.from(new Set(found));\n this._externalLabels.forEach((lbl) => {\n lbl.addEventListener('click', this._onExternalLabelClick);\n });\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n this._attachExternalLabels();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._externalLabels.forEach((lbl) =>\n lbl.removeEventListener('click', this._onExternalLabelClick)\n );\n }\n\n render() {\n const {\n checked,\n disabled,\n labelText,\n hideLabel,\n id,\n name,\n size,\n labelA,\n labelB,\n value,\n _handleChange: handleChange,\n } = this;\n const inputClasses = classMap({\n [`${prefix}--toggle__appearance`]: true,\n [`${prefix}--toggle__appearance--${size}`]: size,\n });\n const toggleClasses = classMap({\n [`${prefix}--toggle__switch`]: true,\n [`${prefix}--toggle__switch--checked`]: checked,\n });\n\n const labelTextClasses = classMap({\n [`${prefix}--toggle__label-text`]: labelText,\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n\n let stateText = '';\n\n if (hideLabel) {\n stateText = labelText || '';\n } else {\n stateText = checked ? labelA : labelB;\n }\n\n const labelId = id ? `${id}_label` : undefined;\n\n const hasLabelText = (this.labelText ?? '') !== '';\n\n const ariaLabelledby = this.ariaLabelledby ?? (hasLabelText && labelId);\n\n return html`\n <button\n class=\"${prefix}--toggle__button\"\n role=\"switch\"\n type=\"button\"\n aria-checked=${checked}\n aria-labelledby=${ifDefined(ariaLabelledby)}\n .checked=${checked}\n name=\"${ifDefined(name)}\"\n value=\"${ifDefined(value)}\"\n ?disabled=${disabled}\n id=\"${id}\"\n @click=${handleChange}></button>\n <label for=\"${id}\" class=\"${prefix}--toggle__label\">\n ${labelText\n ? html`<span class=\"${labelTextClasses}\">${labelText}</span>`\n : null}\n <div class=\"${inputClasses}\">\n <div class=\"${toggleClasses}\">${this._renderCheckmark()}</div>\n <span class=\"${prefix}--toggle__text\" aria-hidden=\"true\"\n >${stateText}</span\n >\n </div>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this changebox changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-toggle-changed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSToggle;\n"],"names":["customElement"],"mappings":"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"}
@@ -7,7 +7,7 @@
7
7
 
8
8
  import { css } from 'lit';
9
9
 
10
- var styles = css([".cds-custom--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds-custom--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds-custom--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}.cds-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm,:host(cds-custom-accordion-item-skeleton[size=sm]) button,:host(cds-custom-accordion-item[size=sm]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg,:host(cds-custom-accordion-item-skeleton[size=lg]) button,:host(cds-custom-accordion-item[size=lg]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds-custom--accordion,:host(cds-custom-accordion),:host(cds-custom-accordion-skeleton){--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min),var(--cds-layout-size-height-sm)),var(--cds-layout-size-height,var(--cds-layout-size-height-md)),min(var(--cds-layout-size-height-max),var(--cds-layout-size-height-lg)));--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min),var(--cds-layout-density-padding-inline,var(--cds-layout-density-padding-inline-normal)),var(--cds-layout-density-padding-inline-max));border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--accordion *,.cds-custom--accordion :after,.cds-custom--accordion :before,:host(cds-custom-accordion) *,:host(cds-custom-accordion) :after,:host(cds-custom-accordion) :before,:host(cds-custom-accordion-skeleton) *,:host(cds-custom-accordion-skeleton) :after,:host(cds-custom-accordion-skeleton) :before{box-sizing:inherit}.cds-custom--accordion,:host(cds-custom-accordion),:host(cds-custom-accordion-skeleton){inline-size:100%;list-style:none}.cds-custom--accordion__item,:host(cds-custom-accordion-item),:host(cds-custom-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle);display:list-item;overflow:visible;transition:border-color .11s cubic-bezier(.2,0,.38,.9)}.cds-custom--accordion__item:last-child{border-block-end:1px solid var(--cds-border-subtle)}.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover,.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover+.cds-custom--accordion__item,.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover+:host(cds-custom-accordion-item),.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover+:host(cds-custom-accordion-item-skeleton){border-block-start-color:var(--cds-layer-hover)}.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):last-child:hover{border-block-end-color:var(--cds-layer-hover)}.cds-custom--accordion__heading{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;display:inline-block;font-family:inherit;font-size:100%;padding:0;text-align:start;transition:background-color .11s cubic-bezier(.2,0,.38,.9);vertical-align:baseline}.cds-custom--accordion__heading *,.cds-custom--accordion__heading :after,.cds-custom--accordion__heading :before{box-sizing:inherit}.cds-custom--accordion__heading::-moz-focus-inner{border:0}.cds-custom--accordion__heading{align-items:center;color:var(--cds-text-primary,#161616);cursor:pointer;display:flex;flex-direction:row-reverse;inline-size:100%;justify-content:flex-start;margin:0;min-block-size:var(--cds-layout-size-height-local);padding-inline-end:var(--cds-layout-density-padding-inline-local);position:relative}.cds-custom--accordion__heading:hover{background-color:var(--cds-layer-hover);outline:none}.cds-custom--accordion__heading:focus{box-shadow:0 -1px 0 0 var(--cds-focus,#0f62fe),inset 0 1px 0 0 var(--cds-focus,#0f62fe),inset 2px 0 0 0 var(--cds-focus,#0f62fe),0 1px 0 0 var(--cds-focus,#0f62fe),inset 0 -1px 0 0 var(--cds-focus,#0f62fe),inset -2px 0 0 0 var(--cds-focus,#0f62fe);outline:none;position:relative;z-index:2}.cds-custom--accordion__heading[disabled]{background-color:transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds-custom--accordion__heading[disabled] .cds-custom--accordion__arrow{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds-custom--accordion__heading[disabled]:hover:before{background-color:transparent}.cds-custom--accordion__item--disabled,.cds-custom--accordion__item--disabled+.cds-custom--accordion__item,.cds-custom--accordion__item--disabled+:host(cds-custom-accordion-item),.cds-custom--accordion__item--disabled+:host(cds-custom-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle)}li.cds-custom--accordion__item--disabled:last-of-type{border-block-end:1px solid var(--cds-border-subtle)}.cds-custom--accordion__arrow{block-size:1rem;flex:0 0 1rem;outline:2px solid transparent;outline-offset:-2px;transition:all .11s cubic-bezier(.2,0,.38,.9);fill:var(--cds-icon-primary,#161616);inline-size:1rem;transform:rotate(-270deg)}.cds-custom--accordion__title{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-inline-start:1rem;text-align:start;z-index:1}.cds-custom--accordion__wrapper{display:none;max-block-size:0;opacity:0;overflow:hidden;padding:0;transition:all allow-discrete .11s cubic-bezier(0,0,.38,.9);writing-mode:horizontal-tb}.cds-custom--accordion__content,:host(cds-custom-accordion-item) .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content{padding-inline:var(--cds-layout-density-padding-inline-local)}@media (min-width:480px){.cds-custom--accordion__content,:host(cds-custom-accordion-item) .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content{padding-inline-end:3rem}}@media (min-width:640px){.cds-custom--accordion__content,:host(cds-custom-accordion-item) .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content{padding-inline-end:25%}}.cds-custom--accordion__content>p,:host(cds-custom-accordion-item) .cds-custom--accordion__content>p,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content>p{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.cds-custom--accordion--start .cds-custom--accordion__heading,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__heading,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__heading{flex-direction:row}.cds-custom--accordion--start .cds-custom--accordion__arrow,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__arrow,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__arrow{margin:2px 0 0 var(--cds-layout-density-padding-inline-local)}.cds-custom--accordion--start .cds-custom--accordion__title,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__title,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__title{margin-inline-end:1rem}.cds-custom--accordion--start .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__content,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__content{margin-inline-start:calc(var(--cds-layout-density-padding-inline-local) + 1rem)}.cds-custom--accordion__item--collapsing .cds-custom--accordion__content,.cds-custom--accordion__item--expanding .cds-custom--accordion__content,:host(cds-custom-accordion-item[collapsing]) .cds-custom--accordion__content,:host(cds-custom-accordion-item[expanding]) .cds-custom--accordion__content{display:block}.cds-custom--accordion__item--active,:host(cds-custom-accordion-item[open]:not([disabled])){overflow:visible}.cds-custom--accordion__item--active>.cds-custom--accordion__wrapper,:host(cds-custom-accordion-item[open]:not([disabled]))>.cds-custom--accordion__wrapper{display:block;max-block-size:-moz-fit-content;max-block-size:fit-content;opacity:1;overflow:visible;padding-block:.5rem;padding-block-end:1.5rem}.cds-custom--accordion__item--active>.cds-custom--accordion__heading>.cds-custom--accordion__arrow,:host(cds-custom-accordion-item[open]:not([disabled]))>.cds-custom--accordion__heading>.cds-custom--accordion__arrow{fill:var(--cds-icon-primary,#161616);transform:rotate(-90deg)}@starting-style{.cds-custom--accordion__item--active>.cds-custom--accordion__wrapper,:host(cds-custom-accordion-item[open]:not([disabled]))>.cds-custom--accordion__wrapper{max-block-size:0;opacity:0;padding:0}}.cds-custom--accordion--flush .cds-custom--accordion__item,.cds-custom--accordion--flush :host(cds-custom-accordion-item),.cds-custom--accordion--flush :host(cds-custom-accordion-item-skeleton){border-color:transparent;position:relative}.cds-custom--accordion--flush .cds-custom--accordion__item:hover,.cds-custom--accordion--flush .cds-custom--accordion__item:hover+.cds-custom--accordion__item,.cds-custom--accordion--flush .cds-custom--accordion__item:hover+:host(cds-custom-accordion-item),.cds-custom--accordion--flush .cds-custom--accordion__item:hover+:host(cds-custom-accordion-item-skeleton),.cds-custom--accordion--flush .cds-custom--accordion__item:last-child,.cds-custom--accordion--flush .cds-custom--accordion__item:last-child:hover{border-color:transparent}.cds-custom--accordion--flush .cds-custom--accordion__item:after,.cds-custom--accordion--flush .cds-custom--accordion__item:before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds-custom--accordion--flush .cds-custom--accordion__item:after,.cds-custom--accordion--flush .cds-custom--accordion__item:before{transition:none}}.cds-custom--accordion--flush .cds-custom--accordion__item:before{background:var(--cds-border-subtle);inset-block-start:-1px}.cds-custom--accordion--flush .cds-custom--accordion__item:last-child:after{background:var(--cds-border-subtle);inset-block-end:-1px}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover{position:relative;z-index:1}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:after,.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:after,.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:before{transition:none}}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:before{inset-block-start:-1px}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:after{inset-block-end:-1px}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:focus:after,.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:focus:before{background:none}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__button,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__heading{cursor:default}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow{cursor:default;fill:var(--cds-icon-primary,#161616);pointer-events:none}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow:active,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow:focus,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow:hover{border:none;cursor:default;outline:none}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__heading:hover,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__heading:hover:before{background-color:transparent}.cds-custom--accordion--end.cds-custom--skeleton .cds-custom--accordion__arrow{margin-inline-start:1rem}.cds-custom--skeleton .cds-custom--accordion__heading:focus .cds-custom--accordion__arrow{border:none;cursor:default;outline:none}.cds-custom--accordion__title.cds-custom--skeleton__text{margin-block-end:0}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__title{margin-inline-start:1rem}[dir=rtl] .cds-custom--accordion--start .cds-custom--accordion__heading,[dir=rtl] :host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__heading,[dir=rtl] :host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__heading{padding-inline:var(--cds-layout-density-padding-inline-local) 0}[dir=rtl] .cds-custom--accordion--start .cds-custom--accordion__title,[dir=rtl] :host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__title,[dir=rtl] :host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__title{margin-inline-end:0;padding-inline-start:0}:host(cds-custom-accordion),:host(cds-custom-accordion-skeleton){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}:host(cds-custom-accordion-item),:host(cds-custom-accordion-item-skeleton){display:block;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);outline:none}:host(cds-custom-accordion-item) .cds-custom--accordion__content ::slotted(p),:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content ::slotted(p){font-size:var(--cds-body-01-font-size)!important;font-weight:var(--cds-body-01-font-weight);letter-spacing:var(--cds-body-01-letter-spacing);line-height:var(--cds-body-01-line-height);margin:0}:host([data-last-item]){border-block-end:1px solid var(--cds-border-subtle)}:host(cds-custom-accordion-item-skeleton[size=sm]) button,:host(cds-custom-accordion-item[size=sm]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-custom-accordion-item-skeleton[size=lg]) button,:host(cds-custom-accordion-item[size=lg]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-custom-accordion-item-skeleton[isFlush]),:host(cds-custom-accordion-item[isFlush]){border-color:transparent;position:relative}:host(cds-custom-accordion-item-skeleton[isFlush]):after,:host(cds-custom-accordion-item-skeleton[isFlush]):before,:host(cds-custom-accordion-item[isFlush]):after,:host(cds-custom-accordion-item[isFlush]):before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(0,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(cds-custom-accordion-item-skeleton[isFlush]):after,:host(cds-custom-accordion-item-skeleton[isFlush]):before,:host(cds-custom-accordion-item[isFlush]):after,:host(cds-custom-accordion-item[isFlush]):before{transition:none}}:host(cds-custom-accordion-item-skeleton[isFlush]):before,:host(cds-custom-accordion-item[isFlush]):before{background:var(--cds-border-subtle);inset-block-start:-1px}:host(cds-custom-accordion-item-skeleton[isFlush]):after,:host(cds-custom-accordion-item[isFlush]):after{background:var(--cds-border-subtle);inset-block-end:-1px}:host([isFlush]) .cds-custom--accordion__heading:hover{position:relative;z-index:1}:host([isFlush]) .cds-custom--accordion__heading:hover:after,:host([isFlush]) .cds-custom--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host([isFlush]) .cds-custom--accordion__heading:hover:after,:host([isFlush]) .cds-custom--accordion__heading:hover:before{transition:none}}:host([isFlush]) .cds-custom--accordion__heading:hover:before{inset-block-start:-1px}:host([isFlush]) .cds-custom--accordion__heading:hover:after{inset-block-end:-1px}:host([isFlush]) .cds-custom--accordion__heading:hover:focus:after,:host([isFlush]) .cds-custom--accordion__heading:hover:focus:before{background:none}:host(cds-custom-accordion-item[open]:not([disabled])) .cds-custom--accordion__content{padding-inline-end:1rem}:host(cds-custom-accordion-item[open]:not([disabled])) .cds-custom-ce--accordion__content--sm{padding-inline-end:3rem}:host(cds-custom-accordion-item[open]:not([disabled])) .cds-custom-ce--accordion__content--md{padding-inline-end:25%}:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__heading,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__heading{cursor:default;pointer-events:none}:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__heading:hover:before,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__heading:hover:before{background:transparent}:host(cds-custom-accordion-item-skeleton[alignment=end i]) .cds-custom--accordion__arrow,:host(cds-custom-accordion-item[alignment=end i]) .cds-custom--accordion__arrow,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__item.cds-custom--accordion--END .cds-custom--accordion__arrow{margin-inline-start:1rem}:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__title,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__heading .cds-custom--accordion__title{padding-block-start:.5rem}.controlled-accordion-btnset{padding-block-end:.5rem}.controlled-accordion-btnset .controlled-accordion-btn:not(:first-child)::part(button){box-shadow:-.0625rem 0 0 0 var(--cds-button-separator,#e0e0e0)}.controlled-accordion-btn{max-inline-size:13.25rem}"]);
10
+ var styles = css([".cds-custom--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds-custom--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds-custom--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}.cds-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm,:host(cds-custom-accordion-item-skeleton[size=sm]) button,:host(cds-custom-accordion-item[size=sm]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg,:host(cds-custom-accordion-item-skeleton[size=lg]) button,:host(cds-custom-accordion-item[size=lg]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds-custom--accordion,:host(cds-custom-accordion),:host(cds-custom-accordion-skeleton){--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min),var(--cds-layout-size-height-sm)),var(--cds-layout-size-height,var(--cds-layout-size-height-md)),min(var(--cds-layout-size-height-max),var(--cds-layout-size-height-lg)));--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min),var(--cds-layout-density-padding-inline,var(--cds-layout-density-padding-inline-normal)),var(--cds-layout-density-padding-inline-max));border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--accordion *,.cds-custom--accordion :after,.cds-custom--accordion :before,:host(cds-custom-accordion) *,:host(cds-custom-accordion) :after,:host(cds-custom-accordion) :before,:host(cds-custom-accordion-skeleton) *,:host(cds-custom-accordion-skeleton) :after,:host(cds-custom-accordion-skeleton) :before{box-sizing:inherit}.cds-custom--accordion,:host(cds-custom-accordion),:host(cds-custom-accordion-skeleton){inline-size:100%;list-style:none}.cds-custom--accordion__item,:host(cds-custom-accordion-item),:host(cds-custom-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle);display:list-item;overflow:visible;transition:border-color .11s cubic-bezier(.2,0,.38,.9)}.cds-custom--accordion__item:last-child{border-block-end:1px solid var(--cds-border-subtle)}.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover,.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover+.cds-custom--accordion__item,.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover+:host(cds-custom-accordion-item),.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):hover+:host(cds-custom-accordion-item-skeleton){border-block-start-color:var(--cds-layer-hover)}.cds-custom--accordion__item:not(.cds-custom--accordion__item--active):last-child:hover{border-block-end-color:var(--cds-layer-hover)}.cds-custom--accordion__heading{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;display:inline-block;font-family:inherit;font-size:100%;padding:0;text-align:start;transition:background-color .11s cubic-bezier(.2,0,.38,.9);vertical-align:baseline}.cds-custom--accordion__heading *,.cds-custom--accordion__heading :after,.cds-custom--accordion__heading :before{box-sizing:inherit}.cds-custom--accordion__heading::-moz-focus-inner{border:0}.cds-custom--accordion__heading{align-items:center;color:var(--cds-text-primary,#161616);cursor:pointer;display:flex;flex-direction:row-reverse;inline-size:100%;justify-content:flex-start;margin:0;min-block-size:var(--cds-layout-size-height-local);padding-inline-end:var(--cds-layout-density-padding-inline-local);position:relative}.cds-custom--accordion__heading:hover{background-color:var(--cds-layer-hover);outline:none}.cds-custom--accordion__heading:focus{box-shadow:0 -1px 0 0 var(--cds-focus,#0f62fe),inset 0 1px 0 0 var(--cds-focus,#0f62fe),inset 2px 0 0 0 var(--cds-focus,#0f62fe),0 1px 0 0 var(--cds-focus,#0f62fe),inset 0 -1px 0 0 var(--cds-focus,#0f62fe),inset -2px 0 0 0 var(--cds-focus,#0f62fe);outline:none;position:relative;z-index:2}.cds-custom--accordion__heading[disabled]{background-color:transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds-custom--accordion__heading[disabled] .cds-custom--accordion__arrow{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds-custom--accordion__heading[disabled]:hover:before{background-color:transparent}.cds-custom--accordion__item--disabled,.cds-custom--accordion__item--disabled+.cds-custom--accordion__item,.cds-custom--accordion__item--disabled+:host(cds-custom-accordion-item),.cds-custom--accordion__item--disabled+:host(cds-custom-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle)}li.cds-custom--accordion__item--disabled:last-of-type{border-block-end:1px solid var(--cds-border-subtle)}.cds-custom--accordion__arrow{block-size:1rem;flex:0 0 1rem;outline:2px solid transparent;outline-offset:-2px;transition:all .11s cubic-bezier(.2,0,.38,.9);fill:var(--cds-icon-primary,#161616);inline-size:1rem;transform:rotate(-270deg)}.cds-custom--accordion__title{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-inline-start:1rem;text-align:start;z-index:1}.cds-custom--accordion__wrapper{display:none;max-block-size:0;opacity:0;overflow:hidden;padding:0;transition:all allow-discrete .11s cubic-bezier(0,0,.38,.9);writing-mode:horizontal-tb}.cds-custom--accordion__content,:host(cds-custom-accordion-item) .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content{padding-inline:var(--cds-layout-density-padding-inline-local)}@media (min-width:480px){.cds-custom--accordion__content,:host(cds-custom-accordion-item) .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content{padding-inline-end:3rem}}@media (min-width:640px){.cds-custom--accordion__content,:host(cds-custom-accordion-item) .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content{padding-inline-end:25%}}.cds-custom--accordion__content>p,:host(cds-custom-accordion-item) .cds-custom--accordion__content>p,:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content>p{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.cds-custom--accordion--start .cds-custom--accordion__heading,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__heading,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__heading{flex-direction:row}.cds-custom--accordion--start .cds-custom--accordion__arrow,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__arrow,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__arrow{margin:2px 0 0 var(--cds-layout-density-padding-inline-local)}.cds-custom--accordion--start .cds-custom--accordion__title,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__title,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__title{margin-inline-end:1rem}.cds-custom--accordion--start .cds-custom--accordion__content,:host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__content,:host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__content{margin-inline-start:calc(var(--cds-layout-density-padding-inline-local) + 1rem)}.cds-custom--accordion__item--collapsing .cds-custom--accordion__content,.cds-custom--accordion__item--expanding .cds-custom--accordion__content,:host(cds-custom-accordion-item[collapsing]) .cds-custom--accordion__content,:host(cds-custom-accordion-item[expanding]) .cds-custom--accordion__content{display:block}.cds-custom--accordion__item--active,:host(cds-custom-accordion-item[open]:not([disabled])){overflow:visible}.cds-custom--accordion__item--active>.cds-custom--accordion__wrapper,:host(cds-custom-accordion-item[open]:not([disabled]))>.cds-custom--accordion__wrapper{display:block;max-block-size:-moz-fit-content;max-block-size:fit-content;opacity:1;overflow:visible;padding-block:.5rem;padding-block-end:1.5rem}.cds-custom--accordion__item--active>.cds-custom--accordion__heading>.cds-custom--accordion__arrow,:host(cds-custom-accordion-item[open]:not([disabled]))>.cds-custom--accordion__heading>.cds-custom--accordion__arrow{fill:var(--cds-icon-primary,#161616);transform:rotate(-90deg)}@starting-style{.cds-custom--accordion__item--active>.cds-custom--accordion__wrapper,:host(cds-custom-accordion-item[open]:not([disabled]))>.cds-custom--accordion__wrapper{max-block-size:0;opacity:0;padding:0}}.cds-custom--accordion--flush .cds-custom--accordion__item,.cds-custom--accordion--flush :host(cds-custom-accordion-item),.cds-custom--accordion--flush :host(cds-custom-accordion-item-skeleton){border-color:transparent;position:relative}.cds-custom--accordion--flush .cds-custom--accordion__item:hover,.cds-custom--accordion--flush .cds-custom--accordion__item:hover+.cds-custom--accordion__item,.cds-custom--accordion--flush .cds-custom--accordion__item:hover+:host(cds-custom-accordion-item),.cds-custom--accordion--flush .cds-custom--accordion__item:hover+:host(cds-custom-accordion-item-skeleton),.cds-custom--accordion--flush .cds-custom--accordion__item:last-child,.cds-custom--accordion--flush .cds-custom--accordion__item:last-child:hover{border-color:transparent}.cds-custom--accordion--flush .cds-custom--accordion__item:after,.cds-custom--accordion--flush .cds-custom--accordion__item:before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds-custom--accordion--flush .cds-custom--accordion__item:after,.cds-custom--accordion--flush .cds-custom--accordion__item:before{transition:none}}.cds-custom--accordion--flush .cds-custom--accordion__item:before{background:var(--cds-border-subtle);inset-block-start:-1px}.cds-custom--accordion--flush .cds-custom--accordion__item:last-child:after{background:var(--cds-border-subtle);inset-block-end:-1px}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover{position:relative;z-index:1}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:after,.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:after,.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:before{transition:none}}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:before{inset-block-start:-1px}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:after{inset-block-end:-1px}.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:focus:after,.cds-custom--accordion--flush .cds-custom--accordion__heading:hover:focus:before{background:none}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__button,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__heading{cursor:default}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow{cursor:default;fill:var(--cds-icon-primary,#161616);pointer-events:none}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow:active,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow:focus,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__arrow:hover{border:none;cursor:default;outline:none}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__heading:hover,.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__heading:hover:before{background-color:transparent}.cds-custom--accordion--end.cds-custom--skeleton .cds-custom--accordion__arrow{margin-inline-start:1rem}.cds-custom--skeleton .cds-custom--accordion__heading:focus .cds-custom--accordion__arrow{border:none;cursor:default;outline:none}.cds-custom--accordion__title.cds-custom--skeleton__text{margin-block-end:0}.cds-custom--accordion.cds-custom--skeleton .cds-custom--accordion__title{margin-inline-start:1rem}[dir=rtl] .cds-custom--accordion--start .cds-custom--accordion__heading,[dir=rtl] :host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__heading,[dir=rtl] :host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__heading{padding-inline:var(--cds-layout-density-padding-inline-local) 0}[dir=rtl] .cds-custom--accordion--start .cds-custom--accordion__title,[dir=rtl] :host(cds-custom-accordion-item-skeleton[alignment=start]) .cds-custom--accordion__title,[dir=rtl] :host(cds-custom-accordion-item[alignment=start]) .cds-custom--accordion__title{margin-inline-end:0;padding-inline-start:0}:host(cds-custom-accordion),:host(cds-custom-accordion-skeleton){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}:host(cds-custom-accordion-item),:host(cds-custom-accordion-item-skeleton){display:block;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);outline:none}:host(cds-custom-accordion-item) .cds-custom--accordion__content ::slotted(p),:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__content ::slotted(p){font-size:var(--cds-body-01-font-size)!important;font-weight:var(--cds-body-01-font-weight);letter-spacing:var(--cds-body-01-letter-spacing);line-height:var(--cds-body-01-line-height);margin:0}:host([data-last-item]){border-block-end:1px solid var(--cds-border-subtle)}:host(cds-custom-accordion-item-skeleton[size=sm]) button,:host(cds-custom-accordion-item[size=sm]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-custom-accordion-item-skeleton[size=lg]) button,:host(cds-custom-accordion-item[size=lg]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-custom-accordion-item-skeleton[isFlush]),:host(cds-custom-accordion-item[isFlush]){border-color:transparent;position:relative}:host(cds-custom-accordion-item-skeleton[isFlush]):after,:host(cds-custom-accordion-item-skeleton[isFlush]):before,:host(cds-custom-accordion-item[isFlush]):after,:host(cds-custom-accordion-item[isFlush]):before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(0,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(cds-custom-accordion-item-skeleton[isFlush]):after,:host(cds-custom-accordion-item-skeleton[isFlush]):before,:host(cds-custom-accordion-item[isFlush]):after,:host(cds-custom-accordion-item[isFlush]):before{transition:none}}:host(cds-custom-accordion-item-skeleton[isFlush]):before,:host(cds-custom-accordion-item[isFlush]):before{background:var(--cds-border-subtle);inset-block-start:-1px}:host(cds-custom-accordion-item-skeleton[isFlush]):after,:host(cds-custom-accordion-item[isFlush]):after{background:var(--cds-border-subtle);inset-block-end:-1px}:host([isFlush]) .cds-custom--accordion__heading:hover{position:relative;z-index:1}:host([isFlush]) .cds-custom--accordion__heading:hover:after,:host([isFlush]) .cds-custom--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host([isFlush]) .cds-custom--accordion__heading:hover:after,:host([isFlush]) .cds-custom--accordion__heading:hover:before{transition:none}}:host([isFlush]) .cds-custom--accordion__heading:hover:before{inset-block-start:-1px}:host([isFlush]) .cds-custom--accordion__heading:hover:after{inset-block-end:-1px}:host([isFlush]) .cds-custom--accordion__heading:hover:focus:after,:host([isFlush]) .cds-custom--accordion__heading:hover:focus:before{background:none}:host(cds-custom-accordion-item[open]:not([disabled])) .cds-custom--accordion__content{padding-inline-end:1rem}:host(cds-custom-accordion-item[open]:not([disabled])) .cds-custom-ce--accordion__content--sm{padding-inline-end:3rem}:host(cds-custom-accordion-item[open]:not([disabled])) .cds-custom-ce--accordion__content--md{padding-inline-end:25%}:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__heading,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__heading{cursor:default;pointer-events:none}:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__heading:hover:before,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__heading:hover:before{background:transparent}:host(cds-custom-accordion-item-skeleton[alignment=end i]) .cds-custom--accordion__arrow,:host(cds-custom-accordion-item[alignment=end i]) .cds-custom--accordion__arrow,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__item.cds-custom--accordion--END .cds-custom--accordion__arrow{margin-inline-start:1rem}:host(cds-custom-accordion-item-skeleton) .cds-custom--accordion__title,:host(cds-custom-accordion-skeleton) .cds-custom--accordion__heading .cds-custom--accordion__title{padding-block-start:.5rem}.controlled-accordion-btn{max-inline-size:13.25rem}"]);
11
11
 
12
12
  export { styles as default };
13
13
  //# sourceMappingURL=accordion.scss.js.map
@@ -1,14 +1,28 @@
1
1
  /**
2
- * Copyright IBM Corp. 2019, 2024
2
+ * Copyright IBM Corp. 2019, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { LitElement } from 'lit';
8
+ import { BREADCRUMB_SIZE } from './defs';
8
9
  /**
9
10
  * Skeleton of breadcrumb.
10
11
  */
11
12
  declare class CDSBreadcrumbSkeleton extends LitElement {
13
+ /**
14
+ * Specify the number of items
15
+ */
16
+ items: number;
17
+ /**
18
+ * Optional prop to omit the trailing slash for the breadcrumbs
19
+ */
20
+ noTrailingSlash: boolean;
21
+ /**
22
+ * Specify the size of the Breadcrumb. Currently
23
+ * supports the following: `sm` & `md` (default: 'md')
24
+ */
25
+ size: BREADCRUMB_SIZE;
12
26
  render(): import("lit-html").TemplateResult<1>;
13
27
  static styles: any;
14
28
  }
@@ -6,13 +6,16 @@
6
6
  */
7
7
 
8
8
  import { __decorate } from 'tslib';
9
+ import { classMap } from 'lit/directives/class-map.js';
9
10
  import { LitElement, html } from 'lit';
11
+ import { property } from 'lit/decorators.js';
10
12
  import { prefix } from '../../globals/settings.js';
13
+ import { BREADCRUMB_SIZE } from './defs.js';
11
14
  import styles from './breadcrumb.scss.js';
12
15
  import { carbonElement } from '../../globals/decorators/carbon-element.js';
13
16
 
14
17
  /**
15
- * Copyright IBM Corp. 2019, 2024
18
+ * Copyright IBM Corp. 2019, 2025
16
19
  *
17
20
  * This source code is licensed under the Apache-2.0 license found in the
18
21
  * LICENSE file in the root directory of this source tree.
@@ -28,15 +31,46 @@ const renderItem = () => {
28
31
  * Skeleton of breadcrumb.
29
32
  */
30
33
  let CDSBreadcrumbSkeleton = class CDSBreadcrumbSkeleton extends LitElement {
34
+ constructor() {
35
+ super(...arguments);
36
+ /**
37
+ * Specify the number of items
38
+ */
39
+ this.items = 3;
40
+ /**
41
+ * Optional prop to omit the trailing slash for the breadcrumbs
42
+ */
43
+ this.noTrailingSlash = false;
44
+ /**
45
+ * Specify the size of the Breadcrumb. Currently
46
+ * supports the following: `sm` & `md` (default: 'md')
47
+ */
48
+ this.size = BREADCRUMB_SIZE.MEDIUM;
49
+ }
31
50
  render() {
51
+ const classes = classMap({
52
+ [`${prefix}--breadcrumb`]: true,
53
+ [`${prefix}--skeleton`]: true,
54
+ [`${prefix}--breadcrumb--no-trailing-slash`]: this.noTrailingSlash,
55
+ [`${prefix}--breadcrumb--sm`]: this.size === BREADCRUMB_SIZE.SMALL,
56
+ });
32
57
  return html `
33
- <div class="${prefix}--breadcrumb ${prefix}--skeleton">
34
- ${renderItem()} ${renderItem()} ${renderItem()}
58
+ <div class="${classes}">
59
+ ${[...Array(this.items)].map(() => renderItem())}
35
60
  </div>
36
61
  `;
37
62
  }
38
63
  };
39
64
  CDSBreadcrumbSkeleton.styles = styles;
65
+ __decorate([
66
+ property({ type: Number, reflect: true })
67
+ ], CDSBreadcrumbSkeleton.prototype, "items", void 0);
68
+ __decorate([
69
+ property({ type: Boolean, reflect: true, attribute: 'no-trailing-slash' })
70
+ ], CDSBreadcrumbSkeleton.prototype, "noTrailingSlash", void 0);
71
+ __decorate([
72
+ property({ type: BREADCRUMB_SIZE, reflect: true })
73
+ ], CDSBreadcrumbSkeleton.prototype, "size", void 0);
40
74
  CDSBreadcrumbSkeleton = __decorate([
41
75
  carbonElement(`${prefix}-breadcrumb-skeleton`)
42
76
  ], CDSBreadcrumbSkeleton);
@@ -1 +1 @@
1
- {"version":3,"file":"breadcrumb-skeleton.js","sources":["../../../src/components/breadcrumb/breadcrumb-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\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 { LitElement, html } from 'lit';\nimport { prefix } from '../../globals/settings';\nimport styles from './breadcrumb.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst renderItem = () => {\n return html`\n <div class=\"${prefix}--breadcrumb-item\">\n <span class=\"${prefix}--link\">&nbsp;</span>\n </div>\n `;\n};\n\n/**\n * Skeleton of breadcrumb.\n */\n@customElement(`${prefix}-breadcrumb-skeleton`)\nclass CDSBreadcrumbSkeleton extends LitElement {\n render() {\n return html`\n <div class=\"${prefix}--breadcrumb ${prefix}--skeleton\">\n ${renderItem()} ${renderItem()} ${renderItem()}\n </div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSBreadcrumbSkeleton;\n"],"names":["customElement"],"mappings":";;;;;;;;;;;;;AAAA;;;;;AAKG;AAOH,MAAM,UAAU,GAAG,MAAK;AACtB,IAAA,OAAO,IAAI,CAAA;kBACK,MAAM,CAAA;qBACH,MAAM,CAAA;;GAExB;AACH,CAAC;AAED;;AAEG;AAEH,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU,CAAA;IAC5C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA;AACK,kBAAA,EAAA,MAAM,gBAAgB,MAAM,CAAA;AACtC,QAAA,EAAA,UAAU,EAAE,CAAI,CAAA,EAAA,UAAU,EAAE,CAAA,CAAA,EAAI,UAAU,EAAE;;KAEjD;;;AAGI,qBAAM,CAAA,MAAA,GAAG,MAAH;AATT,qBAAqB,GAAA,UAAA,CAAA;AAD1B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB;AACxC,CAAA,EAAA,qBAAqB,CAU1B;AAED,8BAAe,qBAAqB;;;;"}
1
+ {"version":3,"file":"breadcrumb-skeleton.js","sources":["../../../src/components/breadcrumb/breadcrumb-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { BREADCRUMB_SIZE } from './defs';\nimport styles from './breadcrumb.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst renderItem = () => {\n return html`\n <div class=\"${prefix}--breadcrumb-item\">\n <span class=\"${prefix}--link\">&nbsp;</span>\n </div>\n `;\n};\n\n/**\n * Skeleton of breadcrumb.\n */\n@customElement(`${prefix}-breadcrumb-skeleton`)\nclass CDSBreadcrumbSkeleton extends LitElement {\n /**\n * Specify the number of items\n */\n @property({ type: Number, reflect: true })\n items = 3;\n\n /**\n * Optional prop to omit the trailing slash for the breadcrumbs\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-trailing-slash' })\n noTrailingSlash = false;\n\n /**\n * Specify the size of the Breadcrumb. Currently\n * supports the following: `sm` & `md` (default: 'md')\n */\n @property({ type: BREADCRUMB_SIZE, reflect: true })\n size = BREADCRUMB_SIZE.MEDIUM;\n\n render() {\n const classes = classMap({\n [`${prefix}--breadcrumb`]: true,\n [`${prefix}--skeleton`]: true,\n [`${prefix}--breadcrumb--no-trailing-slash`]: this.noTrailingSlash,\n [`${prefix}--breadcrumb--sm`]: this.size === BREADCRUMB_SIZE.SMALL,\n });\n return html`\n <div class=\"${classes}\">\n ${[...Array(this.items)].map(() => renderItem())}\n </div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSBreadcrumbSkeleton;\n"],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;AAKG;AAUH,MAAM,UAAU,GAAG,MAAK;AACtB,IAAA,OAAO,IAAI,CAAA;kBACK,MAAM,CAAA;qBACH,MAAM,CAAA;;GAExB;AACH,CAAC;AAED;;AAEG;AAEH,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU,CAAA;AAA9C,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,CAAC;AAET;;AAEG;QAEH,IAAe,CAAA,eAAA,GAAG,KAAK;AAEvB;;;AAGG;AAEH,QAAA,IAAA,CAAA,IAAI,GAAG,eAAe,CAAC,MAAM;;IAE7B,MAAM,GAAA;QACJ,MAAM,OAAO,GAAG,QAAQ,CAAC;AACvB,YAAA,CAAC,CAAG,EAAA,MAAM,CAAc,YAAA,CAAA,GAAG,IAAI;AAC/B,YAAA,CAAC,CAAG,EAAA,MAAM,CAAY,UAAA,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,GAAG,MAAM,CAAA,+BAAA,CAAiC,GAAG,IAAI,CAAC,eAAe;YAClE,CAAC,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB,GAAG,IAAI,CAAC,IAAI,KAAK,eAAe,CAAC,KAAK;AACnE,SAAA,CAAC;AACF,QAAA,OAAO,IAAI,CAAA;oBACK,OAAO,CAAA;AACjB,QAAA,EAAA,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,UAAU,EAAE,CAAC;;KAEnD;;;AAGI,qBAAM,CAAA,MAAA,GAAG,MAAH;AA7Bb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMV,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,EAAE;AAClD,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,MAAA,CAAA;AAOxB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE;AACpB,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAlB1B,qBAAqB,GAAA,UAAA,CAAA;AAD1B,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB;AACxC,CAAA,EAAA,qBAAqB,CAmC1B;AAED,8BAAe,qBAAqB;;;;"}
@@ -21,6 +21,14 @@ declare class CDSButtonSet extends CDSButtonSetBase {
21
21
  * @private
22
22
  */
23
23
  protected _handleSlotChange(event: Event): void;
24
+ /**
25
+ * When a button within a button-set is focused, hide the margin on both sides
26
+ * of the focused button, by applying the appropriate styles to its sibling
27
+ *
28
+ * @private
29
+ */
30
+ private _hideSiblingMargin;
31
+ connectedCallback(): void;
24
32
  render(): import("lit-html").TemplateResult<1>;
25
33
  /**
26
34
  * A selector that will return the child items.
@@ -33,6 +33,26 @@ let CDSButtonSet = class CDSButtonSet extends CDSButtonSetBase {
33
33
  * `true` if the buttons should be stacked. Only applies to the button-set variant.
34
34
  */
35
35
  this.stacked = false;
36
+ /**
37
+ * When a button within a button-set is focused, hide the margin on both sides
38
+ * of the focused button, by applying the appropriate styles to its sibling
39
+ *
40
+ * @private
41
+ */
42
+ this._hideSiblingMargin = () => {
43
+ var _a;
44
+ const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
45
+ if (!slot)
46
+ return;
47
+ const items = slot
48
+ .assignedElements()
49
+ .filter((el) => el.tagName.toLowerCase() === `${prefix}-button`);
50
+ const focusedIndex = items.findIndex((el) => el.matches(':focus-within'));
51
+ items.forEach((el, idx) => {
52
+ const shouldHide = focusedIndex >= 0 && (idx === focusedIndex || idx === focusedIndex + 1);
53
+ el.toggleAttribute('hide-margin', shouldHide);
54
+ });
55
+ };
36
56
  }
37
57
  /**
38
58
  * Handler for @slotchange, set the first cds-custom-button to kind secondary and primary for the remaining ones
@@ -55,10 +75,17 @@ let CDSButtonSet = class CDSButtonSet extends CDSButtonSetBase {
55
75
  });
56
76
  this.dispatchEvent(update);
57
77
  }
78
+ connectedCallback() {
79
+ var _a;
80
+ (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
81
+ this.addEventListener('focusin', this._hideSiblingMargin);
82
+ this.addEventListener('focusout', this._hideSiblingMargin);
83
+ }
58
84
  render() {
59
85
  const { stacked } = this;
60
86
  const defaultClasses = {
61
87
  [`${prefix}--btn-set--stacked`]: stacked,
88
+ [`${prefix}--btn-set`]: true,
62
89
  };
63
90
  const classes = classMap(defaultClasses);
64
91
  return html `<slot class="${classes} @slotchange="${this._handleSlotChange}"></slot>`;
@@ -1 +1 @@
1
- {"version":3,"file":"button-set.js","sources":["../../../src/components/button/button-set.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { BUTTON_KIND } from './defs';\nimport styles from './button.scss?lit';\nimport { prefix } from '../../globals/settings';\nimport CDSButtonSetBase from './button-set-base';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Button set.\n *\n * @element cds-custom-button-set\n */\n@customElement(`${prefix}-button-set`)\nclass CDSButtonSet extends CDSButtonSetBase {\n /**\n * `true` if the buttons should be stacked. Only applies to the button-set variant.\n */\n @property({ type: Boolean, reflect: true })\n stacked = false;\n\n /**\n * Handler for @slotchange, set the first cds-custom-button to kind secondary and primary for the remaining ones\n *\n * @private\n */\n protected _handleSlotChange(event: Event) {\n const childItems = (event.target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSButtonSet).selectorItem\n )\n : false\n );\n\n childItems.forEach((elem, index) => {\n (elem as HTMLElement).setAttribute(\n 'kind',\n index === 0 ? BUTTON_KIND.SECONDARY : BUTTON_KIND.PRIMARY\n );\n });\n\n const update = new CustomEvent(`${prefix}-btn-set-update`, {\n bubbles: true,\n cancelable: true,\n composed: true,\n });\n\n this.dispatchEvent(update);\n }\n\n render() {\n const { stacked } = this;\n const defaultClasses = {\n [`${prefix}--btn-set--stacked`]: stacked,\n };\n const classes = classMap(defaultClasses);\n\n return html`<slot class=\"${classes} @slotchange=\"${this._handleSlotChange}\"></slot>`;\n }\n /**\n * A selector that will return the child items.\n */\n static get selectorItem() {\n return `${prefix}-button`;\n }\n\n static styles = styles;\n}\n\nexport default CDSButtonSet;\n"],"names":["styles","customElement"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;AAWH;;;;AAIG;AAEH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAgB,CAAA;AAA3C,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAO,CAAA,OAAA,GAAG,KAAK;;AAEf;;;;AAIG;AACO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACtC,QAAA,MAAM,UAAU,GAAI,KAAK,CAAC;AACvB,aAAA,aAAa;aACb,MAAM,CAAC,CAAC,IAAI,KACV,IAAoB,CAAC,OAAO,KAAK;cAC7B,IAAoB,CAAC,OAAO,CAC1B,IAAI,CAAC,WAAmC,CAAC,YAAY;cAExD,KAAK,CACV;QAEH,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YAChC,IAAoB,CAAC,YAAY,CAChC,MAAM,EACN,KAAK,KAAK,CAAC,GAAG,WAAW,CAAC,SAAS,GAAG,WAAW,CAAC,OAAO,CAC1D;AACH,SAAC,CAAC;QAEF,MAAM,MAAM,GAAG,IAAI,WAAW,CAAC,CAAG,EAAA,MAAM,iBAAiB,EAAE;AACzD,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI;AACxB,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,CAAC,CAAG,EAAA,MAAM,CAAoB,kBAAA,CAAA,GAAG,OAAO;SACzC;AACD,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC;QAExC,OAAO,IAAI,CAAA,CAAgB,aAAA,EAAA,OAAO,iBAAiB,IAAI,CAAC,iBAAiB,CAAA,SAAA,CAAW;;AAEtF;;AAEG;AACH,IAAA,WAAW,YAAY,GAAA;QACrB,OAAO,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS;;;AAGpB,YAAM,CAAA,MAAA,GAAGA,YAAH;AAlDb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAC1B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AALZ,YAAY,GAAA,UAAA,CAAA;AADjB,IAAAC,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,WAAA,CAAa;AAC/B,CAAA,EAAA,YAAY,CAwDjB;AAED,qBAAe,YAAY;;;;"}
1
+ {"version":3,"file":"button-set.js","sources":["../../../src/components/button/button-set.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { BUTTON_KIND } from './defs';\nimport styles from './button.scss?lit';\nimport { prefix } from '../../globals/settings';\nimport CDSButtonSetBase from './button-set-base';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Button set.\n *\n * @element cds-custom-button-set\n */\n@customElement(`${prefix}-button-set`)\nclass CDSButtonSet extends CDSButtonSetBase {\n /**\n * `true` if the buttons should be stacked. Only applies to the button-set variant.\n */\n @property({ type: Boolean, reflect: true })\n stacked = false;\n\n /**\n * Handler for @slotchange, set the first cds-custom-button to kind secondary and primary for the remaining ones\n *\n * @private\n */\n protected _handleSlotChange(event: Event) {\n const childItems = (event.target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSButtonSet).selectorItem\n )\n : false\n );\n\n childItems.forEach((elem, index) => {\n (elem as HTMLElement).setAttribute(\n 'kind',\n index === 0 ? BUTTON_KIND.SECONDARY : BUTTON_KIND.PRIMARY\n );\n });\n\n const update = new CustomEvent(`${prefix}-btn-set-update`, {\n bubbles: true,\n cancelable: true,\n composed: true,\n });\n\n this.dispatchEvent(update);\n }\n\n /**\n * When a button within a button-set is focused, hide the margin on both sides\n * of the focused button, by applying the appropriate styles to its sibling\n *\n * @private\n */\n private _hideSiblingMargin = () => {\n const slot = this.shadowRoot?.querySelector('slot');\n if (!slot) return;\n const items = slot\n .assignedElements()\n .filter(\n (el) => el.tagName.toLowerCase() === `${prefix}-button`\n ) as HTMLElement[];\n\n const focusedIndex = items.findIndex((el) => el.matches(':focus-within'));\n\n items.forEach((el, idx) => {\n const shouldHide =\n focusedIndex >= 0 && (idx === focusedIndex || idx === focusedIndex + 1);\n el.toggleAttribute('hide-margin', shouldHide);\n });\n };\n\n connectedCallback() {\n super.connectedCallback?.();\n this.addEventListener('focusin', this._hideSiblingMargin);\n this.addEventListener('focusout', this._hideSiblingMargin);\n }\n\n render() {\n const { stacked } = this;\n const defaultClasses = {\n [`${prefix}--btn-set--stacked`]: stacked,\n [`${prefix}--btn-set`]: true,\n };\n const classes = classMap(defaultClasses);\n\n return html`<slot class=\"${classes} @slotchange=\"${this._handleSlotChange}\"></slot>`;\n }\n /**\n * A selector that will return the child items.\n */\n static get selectorItem() {\n return `${prefix}-button`;\n }\n\n static styles = styles;\n}\n\nexport default CDSButtonSet;\n"],"names":["styles","customElement"],"mappings":"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"}