@carbon/web-components 2.62.0 → 2.63.0

package/es/components/options-tile/options-tile.js

@@ -0,0 +1,208 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../globals/settings.js";
+import { carbonElement } from "../../globals/decorators/carbon-element.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import iconLoader from "../../globals/internal/icon-loader.js";
+import HostListenerMixin from "../../globals/mixins/host-listener.js";
+import "../button/index.js";
+import "../layer/index.js";
+import options_tile_default$1 from "./options-tile.scss.js";
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import ChevronDown16 from "@carbon/icons/es/chevron--down/16";
+import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16";
+import Locked16 from "@carbon/icons/es/locked/16";
+//#region src/components/options-tile/options-tile.ts
+/**
+* Copyright IBM Corp. 2025, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const blockClass = `cds--options-tile`;
+const blockEvent = `cds-options-tile`;
+/**
+* OptionsTile.
+*
+* @element cds-options-tile
+* @csspart options-tile The options tile
+* @fires cds-options-tile-open Custom event fired when tile is opened
+* @fires cds-options-tile-close Custom event fired when tile is closed
+* */
+let CDSOptionsTile = class CDSOptionsTile extends HostListenerMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.defaultOpen = false;
+		this.size = "lg";
+		this.titleId = "";
+		this.titleText = "";
+		this.locked = false;
+		this.lockedText = "";
+		this.warn = false;
+		this.warnText = "";
+		this._open = false;
+		this._hasToggle = false;
+		this._hasBody = false;
+	}
+	static get eventOpen() {
+		return `${blockEvent}-open`;
+	}
+	static get eventClose() {
+		return `${blockEvent}-close`;
+	}
+	_handleToggleSlotChange(e) {
+		const toggleElements = e.target?.assignedElements();
+		this._hasToggle = toggleElements && toggleElements.length > 0;
+	}
+	_handleBodySlotChange(e) {
+		const bodyElements = e.target?.assignedElements();
+		this._hasBody = bodyElements && bodyElements.length > 0;
+	}
+	_toggle(evt) {
+		const { newState } = evt;
+		this._open = newState === "open";
+		if (this._open) this._handleOpen();
+		else this._handleClose();
+	}
+	_handleOpen() {
+		const init = {
+			bubbles: true,
+			composed: true,
+			detail: { open: this._open }
+		};
+		this.dispatchEvent(new CustomEvent(this.constructor.eventOpen, init));
+	}
+	_handleClose() {
+		const init = {
+			bubbles: true,
+			composed: true,
+			detail: { open: this._open }
+		};
+		this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
+	}
+	render() {
+		const { _open, _hasToggle, _hasBody, defaultOpen, size, titleId, titleText, locked, lockedText, warn, warnText } = this;
+		const classes = classMap({
+			[`${blockClass}`]: true,
+			[`${blockClass}--xl`]: size === "xl",
+			[`${blockClass}--open`]: _open
+		});
+		const headerClasses = classMap({
+			[`${blockClass}__header`]: true,
+			[`${blockClass}__header--has-toggle`]: _hasToggle
+		});
+		const summaryClasses = classMap({
+			[`${blockClass}__summary`]: true,
+			[`${blockClass}__summary--warn`]: !!warn,
+			[`${blockClass}__summary--locked`]: !!locked
+		});
+		const renderTitle = () => html`
+      <div class="${blockClass}__title-block">
+        <p class="${blockClass}__title" id="${titleId}">${titleText}</p>
+        <div class="${summaryClasses}">
+          ${locked && lockedText ? html`
+                ${iconLoader(Locked16, { class: `${blockClass}__summary-icon` })}
+                <span class="${blockClass}__summary-text">${lockedText}</span>
+              ` : warn && warnText ? html`
+                  ${iconLoader(WarningAltFilled16, { class: `${blockClass}__summary-icon` })}
+                  <span class="${blockClass}__summary-text">${warnText}</span>
+                ` : html`<slot name="summary"></slot>`}
+        </div>
+      </div>
+    `;
+		return _hasBody ? html`
+          <details
+            @toggle=${this._toggle}
+            class="${classes}"
+            part="options-tile"
+            open=${defaultOpen || nothing}>
+            <summary class="${headerClasses}">
+              <div class="${blockClass}__header-right">
+                <slot
+                  name="toggle"
+                  @slotchange=${this._handleToggleSlotChange}></slot>
+              </div>
+              <div class="${blockClass}__header-left">
+                ${iconLoader(ChevronDown16, {
+			slot: "icon",
+			class: `${blockClass}__chevron`
+		})}
+                ${renderTitle()}
+              </div>
+            </summary>
+            <div class="${blockClass}__body">
+              <cds-layer level="1">
+                <slot
+                  name="body"
+                  @slotchange=${this._handleBodySlotChange}></slot>
+              </cds-layer>
+            </div>
+          </details>
+        ` : html`
+          <div class="${classes}">
+            <div class="${blockClass}__static-content">
+              <slot
+                name="toggle"
+                @slotchange=${this._handleToggleSlotChange}
+                style="display: none;"></slot>
+              <slot
+                name="body"
+                @slotchange=${this._handleBodySlotChange}
+                style="display: none;"></slot>
+              ${renderTitle()}
+            </div>
+          </div>
+        `;
+	}
+	static {
+		this.styles = options_tile_default$1;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSOptionsTile.prototype, "defaultOpen", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSOptionsTile.prototype, "size", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSOptionsTile.prototype, "titleId", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSOptionsTile.prototype, "titleText", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSOptionsTile.prototype, "locked", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSOptionsTile.prototype, "lockedText", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSOptionsTile.prototype, "warn", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSOptionsTile.prototype, "warnText", void 0);
+__decorate([state()], CDSOptionsTile.prototype, "_open", void 0);
+__decorate([state()], CDSOptionsTile.prototype, "_hasToggle", void 0);
+__decorate([state()], CDSOptionsTile.prototype, "_hasBody", void 0);
+CDSOptionsTile = __decorate([carbonElement(`cds-options-tile`)], CDSOptionsTile);
+var options_tile_default = CDSOptionsTile;
+//#endregion
+export { blockClass, options_tile_default as default };
+
+//# sourceMappingURL=options-tile.js.map

package/es/components/options-tile/options-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-tile.js","names":["styles","customElement"],"sources":["../../../src/components/options-tile/options-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2026\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, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './options-tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16';\nimport Locked16 from '@carbon/icons/es/locked/16';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport '../button/index';\nimport '../layer/index';\n\nexport const blockClass = `${prefix}--options-tile`;\nconst blockEvent = `${prefix}-options-tile`;\n\n/**\n * OptionsTile.\n *\n * @element cds-options-tile\n * @csspart options-tile The options tile\n * @fires cds-options-tile-open Custom event fired when tile is opened\n * @fires cds-options-tile-close Custom event fired when tile is closed\n * */\n\n@customElement(`${prefix}-options-tile`)\nclass CDSOptionsTile extends HostListenerMixin(LitElement) {\n  /**\n   * Determines if the tile is open by default\n   */\n  @property({ type: Boolean, reflect: true })\n  defaultOpen?: boolean = false;\n\n  /**\n   * Determines the size of the header\n   */\n  @property({ type: String, reflect: true })\n  size?: 'lg' | 'xl' = 'lg';\n\n  /**\n   * ID for the title\n   */\n  @property({ type: String, reflect: true })\n  titleId: string = '';\n\n  /**\n   * Text for the title\n   */\n  @property({ type: String, reflect: true })\n  titleText: string = '';\n\n  /**\n   * Whether the OptionsTile is in locked validation state.\n   */\n  @property({ type: Boolean, reflect: true })\n  locked?: boolean = false;\n\n  /**\n   * Provide a text explaining why the OptionsTile is in locked state.\n   */\n  @property({ type: String, reflect: true })\n  lockedText?: string = '';\n\n  /**\n   * Whether the OptionsTile is in warning validation state.\n   */\n  @property({ type: Boolean, reflect: true })\n  warn?: boolean = false;\n\n  /**\n   * Provide a text explaining why the OptionsTile is in warning state.\n   */\n  @property({ type: String, reflect: true })\n  warnText?: string = '';\n\n  /**\n   * Using the native toggle event handler in details can cause an infinite loop\n   * when setting the native open attribute. To combat this, the open state is kept\n   * here and only referenced internally.\n   */\n  @state()\n  private _open = false;\n\n  /**\n   * Tracks whether the toggle slot has content\n   */\n  @state()\n  private _hasToggle = false;\n\n  /**\n   * Tracks whether the body slot has content\n   */\n  @state()\n  private _hasBody = false;\n\n  static get eventOpen() {\n    return `${blockEvent}-open`;\n  }\n\n  static get eventClose() {\n    return `${blockEvent}-close`;\n  }\n\n  private _handleToggleSlotChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const toggleElements = target?.assignedElements();\n    this._hasToggle = toggleElements && toggleElements.length > 0;\n  }\n\n  private _handleBodySlotChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const bodyElements = target?.assignedElements();\n    this._hasBody = bodyElements && bodyElements.length > 0;\n  }\n\n  private _toggle(evt: ToggleEvent) {\n    const { newState } = evt;\n    this._open = newState === 'open';\n    if (this._open) {\n      this._handleOpen();\n    } else {\n      this._handleClose();\n    }\n  }\n\n  private _handleOpen() {\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        open: this._open,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOptionsTile).eventOpen,\n        init\n      )\n    );\n  }\n\n  private _handleClose() {\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        open: this._open,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOptionsTile).eventClose,\n        init\n      )\n    );\n  }\n\n  render() {\n    const {\n      _open,\n      _hasToggle,\n      _hasBody,\n      defaultOpen,\n      size,\n      titleId,\n      titleText,\n      locked,\n      lockedText,\n      warn,\n      warnText,\n    } = this;\n    const classes = classMap({\n      [`${blockClass}`]: true,\n      [`${blockClass}--xl`]: size === 'xl',\n      [`${blockClass}--open`]: _open,\n    });\n\n    const headerClasses = classMap({\n      [`${blockClass}__header`]: true,\n      [`${blockClass}__header--has-toggle`]: _hasToggle,\n    });\n\n    const summaryClasses = classMap({\n      [`${blockClass}__summary`]: true,\n      [`${blockClass}__summary--warn`]: !!warn,\n      [`${blockClass}__summary--locked`]: !!locked,\n    });\n\n    const renderTitle = () => html`\n      <div class=\"${blockClass}__title-block\">\n        <p class=\"${blockClass}__title\" id=\"${titleId}\">${titleText}</p>\n        <div class=\"${summaryClasses}\">\n          ${locked && lockedText\n            ? html`\n                ${iconLoader(Locked16, {\n                  class: `${blockClass}__summary-icon`,\n                })}\n                <span class=\"${blockClass}__summary-text\">${lockedText}</span>\n              `\n            : warn && warnText\n              ? html`\n                  ${iconLoader(WarningAltFilled16, {\n                    class: `${blockClass}__summary-icon`,\n                  })}\n                  <span class=\"${blockClass}__summary-text\">${warnText}</span>\n                `\n              : html`<slot name=\"summary\"></slot>`}\n        </div>\n      </div>\n    `;\n\n    return _hasBody\n      ? html`\n          <details\n            @toggle=${this._toggle}\n            class=\"${classes}\"\n            part=\"options-tile\"\n            open=${defaultOpen || nothing}>\n            <summary class=\"${headerClasses}\">\n              <div class=\"${blockClass}__header-right\">\n                <slot\n                  name=\"toggle\"\n                  @slotchange=${this._handleToggleSlotChange}></slot>\n              </div>\n              <div class=\"${blockClass}__header-left\">\n                ${iconLoader(ChevronDown16, {\n                  slot: 'icon',\n                  class: `${blockClass}__chevron`,\n                })}\n                ${renderTitle()}\n              </div>\n            </summary>\n            <div class=\"${blockClass}__body\">\n              <cds-layer level=\"1\">\n                <slot\n                  name=\"body\"\n                  @slotchange=${this._handleBodySlotChange}></slot>\n              </cds-layer>\n            </div>\n          </details>\n        `\n      : html`\n          <div class=\"${classes}\">\n            <div class=\"${blockClass}__static-content\">\n              <slot\n                name=\"toggle\"\n                @slotchange=${this._handleToggleSlotChange}\n                style=\"display: none;\"></slot>\n              <slot\n                name=\"body\"\n                @slotchange=${this._handleBodySlotChange}\n                style=\"display: none;\"></slot>\n              ${renderTitle()}\n            </div>\n          </div>\n        `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSOptionsTile;\n"],"mappings":"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"}

package/es/components/options-tile/options-tile.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from "lit";
+//#region src/components/options-tile/options-tile.scss?lit
+var options_tile_default = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{padding:0;border:0;margin:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-weight:400;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);line-height:var(--cds-heading-06-line-height,1.199);letter-spacing:var(--cds-heading-06-letter-spacing,0)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);line-height:var(--cds-heading-05-line-height,1.25);letter-spacing:var(--cds-heading-05-letter-spacing,0)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);line-height:var(--cds-heading-04-line-height,1.28572);letter-spacing:var(--cds-heading-04-letter-spacing,0)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);line-height:var(--cds-heading-03-line-height,1.4);letter-spacing:var(--cds-heading-03-letter-spacing,0)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);line-height:var(--cds-heading-02-line-height,1.5);letter-spacing:var(--cds-heading-02-letter-spacing,0)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);line-height:var(--cds-heading-01-line-height,1.42857);letter-spacing:var(--cds-heading-01-letter-spacing,.16px)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);line-height:var(--cds-body-02-line-height,1.5);letter-spacing:var(--cds-body-02-letter-spacing,0)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--options-tile,:host(cds-options-tile) .cds--options-tile{position:relative;display:flex;justify-content:space-between;background-color:var(--cds-layer);border-block-end:1px solid var(--cds-border-subtle)}.cds--options-tile__toggle-container{position:absolute;display:inline-flex;align-items:center;justify-content:center;inline-size:4rem;inset-block:0;inset-inline-end:0;padding-inline-end:1rem;padding-inline-start:1rem}.cds--options-tile__toggle{position:absolute}.cds--options-tile__toggle .cds--toggle-input__label .cds--toggle__switch{margin:0}.cds--options-tile__toggle .cds--toggle__label-text{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--options-tile__details{display:inline-flex;flex-direction:column;flex-grow:1}.cds--options-tile__header,.cds--options-tile__static-content{display:grid;box-sizing:border-box;align-items:center;grid-template-columns:3rem 1fr 0;padding-inline-end:1rem}.cds--options-tile__header{flex-grow:1;background-color:transparent;cursor:pointer;inline-size:100%;transition:background-color 70ms cubic-bezier(0,0,.38,.9)}.cds--options-tile__header--has-toggle{inline-size:calc(100% - 4rem)}.cds--options-tile__header::-webkit-details-marker{display:none}.cds--options-tile__header:hover{background-color:var(--cds-background-hover,hsla(0,0%,55.3%,.12))}.cds--options-tile__header:has(.cds--options-tile__toggle-container:hover){background-color:transparent}.cds--options-tile__header:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--options-tile__header:focus{outline-style:dotted}}.cds--options-tile__heading{grid-column:2}.cds--options-tile__title{font-size:var(--cds-productive-heading-01-font-size,.875rem);font-weight:var(--cds-productive-heading-01-font-weight,600);line-height:var(--cds-productive-heading-01-line-height,1.28572);letter-spacing:var(--cds-productive-heading-01-letter-spacing,.16px);color:var(--cds-text-primary,#161616)}.cds--options-tile__summary{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);display:grid;block-size:1rem;color:var(--cds-text-secondary,#525252);margin-block-start:.25rem;opacity:1;transition-duration:.15s;transition-property:height,opacity,margin-top;transition-timing-function:cubic-bezier(.2,0,.38,.9)}.cds--options-tile__summary--invalid,.cds--options-tile__summary--locked,.cds--options-tile__summary--warn{-moz-column-gap:.25rem;column-gap:.25rem;grid-template-columns:1rem 1fr}.cds--options-tile__summary--invalid{color:var(--cds-support-error,#da1e28)}.cds--options-tile__summary--warn{color:var(--cds-text-primary,#161616)}.cds--options-tile__summary--warn svg{color:var(--cds-support-warning,#f1c21b)}.cds--options-tile__summary--warn svg path[fill=none]{fill:#000}.cds--options-tile__summary-text{overflow:hidden;block-size:-moz-max-content;block-size:max-content;padding-inline-end:1rem;text-overflow:ellipsis;white-space:nowrap}.cds--options-tile__chevron{display:block;justify-self:center;transition:transform .11s cubic-bezier(.2,0,.38,.9)}.cds--options-tile__content{padding-inline:3rem 1rem}.cds--options-tile__content>.cds--fieldset>.cds--label:empty{display:none}.cds--options-tile--closing .cds--options-tile__content{overflow:hidden}.cds--options-tile__summary--hidden,.cds--options-tile__summary.cds--options-tile__summary--open:not(.cds--options-tile__summary--closing){block-size:0;margin-block-start:0;opacity:0}.cds--options-tile__chevron.cds--options-tile__chevron--open:not(.cds--options-tile__chevron--closing){transform:rotate(180deg)}.cds--options-tile>details[open] .cds--options-tile__content{padding-block:.5rem 1.5rem}.cds--options-tile__locked-text{font-size:var(--cds-body-long-01-font-size,.875rem);font-weight:var(--cds-body-long-01-font-weight,400);line-height:var(--cds-body-long-01-line-height,1.42857);letter-spacing:var(--cds-body-long-01-letter-spacing,.16px);display:inline-flex;align-items:center;color:var(--cds-text-secondary,#525252);margin-block-end:1.5rem}.cds--options-tile__locked-text>svg{margin-inline-end:.25rem}.cds--options-tile--lg .cds--options-tile__header,.cds--options-tile--lg .cds--options-tile__static-content{block-size:3rem}.cds--options-tile--xl .cds--options-tile__header,.cds--options-tile--xl .cds--options-tile__static-content{block-size:4rem}.cds--options-tile--lg .cds--options-tile__toggle{inset-block-start:1rem}.cds--options-tile--xl .cds--options-tile__toggle{inset-block-start:1.5rem}.cds--options-tile--lg .cds--options-tile__summary{margin-block-start:.125rem}@media (prefers-reduced-motion:reduce){.cds--options-tile__chevron,.cds--options-tile__summary{transition:none}}:host(cds-options-tile){position:relative}:host(cds-options-tile) .cds--options-tile{position:relative;display:block;background:var(--cds-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6)}:host(cds-options-tile) .cds--options-tile ::-webkit-details-marker,:host(cds-options-tile) .cds--options-tile ::marker{display:none;content:\"\"}:host(cds-options-tile) .cds--options-tile__header,:host(cds-options-tile) .cds--options-tile__static-content{display:flex;align-items:center;justify-content:space-between;block-size:3rem;padding-inline:1rem;padding-inline-end:1rem}:host(cds-options-tile) .cds--options-tile__header{cursor:pointer}:host(cds-options-tile) .cds--options-tile__header:hover{background:var(--cds-background-hover,hsla(0,0%,55.3%,.12))}:host(cds-options-tile) .cds--options-tile__header:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(cds-options-tile) .cds--options-tile__header-left{display:flex;align-items:center}:host(cds-options-tile) .cds--options-tile__header-right{position:absolute;display:flex;align-items:center;block-size:3rem;inset-block-start:0;inset-inline-end:0;padding-inline:1rem}:host(cds-options-tile) .cds--options-tile__header--has-toggle{inline-size:calc(100% - 6rem)}:host(cds-options-tile) .cds--options-tile__title{font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);line-height:var(--cds-heading-compact-01-line-height,1.28572);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px)}:host(cds-options-tile) .cds--options-tile__title-block{margin-inline-end:1rem;margin-inline-start:1rem}:host(cds-options-tile) .cds--options-tile__summary{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);display:flex;align-items:center;color:var(--cds-text-secondary,#525252);gap:.25rem;margin-block-start:.25rem}:host(cds-options-tile) .cds--options-tile__summary--locked{color:var(--cds-text-secondary,#525252)}:host(cds-options-tile) .cds--options-tile__summary--warn{color:var(--cds-text-primary,#161616)}:host(cds-options-tile) .cds--options-tile__summary--warn svg{color:var(--cds-support-warning,#f1c21b)}:host(cds-options-tile) .cds--options-tile__summary--warn svg path[fill=none]{fill:#000}:host(cds-options-tile) .cds--options-tile__summary-icon{flex-shrink:0}:host(cds-options-tile) .cds--options-tile__summary-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(cds-options-tile) .cds--options-tile__body{padding-block-end:1.5rem;padding-block-start:.5rem;padding-inline:1rem;padding-inline-start:3rem}:host(cds-options-tile) .cds--options-tile--lg .cds--options-tile__summary{margin-block-start:.125rem}:host(cds-options-tile) .cds--options-tile--xl .cds--options-tile__header{block-size:4rem}:host(cds-options-tile) .cds--options-tile--xl .cds--options-tile__summary{margin-block-start:.125rem}:host(cds-options-tile) .cds--options-tile--open .cds--options-tile__chevron{transform:rotate(-180deg)}:host(cds-options-tile) .cds--options-tile--open .cds--options-tile__summary{display:none}"]);
+//#endregion
+export { options_tile_default as default };
+
+//# sourceMappingURL=options-tile.scss.js.map

package/es/components/options-tile/options-tile.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-tile.scss.js","names":[],"sources":["../../../src/components/options-tile/options-tile.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2025, 2026\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\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/reset';\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/components/options-tile/index' as *;\n\n$block-class: #{$prefix}--options-tile;\n\n:host(#{$prefix}-options-tile) {\n  position: relative;\n\n  .#{$block-class} {\n    @extend .#{$block-class} !optional;\n\n    position: relative;\n    display: block;\n    background: $layer-01;\n    border-block-end: 1px solid $border-subtle-01;\n\n    ::marker,\n    ::-webkit-details-marker {\n      display: none;\n      content: '';\n    }\n\n    &__header,\n    &__static-content {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      block-size: $spacing-09;\n      padding-inline: $spacing-05;\n      padding-inline-end: $spacing-05;\n    }\n\n    &__header {\n      cursor: pointer;\n\n      &:hover {\n        background: $background-hover;\n      }\n\n      &:focus {\n        outline: 2px solid $focus;\n        outline-offset: -2px;\n      }\n\n      &-left {\n        display: flex;\n        align-items: center;\n      }\n\n      &-right {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        block-size: $spacing-09;\n        inset-block-start: 0;\n        inset-inline-end: 0;\n        padding-inline: $spacing-05;\n      }\n\n      &--has-toggle {\n        inline-size: calc(100% - ($spacing-09 + ($spacing-05 * 3)));\n      }\n    }\n\n    &__title {\n      @include type.type-style('heading-compact-01');\n\n      &-block {\n        margin-inline-end: $spacing-05;\n        margin-inline-start: $spacing-05;\n      }\n    }\n\n    &__summary {\n      @include type.type-style('helper-text-01');\n\n      display: flex;\n      align-items: center;\n      color: $text-secondary;\n      gap: $spacing-02;\n      margin-block-start: $spacing-02;\n\n      &--locked {\n        color: $text-secondary;\n      }\n\n      &--warn {\n        color: $text-primary;\n\n        svg {\n          color: $support-warning;\n\n          path[fill='none'] {\n            fill: $black-100;\n          }\n        }\n      }\n\n      &-icon {\n        flex-shrink: 0;\n      }\n\n      &-text {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    }\n\n    &__body {\n      padding-block-end: $spacing-06;\n      padding-block-start: $spacing-03;\n      padding-inline: $spacing-05;\n      padding-inline-start: $spacing-09;\n    }\n  }\n\n  .#{$block-class}--lg {\n    .#{$block-class}__summary {\n      margin-block-start: $spacing-01;\n    }\n  }\n\n  .#{$block-class}--xl {\n    .#{$block-class}__header {\n      block-size: $spacing-10;\n    }\n\n    .#{$block-class}__summary {\n      margin-block-start: $spacing-01;\n    }\n  }\n\n  .#{$block-class}--open {\n    .#{$block-class}__chevron {\n      transform: rotate(-180deg);\n    }\n\n    .#{$block-class}__summary {\n      display: none;\n    }\n  }\n}\n"],"mappings":""}

package/es/components/overflow-menu/overflow-menu.js

@@ -14,9 +14,9 @@ import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import FloatingController from "../../globals/controllers/floating-controller.js";
 import { OVERFLOW_MENU_SIZE } from "./defs.js";
 import "../menu/defs.js";
+import { isFeatureFlagEnabled } from "../feature-flags/index.js";
 import menu_default from "../menu/menu.js";
 import "../menu/index.js";
-import { isFeatureFlagEnabled } from "../feature-flags/index.js";
 import icon_button_default from "../icon-button/icon-button.scss.js";
 import overflow_menu_default$1 from "./overflow-menu.scss.js";
 import icon_button_default$1 from "../icon-button/icon-button.js";