@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.117 → 2.0.0-next.118

package/dist/components/advice-message-item/advice-message-item.js

@@ -60,13 +60,15 @@ let ObcAdviceMessageItem = class extends LitElement {
     }
   }
   /**
-   * @fires {CustomEvent<void>} message-click - Fired when the main message area is clicked.
+   * Fired when the main message area is clicked.
+   * @fires message-click
    */
   handleMessageClick() {
     this.dispatchEvent(new CustomEvent("message-click"));
   }
   /**
-   * @fires {CustomEvent<void>} action-click - Fired when the action button (text or icon) is clicked.
+   * Fired when the action button (text or icon) is clicked.
+   * @fires action-click
    */
   handleActionClick() {
     this.dispatchEvent(new CustomEvent("action-click"));

package/dist/components/advice-message-item/advice-message-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"advice-message-item.js","sources":["../../../src/components/advice-message-item/advice-message-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './advice-message-item.css?inline';\nimport '../topbar-message-item/topbar-message-item.js';\nimport {ObcTopbarMessageItemType} from '../topbar-message-item/topbar-message-item.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-close-google.js';\n\nexport enum ObcAdviceMessageItemType {\n  Simple = 'simple',\n  WithButton = 'with-button',\n  WithIconButton = 'with-icon-button',\n  Inactive = 'inactive',\n}\n\nexport enum ObcAdviceMessageItemSize {\n  Regular = 'regular',\n  Tall = 'tall',\n}\n\n/**\n * `<obc-advice-message-item>` – A compact, actionable message component for displaying system advice, recommendations, or notifications.\n *\n * This component presents a brief advice or recommendation message, optionally with a title, description, timestamp(s), and action(s). It is designed for use in notification panels, topbars, or summary lists where users need to quickly review and act on advice items. The component supports several display variants, including simple messages, messages with action buttons, and inactive/empty states.\n *\n * ---\n *\n * ### Features\n * - **Display Types:**\n *   - `simple`: Standard advice message with optional title, description, and timestamp.\n *   - `with-button`: Includes a text action button (label set via `actionLabel`).\n *   - `with-icon-button`: Shows an icon button for quick actions (e.g., dismiss or close).\n *   - `inactive`: Indicates an empty or inactive state, typically used when there are no active advice messages.\n * - **Size Variants:**\n *   - `regular`: Default compact layout.\n *   - `tall`: Provides a larger, more spacious layout for increased content or emphasis.\n * - **Content Options:**\n *   - Title and description can be shown or hidden independently.\n *   - Supports one or two timestamps (primary and secondary) for time or duration display.\n *   - Optional secondary icon overlay for additional status or categorization.\n *   - Customizable empty state text for when no advice is present.\n * - **Actions:**\n *   - Text action button (with customizable label) or icon button, depending on type.\n *   - Clickable message area for additional interactions.\n * - **Accessibility & Responsiveness:**\n *   - Truncates long titles/descriptions with ellipsis for readability.\n *   - Layout adapts to size variant and content presence.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `<obc-advice-message-item>` to present actionable advice, recommendations, or notifications that require user attention or review. Ideal for notification panels, summary lists, or topbars where users may need to quickly scan and act on advice items. Choose the `with-button` or `with-icon-button` types when an immediate action (such as \"View\", \"Acknowledge\", or \"Dismiss\") is needed. Use the `inactive` type (or set `empty` to true) to indicate that there are currently no active advice messages.\n *\n * - For persistent or critical alerts, consider using a dedicated alert/banner component.\n * - For simple, informational messages without actions, use the `simple` type.\n * - Use the `tall` size for layouts where more space is available or when emphasizing the advice.\n * - The secondary icon slot can be used to indicate priority, category, or additional status.\n *\n * **TODO(designer):** Confirm if there are recommended icon choices or color conventions for different advice types, and if there are character limits for title/description.\n *\n * ---\n *\n * ### Slots\n * | Slot Name         | Renders When...            | Purpose                                                  |\n * |-------------------|----------------------------|----------------------------------------------------------|\n * | `secondary-icon`  | `hasSecondaryIcon` is true | Optional overlay icon for additional status or category. |\n *\n * All other content (title, description, timestamps, action label/icon, empty-state\n * text) is driven by properties and rendered internally; it is not exposed as slots.\n *\n * ---\n *\n * ### Events\n * - `message-click` – Fired when the main message area is clicked.\n * - `action-click` – Fired when the action button (text or icon) is clicked.\n *\n * ---\n *\n * ### Best Practices & Constraints\n * - Only one action (text or icon) is shown at a time, depending on the `type`.\n * - Use concise titles and descriptions for optimal readability; long content will be truncated.\n * - The `large` and `empty` properties are deprecated; use `size=\"tall\"` and `type=\"inactive\"` instead.\n * - For accessibility, ensure action labels are descriptive and icons have appropriate meaning.\n *\n * ---\n *\n * **Example:**\n * ```html\n * <obc-advice-message-item\n *   title=\"System Recommendation\"\n *   description=\"Your system performance can be improved\"\n *   time=\"10:30:15\"\n *   type=\"with-button\"\n *   actionLabel=\"View\"\n * >\n * </obc-advice-message-item>\n * ```\n *\n * In this example, the advice message displays a title, description, timestamp, and a \"View\" action button.\n *\n * @slot secondary-icon - Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)\n * @fires {CustomEvent<void>} message-click - When the main message area is clicked\n * @fires {CustomEvent<void>} action-click - When the action button (text or icon) is clicked\n * @beta\n */\n@customElement('obc-advice-message-item')\nexport class ObcAdviceMessageItem extends LitElement {\n  /**\n   * Title or heading of the advice message.\n   * Shown in the `title` slot if `hasTitle` is true.\n   * @availableWhen showTitle==true && type!=Inactive\n   */\n  @property({type: String}) override title = '';\n\n  /**\n   * Detailed message text for the advice.\n   * Shown in the `description` slot if `hasDescription` is true.\n   * @availableWhen showDescription==true && type!=Inactive\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * Primary timestamp to display (e.g., time of advice).\n   * Shown in the `time` slot if `hasTimestamp` is true.\n   * @availableWhen showTimestamp==true && type!=Inactive\n   */\n  @property({type: String}) time = '';\n\n  /**\n   * Secondary timestamp (e.g., duration, relative time).\n   * Shown in the `time-secondary` slot if `hasTimestamp2` is true.\n   * @availableWhen hasTimestamp2==true && type!=Inactive\n   */\n  @property({type: String}) timeSecondary = '';\n\n  /**\n   * Label for the action button (when `type` is \"with-button\").\n   * Shown in the `action-text` slot.\n   * @availableWhen type==WithButton\n   */\n  @property({type: String}) actionLabel = 'View';\n\n  /**\n   * Display type of the advice message.\n   * - `simple`: Standard message with optional title, description, and timestamp.\n   * - `with-button`: Includes a text action button.\n   * - `with-icon-button`: Includes an icon action button.\n   * - `inactive`: Shows the empty/inactive state.\n   *\n   * Default: `simple`\n   */\n  @property({type: String}) type: ObcAdviceMessageItemType =\n    ObcAdviceMessageItemType.Simple;\n\n  /**\n   * Size variant of the advice message.\n   * - `regular`: Default compact layout.\n   * - `tall`: Larger, more spacious layout.\n   *\n   * Default: `regular`\n   */\n  @property({type: String}) size: ObcAdviceMessageItemSize =\n    ObcAdviceMessageItemSize.Regular;\n\n  /**\n   * Whether to show the title.\n   * If false, the title is hidden even if set.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n  /**\n   * Whether to show the description.\n   * If false, the description is hidden even if set.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n  /**\n   * Whether to show the primary timestamp.\n   * If false, the `time` slot is not rendered.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n  /**\n   * Whether to show the secondary timestamp.\n   * If true, the `time-secondary` slot is rendered.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean}) hasTimestamp2 = false;\n\n  /**\n   * Whether to show the secondary icon overlay.\n   * If true, the `secondary-icon` slot is rendered.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean}) hasSecondaryIcon = false;\n\n  /**\n   * Text to display in the empty/inactive state.\n   * Shown in the `empty` slot when `type=\"inactive\"` or `empty` is true.\n   * @availableWhen type==Inactive\n   */\n  @property({type: String}) emptyText = 'No active advice';\n\n  private get mappedType(): ObcTopbarMessageItemType {\n    if (this.type === ObcAdviceMessageItemType.Inactive) {\n      return ObcTopbarMessageItemType.Inactive;\n    }\n\n    switch (this.type) {\n      case ObcAdviceMessageItemType.WithButton:\n        return ObcTopbarMessageItemType.WithButton;\n      case ObcAdviceMessageItemType.WithIconButton:\n        return ObcTopbarMessageItemType.WithIconButton;\n      case ObcAdviceMessageItemType.Simple:\n        return ObcTopbarMessageItemType.Simple;\n      default:\n        return ObcTopbarMessageItemType.Simple;\n    }\n  }\n\n  /**\n   * @fires {CustomEvent<void>} message-click - Fired when the main message area is clicked.\n   */\n  private handleMessageClick() {\n    this.dispatchEvent(new CustomEvent('message-click'));\n  }\n\n  /**\n   * @fires {CustomEvent<void>} action-click - Fired when the action button (text or icon) is clicked.\n   */\n  private handleActionClick() {\n    this.dispatchEvent(new CustomEvent('action-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-topbar-message-item\n        .type=${this.mappedType}\n        .size=${this.size}\n        .showTitle=${this.showTitle}\n        .showDescription=${this.showDescription}\n        .showTimestamp=${this.showTimestamp}\n        .hasTimestamp2=${this.hasTimestamp2}\n        .hasSecondaryIcon=${this.hasSecondaryIcon}\n        @message-click=${this.handleMessageClick}\n        @action-click=${this.handleActionClick}\n      >\n        <obi-notification-advice-active\n          slot=\"primary-icon\"\n        ></obi-notification-advice-active>\n\n        ${this.hasSecondaryIcon\n          ? html`<slot name=\"secondary-icon\" slot=\"secondary-icon\"></slot>`\n          : nothing}\n        ${this.title && this.showTitle\n          ? html`<span slot=\"title\">${this.title}</span>`\n          : nothing}\n        ${this.description && this.showDescription\n          ? html`<span slot=\"description\">${this.description}</span>`\n          : nothing}\n        ${this.time && this.showTimestamp\n          ? html`<span slot=\"time\">${this.time}</span>`\n          : nothing}\n        ${this.timeSecondary && this.hasTimestamp2\n          ? html`<span slot=\"time-secondary\">${this.timeSecondary}</span>`\n          : nothing}\n        ${this.type === ObcAdviceMessageItemType.WithButton\n          ? html`<span slot=\"action-text\">${this.actionLabel}</span>`\n          : this.type === ObcAdviceMessageItemType.WithIconButton\n            ? html`<obi-close-google slot=\"action-icon\"></obi-close-google>`\n            : nothing}\n\n        <span slot=\"empty\">${this.emptyText}</span>\n      </obc-topbar-message-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-advice-message-item': ObcAdviceMessageItem;\n  }\n}\n"],"names":["ObcAdviceMessageItemType","ObcAdviceMessageItemSize"],"mappings":"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"}
+{"version":3,"file":"advice-message-item.js","sources":["../../../src/components/advice-message-item/advice-message-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './advice-message-item.css?inline';\nimport '../topbar-message-item/topbar-message-item.js';\nimport {ObcTopbarMessageItemType} from '../topbar-message-item/topbar-message-item.js';\nimport '../../icons/icon-notification-advice-active.js';\nimport '../../icons/icon-close-google.js';\n\nexport enum ObcAdviceMessageItemType {\n  Simple = 'simple',\n  WithButton = 'with-button',\n  WithIconButton = 'with-icon-button',\n  Inactive = 'inactive',\n}\n\nexport enum ObcAdviceMessageItemSize {\n  Regular = 'regular',\n  Tall = 'tall',\n}\n\n/**\n * `<obc-advice-message-item>` – A compact, actionable message component for displaying system advice, recommendations, or notifications.\n *\n * This component presents a brief advice or recommendation message, optionally with a title, description, timestamp(s), and action(s). It is designed for use in notification panels, topbars, or summary lists where users need to quickly review and act on advice items. The component supports several display variants, including simple messages, messages with action buttons, and inactive/empty states.\n *\n * ---\n *\n * ### Features\n * - **Display Types:**\n *   - `simple`: Standard advice message with optional title, description, and timestamp.\n *   - `with-button`: Includes a text action button (label set via `actionLabel`).\n *   - `with-icon-button`: Shows an icon button for quick actions (e.g., dismiss or close).\n *   - `inactive`: Indicates an empty or inactive state, typically used when there are no active advice messages.\n * - **Size Variants:**\n *   - `regular`: Default compact layout.\n *   - `tall`: Provides a larger, more spacious layout for increased content or emphasis.\n * - **Content Options:**\n *   - Title and description can be shown or hidden independently.\n *   - Supports one or two timestamps (primary and secondary) for time or duration display.\n *   - Optional secondary icon overlay for additional status or categorization.\n *   - Customizable empty state text for when no advice is present.\n * - **Actions:**\n *   - Text action button (with customizable label) or icon button, depending on type.\n *   - Clickable message area for additional interactions.\n * - **Accessibility & Responsiveness:**\n *   - Truncates long titles/descriptions with ellipsis for readability.\n *   - Layout adapts to size variant and content presence.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `<obc-advice-message-item>` to present actionable advice, recommendations, or notifications that require user attention or review. Ideal for notification panels, summary lists, or topbars where users may need to quickly scan and act on advice items. Choose the `with-button` or `with-icon-button` types when an immediate action (such as \"View\", \"Acknowledge\", or \"Dismiss\") is needed. Use the `inactive` type (or set `empty` to true) to indicate that there are currently no active advice messages.\n *\n * - For persistent or critical alerts, consider using a dedicated alert/banner component.\n * - For simple, informational messages without actions, use the `simple` type.\n * - Use the `tall` size for layouts where more space is available or when emphasizing the advice.\n * - The secondary icon slot can be used to indicate priority, category, or additional status.\n *\n * **TODO(designer):** Confirm if there are recommended icon choices or color conventions for different advice types, and if there are character limits for title/description.\n *\n * ---\n *\n * ### Slots\n * | Slot Name         | Renders When...            | Purpose                                                  |\n * |-------------------|----------------------------|----------------------------------------------------------|\n * | `secondary-icon`  | `hasSecondaryIcon` is true | Optional overlay icon for additional status or category. |\n *\n * All other content (title, description, timestamps, action label/icon, empty-state\n * text) is driven by properties and rendered internally; it is not exposed as slots.\n *\n * ---\n *\n * ### Events\n * - `message-click` – Fired when the main message area is clicked.\n * - `action-click` – Fired when the action button (text or icon) is clicked.\n *\n * ---\n *\n * ### Best Practices & Constraints\n * - Only one action (text or icon) is shown at a time, depending on the `type`.\n * - Use concise titles and descriptions for optimal readability; long content will be truncated.\n * - The `large` and `empty` properties are deprecated; use `size=\"tall\"` and `type=\"inactive\"` instead.\n * - For accessibility, ensure action labels are descriptive and icons have appropriate meaning.\n *\n * ---\n *\n * **Example:**\n * ```html\n * <obc-advice-message-item\n *   title=\"System Recommendation\"\n *   description=\"Your system performance can be improved\"\n *   time=\"10:30:15\"\n *   type=\"with-button\"\n *   actionLabel=\"View\"\n * >\n * </obc-advice-message-item>\n * ```\n *\n * In this example, the advice message displays a title, description, timestamp, and a \"View\" action button.\n *\n * @slot secondary-icon - Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)\n * @fires {CustomEvent<void>} message-click - When the main message area is clicked\n * @fires {CustomEvent<void>} action-click - When the action button (text or icon) is clicked\n * @beta\n */\n@customElement('obc-advice-message-item')\nexport class ObcAdviceMessageItem extends LitElement {\n  /**\n   * Title or heading of the advice message.\n   * Shown in the `title` slot if `hasTitle` is true.\n   * @availableWhen showTitle==true && type!=Inactive\n   */\n  @property({type: String}) override title = '';\n\n  /**\n   * Detailed message text for the advice.\n   * Shown in the `description` slot if `hasDescription` is true.\n   * @availableWhen showDescription==true && type!=Inactive\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * Primary timestamp to display (e.g., time of advice).\n   * Shown in the `time` slot if `hasTimestamp` is true.\n   * @availableWhen showTimestamp==true && type!=Inactive\n   */\n  @property({type: String}) time = '';\n\n  /**\n   * Secondary timestamp (e.g., duration, relative time).\n   * Shown in the `time-secondary` slot if `hasTimestamp2` is true.\n   * @availableWhen hasTimestamp2==true && type!=Inactive\n   */\n  @property({type: String}) timeSecondary = '';\n\n  /**\n   * Label for the action button (when `type` is \"with-button\").\n   * Shown in the `action-text` slot.\n   * @availableWhen type==WithButton\n   */\n  @property({type: String}) actionLabel = 'View';\n\n  /**\n   * Display type of the advice message.\n   * - `simple`: Standard message with optional title, description, and timestamp.\n   * - `with-button`: Includes a text action button.\n   * - `with-icon-button`: Includes an icon action button.\n   * - `inactive`: Shows the empty/inactive state.\n   *\n   * Default: `simple`\n   */\n  @property({type: String}) type: ObcAdviceMessageItemType =\n    ObcAdviceMessageItemType.Simple;\n\n  /**\n   * Size variant of the advice message.\n   * - `regular`: Default compact layout.\n   * - `tall`: Larger, more spacious layout.\n   *\n   * Default: `regular`\n   */\n  @property({type: String}) size: ObcAdviceMessageItemSize =\n    ObcAdviceMessageItemSize.Regular;\n\n  /**\n   * Whether to show the title.\n   * If false, the title is hidden even if set.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n  /**\n   * Whether to show the description.\n   * If false, the description is hidden even if set.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n  /**\n   * Whether to show the primary timestamp.\n   * If false, the `time` slot is not rendered.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n  /**\n   * Whether to show the secondary timestamp.\n   * If true, the `time-secondary` slot is rendered.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean}) hasTimestamp2 = false;\n\n  /**\n   * Whether to show the secondary icon overlay.\n   * If true, the `secondary-icon` slot is rendered.\n   * @availableWhen type!=Inactive\n   */\n  @property({type: Boolean}) hasSecondaryIcon = false;\n\n  /**\n   * Text to display in the empty/inactive state.\n   * Shown in the `empty` slot when `type=\"inactive\"` or `empty` is true.\n   * @availableWhen type==Inactive\n   */\n  @property({type: String}) emptyText = 'No active advice';\n\n  private get mappedType(): ObcTopbarMessageItemType {\n    if (this.type === ObcAdviceMessageItemType.Inactive) {\n      return ObcTopbarMessageItemType.Inactive;\n    }\n\n    switch (this.type) {\n      case ObcAdviceMessageItemType.WithButton:\n        return ObcTopbarMessageItemType.WithButton;\n      case ObcAdviceMessageItemType.WithIconButton:\n        return ObcTopbarMessageItemType.WithIconButton;\n      case ObcAdviceMessageItemType.Simple:\n        return ObcTopbarMessageItemType.Simple;\n      default:\n        return ObcTopbarMessageItemType.Simple;\n    }\n  }\n\n  /**\n   * Fired when the main message area is clicked.\n   * @fires message-click\n   */\n  private handleMessageClick() {\n    this.dispatchEvent(new CustomEvent('message-click'));\n  }\n\n  /**\n   * Fired when the action button (text or icon) is clicked.\n   * @fires action-click\n   */\n  private handleActionClick() {\n    this.dispatchEvent(new CustomEvent('action-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-topbar-message-item\n        .type=${this.mappedType}\n        .size=${this.size}\n        .showTitle=${this.showTitle}\n        .showDescription=${this.showDescription}\n        .showTimestamp=${this.showTimestamp}\n        .hasTimestamp2=${this.hasTimestamp2}\n        .hasSecondaryIcon=${this.hasSecondaryIcon}\n        @message-click=${this.handleMessageClick}\n        @action-click=${this.handleActionClick}\n      >\n        <obi-notification-advice-active\n          slot=\"primary-icon\"\n        ></obi-notification-advice-active>\n\n        ${this.hasSecondaryIcon\n          ? html`<slot name=\"secondary-icon\" slot=\"secondary-icon\"></slot>`\n          : nothing}\n        ${this.title && this.showTitle\n          ? html`<span slot=\"title\">${this.title}</span>`\n          : nothing}\n        ${this.description && this.showDescription\n          ? html`<span slot=\"description\">${this.description}</span>`\n          : nothing}\n        ${this.time && this.showTimestamp\n          ? html`<span slot=\"time\">${this.time}</span>`\n          : nothing}\n        ${this.timeSecondary && this.hasTimestamp2\n          ? html`<span slot=\"time-secondary\">${this.timeSecondary}</span>`\n          : nothing}\n        ${this.type === ObcAdviceMessageItemType.WithButton\n          ? html`<span slot=\"action-text\">${this.actionLabel}</span>`\n          : this.type === ObcAdviceMessageItemType.WithIconButton\n            ? html`<obi-close-google slot=\"action-icon\"></obi-close-google>`\n            : nothing}\n\n        <span slot=\"empty\">${this.emptyText}</span>\n      </obc-topbar-message-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-advice-message-item': ObcAdviceMessageItem;\n  }\n}\n"],"names":["ObcAdviceMessageItemType","ObcAdviceMessageItemSize"],"mappings":";;;;;;;;;;;;;;;;;AASO,IAAK,6CAAAA,8BAAL;AACLA,4BAAA,QAAA,IAAS;AACTA,4BAAA,YAAA,IAAa;AACbA,4BAAA,gBAAA,IAAiB;AACjBA,4BAAA,UAAA,IAAW;AAJD,SAAAA;AAAA,GAAA,4BAAA,CAAA,CAAA;AAOL,IAAK,6CAAAC,8BAAL;AACLA,4BAAA,SAAA,IAAU;AACVA,4BAAA,MAAA,IAAO;AAFG,SAAAA;AAAA,GAAA,4BAAA,CAAA,CAAA;AA2FL,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAMqB,SAAS,QAAQ;AAOjB,SAAA,cAAc;AAOd,SAAA,OAAO;AAOP,SAAA,gBAAgB;AAOhB,SAAA,cAAc;AAWd,SAAA,OACxB;AASwB,SAAA,OACxB;AAO2C,SAAA,YAAqB;AAOrB,SAAA,kBAA2B;AAO3B,SAAA,gBAAyB;AAO3C,SAAA,gBAAgB;AAOhB,SAAA,mBAAmB;AAOpB,SAAA,YAAY;AAAA,EAAA;AAAA,EAEtC,IAAY,aAAuC;AACjD,QAAI,KAAK,SAAS,YAAmC;AACnD,aAAO,yBAAyB;AAAA,IAClC;AAEA,YAAQ,KAAK,MAAA;AAAA,MACX,KAAK;AACH,eAAO,yBAAyB;AAAA,MAClC,KAAK;AACH,eAAO,yBAAyB;AAAA,MAClC,KAAK;AACH,eAAO,yBAAyB;AAAA,MAClC;AACE,eAAO,yBAAyB;AAAA,IAAA;AAAA,EAEtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,qBAAqB;AAC3B,SAAK,cAAc,IAAI,YAAY,eAAe,CAAC;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,oBAAoB;AAC1B,SAAK,cAAc,IAAI,YAAY,cAAc,CAAC;AAAA,EACpD;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,KAAK,UAAU;AAAA,gBACf,KAAK,IAAI;AAAA,qBACJ,KAAK,SAAS;AAAA,2BACR,KAAK,eAAe;AAAA,yBACtB,KAAK,aAAa;AAAA,yBAClB,KAAK,aAAa;AAAA,4BACf,KAAK,gBAAgB;AAAA,yBACxB,KAAK,kBAAkB;AAAA,wBACxB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMpC,KAAK,mBACH,kEACA,OAAO;AAAA,UACT,KAAK,SAAS,KAAK,YACjB,0BAA0B,KAAK,KAAK,YACpC,OAAO;AAAA,UACT,KAAK,eAAe,KAAK,kBACvB,gCAAgC,KAAK,WAAW,YAChD,OAAO;AAAA,UACT,KAAK,QAAQ,KAAK,gBAChB,yBAAyB,KAAK,IAAI,YAClC,OAAO;AAAA,UACT,KAAK,iBAAiB,KAAK,gBACzB,mCAAmC,KAAK,aAAa,YACrD,OAAO;AAAA,UACT,KAAK,SAAS,gBACZ,gCAAgC,KAAK,WAAW,YAChD,KAAK,SAAS,qBACZ,iEACA,OAAO;AAAA;AAAA,6BAEQ,KAAK,SAAS;AAAA;AAAA;AAAA,EAGzC;AAGF;AAjLa,qBAgLK,SAAS,UAAU,cAAc;AA1Kd,gBAAA;AAAA,EAAlC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,qBAMwB,WAAA,SAAA,CAAA;AAOT,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAbb,qBAae,WAAA,eAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApBb,qBAoBe,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,qBA2Be,WAAA,iBAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlCb,qBAkCe,WAAA,eAAA,CAAA;AAWA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA7Cb,qBA6Ce,WAAA,QAAA,CAAA;AAUA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAvDb,qBAuDe,WAAA,QAAA,CAAA;AAQmB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GA/DhC,qBA+DkC,WAAA,aAAA,CAAA;AAOA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAtEhC,qBAsEkC,WAAA,mBAAA,CAAA;AAOA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GA7EhC,qBA6EkC,WAAA,iBAAA,CAAA;AAOlB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApFd,qBAoFgB,WAAA,iBAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA3Fd,qBA2FgB,WAAA,oBAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlGb,qBAkGe,WAAA,aAAA,CAAA;AAlGf,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}

package/dist/components/app-menu/app-menu.d.ts

@@ -52,7 +52,7 @@ export declare class ObcAppMenu extends LitElement {
      * Handles input events from the search field and emits a `search` event with the current value.
      *
      * @param e - The input event from the search field.
-     * @fires {CustomEvent<string>} search - Fired when the search input value changes.
+     * @fires search
      */
     onSearchInput(e: Event): void;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/app-menu/app-menu.js

@@ -17,7 +17,7 @@ let ObcAppMenu = class extends LitElement {
    * Handles input events from the search field and emits a `search` event with the current value.
    *
    * @param e - The input event from the search field.
-   * @fires {CustomEvent<string>} search - Fired when the search input value changes.
+   * @fires search
    */
   onSearchInput(e) {
     this.dispatchEvent(

package/dist/components/app-menu/app-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-menu.js","sources":["../../../src/components/app-menu/app-menu.ts"],"sourcesContent":["import {customElement} from '../../decorator.js';\nimport {LitElement, html, unsafeCSS} from 'lit';\nimport compentStyle from './app-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../app-button/app-button.js';\nimport '../../icons/icon-search.js';\n\n/**\n * `<obc-app-menu>` – A vertical application menu component with integrated search and customizable app buttons.\n *\n * Provides a structured container for displaying a grid of application buttons, typically used for quick navigation or launching key features. Includes a built-in search input at the top to filter or locate specific applications within the menu.\n *\n * ### Features\n * - **Integrated Search:** Includes a search field with a leading icon, allowing users to filter or search for menu items.\n * - **Customizable Content:** Uses a default slot to accept any number of `<obc-app-button>` elements or other custom content.\n * - **Grid Layout:** Arranges child buttons in a responsive grid (4 columns by default) for efficient use of space.\n * - **Icon Support:** Each app button can display an icon via its own slot, supporting a wide range of visual representations.\n * - **Event Emission:** Dispatches a `search` event whenever the search input changes, enabling live filtering or external handling.\n *\n * ### Usage Guidelines\n * Use `<obc-app-menu>` to present a collection of application shortcuts, tools, or frequently accessed features in a compact, visually organized menu. Ideal for dashboards, launchers, or side panels where users need to quickly access multiple apps or modules.\n *\n * The search input is intended for filtering the visible buttons or triggering search-related logic externally. Place `<obc-app-button>` elements as children to represent each app or function.\n *\n * **TODO(designer):** Clarify if the menu is intended only for application launchers, or if it can be used for other grouped actions. Also, specify any recommended maximum number of buttons or best practices for grouping.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-app-button>` elements or custom content to populate the menu grid. |\n *\n * ### Events\n * - `search` – Fired whenever the user types in the search input. The event's `detail` contains the current input value.\n *\n * ### Example\n * ```\n * <obc-app-menu>\n *   <obc-app-button label=\"Radar\" checked>\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <obc-app-button label=\"Maps\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <!-- More app buttons... -->\n * </obc-app-menu>\n * ```\n * In this example, the menu displays a search bar and a grid of app buttons, each with an icon.\n *\n * @slot - Default slot for app buttons or custom menu items\n * @fires {CustomEvent<string>} search - Fired when the search input value changes, with the current value in `detail`.\n * @stable\n */\n@customElement('obc-app-menu')\nexport class ObcAppMenu extends LitElement {\n  /**\n   * Handles input events from the search field and emits a `search` event with the current value.\n   *\n   * @param e - The input event from the search field.\n   * @fires {CustomEvent<string>} search - Fired when the search input value changes.\n   */\n  onSearchInput(e: Event) {\n    this.dispatchEvent(\n      new CustomEvent('search', {detail: (e.target as HTMLInputElement).value})\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\">\n        <obc-text-input-field\n          placeholder=\"Search\"\n          @input=${this.onSearchInput}\n          hasLeadingIcon\n        >\n          <obi-search slot=\"leading-icon\"></obi-search>\n        </obc-text-input-field>\n        <div class=\"main-apps\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-app-menu': ObcAppMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqDO,IAAM,aAAN,cAAyB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzC,cAAc,GAAU;AACtB,SAAK;AAAA,MACH,IAAI,YAAY,UAAU,EAAC,QAAS,EAAE,OAA4B,OAAM;AAAA,IAAA;AAAA,EAE5E;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA,mBAIQ,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUnC;AAGF;AA/Ba,WA8BK,SAAS,UAAU,YAAY;AA9BpC,aAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,UAAA;"}
+{"version":3,"file":"app-menu.js","sources":["../../../src/components/app-menu/app-menu.ts"],"sourcesContent":["import {customElement} from '../../decorator.js';\nimport {LitElement, html, unsafeCSS} from 'lit';\nimport compentStyle from './app-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../app-button/app-button.js';\nimport '../../icons/icon-search.js';\n\n/**\n * `<obc-app-menu>` – A vertical application menu component with integrated search and customizable app buttons.\n *\n * Provides a structured container for displaying a grid of application buttons, typically used for quick navigation or launching key features. Includes a built-in search input at the top to filter or locate specific applications within the menu.\n *\n * ### Features\n * - **Integrated Search:** Includes a search field with a leading icon, allowing users to filter or search for menu items.\n * - **Customizable Content:** Uses a default slot to accept any number of `<obc-app-button>` elements or other custom content.\n * - **Grid Layout:** Arranges child buttons in a responsive grid (4 columns by default) for efficient use of space.\n * - **Icon Support:** Each app button can display an icon via its own slot, supporting a wide range of visual representations.\n * - **Event Emission:** Dispatches a `search` event whenever the search input changes, enabling live filtering or external handling.\n *\n * ### Usage Guidelines\n * Use `<obc-app-menu>` to present a collection of application shortcuts, tools, or frequently accessed features in a compact, visually organized menu. Ideal for dashboards, launchers, or side panels where users need to quickly access multiple apps or modules.\n *\n * The search input is intended for filtering the visible buttons or triggering search-related logic externally. Place `<obc-app-button>` elements as children to represent each app or function.\n *\n * **TODO(designer):** Clarify if the menu is intended only for application launchers, or if it can be used for other grouped actions. Also, specify any recommended maximum number of buttons or best practices for grouping.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-app-button>` elements or custom content to populate the menu grid. |\n *\n * ### Events\n * - `search` – Fired whenever the user types in the search input. The event's `detail` contains the current input value.\n *\n * ### Example\n * ```\n * <obc-app-menu>\n *   <obc-app-button label=\"Radar\" checked>\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <obc-app-button label=\"Maps\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <!-- More app buttons... -->\n * </obc-app-menu>\n * ```\n * In this example, the menu displays a search bar and a grid of app buttons, each with an icon.\n *\n * @slot - Default slot for app buttons or custom menu items\n * @fires {CustomEvent<string>} search - Fired when the search input value changes, with the current value in `detail`.\n * @stable\n */\n@customElement('obc-app-menu')\nexport class ObcAppMenu extends LitElement {\n  /**\n   * Handles input events from the search field and emits a `search` event with the current value.\n   *\n   * @param e - The input event from the search field.\n   * @fires search\n   */\n  onSearchInput(e: Event) {\n    this.dispatchEvent(\n      new CustomEvent('search', {detail: (e.target as HTMLInputElement).value})\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\">\n        <obc-text-input-field\n          placeholder=\"Search\"\n          @input=${this.onSearchInput}\n          hasLeadingIcon\n        >\n          <obi-search slot=\"leading-icon\"></obi-search>\n        </obc-text-input-field>\n        <div class=\"main-apps\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-app-menu': ObcAppMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqDO,IAAM,aAAN,cAAyB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzC,cAAc,GAAU;AACtB,SAAK;AAAA,MACH,IAAI,YAAY,UAAU,EAAC,QAAS,EAAE,OAA4B,OAAM;AAAA,IAAA;AAAA,EAE5E;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA,mBAIQ,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUnC;AAGF;AA/Ba,WA8BK,SAAS,UAAU,YAAY;AA9BpC,aAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,UAAA;"}

package/dist/components/brilliance-menu/brilliance-menu.d.ts

@@ -168,12 +168,14 @@ export declare class ObcBrillianceMenu extends LitElement {
     showScreenControlLink: boolean;
     willUpdate(_changed: Map<string, unknown>): void;
     /**
-     * @fires palette-changed - Handles palette selection changes and emits `palette-changed`.
+     * Handles palette selection changes and emits `palette-changed`.
+     * @fires palette-changed
      * @param {CustomEvent} event
      */
     onPaletteChanged(event: CustomEvent): void;
     /**
-     * @fires brightness-changed - Handles brightness slider changes and emits `brightness-changed`.
+     * Handles brightness slider changes and emits `brightness-changed`.
+     * @fires brightness-changed
      * @param {CustomEvent} event
      */
     handleBrightnessChanged(event: CustomEvent): void;
@@ -181,12 +183,14 @@ export declare class ObcBrillianceMenu extends LitElement {
     get canIncreaseBrightness(): boolean;
     get canDecreaseBrightness(): boolean;
     /**
-     * @fires link-palette-changed - Handles link palette changes and emits `link-palette-changed`.
+     * Handles link palette changes and emits `link-palette-changed`.
+     * @fires link-palette-changed
      * @param {CustomEvent} event
      */
     onLinkPaletteChanged(event: CustomEvent): void;
     /**
-     * @fires link-brightness-changed - Handles link brightness changes and emits `link-brightness-changed`.
+     * Handles link brightness changes and emits `link-brightness-changed`.
+     * @fires link-brightness-changed
      * @param {CustomEvent} event
      */
     onLinkBrightnessChanged(event: CustomEvent): void;

package/dist/components/brilliance-menu/brilliance-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"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"}

package/dist/components/brilliance-menu/brilliance-menu.js

@@ -90,7 +90,8 @@ let ObcBrillianceMenu = class extends LitElement {
     }
   }
   /**
-   * @fires palette-changed - Handles palette selection changes and emits `palette-changed`.
+   * Handles palette selection changes and emits `palette-changed`.
+   * @fires palette-changed
    * @param {CustomEvent} event
    */
   onPaletteChanged(event) {
@@ -102,7 +103,8 @@ let ObcBrillianceMenu = class extends LitElement {
     );
   }
   /**
-   * @fires brightness-changed - Handles brightness slider changes and emits `brightness-changed`.
+   * Handles brightness slider changes and emits `brightness-changed`.
+   * @fires brightness-changed
    * @param {CustomEvent} event
    */
   handleBrightnessChanged(event) {
@@ -131,7 +133,8 @@ let ObcBrillianceMenu = class extends LitElement {
     return this.brightness > 0;
   }
   /**
-   * @fires link-palette-changed - Handles link palette changes and emits `link-palette-changed`.
+   * Handles link palette changes and emits `link-palette-changed`.
+   * @fires link-palette-changed
    * @param {CustomEvent} event
    */
   onLinkPaletteChanged(event) {
@@ -142,7 +145,8 @@ let ObcBrillianceMenu = class extends LitElement {
     );
   }
   /**
-   * @fires link-brightness-changed - Handles link brightness changes and emits `link-brightness-changed`.
+   * Handles link brightness changes and emits `link-brightness-changed`.
+   * @fires link-brightness-changed
    * @param {CustomEvent} event
    */
   onLinkBrightnessChanged(event) {

package/dist/components/brilliance-menu/brilliance-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../button/button.js';\nimport '../slider/slider.js';\nimport '../toggle-switch/toggle-switch.js';\nimport '../toggle-button-group/toggle-button-group.js';\nimport '../toggle-button-option/toggle-button-option.js';\nimport '../../icons/icon-display-brilliance-low.js';\nimport '../../icons/icon-display-brilliance-proposal.js';\nimport '../../icons/icon-palette-night.js';\nimport '../../icons/icon-palette-dusk.js';\nimport '../../icons/icon-palette-day.js';\nimport '../../icons/icon-palette-day-bright.js';\nimport '../../icons/icon-link.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-screen-desk.js';\n\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport {\n  ObcToggleButtonOptionType,\n  ObcToggleButtonOptionVariant,\n} from '../toggle-button-option/toggle-button-option.js';\nimport {ObcSliderVariant} from '../slider/slider.js';\nimport {ObcToggleSwitch} from '../toggle-switch/toggle-switch.js';\nimport '../progress-indicator-dots/progress-indicator-dots.js';\nimport '../navigation-item/navigation-item.js';\nimport '../app-button/app-button.js';\nimport '../user-button/user-button.js';\nimport '../tabbed-card/tabbed-card.js';\nimport '../../icons/icon-display-brilliance-iec.js';\nimport '../../icons/icon-palette-day-night-iec.js';\n\nexport enum ObcPalette {\n  night = 'night',\n  dusk = 'dusk',\n  day = 'day',\n  bright = 'bright',\n}\n\nexport enum ObcBrillianceMenuVariant {\n  normal = 'normal',\n  compact = 'compact',\n  tabbed = 'tabbed',\n}\n\nexport enum ObcBrillianceInputVariant {\n  buttons = 'buttons',\n  slider = 'slider',\n}\n\nexport type ObcPaletteChangeEvent = CustomEvent<{value: ObcPalette}>;\nexport type ObcBrightnessChangeEvent = CustomEvent<{value: number}>;\nexport type ObcLinkPaletteChangeEvent = CustomEvent<{value: boolean}>;\nexport type ObcLinkBrightnessChangeEvent = CustomEvent<{value: boolean}>;\n\n/**\n * Event fired when the palette is changed.\n * @typedef {CustomEvent<{value: ObcPalette}>} ObcPaletteChangeEvent\n */\n\n/**\n * Event fired when the brightness is changed.\n * @typedef {CustomEvent<{value: number}>} ObcBrightnessChangeEvent\n */\n\n/**\n * `<obc-brilliance-menu>` – A settings menu component for adjusting display palette and brightness.\n *\n * Provides a combined interface for users to select a color palette (night, dusk, day, bright) and adjust screen brightness. Includes options for toggling automatic palette and brightness modes. Designed for quick access to visual environment controls in applications where adaptable display settings are important.\n *\n * ### Features\n * - **Palette Selection:** Choose between four preset palettes: night, dusk, day, and bright. Each palette is represented by an icon.\n * - **Brightness Control:** Adjustable slider for fine-tuning brightness from 0 to 100. Optionally displays left/right icons for low and high brilliance.\n * - **Auto Modes:** Optional toggles for enabling automatic palette switching and automatic brightness adjustment.\n * - **Configurable Visibility:** Brightness controls and auto toggles can be shown or hidden via properties.\n * - **Responsive Layout:** Arranged in a card-style panel for use in settings menus or overlays.\n *\n * ### Variants\n * - **Palette:** Four options—`night`, `dusk`, `day`, `bright`. Each is visually distinct and selectable via toggle button group.\n * - **Auto Toggles:** `showAutoBrightness` and `showAutoPalette` properties control the presence of auto mode switches.\n * - **Show Brightness:** The `showBrightness` property controls whether the brightness slider and auto brightness toggle are visible.\n *\n * ### Usage Guidelines\n * Use `obc-brilliance-menu` in settings panels or overlays where users need to quickly adjust display appearance. Ideal for scenarios requiring rapid adaptation to changing lighting conditions or user preferences.\n * **TODO(designer):** Confirm if there are recommended default palette/brightness settings, and clarify intended use cases for auto toggles versus manual controls.\n *\n * ### Properties and Configuration\n * - `palette` (`ObcPalette`): The currently selected palette. Accepts `'night'`, `'dusk'`, `'day'`, or `'bright'`. Defaults to `'day'`.\n * - `brightness` (`number`): Current brightness value (0–100). Defaults to `50`.\n * - `showAutoBrightness` (`boolean`): If true, displays the auto brightness toggle.\n * - `showAutoPalette` (`boolean`): If true, displays the auto palette toggle.\n * - `showBrightness` (`boolean`): If true, shows the brightness slider and auto brightness toggle.\n *\n * ### Events\n * - `palette-changed` – Fired when the user selects a new palette. Event detail: `{ value: ObcPalette }`\n * - `brightness-changed` – Fired when the brightness slider is adjusted. Event detail: `{ value: number }`\n *\n * ### Example\n * ```html\n * <obc-brilliance-menu\n *   palette=\"dusk\"\n *   brightness=\"75\"\n *   showAutoBrightness\n *   showAutoPalette\n * ></obc-brilliance-menu>\n * ```\n * In this example, both auto toggles are visible, the palette is set to dusk, and brightness is set to 75.\n *\n * @fires {ObcPaletteChangeEvent} palette-changed - When the palette is changed\n * @fires {ObcBrightnessChangeEvent} brightness-changed - When the brightness is changed\n * @fires {ObcLinkPaletteChangeEvent} link-palette-changed - When the link palette toggle is changed\n * @fires {ObcLinkBrightnessChangeEvent} link-brightness-changed - When the link brightness toggle is changed\n * @fires {CustomEvent} screen-control-link-clicked - When the screen control link is clicked\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n  /**\n   * The currently selected palette. Possible values: `'night'`, `'dusk'`, `'day'`, `'bright'`.\n   * Defaults to `'day'`.\n   */\n  @property({type: String}) palette: ObcPalette = ObcPalette.day;\n\n  /**\n   * The current brightness value (0–100). Defaults to `50`.\n   */\n  @property({type: Number}) brightness = 50;\n\n  /**\n   * If true, displays the link brightness toggle below the brightness slider.\n   */\n  @property({type: Boolean})\n  showLinkBrightness = false;\n\n  /**\n   * If true, displays the link palette toggle below the palette selector.\n   */\n  @property({type: Boolean}) showLinkPalette = false;\n\n  /**\n   * If true, shows the brightness slider and auto brightness toggle in the menu.\n   */\n  @property({type: Boolean, attribute: false}) showBrightness = true;\n\n  /**\n   * If true, shows the palette selector and link palette toggle in the menu.\n   */\n  @property({type: Boolean, attribute: false}) showPalette = true;\n\n  @property({type: Boolean, attribute: false}) showNightPalette = true;\n  @property({type: Boolean, attribute: false}) showDuskPalette = true;\n  @property({type: Boolean, attribute: false}) showDayPalette = true;\n  @property({type: Boolean, attribute: false}) showBrightPalette = true;\n\n  /**\n   * The variant of the menu. Possible values: `'normal'`, `'compact'`.\n   * Defaults to `'normal'`.\n   */\n  @property({type: String}) variant = ObcBrillianceMenuVariant.normal;\n\n  /**\n   * The unit of the brightness value.\n   */\n  @property({type: String}) brightnessUnit = '%';\n\n  /**\n   * The maximum value of the brightness slider.\n   */\n  @property({type: Number}) brightnessMax = 100;\n\n  /**\n   * The minor step of the brightness slider.\n   */\n  @property({type: Number}) brightnessMinorStep = 5;\n\n  /**\n   * The major step of the brightness slider.\n   */\n  @property({type: Number}) brightnessMajorStep = 25;\n\n  /**\n   * The variant of the brightness input.\n   */\n  @property({type: String}) brightnessInputVariant =\n    ObcBrillianceInputVariant.buttons;\n\n  /**\n   * If true, displays the screen control link.\n   */\n  @property({type: Boolean}) showScreenControlLink = false;\n\n  override willUpdate(_changed: Map<string, unknown>) {\n    if (this.showPalette) {\n      const available = this.availablePalettes;\n      if (available.length > 0 && !available.includes(this.palette)) {\n        this.palette = available[0];\n        this.dispatchEvent(\n          new CustomEvent('palette-changed', {\n            detail: {value: this.palette},\n          })\n        );\n      }\n    }\n  }\n\n  /**\n   * @fires palette-changed - Handles palette selection changes and emits `palette-changed`.\n   * @param {CustomEvent} event\n   */\n  onPaletteChanged(event: CustomEvent) {\n    this.palette = event.detail.value;\n    this.dispatchEvent(\n      new CustomEvent('palette-changed', {\n        detail: {value: event.detail.value},\n      })\n    );\n  }\n\n  /**\n   * @fires brightness-changed - Handles brightness slider changes and emits `brightness-changed`.\n   * @param {CustomEvent} event\n   */\n  handleBrightnessChanged(event: CustomEvent) {\n    this.brightness = event.detail;\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: event.detail},\n      })\n    );\n  }\n\n  increaseBrightness(step: number) {\n    this.brightness = Math.max(\n      0,\n      Math.min(this.brightness + step, this.brightnessMax)\n    );\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: this.brightness},\n      })\n    );\n  }\n\n  get canIncreaseBrightness() {\n    return this.brightness < this.brightnessMax;\n  }\n\n  get canDecreaseBrightness() {\n    return this.brightness > 0;\n  }\n\n  /**\n   * @fires link-palette-changed - Handles link palette changes and emits `link-palette-changed`.\n   * @param {CustomEvent} event\n   */\n  onLinkPaletteChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-palette-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  /**\n   * @fires link-brightness-changed - Handles link brightness changes and emits `link-brightness-changed`.\n   * @param {CustomEvent} event\n   */\n  onLinkBrightnessChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-brightness-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  get availablePalettes(): ObcPalette[] {\n    const palettes: ObcPalette[] = [];\n    if (this.showNightPalette) palettes.push(ObcPalette.night);\n    if (this.showDuskPalette) palettes.push(ObcPalette.dusk);\n    if (this.showDayPalette) palettes.push(ObcPalette.day);\n    if (this.showBrightPalette) palettes.push(ObcPalette.bright);\n    return palettes;\n  }\n\n  get canIncreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx >= 0 && idx < palettes.length - 1;\n  }\n\n  get canDecreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx > 0;\n  }\n\n  nextPalette() {\n    if (this.canIncreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx + 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  previousPalette() {\n    if (this.canDecreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx - 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  renderBrightness() {\n    const title =\n      this.variant === ObcBrillianceMenuVariant.tabbed\n        ? nothing\n        : html`<div class=\"title-container\">\n            <h3>${msg('Brilliance')}</h3>\n          </div>`;\n    const valueLength =\n      this.brightness.toString().length + 0.5 * this.brightnessUnit.length;\n\n    return html`${title}\n      <div class=\"content-container brilliance\">\n        ${this.variant === ObcBrillianceMenuVariant.compact\n          ? html` <obc-slider\n              value=${this.brightness}\n              @value=${this.handleBrightnessChanged}\n              min=\"0\"\n              max=${this.brightnessMax}\n              variant=${ObcSliderVariant.Normal}\n              haslefticon\n              hasrighticon\n            >\n              <obi-display-brilliance-low\n                slot=\"icon-left\"\n              ></obi-display-brilliance-low>\n              <obi-display-brilliance-proposal\n                slot=\"icon-right\"\n              ></obi-display-brilliance-proposal>\n            </obc-slider>`\n          : html`\n              <div class=\"value-container\">\n                <div class=\"value-label-container\">\n                  <obi-display-brilliance-proposal\n                    class=\"icon\"\n                  ></obi-display-brilliance-proposal>\n                  <div class=\"label-container\" style=\"width: ${valueLength}ch\">\n                    <div class=\"value\">${this.brightness.toFixed(0)}</div>\n                    <div class=\"unit\">${this.brightnessUnit}</div>\n                  </div>\n                </div>\n                <div class=\"value-slider-container\">\n                  ${this.brightnessInputVariant ===\n                  ObcBrillianceInputVariant.buttons\n                    ? html`\n                        <obc-slider\n                          value=${this.brightness}\n                          variant=${ObcSliderVariant.NoInput}\n                          min=\"0\"\n                          max=${this.brightnessMax}\n                        ></obc-slider>\n                      `\n                    : html`\n                        <obc-slider\n                          value=${this.brightness}\n                          variant=${ObcSliderVariant.Enhanced}\n                          @value=${this.handleBrightnessChanged}\n                          min=\"0\"\n                          max=${this.brightnessMax}\n                        ></obc-slider>\n                      `}\n                </div>\n              </div>\n              ${this.brightnessInputVariant ===\n              ObcBrillianceInputVariant.buttons\n                ? html`\n                    <div class=\"icon-button-container\">\n                      <obc-button\n                        segmentPosition=\"start\"\n                        fullWidth\n                        ?disabled=${!this.canDecreaseBrightness}\n                        class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(-this.brightnessMajorStep)}\n                      >\n                        <obi-chevron-double-left-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-double-left-google>\n                      </obc-button>\n                      <obc-button\n                        segmentPosition=\"middle\"\n                        fullWidth\n                        ?disabled=${!this.canDecreaseBrightness}\n                        class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(-this.brightnessMinorStep)}\n                      >\n                        <obi-chevron-left-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-left-google>\n                      </obc-button>\n                      <obc-button\n                        segmentPosition=\"middle\"\n                        fullWidth\n                        ?disabled=${!this.canIncreaseBrightness}\n                        class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(this.brightnessMinorStep)}\n                      >\n                        <obi-chevron-right-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-right-google>\n                      </obc-button>\n                      <obc-button\n                        segmentPosition=\"end\"\n                        fullWidth\n                        ?disabled=${!this.canIncreaseBrightness}\n                        class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(this.brightnessMajorStep)}\n                      >\n                        <obi-chevron-double-right-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-double-right-google>\n                      </obc-button>\n                    </div>\n                  `\n                : nothing}\n            `}\n        ${this.showLinkBrightness\n          ? html`<obc-toggle-switch\n              .label=\"${msg('Link')}\"\n              hasicon\n              @input=${this.onLinkBrightnessChanged}\n            >\n              <obi-link slot=\"icon\"></obi-link>\n            </obc-toggle-switch>`\n          : nothing}\n      </div>`;\n  }\n\n  get effectivePalette() {\n    const palettes = this.availablePalettes;\n    return palettes.includes(this.palette) ? this.palette : palettes[0];\n  }\n\n  get paletteIcon() {\n    if (this.effectivePalette === ObcPalette.night) {\n      return html`<obi-palette-night class=\"icon\"></obi-palette-night>`;\n    } else if (this.effectivePalette === ObcPalette.dusk) {\n      return html`<obi-palette-dusk class=\"icon\"></obi-palette-dusk>`;\n    } else if (this.effectivePalette === ObcPalette.day) {\n      return html`<obi-palette-day class=\"icon\"></obi-palette-day>`;\n    } else if (this.effectivePalette === ObcPalette.bright) {\n      return html`<obi-palette-day-bright\n        class=\"icon\"\n      ></obi-palette-day-bright>`;\n    } else {\n      return nothing;\n    }\n  }\n\n  private paletteOptions(): HTMLTemplateResult[] {\n    const out = [];\n    if (this.showNightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"night\" type=\"icon\">\n          <obi-palette-night slot=\"icon\"></obi-palette-night>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDuskPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"dusk\" type=\"icon\">\n          <obi-palette-dusk slot=\"icon\"></obi-palette-dusk>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDayPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"day\" type=\"icon\">\n          <obi-palette-day slot=\"icon\"></obi-palette-day>\n        </obc-toggle-button-option>`\n      );\n    if (this.showBrightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"bright\" type=\"icon\">\n          <obi-palette-day-bright slot=\"icon\"></obi-palette-day-bright>\n        </obc-toggle-button-option>`\n      );\n    return out;\n  }\n\n  renderPalette() {\n    const palettes = this.availablePalettes;\n    if (palettes.length === 0) return nothing;\n\n    const paletteNames: Record<ObcPalette, string> = {\n      [ObcPalette.night]: msg('Night'),\n      [ObcPalette.dusk]: msg('Dusk'),\n      [ObcPalette.day]: msg('Day'),\n      [ObcPalette.bright]: msg('Bright'),\n    };\n    const currentPaletteName = paletteNames[this.effectivePalette];\n    const valueLength = currentPaletteName.length;\n    const index = palettes.indexOf(this.effectivePalette);\n    const nextIndex = Math.min(index + 1, palettes.length - 1);\n    const previousIndex = Math.max(index - 1, 0);\n    const nextPalette = paletteNames[palettes[nextIndex]];\n    const previousPalette = paletteNames[palettes[previousIndex]];\n\n    return html`\n      ${this.variant === ObcBrillianceMenuVariant.tabbed\n        ? nothing\n        : html`\n            <div class=\"title-container\">\n              <h3>${msg('Day')}/${msg('Night')}</h3>\n            </div>\n          `}\n      <div\n        class=\"content-container palette ${this.showLinkPalette\n          ? 'with-link'\n          : 'without-link'}\"\n      >\n        ${this.variant === ObcBrillianceMenuVariant.compact\n          ? html` <obc-toggle-button-group\n              value=${this.effectivePalette}\n              @value=${this.onPaletteChanged}\n              variant=${ObcToggleButtonOptionVariant.regular}\n              type=${ObcToggleButtonOptionType.icon}\n            >\n              ${this.paletteOptions()}\n            </obc-toggle-button-group>`\n          : html`\n              <div class=\"value-container\">\n                <div class=\"value-label-container\">\n                  ${this.paletteIcon}\n                  <div class=\"label-container\" style=\"width: ${valueLength}ch\">\n                    <div class=\"value\">${currentPaletteName}</div>\n                  </div>\n                </div>\n                <obc-progress-indicator-dots\n                  .totalSteps=${palettes.length}\n                  .currentStep=${index + 1}\n                ></obc-progress-indicator-dots>\n              </div>\n              <div class=\"icon-button-container\">\n                <obc-button\n                  segmentPosition=\"start\"\n                  fullWidth\n                  showLeadingIcon\n                  ?disabled=${!this.canDecreasePalette}\n                  class=${this.canDecreasePalette ? '' : 'disabled'}\n                  @click=${() => this.previousPalette()}\n                >\n                  ${previousPalette}\n                  <obi-chevron-left-google\n                    slot=\"leading-icon\"\n                  ></obi-chevron-left-google>\n                </obc-button>\n\n                <obc-button\n                  segmentPosition=\"end\"\n                  fullWidth\n                  showTrailingIcon\n                  ?disabled=${!this.canIncreasePalette}\n                  class=${this.canIncreasePalette ? '' : 'disabled'}\n                  @click=${() => this.nextPalette()}\n                >\n                  ${nextPalette}\n                  <obi-chevron-right-google\n                    slot=\"trailing-icon\"\n                  ></obi-chevron-right-google>\n                </obc-button>\n              </div>\n            `}\n        ${this.showLinkPalette\n          ? html`<obc-toggle-switch\n              .label=\"${msg('Link')}\"\n              hasicon\n              @input=${this.onLinkPaletteChanged}\n            >\n              <obi-link slot=\"icon\"></obi-link>\n            </obc-toggle-switch>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  renderScreenControlLink() {\n    if (!this.showScreenControlLink) {\n      return nothing;\n    }\n    return html`\n      <div class=\"footer\">\n        <obc-navigation-item\n          .label=\"${msg('Screen Control')}\"\n          @click=${() => this.handleScreenControlLinkClicked()}\n          hasicon\n        >\n          <obc-user-button slot=\"icon\" static variant=\"icon\" styleType=\"normal\">\n            <obi-screen-desk slot=\"icon\"></obi-screen-desk>\n          </obc-user-button>\n        </obc-navigation-item>\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this.variant === ObcBrillianceMenuVariant.tabbed) {\n      return html`<obc-tabbed-card class=\"card\" nTabs=${2} hasTabIcons>\n        <span slot=\"tab-title-0\">${msg('Brilliance')}</span>\n        <obi-display-brilliance-iec\n          slot=\"tab-icon-0\"\n        ></obi-display-brilliance-iec>\n        <span slot=\"tab-title-1\">${msg('Day')}/${msg('Night')}</span>\n        <obi-palette-day-night-iec\n          slot=\"tab-icon-1\"\n        ></obi-palette-day-night-iec>\n        <div slot=\"tab-content-0\">\n          ${this.renderBrightness()} ${this.renderScreenControlLink()}\n        </div>\n        <div slot=\"tab-content-1\">\n          ${this.renderPalette()} ${this.renderScreenControlLink()}\n        </div>\n      </obc-tabbed-card>`;\n    } else {\n      return html`\n        <div class=\"card ${this.variant}\">\n          ${this.showBrightness ? this.renderBrightness() : nothing}\n          ${this.showBrightness && this.showPalette\n            ? html`<div class=\"divider\"></div>`\n            : nothing}\n          ${this.showPalette ? this.renderPalette() : nothing}\n          ${this.renderScreenControlLink()}\n        </div>\n      `;\n    }\n  }\n\n  handleScreenControlLinkClicked() {\n    this.dispatchEvent(new CustomEvent('screen-control-link-clicked'));\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-brilliance-menu': ObcBrillianceMenu;\n  }\n}\n"],"names":["ObcPalette","ObcBrillianceMenuVariant","ObcBrillianceInputVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,OAAA,IAAQ;AACRA,cAAA,MAAA,IAAO;AACPA,cAAA,KAAA,IAAM;AACNA,cAAA,QAAA,IAAS;AAJC,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAOL,IAAK,6CAAAC,8BAAL;AACLA,4BAAA,QAAA,IAAS;AACTA,4BAAA,SAAA,IAAU;AACVA,4BAAA,QAAA,IAAS;AAHC,SAAAA;AAAA,GAAA,4BAAA,CAAA,CAAA;AAML,IAAK,8CAAAC,+BAAL;AACLA,6BAAA,SAAA,IAAU;AACVA,6BAAA,QAAA,IAAS;AAFC,SAAAA;AAAA,GAAA,6BAAA,CAAA,CAAA;AA0EL,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKqB,SAAA,UAAsB;AAKtB,SAAA,aAAa;AAMvC,SAAA,qBAAqB;AAKM,SAAA,kBAAkB;AAKA,SAAA,iBAAiB;AAKjB,SAAA,cAAc;AAEd,SAAA,mBAAmB;AACnB,SAAA,kBAAkB;AAClB,SAAA,iBAAiB;AACjB,SAAA,oBAAoB;AAMvC,SAAA,UAAU;AAKV,SAAA,iBAAiB;AAKjB,SAAA,gBAAgB;AAKhB,SAAA,sBAAsB;AAKtB,SAAA,sBAAsB;AAKtB,SAAA,yBACxB;AAKyB,SAAA,wBAAwB;AAAA,EAAA;AAAA,EAE1C,WAAW,UAAgC;AAClD,QAAI,KAAK,aAAa;AACpB,YAAM,YAAY,KAAK;AACvB,UAAI,UAAU,SAAS,KAAK,CAAC,UAAU,SAAS,KAAK,OAAO,GAAG;AAC7D,aAAK,UAAU,UAAU,CAAC;AAC1B,aAAK;AAAA,UACH,IAAI,YAAY,mBAAmB;AAAA,YACjC,QAAQ,EAAC,OAAO,KAAK,QAAA;AAAA,UAAO,CAC7B;AAAA,QAAA;AAAA,MAEL;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB,OAAoB;AACnC,SAAK,UAAU,MAAM,OAAO;AAC5B,SAAK;AAAA,MACH,IAAI,YAAY,mBAAmB;AAAA,QACjC,QAAQ,EAAC,OAAO,MAAM,OAAO,MAAA;AAAA,MAAK,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,wBAAwB,OAAoB;AAC1C,SAAK,aAAa,MAAM;AACxB,SAAK;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ,EAAC,OAAO,MAAM,OAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,mBAAmB,MAAc;AAC/B,SAAK,aAAa,KAAK;AAAA,MACrB;AAAA,MACA,KAAK,IAAI,KAAK,aAAa,MAAM,KAAK,aAAa;AAAA,IAAA;AAErD,SAAK;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ,EAAC,OAAO,KAAK,WAAA;AAAA,MAAU,CAChC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,IAAI,wBAAwB;AAC1B,WAAO,KAAK,aAAa,KAAK;AAAA,EAChC;AAAA,EAEA,IAAI,wBAAwB;AAC1B,WAAO,KAAK,aAAa;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,qBAAqB,OAAoB;AACvC,SAAK;AAAA,MACH,IAAI,YAAY,wBAAwB;AAAA,QACtC,QAAQ,EAAC,OAAQ,MAAM,OAA2B,QAAA;AAAA,MAAO,CAC1D;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,wBAAwB,OAAoB;AAC1C,SAAK;AAAA,MACH,IAAI,YAAY,2BAA2B;AAAA,QACzC,QAAQ,EAAC,OAAQ,MAAM,OAA2B,QAAA;AAAA,MAAO,CAC1D;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,IAAI,oBAAkC;AACpC,UAAM,WAAyB,CAAA;AAC/B,QAAI,KAAK,iBAAkB,UAAS;AAAA,MAAK;AAAA;AAAA,IAAA;AACzC,QAAI,KAAK,gBAAiB,UAAS;AAAA,MAAK;AAAA;AAAA,IAAA;AACxC,QAAI,KAAK,eAAgB,UAAS;AAAA,MAAK;AAAA;AAAA,IAAA;AACvC,QAAI,KAAK,kBAAmB,UAAS;AAAA,MAAK;AAAA;AAAA,IAAA;AAC1C,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,qBAAqB;AACvB,UAAM,WAAW,KAAK;AACtB,UAAM,MAAM,SAAS,QAAQ,KAAK,OAAO;AACzC,WAAO,OAAO,KAAK,MAAM,SAAS,SAAS;AAAA,EAC7C;AAAA,EAEA,IAAI,qBAAqB;AACvB,UAAM,WAAW,KAAK;AACtB,UAAM,MAAM,SAAS,QAAQ,KAAK,OAAO;AACzC,WAAO,MAAM;AAAA,EACf;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,oBAAoB;AAC3B,YAAM,WAAW,KAAK;AACtB,YAAM,MAAM,SAAS,QAAQ,KAAK,OAAO;AACzC,WAAK,UAAU,SAAS,MAAM,CAAC;AAC/B,WAAK;AAAA,QACH,IAAI,YAAY,mBAAmB;AAAA,UACjC,QAAQ,EAAC,OAAO,KAAK,QAAA;AAAA,QAAO,CAC7B;AAAA,MAAA;AAAA,IAEL;AAAA,EACF;AAAA,EAEA,kBAAkB;AAChB,QAAI,KAAK,oBAAoB;AAC3B,YAAM,WAAW,KAAK;AACtB,YAAM,MAAM,SAAS,QAAQ,KAAK,OAAO;AACzC,WAAK,UAAU,SAAS,MAAM,CAAC;AAC/B,WAAK;AAAA,QACH,IAAI,YAAY,mBAAmB;AAAA,UACjC,QAAQ,EAAC,OAAO,KAAK,QAAA;AAAA,QAAO,CAC7B;AAAA,MAAA;AAAA,IAEL;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,UAAM,QACJ,KAAK,YAAY,WACb,UACA;AAAA,kBACQ,IAAI,YAAY,CAAC;AAAA;AAE/B,UAAM,cACJ,KAAK,WAAW,SAAA,EAAW,SAAS,MAAM,KAAK,eAAe;AAEhE,WAAO,OAAO,KAAK;AAAA;AAAA,UAEb,KAAK,YAAY,YACf;AAAA,sBACU,KAAK,UAAU;AAAA,uBACd,KAAK,uBAAuB;AAAA;AAAA,oBAE/B,KAAK,aAAa;AAAA,wBACd,iBAAiB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAWnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAMmD,WAAW;AAAA,yCACjC,KAAK,WAAW,QAAQ,CAAC,CAAC;AAAA,wCAC3B,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA,oBAIvC,KAAK,2BACP,YACI;AAAA;AAAA,kCAEY,KAAK,UAAU;AAAA,oCACb,iBAAiB,OAAO;AAAA;AAAA,gCAE5B,KAAK,aAAa;AAAA;AAAA,0BAG5B;AAAA;AAAA,kCAEY,KAAK,UAAU;AAAA,oCACb,iBAAiB,QAAQ;AAAA,mCAC1B,KAAK,uBAAuB;AAAA;AAAA,gCAE/B,KAAK,aAAa;AAAA;AAAA,uBAE3B;AAAA;AAAA;AAAA,gBAGP,KAAK,2BACP,YACI;AAAA;AAAA;AAAA;AAAA;AAAA,oCAKkB,CAAC,KAAK,qBAAqB;AAAA,gCAC/B,KAAK,wBAAwB,KAAK,UAAU;AAAA,iCAC3C,MACP,KAAK,mBAAmB,CAAC,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCASxC,CAAC,KAAK,qBAAqB;AAAA,gCAC/B,KAAK,wBAAwB,KAAK,UAAU;AAAA,iCAC3C,MACP,KAAK,mBAAmB,CAAC,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCASxC,CAAC,KAAK,qBAAqB;AAAA,gCAC/B,KAAK,wBAAwB,KAAK,UAAU;AAAA,iCAC3C,MACP,KAAK,mBAAmB,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCASvC,CAAC,KAAK,qBAAqB;AAAA,gCAC/B,KAAK,wBAAwB,KAAK,UAAU;AAAA,iCAC3C,MACP,KAAK,mBAAmB,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQzD,OAAO;AAAA,aACZ;AAAA,UACH,KAAK,qBACH;AAAA,wBACY,IAAI,MAAM,CAAC;AAAA;AAAA,uBAEZ,KAAK,uBAAuB;AAAA;AAAA;AAAA,oCAIvC,OAAO;AAAA;AAAA,EAEjB;AAAA,EAEA,IAAI,mBAAmB;AACrB,UAAM,WAAW,KAAK;AACtB,WAAO,SAAS,SAAS,KAAK,OAAO,IAAI,KAAK,UAAU,SAAS,CAAC;AAAA,EACpE;AAAA,EAEA,IAAI,cAAc;AAChB,QAAI,KAAK,qBAAqB,SAAkB;AAC9C,aAAO;AAAA,IACT,WAAW,KAAK,qBAAqB,QAAiB;AACpD,aAAO;AAAA,IACT,WAAW,KAAK,qBAAqB,OAAgB;AACnD,aAAO;AAAA,IACT,WAAW,KAAK,qBAAqB,UAAmB;AACtD,aAAO;AAAA;AAAA;AAAA,IAGT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEQ,iBAAuC;AAC7C,UAAM,MAAM,CAAA;AACZ,QAAI,KAAK;AACP,UAAI;AAAA,QACF;AAAA;AAAA;AAAA,MAAA;AAIJ,QAAI,KAAK;AACP,UAAI;AAAA,QACF;AAAA;AAAA;AAAA,MAAA;AAIJ,QAAI,KAAK;AACP,UAAI;AAAA,QACF;AAAA;AAAA;AAAA,MAAA;AAIJ,QAAI,KAAK;AACP,UAAI;AAAA,QACF;AAAA;AAAA;AAAA,MAAA;AAIJ,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB;AACd,UAAM,WAAW,KAAK;AACtB,QAAI,SAAS,WAAW,EAAG,QAAO;AAElC,UAAM,eAA2C;AAAA,MAC/C;AAAA,QAAC;AAAA;AAAA,MAAA,GAAmB,IAAI,OAAO;AAAA,MAC/B;AAAA,QAAC;AAAA;AAAA,MAAA,GAAkB,IAAI,MAAM;AAAA,MAC7B;AAAA,QAAC;AAAA;AAAA,MAAA,GAAiB,IAAI,KAAK;AAAA,MAC3B;AAAA,QAAC;AAAA;AAAA,MAAA,GAAoB,IAAI,QAAQ;AAAA,IAAA;AAEnC,UAAM,qBAAqB,aAAa,KAAK,gBAAgB;AAC7D,UAAM,cAAc,mBAAmB;AACvC,UAAM,QAAQ,SAAS,QAAQ,KAAK,gBAAgB;AACpD,UAAM,YAAY,KAAK,IAAI,QAAQ,GAAG,SAAS,SAAS,CAAC;AACzD,UAAM,gBAAgB,KAAK,IAAI,QAAQ,GAAG,CAAC;AAC3C,UAAM,cAAc,aAAa,SAAS,SAAS,CAAC;AACpD,UAAM,kBAAkB,aAAa,SAAS,aAAa,CAAC;AAE5D,WAAO;AAAA,QACH,KAAK,YAAY,WACf,UACA;AAAA;AAAA,oBAEU,IAAI,KAAK,CAAC,IAAI,IAAI,OAAO,CAAC;AAAA;AAAA,WAEnC;AAAA;AAAA,2CAEgC,KAAK,kBACpC,cACA,cAAc;AAAA;AAAA,UAEhB,KAAK,YAAY,YACf;AAAA,sBACU,KAAK,gBAAgB;AAAA,uBACpB,KAAK,gBAAgB;AAAA,wBACpB,6BAA6B,OAAO;AAAA,qBACvC,0BAA0B,IAAI;AAAA;AAAA,gBAEnC,KAAK,gBAAgB;AAAA,0CAEzB;AAAA;AAAA;AAAA,oBAGQ,KAAK,WAAW;AAAA,+DAC2B,WAAW;AAAA,yCACjC,kBAAkB;AAAA;AAAA;AAAA;AAAA,gCAI3B,SAAS,MAAM;AAAA,iCACd,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAQZ,CAAC,KAAK,kBAAkB;AAAA,0BAC5B,KAAK,qBAAqB,KAAK,UAAU;AAAA,2BACxC,MAAM,KAAK,gBAAA,CAAiB;AAAA;AAAA,oBAEnC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAUL,CAAC,KAAK,kBAAkB;AAAA,0BAC5B,KAAK,qBAAqB,KAAK,UAAU;AAAA,2BACxC,MAAM,KAAK,YAAA,CAAa;AAAA;AAAA,oBAE/B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMlB;AAAA,UACH,KAAK,kBACH;AAAA,wBACY,IAAI,MAAM,CAAC;AAAA;AAAA,uBAEZ,KAAK,oBAAoB;AAAA;AAAA;AAAA,oCAIpC,OAAO;AAAA;AAAA;AAAA,EAGjB;AAAA,EAEA,0BAA0B;AACxB,QAAI,CAAC,KAAK,uBAAuB;AAC/B,aAAO;AAAA,IACT;AACA,WAAO;AAAA;AAAA;AAAA,oBAGS,IAAI,gBAAgB,CAAC;AAAA,mBACtB,MAAM,KAAK,+BAAA,CAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D;AAAA,EAES,SAAS;AAChB,QAAI,KAAK,YAAY,UAAiC;AACpD,aAAO,2CAA2C,CAAC;AAAA,mCACtB,IAAI,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA,mCAIjB,IAAI,KAAK,CAAC,IAAI,IAAI,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKjD,KAAK,iBAAA,CAAkB,IAAI,KAAK,yBAAyB;AAAA;AAAA;AAAA,YAGzD,KAAK,cAAA,CAAe,IAAI,KAAK,yBAAyB;AAAA;AAAA;AAAA,IAG9D,OAAO;AACL,aAAO;AAAA,2BACc,KAAK,OAAO;AAAA,YAC3B,KAAK,iBAAiB,KAAK,iBAAA,IAAqB,OAAO;AAAA,YACvD,KAAK,kBAAkB,KAAK,cAC1B,oCACA,OAAO;AAAA,YACT,KAAK,cAAc,KAAK,cAAA,IAAkB,OAAO;AAAA,YACjD,KAAK,yBAAyB;AAAA;AAAA;AAAA,IAGtC;AAAA,EACF;AAAA,EAEA,iCAAiC;AAC/B,SAAK,cAAc,IAAI,YAAY,6BAA6B,CAAC;AAAA,EACnE;AAGF;AA1hBa,kBAyhBK,SAAS,UAAU,cAAc;AAphBvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,kBAKe,WAAA,WAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,kBAUe,WAAA,cAAA,CAAA;AAM1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAfd,kBAgBX,WAAA,sBAAA,CAAA;AAK2B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArBd,kBAqBgB,WAAA,mBAAA,CAAA;AAKkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GA1BhC,kBA0BkC,WAAA,kBAAA,CAAA;AAKA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GA/BhC,kBA+BkC,WAAA,eAAA,CAAA;AAEA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAjChC,kBAiCkC,WAAA,oBAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAlChC,kBAkCkC,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAnChC,kBAmCkC,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GApChC,kBAoCkC,WAAA,qBAAA,CAAA;AAMnB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Cb,kBA0Ce,WAAA,WAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA/Cb,kBA+Ce,WAAA,kBAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApDb,kBAoDe,WAAA,iBAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzDb,kBAyDe,WAAA,uBAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA9Db,kBA8De,WAAA,uBAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAnEb,kBAmEe,WAAA,0BAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAzEd,kBAyEgB,WAAA,yBAAA,CAAA;AAzEhB,oBAAN,gBAAA;AAAA,EALN,UAAA;AAAA,EAIA,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
+{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../button/button.js';\nimport '../slider/slider.js';\nimport '../toggle-switch/toggle-switch.js';\nimport '../toggle-button-group/toggle-button-group.js';\nimport '../toggle-button-option/toggle-button-option.js';\nimport '../../icons/icon-display-brilliance-low.js';\nimport '../../icons/icon-display-brilliance-proposal.js';\nimport '../../icons/icon-palette-night.js';\nimport '../../icons/icon-palette-dusk.js';\nimport '../../icons/icon-palette-day.js';\nimport '../../icons/icon-palette-day-bright.js';\nimport '../../icons/icon-link.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-screen-desk.js';\n\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport {\n  ObcToggleButtonOptionType,\n  ObcToggleButtonOptionVariant,\n} from '../toggle-button-option/toggle-button-option.js';\nimport {ObcSliderVariant} from '../slider/slider.js';\nimport {ObcToggleSwitch} from '../toggle-switch/toggle-switch.js';\nimport '../progress-indicator-dots/progress-indicator-dots.js';\nimport '../navigation-item/navigation-item.js';\nimport '../app-button/app-button.js';\nimport '../user-button/user-button.js';\nimport '../tabbed-card/tabbed-card.js';\nimport '../../icons/icon-display-brilliance-iec.js';\nimport '../../icons/icon-palette-day-night-iec.js';\n\nexport enum ObcPalette {\n  night = 'night',\n  dusk = 'dusk',\n  day = 'day',\n  bright = 'bright',\n}\n\nexport enum ObcBrillianceMenuVariant {\n  normal = 'normal',\n  compact = 'compact',\n  tabbed = 'tabbed',\n}\n\nexport enum ObcBrillianceInputVariant {\n  buttons = 'buttons',\n  slider = 'slider',\n}\n\nexport type ObcPaletteChangeEvent = CustomEvent<{value: ObcPalette}>;\nexport type ObcBrightnessChangeEvent = CustomEvent<{value: number}>;\nexport type ObcLinkPaletteChangeEvent = CustomEvent<{value: boolean}>;\nexport type ObcLinkBrightnessChangeEvent = CustomEvent<{value: boolean}>;\n\n/**\n * Event fired when the palette is changed.\n * @typedef {CustomEvent<{value: ObcPalette}>} ObcPaletteChangeEvent\n */\n\n/**\n * Event fired when the brightness is changed.\n * @typedef {CustomEvent<{value: number}>} ObcBrightnessChangeEvent\n */\n\n/**\n * `<obc-brilliance-menu>` – A settings menu component for adjusting display palette and brightness.\n *\n * Provides a combined interface for users to select a color palette (night, dusk, day, bright) and adjust screen brightness. Includes options for toggling automatic palette and brightness modes. Designed for quick access to visual environment controls in applications where adaptable display settings are important.\n *\n * ### Features\n * - **Palette Selection:** Choose between four preset palettes: night, dusk, day, and bright. Each palette is represented by an icon.\n * - **Brightness Control:** Adjustable slider for fine-tuning brightness from 0 to 100. Optionally displays left/right icons for low and high brilliance.\n * - **Auto Modes:** Optional toggles for enabling automatic palette switching and automatic brightness adjustment.\n * - **Configurable Visibility:** Brightness controls and auto toggles can be shown or hidden via properties.\n * - **Responsive Layout:** Arranged in a card-style panel for use in settings menus or overlays.\n *\n * ### Variants\n * - **Palette:** Four options—`night`, `dusk`, `day`, `bright`. Each is visually distinct and selectable via toggle button group.\n * - **Auto Toggles:** `showAutoBrightness` and `showAutoPalette` properties control the presence of auto mode switches.\n * - **Show Brightness:** The `showBrightness` property controls whether the brightness slider and auto brightness toggle are visible.\n *\n * ### Usage Guidelines\n * Use `obc-brilliance-menu` in settings panels or overlays where users need to quickly adjust display appearance. Ideal for scenarios requiring rapid adaptation to changing lighting conditions or user preferences.\n * **TODO(designer):** Confirm if there are recommended default palette/brightness settings, and clarify intended use cases for auto toggles versus manual controls.\n *\n * ### Properties and Configuration\n * - `palette` (`ObcPalette`): The currently selected palette. Accepts `'night'`, `'dusk'`, `'day'`, or `'bright'`. Defaults to `'day'`.\n * - `brightness` (`number`): Current brightness value (0–100). Defaults to `50`.\n * - `showAutoBrightness` (`boolean`): If true, displays the auto brightness toggle.\n * - `showAutoPalette` (`boolean`): If true, displays the auto palette toggle.\n * - `showBrightness` (`boolean`): If true, shows the brightness slider and auto brightness toggle.\n *\n * ### Events\n * - `palette-changed` – Fired when the user selects a new palette. Event detail: `{ value: ObcPalette }`\n * - `brightness-changed` – Fired when the brightness slider is adjusted. Event detail: `{ value: number }`\n *\n * ### Example\n * ```html\n * <obc-brilliance-menu\n *   palette=\"dusk\"\n *   brightness=\"75\"\n *   showAutoBrightness\n *   showAutoPalette\n * ></obc-brilliance-menu>\n * ```\n * In this example, both auto toggles are visible, the palette is set to dusk, and brightness is set to 75.\n *\n * @fires {ObcPaletteChangeEvent} palette-changed - When the palette is changed\n * @fires {ObcBrightnessChangeEvent} brightness-changed - When the brightness is changed\n * @fires {ObcLinkPaletteChangeEvent} link-palette-changed - When the link palette toggle is changed\n * @fires {ObcLinkBrightnessChangeEvent} link-brightness-changed - When the link brightness toggle is changed\n * @fires {CustomEvent} screen-control-link-clicked - When the screen control link is clicked\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n  /**\n   * The currently selected palette. Possible values: `'night'`, `'dusk'`, `'day'`, `'bright'`.\n   * Defaults to `'day'`.\n   */\n  @property({type: String}) palette: ObcPalette = ObcPalette.day;\n\n  /**\n   * The current brightness value (0–100). Defaults to `50`.\n   */\n  @property({type: Number}) brightness = 50;\n\n  /**\n   * If true, displays the link brightness toggle below the brightness slider.\n   */\n  @property({type: Boolean})\n  showLinkBrightness = false;\n\n  /**\n   * If true, displays the link palette toggle below the palette selector.\n   */\n  @property({type: Boolean}) showLinkPalette = false;\n\n  /**\n   * If true, shows the brightness slider and auto brightness toggle in the menu.\n   */\n  @property({type: Boolean, attribute: false}) showBrightness = true;\n\n  /**\n   * If true, shows the palette selector and link palette toggle in the menu.\n   */\n  @property({type: Boolean, attribute: false}) showPalette = true;\n\n  @property({type: Boolean, attribute: false}) showNightPalette = true;\n  @property({type: Boolean, attribute: false}) showDuskPalette = true;\n  @property({type: Boolean, attribute: false}) showDayPalette = true;\n  @property({type: Boolean, attribute: false}) showBrightPalette = true;\n\n  /**\n   * The variant of the menu. Possible values: `'normal'`, `'compact'`.\n   * Defaults to `'normal'`.\n   */\n  @property({type: String}) variant = ObcBrillianceMenuVariant.normal;\n\n  /**\n   * The unit of the brightness value.\n   */\n  @property({type: String}) brightnessUnit = '%';\n\n  /**\n   * The maximum value of the brightness slider.\n   */\n  @property({type: Number}) brightnessMax = 100;\n\n  /**\n   * The minor step of the brightness slider.\n   */\n  @property({type: Number}) brightnessMinorStep = 5;\n\n  /**\n   * The major step of the brightness slider.\n   */\n  @property({type: Number}) brightnessMajorStep = 25;\n\n  /**\n   * The variant of the brightness input.\n   */\n  @property({type: String}) brightnessInputVariant =\n    ObcBrillianceInputVariant.buttons;\n\n  /**\n   * If true, displays the screen control link.\n   */\n  @property({type: Boolean}) showScreenControlLink = false;\n\n  override willUpdate(_changed: Map<string, unknown>) {\n    if (this.showPalette) {\n      const available = this.availablePalettes;\n      if (available.length > 0 && !available.includes(this.palette)) {\n        this.palette = available[0];\n        this.dispatchEvent(\n          new CustomEvent('palette-changed', {\n            detail: {value: this.palette},\n          })\n        );\n      }\n    }\n  }\n\n  /**\n   * Handles palette selection changes and emits `palette-changed`.\n   * @fires palette-changed\n   * @param {CustomEvent} event\n   */\n  onPaletteChanged(event: CustomEvent) {\n    this.palette = event.detail.value;\n    this.dispatchEvent(\n      new CustomEvent('palette-changed', {\n        detail: {value: event.detail.value},\n      })\n    );\n  }\n\n  /**\n   * Handles brightness slider changes and emits `brightness-changed`.\n   * @fires brightness-changed\n   * @param {CustomEvent} event\n   */\n  handleBrightnessChanged(event: CustomEvent) {\n    this.brightness = event.detail;\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: event.detail},\n      })\n    );\n  }\n\n  increaseBrightness(step: number) {\n    this.brightness = Math.max(\n      0,\n      Math.min(this.brightness + step, this.brightnessMax)\n    );\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: this.brightness},\n      })\n    );\n  }\n\n  get canIncreaseBrightness() {\n    return this.brightness < this.brightnessMax;\n  }\n\n  get canDecreaseBrightness() {\n    return this.brightness > 0;\n  }\n\n  /**\n   * Handles link palette changes and emits `link-palette-changed`.\n   * @fires link-palette-changed\n   * @param {CustomEvent} event\n   */\n  onLinkPaletteChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-palette-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  /**\n   * Handles link brightness changes and emits `link-brightness-changed`.\n   * @fires link-brightness-changed\n   * @param {CustomEvent} event\n   */\n  onLinkBrightnessChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-brightness-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  get availablePalettes(): ObcPalette[] {\n    const palettes: ObcPalette[] = [];\n    if (this.showNightPalette) palettes.push(ObcPalette.night);\n    if (this.showDuskPalette) palettes.push(ObcPalette.dusk);\n    if (this.showDayPalette) palettes.push(ObcPalette.day);\n    if (this.showBrightPalette) palettes.push(ObcPalette.bright);\n    return palettes;\n  }\n\n  get canIncreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx >= 0 && idx < palettes.length - 1;\n  }\n\n  get canDecreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx > 0;\n  }\n\n  nextPalette() {\n    if (this.canIncreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx + 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  previousPalette() {\n    if (this.canDecreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx - 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  renderBrightness() {\n    const title =\n      this.variant === ObcBrillianceMenuVariant.tabbed\n        ? nothing\n        : html`<div class=\"title-container\">\n            <h3>${msg('Brilliance')}</h3>\n          </div>`;\n    const valueLength =\n      this.brightness.toString().length + 0.5 * this.brightnessUnit.length;\n\n    return html`${title}\n      <div class=\"content-container brilliance\">\n        ${this.variant === ObcBrillianceMenuVariant.compact\n          ? html` <obc-slider\n              value=${this.brightness}\n              @value=${this.handleBrightnessChanged}\n              min=\"0\"\n              max=${this.brightnessMax}\n              variant=${ObcSliderVariant.Normal}\n              haslefticon\n              hasrighticon\n            >\n              <obi-display-brilliance-low\n                slot=\"icon-left\"\n              ></obi-display-brilliance-low>\n              <obi-display-brilliance-proposal\n                slot=\"icon-right\"\n              ></obi-display-brilliance-proposal>\n            </obc-slider>`\n          : html`\n              <div class=\"value-container\">\n                <div class=\"value-label-container\">\n                  <obi-display-brilliance-proposal\n                    class=\"icon\"\n                  ></obi-display-brilliance-proposal>\n                  <div class=\"label-container\" style=\"width: ${valueLength}ch\">\n                    <div class=\"value\">${this.brightness.toFixed(0)}</div>\n                    <div class=\"unit\">${this.brightnessUnit}</div>\n                  </div>\n                </div>\n                <div class=\"value-slider-container\">\n                  ${this.brightnessInputVariant ===\n                  ObcBrillianceInputVariant.buttons\n                    ? html`\n                        <obc-slider\n                          value=${this.brightness}\n                          variant=${ObcSliderVariant.NoInput}\n                          min=\"0\"\n                          max=${this.brightnessMax}\n                        ></obc-slider>\n                      `\n                    : html`\n                        <obc-slider\n                          value=${this.brightness}\n                          variant=${ObcSliderVariant.Enhanced}\n                          @value=${this.handleBrightnessChanged}\n                          min=\"0\"\n                          max=${this.brightnessMax}\n                        ></obc-slider>\n                      `}\n                </div>\n              </div>\n              ${this.brightnessInputVariant ===\n              ObcBrillianceInputVariant.buttons\n                ? html`\n                    <div class=\"icon-button-container\">\n                      <obc-button\n                        segmentPosition=\"start\"\n                        fullWidth\n                        ?disabled=${!this.canDecreaseBrightness}\n                        class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(-this.brightnessMajorStep)}\n                      >\n                        <obi-chevron-double-left-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-double-left-google>\n                      </obc-button>\n                      <obc-button\n                        segmentPosition=\"middle\"\n                        fullWidth\n                        ?disabled=${!this.canDecreaseBrightness}\n                        class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(-this.brightnessMinorStep)}\n                      >\n                        <obi-chevron-left-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-left-google>\n                      </obc-button>\n                      <obc-button\n                        segmentPosition=\"middle\"\n                        fullWidth\n                        ?disabled=${!this.canIncreaseBrightness}\n                        class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(this.brightnessMinorStep)}\n                      >\n                        <obi-chevron-right-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-right-google>\n                      </obc-button>\n                      <obc-button\n                        segmentPosition=\"end\"\n                        fullWidth\n                        ?disabled=${!this.canIncreaseBrightness}\n                        class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                        @click=${() =>\n                          this.increaseBrightness(this.brightnessMajorStep)}\n                      >\n                        <obi-chevron-double-right-google\n                          class=\"btn-icon\"\n                        ></obi-chevron-double-right-google>\n                      </obc-button>\n                    </div>\n                  `\n                : nothing}\n            `}\n        ${this.showLinkBrightness\n          ? html`<obc-toggle-switch\n              .label=\"${msg('Link')}\"\n              hasicon\n              @input=${this.onLinkBrightnessChanged}\n            >\n              <obi-link slot=\"icon\"></obi-link>\n            </obc-toggle-switch>`\n          : nothing}\n      </div>`;\n  }\n\n  get effectivePalette() {\n    const palettes = this.availablePalettes;\n    return palettes.includes(this.palette) ? this.palette : palettes[0];\n  }\n\n  get paletteIcon() {\n    if (this.effectivePalette === ObcPalette.night) {\n      return html`<obi-palette-night class=\"icon\"></obi-palette-night>`;\n    } else if (this.effectivePalette === ObcPalette.dusk) {\n      return html`<obi-palette-dusk class=\"icon\"></obi-palette-dusk>`;\n    } else if (this.effectivePalette === ObcPalette.day) {\n      return html`<obi-palette-day class=\"icon\"></obi-palette-day>`;\n    } else if (this.effectivePalette === ObcPalette.bright) {\n      return html`<obi-palette-day-bright\n        class=\"icon\"\n      ></obi-palette-day-bright>`;\n    } else {\n      return nothing;\n    }\n  }\n\n  private paletteOptions(): HTMLTemplateResult[] {\n    const out = [];\n    if (this.showNightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"night\" type=\"icon\">\n          <obi-palette-night slot=\"icon\"></obi-palette-night>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDuskPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"dusk\" type=\"icon\">\n          <obi-palette-dusk slot=\"icon\"></obi-palette-dusk>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDayPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"day\" type=\"icon\">\n          <obi-palette-day slot=\"icon\"></obi-palette-day>\n        </obc-toggle-button-option>`\n      );\n    if (this.showBrightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"bright\" type=\"icon\">\n          <obi-palette-day-bright slot=\"icon\"></obi-palette-day-bright>\n        </obc-toggle-button-option>`\n      );\n    return out;\n  }\n\n  renderPalette() {\n    const palettes = this.availablePalettes;\n    if (palettes.length === 0) return nothing;\n\n    const paletteNames: Record<ObcPalette, string> = {\n      [ObcPalette.night]: msg('Night'),\n      [ObcPalette.dusk]: msg('Dusk'),\n      [ObcPalette.day]: msg('Day'),\n      [ObcPalette.bright]: msg('Bright'),\n    };\n    const currentPaletteName = paletteNames[this.effectivePalette];\n    const valueLength = currentPaletteName.length;\n    const index = palettes.indexOf(this.effectivePalette);\n    const nextIndex = Math.min(index + 1, palettes.length - 1);\n    const previousIndex = Math.max(index - 1, 0);\n    const nextPalette = paletteNames[palettes[nextIndex]];\n    const previousPalette = paletteNames[palettes[previousIndex]];\n\n    return html`\n      ${this.variant === ObcBrillianceMenuVariant.tabbed\n        ? nothing\n        : html`\n            <div class=\"title-container\">\n              <h3>${msg('Day')}/${msg('Night')}</h3>\n            </div>\n          `}\n      <div\n        class=\"content-container palette ${this.showLinkPalette\n          ? 'with-link'\n          : 'without-link'}\"\n      >\n        ${this.variant === ObcBrillianceMenuVariant.compact\n          ? html` <obc-toggle-button-group\n              value=${this.effectivePalette}\n              @value=${this.onPaletteChanged}\n              variant=${ObcToggleButtonOptionVariant.regular}\n              type=${ObcToggleButtonOptionType.icon}\n            >\n              ${this.paletteOptions()}\n            </obc-toggle-button-group>`\n          : html`\n              <div class=\"value-container\">\n                <div class=\"value-label-container\">\n                  ${this.paletteIcon}\n                  <div class=\"label-container\" style=\"width: ${valueLength}ch\">\n                    <div class=\"value\">${currentPaletteName}</div>\n                  </div>\n                </div>\n                <obc-progress-indicator-dots\n                  .totalSteps=${palettes.length}\n                  .currentStep=${index + 1}\n                ></obc-progress-indicator-dots>\n              </div>\n              <div class=\"icon-button-container\">\n                <obc-button\n                  segmentPosition=\"start\"\n                  fullWidth\n                  showLeadingIcon\n                  ?disabled=${!this.canDecreasePalette}\n                  class=${this.canDecreasePalette ? '' : 'disabled'}\n                  @click=${() => this.previousPalette()}\n                >\n                  ${previousPalette}\n                  <obi-chevron-left-google\n                    slot=\"leading-icon\"\n                  ></obi-chevron-left-google>\n                </obc-button>\n\n                <obc-button\n                  segmentPosition=\"end\"\n                  fullWidth\n                  showTrailingIcon\n                  ?disabled=${!this.canIncreasePalette}\n                  class=${this.canIncreasePalette ? '' : 'disabled'}\n                  @click=${() => this.nextPalette()}\n                >\n                  ${nextPalette}\n                  <obi-chevron-right-google\n                    slot=\"trailing-icon\"\n                  ></obi-chevron-right-google>\n                </obc-button>\n              </div>\n            `}\n        ${this.showLinkPalette\n          ? html`<obc-toggle-switch\n              .label=\"${msg('Link')}\"\n              hasicon\n              @input=${this.onLinkPaletteChanged}\n            >\n              <obi-link slot=\"icon\"></obi-link>\n            </obc-toggle-switch>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  renderScreenControlLink() {\n    if (!this.showScreenControlLink) {\n      return nothing;\n    }\n    return html`\n      <div class=\"footer\">\n        <obc-navigation-item\n          .label=\"${msg('Screen Control')}\"\n          @click=${() => this.handleScreenControlLinkClicked()}\n          hasicon\n        >\n          <obc-user-button slot=\"icon\" static variant=\"icon\" styleType=\"normal\">\n            <obi-screen-desk slot=\"icon\"></obi-screen-desk>\n          </obc-user-button>\n        </obc-navigation-item>\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this.variant === ObcBrillianceMenuVariant.tabbed) {\n      return html`<obc-tabbed-card class=\"card\" nTabs=${2} hasTabIcons>\n        <span slot=\"tab-title-0\">${msg('Brilliance')}</span>\n        <obi-display-brilliance-iec\n          slot=\"tab-icon-0\"\n        ></obi-display-brilliance-iec>\n        <span slot=\"tab-title-1\">${msg('Day')}/${msg('Night')}</span>\n        <obi-palette-day-night-iec\n          slot=\"tab-icon-1\"\n        ></obi-palette-day-night-iec>\n        <div slot=\"tab-content-0\">\n          ${this.renderBrightness()} ${this.renderScreenControlLink()}\n        </div>\n        <div slot=\"tab-content-1\">\n          ${this.renderPalette()} ${this.renderScreenControlLink()}\n        </div>\n      </obc-tabbed-card>`;\n    } else {\n      return html`\n        <div class=\"card ${this.variant}\">\n          ${this.showBrightness ? this.renderBrightness() : nothing}\n          ${this.showBrightness && this.showPalette\n            ? html`<div class=\"divider\"></div>`\n            : nothing}\n          ${this.showPalette ? this.renderPalette() : nothing}\n          ${this.renderScreenControlLink()}\n        </div>\n      `;\n    }\n  }\n\n  handleScreenControlLinkClicked() {\n    this.dispatchEvent(new CustomEvent('screen-control-link-clicked'));\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-brilliance-menu': ObcBrillianceMenu;\n  }\n}\n"],"names":["ObcPalette","ObcBrillianceMenuVariant","ObcBrillianceInputVariant"],"mappings":"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"}

package/dist/components/check-button/check-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"check-button.js","sources":["../../../src/components/check-button/check-button.ts"],"sourcesContent":["import {LitElement, unsafeCSS} from 'lit';\nimport {html} from 'lit/static-html.js';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport checkButtonStyle from './check-button.css?inline';\nimport '../../icons/icon-checkbox-checked-filled.js';\nimport '../../icons/icon-checkbox-uncheck-google.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Enum for the two visual variants of `<obc-check-button>`.\n * - `regular`: Standard toggle button with optional icon and label.\n * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n */\nexport enum CheckButtonType {\n  regular = 'regular',\n  checkbox = 'checkbox',\n}\n\n/**\n * Optional checkbox appearance variants for `<obc-check-button type=\"checkbox\">`.\n * - `default`: Existing check-button checkbox visuals.\n * - `updated`: Updated checkbox visuals (24px box, icon-check mark, custom state tokens).\n */\nexport enum CheckButtonCheckboxAppearance {\n  default = 'default',\n  updated = 'updated',\n}\n\n/**\n * `<obc-check-button>` – A versatile **state‑toggle component** used to represent\n * persistent settings (on/off, enabled/disabled, selected/unselected).  It is\n * **not** intended for transient command actions such as “Send”, “Save”, or\n * navigation – use a standard `<button>` or action component for those.\n *\n * The element supports two visual variants, both exposing the same checked /\n * unchecked semantics:\n *\n * ### Regular (toggle button)\n * * Entire surface changes color when checked.\n * * Optional single icon (via `icon` slot) is *identical* in both states; the\n *   button’s styling conveys the difference.\n * * Ideal for equipment controls, system modes, feature enable/disable, etc.\n *\n * ### Checkbox (icon‑swap)\n * * Renders a familiar checkbox frame but allows *custom* icons for checked and\n *   unchecked states (`checked-icon` / `unchecked-icon` slots).  Falls back to\n *   built‑in checkbox icons when none supplied.\n * * Useful for semantic pairs such as microphone on/off, volume mute/unmute,\n *   communication link active/inactive, etc.\n *\n * ## Difference from `<obc-checkbox>`\n * `<obc-checkbox>` is a classic form control with a fixed check/mixed visual and\n * built‑in change events.  `<obc-check-button>` focuses on *state indication*\n * and leaves business logic to the host via the `check-button-click` event, plus\n * offers width, icon, and full customization options.\n *\n * ## Features\n * * **Two Variants** – `regular` & `checkbox` (see above).\n * * **Checkbox Appearance** – Optional `checkboxAppearance` mode for updated visuals.\n * * **Icon Support** – Single icon (regular) or paired icons (checkbox).\n * * **Width Control** – `fullWidth` (hug content vs. expand) and `width` for a\n *   fixed size when `fullWidth` is true.\n * * **State API** – `checked`, `disabled`, and `check-button-click` event.\n * * **Accessibility** – Uses `aria-pressed` (regular) or `aria-checked` with\n *   `role=\"checkbox\"` (checkbox) so assistive tech announces state correctly.\n *\n * ## Usage Guidelines\n * 1. Prefer **regular** when a solid background change is the clearest cue and\n *    the meaning of the state does not rely on an icon transformation.\n * 2. Choose **checkbox** when the *icon itself* conveys the before/after state\n *    (e.g., microphone on or off).  Provide both icons for maximum clarity.\n * 3. Group independent toggles freely; for mutually exclusive choices use radio\n *    buttons or segmented controls instead.\n * 4. Keep labels concise.  For icon‑only checkbox buttons supply an\n *    `aria-label`.\n *\n * ## Slots\n * | Slot Name      | When Rendered                             | Purpose                              |\n * | -------------- | ----------------------------------------- | ------------------------------------ |\n * | (default)      | Always                                   | Button label text/content            |\n * | icon           | type=\"regular\" & showIcon               | Icon before label (same for both states) |\n * | checked-icon   | type=\"checkbox\" & hasCheckedIcon        | Custom icon for *checked* state      |\n * | unchecked-icon | type=\"checkbox\" & hasUncheckedIcon      | Custom icon for *unchecked* state    |\n *\n * ## Events\n * * `check-button-click` – Fired after user toggles the control.  Detail:\n *   `{ checked: boolean, type: 'regular' | 'checkbox' }`.\n *\n * @slot - Default slot for button label/content\n * @slot icon - Icon before label (regular mode, if showIcon is true)\n * @slot checked-icon - Custom icon for checked state (checkbox mode)\n * @slot unchecked-icon - Custom icon for unchecked state (checkbox mode)\n * @fires {CustomEvent<{checked: boolean, type: string}>} check-button-click - Fired after the user toggles the control.\n * @stable\n */\n@customElement('obc-check-button')\nexport class ObcCheckButton extends LitElement {\n  /**\n   * Determines the visual style and toggle behavior of the button.\n   * - `regular`: Standard button with optional icon and label.\n   * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n   *\n   * @default 'regular'\n   */\n  @property({type: String}) type: CheckButtonType = CheckButtonType.regular;\n\n  /**\n   * Whether the button is currently checked (selected/on).\n   *\n   * When clicked, this state toggles and the `check-button-click` event is fired.\n   *\n   * @default false\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Disables the button, preventing user interaction and applying disabled styling.\n   *\n   * @default false\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * If false, button width adapts to its content (fit-content).\n   * If true, uses the `width` property (if set) or expands to 100% of parent.\n   *\n   * @default false\n   */\n  @property({type: Boolean}) fullWidth = false;\n\n  /**\n   * Specific width for the button (e.g., \"200px\", \"10rem\").\n   * Only applies when `fullWidth` is true.\n   *\n   * @default ''\n   * @availableWhen fullWidth==true\n   */\n  @property({type: String}) width = '';\n\n  /**\n   * Whether to show the icon in regular mode (icon slot).\n   * Ignored in checkbox mode.\n   *\n   * @availableWhen type==regular\n   */\n  @property({type: Boolean}) showIcon = false;\n\n  /**\n   * If true, uses the `checked-icon` slot for the checked state in checkbox mode.\n   * Otherwise, uses the default checked icon.\n   *\n   * @default false\n   * @availableWhen type==checkbox\n   */\n  @property({type: Boolean}) hasCheckedIcon = false;\n\n  /**\n   * If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode.\n   * Otherwise, uses the default unchecked icon.\n   *\n   * @default false\n   * @availableWhen type==checkbox\n   */\n  @property({type: Boolean}) hasUncheckedIcon = false;\n\n  /**\n   * Optional appearance mode for checkbox type.\n   * Keep `default` for existing behavior. Use `updated` for the new checkbox visuals.\n   *\n   * @default 'default'\n   * @availableWhen type==checkbox\n   */\n  @property({type: String, attribute: 'checkbox-appearance'})\n  checkboxAppearance: CheckButtonCheckboxAppearance =\n    CheckButtonCheckboxAppearance.default;\n\n  private get isUpdatedCheckboxAppearance(): boolean {\n    return (\n      this.type === CheckButtonType.checkbox &&\n      this.checkboxAppearance === CheckButtonCheckboxAppearance.updated\n    );\n  }\n\n  private get customWidthStyle() {\n    if (!this.fullWidth || this.width === '') return '';\n    return `--custom-width: ${this.width}`;\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n\n    /**\n     * Fired after the user toggles the check button.\n     * The event detail includes the new checked state and the type of the button.\n     *\n     * @fires {CustomEvent<{checked: boolean, type: string}>} check-button-click - Fired after the user toggles the control.\n     */\n    this.dispatchEvent(\n      new CustomEvent('check-button-click', {\n        detail: {\n          checked: this.checked,\n          type: this.type,\n        },\n      })\n    );\n  }\n\n  private renderIcon() {\n    if (this.type === CheckButtonType.checkbox) {\n      return html`\n        <div class=\"icon-container\">\n          ${this.checked\n            ? this.renderCheckedIcon()\n            : this.renderUncheckedIcon()}\n        </div>\n      `;\n    }\n\n    if (this.type === CheckButtonType.regular && this.showIcon) {\n      return html`\n        <div class=\"icon-container\">\n          <slot name=\"icon\"></slot>\n        </div>\n      `;\n    }\n\n    return html``;\n  }\n\n  private renderCheckedIcon() {\n    if (this.isUpdatedCheckboxAppearance && !this.hasCheckedIcon) {\n      return this.renderUpdatedCheckedIcon();\n    }\n\n    if (this.hasCheckedIcon) {\n      return html`<slot name=\"checked-icon\"></slot>`;\n    }\n    return html`<obi-checkbox-checked-filled></obi-checkbox-checked-filled>`;\n  }\n\n  private renderUncheckedIcon() {\n    if (this.isUpdatedCheckboxAppearance && !this.hasUncheckedIcon) {\n      return this.renderUpdatedUncheckedIcon();\n    }\n\n    if (this.hasUncheckedIcon) {\n      return html`<slot name=\"unchecked-icon\"></slot>`;\n    }\n    return html`<obi-checkbox-uncheck-google></obi-checkbox-uncheck-google>`;\n  }\n\n  private renderUpdatedUncheckedIcon() {\n    return html`\n      <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"23\"\n            height=\"23\"\n            rx=\"3.5\"\n            fill=\"var(--obc-check-button-checkbox-unchecked-background, var(--indent-enabled-background-color))\"\n            stroke=\"var(--obc-check-button-checkbox-unchecked-border, var(--element-symbol-color))\"\n          />\n        </svg>\n      </span>\n    `;\n  }\n\n  private renderUpdatedCheckedIcon() {\n    return html`\n      <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"23\"\n            height=\"23\"\n            rx=\"3.5\"\n            fill=\"var(--obc-check-button-checkbox-checked-background, var(--selected-enabled-background-color))\"\n            stroke=\"var(--obc-check-button-checkbox-checked-border, var(--selected-enabled-border-color))\"\n          />\n          <path\n            d=\"M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7L19.5899 5.59L8.99991 16.17Z\"\n            fill=\"var(--on-selected-active-color)\"\n          />\n        </svg>\n      </span>\n    `;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          'state-checked': this.checked,\n          'state-unchecked': !this.checked,\n          'type-regular': this.type === CheckButtonType.regular,\n          'type-checkbox': this.type === CheckButtonType.checkbox,\n          'checkbox-appearance-updated': this.isUpdatedCheckboxAppearance,\n          hasIcon:\n            this.type === CheckButtonType.checkbox ||\n            (this.type === CheckButtonType.regular && this.showIcon),\n          'full-width': this.fullWidth,\n          'has-custom-width': this.fullWidth && this.width !== '',\n        })}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        part=\"wrapper\"\n        style=${this.customWidthStyle}\n        aria-checked=${ifDefined(\n          this.type === CheckButtonType.checkbox\n            ? this.checked\n              ? 'true'\n              : 'false'\n            : undefined\n        )}\n        aria-pressed=${ifDefined(\n          this.type === CheckButtonType.regular\n            ? this.checked\n              ? 'true'\n              : 'false'\n            : undefined\n        )}\n      >\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"content-container\">\n            ${this.renderIcon()}\n            <span class=\"label-container\" part=\"label\">\n              <slot></slot>\n            </span>\n          </div>\n        </div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(checkButtonStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-check-button': ObcCheckButton;\n  }\n}\n"],"names":["CheckButtonType","CheckButtonCheckboxAppearance"],"mappings":"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"}
+{"version":3,"file":"check-button.js","sources":["../../../src/components/check-button/check-button.ts"],"sourcesContent":["import {LitElement, unsafeCSS} from 'lit';\nimport {html} from 'lit/static-html.js';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport checkButtonStyle from './check-button.css?inline';\nimport '../../icons/icon-checkbox-checked-filled.js';\nimport '../../icons/icon-checkbox-uncheck-google.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Enum for the two visual variants of `<obc-check-button>`.\n * - `regular`: Standard toggle button with optional icon and label.\n * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n */\nexport enum CheckButtonType {\n  regular = 'regular',\n  checkbox = 'checkbox',\n}\n\n/**\n * Optional checkbox appearance variants for `<obc-check-button type=\"checkbox\">`.\n * - `default`: Existing check-button checkbox visuals.\n * - `updated`: Updated checkbox visuals (24px box, icon-check mark, custom state tokens).\n */\nexport enum CheckButtonCheckboxAppearance {\n  default = 'default',\n  updated = 'updated',\n}\n\n/**\n * `<obc-check-button>` – A versatile **state‑toggle component** used to represent\n * persistent settings (on/off, enabled/disabled, selected/unselected).  It is\n * **not** intended for transient command actions such as “Send”, “Save”, or\n * navigation – use a standard `<button>` or action component for those.\n *\n * The element supports two visual variants, both exposing the same checked /\n * unchecked semantics:\n *\n * ### Regular (toggle button)\n * * Entire surface changes color when checked.\n * * Optional single icon (via `icon` slot) is *identical* in both states; the\n *   button’s styling conveys the difference.\n * * Ideal for equipment controls, system modes, feature enable/disable, etc.\n *\n * ### Checkbox (icon‑swap)\n * * Renders a familiar checkbox frame but allows *custom* icons for checked and\n *   unchecked states (`checked-icon` / `unchecked-icon` slots).  Falls back to\n *   built‑in checkbox icons when none supplied.\n * * Useful for semantic pairs such as microphone on/off, volume mute/unmute,\n *   communication link active/inactive, etc.\n *\n * ## Difference from `<obc-checkbox>`\n * `<obc-checkbox>` is a classic form control with a fixed check/mixed visual and\n * built‑in change events.  `<obc-check-button>` focuses on *state indication*\n * and leaves business logic to the host via the `check-button-click` event, plus\n * offers width, icon, and full customization options.\n *\n * ## Features\n * * **Two Variants** – `regular` & `checkbox` (see above).\n * * **Checkbox Appearance** – Optional `checkboxAppearance` mode for updated visuals.\n * * **Icon Support** – Single icon (regular) or paired icons (checkbox).\n * * **Width Control** – `fullWidth` (hug content vs. expand) and `width` for a\n *   fixed size when `fullWidth` is true.\n * * **State API** – `checked`, `disabled`, and `check-button-click` event.\n * * **Accessibility** – Uses `aria-pressed` (regular) or `aria-checked` with\n *   `role=\"checkbox\"` (checkbox) so assistive tech announces state correctly.\n *\n * ## Usage Guidelines\n * 1. Prefer **regular** when a solid background change is the clearest cue and\n *    the meaning of the state does not rely on an icon transformation.\n * 2. Choose **checkbox** when the *icon itself* conveys the before/after state\n *    (e.g., microphone on or off).  Provide both icons for maximum clarity.\n * 3. Group independent toggles freely; for mutually exclusive choices use radio\n *    buttons or segmented controls instead.\n * 4. Keep labels concise.  For icon‑only checkbox buttons supply an\n *    `aria-label`.\n *\n * ## Slots\n * | Slot Name      | When Rendered                             | Purpose                              |\n * | -------------- | ----------------------------------------- | ------------------------------------ |\n * | (default)      | Always                                   | Button label text/content            |\n * | icon           | type=\"regular\" & showIcon               | Icon before label (same for both states) |\n * | checked-icon   | type=\"checkbox\" & hasCheckedIcon        | Custom icon for *checked* state      |\n * | unchecked-icon | type=\"checkbox\" & hasUncheckedIcon      | Custom icon for *unchecked* state    |\n *\n * ## Events\n * * `check-button-click` – Fired after user toggles the control.  Detail:\n *   `{ checked: boolean, type: 'regular' | 'checkbox' }`.\n *\n * @slot - Default slot for button label/content\n * @slot icon - Icon before label (regular mode, if showIcon is true)\n * @slot checked-icon - Custom icon for checked state (checkbox mode)\n * @slot unchecked-icon - Custom icon for unchecked state (checkbox mode)\n * @fires {CustomEvent<{checked: boolean, type: string}>} check-button-click - Fired after the user toggles the control.\n * @stable\n */\n@customElement('obc-check-button')\nexport class ObcCheckButton extends LitElement {\n  /**\n   * Determines the visual style and toggle behavior of the button.\n   * - `regular`: Standard button with optional icon and label.\n   * - `checkbox`: Checkbox-style toggle with checked/unchecked icons.\n   *\n   * @default 'regular'\n   */\n  @property({type: String}) type: CheckButtonType = CheckButtonType.regular;\n\n  /**\n   * Whether the button is currently checked (selected/on).\n   *\n   * When clicked, this state toggles and the `check-button-click` event is fired.\n   *\n   * @default false\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Disables the button, preventing user interaction and applying disabled styling.\n   *\n   * @default false\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * If false, button width adapts to its content (fit-content).\n   * If true, uses the `width` property (if set) or expands to 100% of parent.\n   *\n   * @default false\n   */\n  @property({type: Boolean}) fullWidth = false;\n\n  /**\n   * Specific width for the button (e.g., \"200px\", \"10rem\").\n   * Only applies when `fullWidth` is true.\n   *\n   * @default ''\n   * @availableWhen fullWidth==true\n   */\n  @property({type: String}) width = '';\n\n  /**\n   * Whether to show the icon in regular mode (icon slot).\n   * Ignored in checkbox mode.\n   *\n   * @availableWhen type==regular\n   */\n  @property({type: Boolean}) showIcon = false;\n\n  /**\n   * If true, uses the `checked-icon` slot for the checked state in checkbox mode.\n   * Otherwise, uses the default checked icon.\n   *\n   * @default false\n   * @availableWhen type==checkbox\n   */\n  @property({type: Boolean}) hasCheckedIcon = false;\n\n  /**\n   * If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode.\n   * Otherwise, uses the default unchecked icon.\n   *\n   * @default false\n   * @availableWhen type==checkbox\n   */\n  @property({type: Boolean}) hasUncheckedIcon = false;\n\n  /**\n   * Optional appearance mode for checkbox type.\n   * Keep `default` for existing behavior. Use `updated` for the new checkbox visuals.\n   *\n   * @default 'default'\n   * @availableWhen type==checkbox\n   */\n  @property({type: String, attribute: 'checkbox-appearance'})\n  checkboxAppearance: CheckButtonCheckboxAppearance =\n    CheckButtonCheckboxAppearance.default;\n\n  private get isUpdatedCheckboxAppearance(): boolean {\n    return (\n      this.type === CheckButtonType.checkbox &&\n      this.checkboxAppearance === CheckButtonCheckboxAppearance.updated\n    );\n  }\n\n  private get customWidthStyle() {\n    if (!this.fullWidth || this.width === '') return '';\n    return `--custom-width: ${this.width}`;\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n\n    /**\n     * Fired after the user toggles the check button.\n     * The event detail includes the new checked state and the type of the button.\n     *\n     * @fires check-button-click\n     */\n    this.dispatchEvent(\n      new CustomEvent('check-button-click', {\n        detail: {\n          checked: this.checked,\n          type: this.type,\n        },\n      })\n    );\n  }\n\n  private renderIcon() {\n    if (this.type === CheckButtonType.checkbox) {\n      return html`\n        <div class=\"icon-container\">\n          ${this.checked\n            ? this.renderCheckedIcon()\n            : this.renderUncheckedIcon()}\n        </div>\n      `;\n    }\n\n    if (this.type === CheckButtonType.regular && this.showIcon) {\n      return html`\n        <div class=\"icon-container\">\n          <slot name=\"icon\"></slot>\n        </div>\n      `;\n    }\n\n    return html``;\n  }\n\n  private renderCheckedIcon() {\n    if (this.isUpdatedCheckboxAppearance && !this.hasCheckedIcon) {\n      return this.renderUpdatedCheckedIcon();\n    }\n\n    if (this.hasCheckedIcon) {\n      return html`<slot name=\"checked-icon\"></slot>`;\n    }\n    return html`<obi-checkbox-checked-filled></obi-checkbox-checked-filled>`;\n  }\n\n  private renderUncheckedIcon() {\n    if (this.isUpdatedCheckboxAppearance && !this.hasUncheckedIcon) {\n      return this.renderUpdatedUncheckedIcon();\n    }\n\n    if (this.hasUncheckedIcon) {\n      return html`<slot name=\"unchecked-icon\"></slot>`;\n    }\n    return html`<obi-checkbox-uncheck-google></obi-checkbox-uncheck-google>`;\n  }\n\n  private renderUpdatedUncheckedIcon() {\n    return html`\n      <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"23\"\n            height=\"23\"\n            rx=\"3.5\"\n            fill=\"var(--obc-check-button-checkbox-unchecked-background, var(--indent-enabled-background-color))\"\n            stroke=\"var(--obc-check-button-checkbox-unchecked-border, var(--element-symbol-color))\"\n          />\n        </svg>\n      </span>\n    `;\n  }\n\n  private renderUpdatedCheckedIcon() {\n    return html`\n      <span class=\"checkbox-appearance-updated-icon\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <rect\n            x=\"0.5\"\n            y=\"0.5\"\n            width=\"23\"\n            height=\"23\"\n            rx=\"3.5\"\n            fill=\"var(--obc-check-button-checkbox-checked-background, var(--selected-enabled-background-color))\"\n            stroke=\"var(--obc-check-button-checkbox-checked-border, var(--selected-enabled-border-color))\"\n          />\n          <path\n            d=\"M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7L19.5899 5.59L8.99991 16.17Z\"\n            fill=\"var(--on-selected-active-color)\"\n          />\n        </svg>\n      </span>\n    `;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          'state-checked': this.checked,\n          'state-unchecked': !this.checked,\n          'type-regular': this.type === CheckButtonType.regular,\n          'type-checkbox': this.type === CheckButtonType.checkbox,\n          'checkbox-appearance-updated': this.isUpdatedCheckboxAppearance,\n          hasIcon:\n            this.type === CheckButtonType.checkbox ||\n            (this.type === CheckButtonType.regular && this.showIcon),\n          'full-width': this.fullWidth,\n          'has-custom-width': this.fullWidth && this.width !== '',\n        })}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        part=\"wrapper\"\n        style=${this.customWidthStyle}\n        aria-checked=${ifDefined(\n          this.type === CheckButtonType.checkbox\n            ? this.checked\n              ? 'true'\n              : 'false'\n            : undefined\n        )}\n        aria-pressed=${ifDefined(\n          this.type === CheckButtonType.regular\n            ? this.checked\n              ? 'true'\n              : 'false'\n            : undefined\n        )}\n      >\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"content-container\">\n            ${this.renderIcon()}\n            <span class=\"label-container\" part=\"label\">\n              <slot></slot>\n            </span>\n          </div>\n        </div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(checkButtonStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-check-button': ObcCheckButton;\n  }\n}\n"],"names":["CheckButtonType","CheckButtonCheckboxAppearance"],"mappings":";;;;;;;;;;;;;;;;;;;AAeO,IAAK,oCAAAA,qBAAL;AACLA,mBAAA,SAAA,IAAU;AACVA,mBAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;AAUL,IAAK,kDAAAC,mCAAL;AACLA,iCAAA,SAAA,IAAU;AACVA,iCAAA,SAAA,IAAU;AAFA,SAAAA;AAAA,GAAA,iCAAA,CAAA,CAAA;AAyEL,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQqB,SAAA,OAAwB;AASvB,SAAA,UAAU;AAOV,SAAA,WAAW;AAQX,SAAA,YAAY;AASb,SAAA,QAAQ;AAQP,SAAA,WAAW;AASX,SAAA,iBAAiB;AASjB,SAAA,mBAAmB;AAU9C,SAAA,qBACE;AAAA,EAAA;AAAA,EAEF,IAAY,8BAAuC;AACjD,WACE,KAAK,SAAS,cACd,KAAK,uBAAuB;AAAA,EAEhC;AAAA,EAEA,IAAY,mBAAmB;AAC7B,QAAI,CAAC,KAAK,aAAa,KAAK,UAAU,GAAI,QAAO;AACjD,WAAO,mBAAmB,KAAK,KAAK;AAAA,EACtC;AAAA,EAEQ,cAAc;AACpB,QAAI,KAAK,SAAU;AAEnB,SAAK,UAAU,CAAC,KAAK;AAQrB,SAAK;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ;AAAA,UACN,SAAS,KAAK;AAAA,UACd,MAAM,KAAK;AAAA,QAAA;AAAA,MACb,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,aAAa;AACnB,QAAI,KAAK,SAAS,YAA0B;AAC1C,aAAO;AAAA;AAAA,YAED,KAAK,UACH,KAAK,sBACL,KAAK,qBAAqB;AAAA;AAAA;AAAA,IAGpC;AAEA,QAAI,KAAK,SAAS,aAA2B,KAAK,UAAU;AAC1D,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,oBAAoB;AAC1B,QAAI,KAAK,+BAA+B,CAAC,KAAK,gBAAgB;AAC5D,aAAO,KAAK,yBAAA;AAAA,IACd;AAEA,QAAI,KAAK,gBAAgB;AACvB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,sBAAsB;AAC5B,QAAI,KAAK,+BAA+B,CAAC,KAAK,kBAAkB;AAC9D,aAAO,KAAK,2BAAA;AAAA,IACd;AAEA,QAAI,KAAK,kBAAkB;AACzB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,6BAA6B;AACnC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeT;AAAA,EAEQ,2BAA2B;AACjC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBT;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,iBAAiB,KAAK;AAAA,MACtB,mBAAmB,CAAC,KAAK;AAAA,MACzB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,+BAA+B,KAAK;AAAA,MACpC,SACE,KAAK,SAAS,cACb,KAAK,SAAS,aAA2B,KAAK;AAAA,MACjD,cAAc,KAAK;AAAA,MACnB,oBAAoB,KAAK,aAAa,KAAK,UAAU;AAAA,IAAA,CACtD,CAAC;AAAA,oBACU,KAAK,QAAQ;AAAA,iBAChB,KAAK,WAAW;AAAA;AAAA,gBAEjB,KAAK,gBAAgB;AAAA,uBACd;AAAA,MACb,KAAK,SAAS,aACV,KAAK,UACH,SACA,UACF;AAAA,IAAA,CACL;AAAA,uBACc;AAAA,MACb,KAAK,SAAS,YACV,KAAK,UACH,SACA,UACF;AAAA,IAAA,CACL;AAAA;AAAA;AAAA;AAAA,cAIK,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7B;AAGF;AArPa,eAoPK,SAAS,UAAU,gBAAgB;AA5OzB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GARb,eAQe,WAAA,QAAA,CAAA;AASC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjBd,eAiBgB,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAxBd,eAwBgB,WAAA,YAAA,CAAA;AAQA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhCd,eAgCgB,WAAA,aAAA,CAAA;AASD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzCb,eAyCe,WAAA,SAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjDd,eAiDgB,WAAA,YAAA,CAAA;AASA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA1Dd,eA0DgB,WAAA,kBAAA,CAAA;AASA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAnEd,eAmEgB,WAAA,oBAAA,CAAA;AAU3B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAQ,WAAW,uBAAsB;AAAA,GA5E/C,eA6EX,WAAA,sBAAA,CAAA;AA7EW,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}

package/dist/components/checkbox/checkbox.d.ts

@@ -87,8 +87,8 @@ export type ObcCheckboxChangeEvent = CustomEvent<{
  * ```
  *
  * @slot - No named slots.
- * @fires {ObcCheckboxChangeEvent} change - – Emitted when the status changes.
- * @fires {ObcCheckboxChangeEvent} disabled - – Emitted when the disabled state changes.
+ * @fires {ObcCheckboxChangeEvent} change - Emitted when the status changes.
+ * @fires {ObcCheckboxChangeEvent} disabled - Emitted when the disabled state changes.
  * @stable
  */
 export declare class ObcCheckbox extends LitElement {

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport '../../icons/icon-check-mixed.js';\nimport '../../icons/icon-check-google.js';\nimport componentStyle from './checkbox.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Represents the possible states of the checkbox.\n * - `unchecked`: The checkbox is not selected.\n * - `checked`: The checkbox is selected.\n * - `mixed`: The checkbox is in an indeterminate state (typically used for\n *   parent checkboxes when some, but not all, child checkboxes are selected).\n */\nexport enum CheckboxStatus {\n  unchecked = 'unchecked',\n  checked = 'checked',\n  mixed = 'mixed',\n}\n\n/**\n * Represents the visual interaction state of the checkbox.\n * - `enabled`: Default interactive state.\n * - `loading`: Shows loading spinner and locks interaction.\n */\nexport enum CheckboxState {\n  enabled = 'enabled',\n  loading = 'loading',\n}\n\n/**\n * The payload for `change` and `disabled` events emitted by `<obc-checkbox>`.\n * - `status`: The current checkbox status.\n * - `disabled`: Whether the checkbox is currently disabled.\n */\nexport type ObcCheckboxChangeEvent = CustomEvent<{\n  status: CheckboxStatus;\n  disabled: boolean;\n}>;\n\n/**\n * ### Overview\n * `<obc-checkbox>` is a selectable input for binary and mixed states.\n * It supports `checked`, `unchecked`, and `mixed` (indeterminate) status\n * and is intended for forms, lists, and settings.\n *\n * Keywords: checkbox, check box, tickbox, tri-state, indeterminate, select all.\n *\n * ### Features\n * - **Three‑state support:** Allows `checked`, `unchecked`, and `mixed` (indeterminate) status for parent/child\n *   selection scenarios.\n * - **Visual state support:** `state` allows `enabled` and `loading` visual behavior.\n * - **Disabled state:** Can be set to non‑interactive, visually indicating its disabled status.\n * - **Accessible:** Implements proper ARIA role and keyboard interaction (Space **or** Enter toggles state).\n * - **Touch target:** Uses a minimum 48x48 interactive area.\n * - **Icon display:** Uses `<obi-check-google>` for checked and `<obi-check-mixed>` for mixed states.\n * - **Loading display:** Uses an indeterminate spinner when `state=\"loading\"`.\n *\n * ### Variants\n * - **Unchecked** (default): Empty checkbox.\n * - **Checked:** Filled checkbox with a check‑mark icon.\n * - **Mixed:** Partially filled checkbox with a mixed icon.\n * - **Loading:** Spinner is shown and interaction is locked.\n *\n * ### Usage Guidelines\n * - Use `obc-checkbox` for independent binary choices or when representing a group selection with a mixed state.\n * - For mutually exclusive choices, use a radio group instead.\n * - The **mixed** state should be applied by application logic; users should not toggle into or out of it directly.\n * - Use the `disabled` property to prevent interaction and visually indicate the option is unavailable.\n * - Use `state=\"loading\"` for transient async state while preserving layout.\n * - If there is no visible external label, provide an `aria-label` or `aria-labelledby`.\n *\n * ### Properties and Attributes\n * - `status` (`checked` | `unchecked` | `mixed`) · *default:* `unchecked` – Controls the checkbox status.\n * - `state` (`enabled` | `loading`) · *default:* `enabled` – Controls the checkbox visual state.\n * - `disabled` (`boolean`) · Disables interaction and applies disabled styling.\n * - `aria-label` (`string`) · Accessible name for screen readers.\n * - `aria-labelledby` (`string`) · ID reference to an external visible label.\n * - `aria-describedby` (`string`) · ID reference(s) for supplementary description.\n *\n * ### Events\n * - `change` – Fired when the checkbox status changes.\n *   **detail:** `{ status, disabled }`\n * - `disabled` – Fired when the `disabled` property changes.\n *   **detail:** `{ status, disabled }`\n *\n * ### Example\n * ```html\n * <obc-checkbox\n *   status=\"mixed\"\n *   state=\"enabled\"\n *   aria-label=\"Select all items\"\n * ></obc-checkbox>\n * ```\n *\n * @slot - No named slots.\n * @fires {ObcCheckboxChangeEvent} change - – Emitted when the status changes.\n * @fires {ObcCheckboxChangeEvent} disabled - – Emitted when the disabled state changes.\n * @stable\n */\n@customElement('obc-checkbox')\nexport class ObcCheckbox extends LitElement {\n  /**\n   * Controls the checkbox status: `checked`, `unchecked`, or `mixed` (indeterminate).\n   *\n   * Defaults to `unchecked`.\n   */\n  @property({type: String}) status: CheckboxStatus = CheckboxStatus.unchecked;\n\n  /**\n   * Controls the visual state: `enabled` or `loading`.\n   *\n   * Defaults to `enabled`.\n   */\n  @property({type: String}) state: CheckboxState = CheckboxState.enabled;\n\n  /**\n   * Disables the checkbox and prevents user interaction.\n   *\n   * When `true`, the checkbox is visually styled as disabled and does not respond to user input.\n   * Interaction is also locked when `state === loading`.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /** Internal: controls hover effects on the checkbox. Used by wrapper components such as `obc-checkbox-item`. */\n  @property({type: Boolean, attribute: false}) hasHoverEffects = true;\n\n  @query('.visually-hidden') private checkboxControl?: HTMLDivElement;\n\n  private get _isInteractionLocked() {\n    return this.disabled || this.state === CheckboxState.loading;\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled')) {\n      this.dispatchEvent(\n        new CustomEvent('disabled', {\n          detail: {\n            status: this.status,\n            disabled: this.disabled,\n          },\n        })\n      );\n    }\n  }\n\n  private toggleStatus() {\n    if (this._isInteractionLocked) return;\n\n    if (this.status === CheckboxStatus.checked) {\n      this.status = CheckboxStatus.unchecked;\n    } else {\n      this.status = CheckboxStatus.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          status: this.status,\n          disabled: this.disabled,\n        },\n      })\n    );\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {\n      e.preventDefault();\n      this.toggleStatus();\n    }\n  }\n\n  private get _computedAriaChecked() {\n    switch (this.status) {\n      case 'checked':\n        return 'true';\n      case 'mixed':\n        return 'mixed';\n      case 'unchecked':\n      default:\n        return 'false';\n    }\n  }\n\n  public override focus(options?: FocusOptions): void {\n    this.checkboxControl?.focus(options);\n  }\n\n  private syncFocusVisibleAttribute() {\n    const isFocusVisible = this.checkboxControl?.matches(':focus-visible');\n    this.toggleAttribute('data-focus-visible', Boolean(isFocusVisible));\n  }\n\n  private handleControlFocus() {\n    queueMicrotask(() => this.syncFocusVisibleAttribute());\n  }\n\n  private handleControlBlur() {\n    this.removeAttribute('data-focus-visible');\n  }\n\n  override render() {\n    const hostAriaLabel = this.getAttribute('aria-label') ?? undefined;\n    const hostAriaLabelledBy =\n      this.getAttribute('aria-labelledby') ?? undefined;\n    const hostAriaDescribedBy =\n      this.getAttribute('aria-describedby') ?? undefined;\n    const forwardedAriaLabel = hostAriaLabelledBy\n      ? undefined\n      : (hostAriaLabel ?? 'Checkbox item');\n\n    return html`\n      <div\n        class=${classMap({\n          'visually-hidden': true,\n          [`status-${this.status}`]: true,\n          [`state-${this.state}`]: true,\n          disabled: this.disabled,\n          'no-hover-effects': !this.hasHoverEffects,\n        })}\n        role=\"checkbox\"\n        aria-checked=${this._computedAriaChecked}\n        aria-label=${ifDefined(forwardedAriaLabel)}\n        aria-labelledby=${ifDefined(hostAriaLabelledBy)}\n        aria-describedby=${ifDefined(hostAriaDescribedBy)}\n        aria-disabled=${this._isInteractionLocked ? 'true' : 'false'}\n        aria-busy=${this.state === CheckboxState.loading ? 'true' : 'false'}\n        tabindex=${this._isInteractionLocked ? '-1' : '0'}\n        @click=${this.toggleStatus}\n        @keydown=${this.handleKeydown}\n        @focus=${this.handleControlFocus}\n        @blur=${this.handleControlBlur}\n      >\n        <div class=\"checkbox-container\">\n          <div class=\"checkbox-box\">\n            ${this.state === CheckboxState.loading\n              ? html`\n                  <svg\n                    class=\"checkbox-loading-spinner type-indeterminate size-small style-regular\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle cx=\"8\" cy=\"8\" r=\"6\"></circle>\n                  </svg>\n                `\n              : this.status === 'checked'\n                ? html`<obi-check-google\n                    class=\"checkbox-icon\"\n                  ></obi-check-google>`\n                : this.status === 'mixed'\n                  ? html`<obi-check-mixed\n                      class=\"checkbox-icon\"\n                    ></obi-check-mixed>`\n                  : html`<span class=\"checkbox-icon\"></span>`}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [unsafeCSS(componentStyle)];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-checkbox': ObcCheckbox;\n  }\n}\n"],"names":["CheckboxStatus","CheckboxState"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport '../../icons/icon-check-mixed.js';\nimport '../../icons/icon-check-google.js';\nimport componentStyle from './checkbox.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Represents the possible states of the checkbox.\n * - `unchecked`: The checkbox is not selected.\n * - `checked`: The checkbox is selected.\n * - `mixed`: The checkbox is in an indeterminate state (typically used for\n *   parent checkboxes when some, but not all, child checkboxes are selected).\n */\nexport enum CheckboxStatus {\n  unchecked = 'unchecked',\n  checked = 'checked',\n  mixed = 'mixed',\n}\n\n/**\n * Represents the visual interaction state of the checkbox.\n * - `enabled`: Default interactive state.\n * - `loading`: Shows loading spinner and locks interaction.\n */\nexport enum CheckboxState {\n  enabled = 'enabled',\n  loading = 'loading',\n}\n\n/**\n * The payload for `change` and `disabled` events emitted by `<obc-checkbox>`.\n * - `status`: The current checkbox status.\n * - `disabled`: Whether the checkbox is currently disabled.\n */\nexport type ObcCheckboxChangeEvent = CustomEvent<{\n  status: CheckboxStatus;\n  disabled: boolean;\n}>;\n\n/**\n * ### Overview\n * `<obc-checkbox>` is a selectable input for binary and mixed states.\n * It supports `checked`, `unchecked`, and `mixed` (indeterminate) status\n * and is intended for forms, lists, and settings.\n *\n * Keywords: checkbox, check box, tickbox, tri-state, indeterminate, select all.\n *\n * ### Features\n * - **Three‑state support:** Allows `checked`, `unchecked`, and `mixed` (indeterminate) status for parent/child\n *   selection scenarios.\n * - **Visual state support:** `state` allows `enabled` and `loading` visual behavior.\n * - **Disabled state:** Can be set to non‑interactive, visually indicating its disabled status.\n * - **Accessible:** Implements proper ARIA role and keyboard interaction (Space **or** Enter toggles state).\n * - **Touch target:** Uses a minimum 48x48 interactive area.\n * - **Icon display:** Uses `<obi-check-google>` for checked and `<obi-check-mixed>` for mixed states.\n * - **Loading display:** Uses an indeterminate spinner when `state=\"loading\"`.\n *\n * ### Variants\n * - **Unchecked** (default): Empty checkbox.\n * - **Checked:** Filled checkbox with a check‑mark icon.\n * - **Mixed:** Partially filled checkbox with a mixed icon.\n * - **Loading:** Spinner is shown and interaction is locked.\n *\n * ### Usage Guidelines\n * - Use `obc-checkbox` for independent binary choices or when representing a group selection with a mixed state.\n * - For mutually exclusive choices, use a radio group instead.\n * - The **mixed** state should be applied by application logic; users should not toggle into or out of it directly.\n * - Use the `disabled` property to prevent interaction and visually indicate the option is unavailable.\n * - Use `state=\"loading\"` for transient async state while preserving layout.\n * - If there is no visible external label, provide an `aria-label` or `aria-labelledby`.\n *\n * ### Properties and Attributes\n * - `status` (`checked` | `unchecked` | `mixed`) · *default:* `unchecked` – Controls the checkbox status.\n * - `state` (`enabled` | `loading`) · *default:* `enabled` – Controls the checkbox visual state.\n * - `disabled` (`boolean`) · Disables interaction and applies disabled styling.\n * - `aria-label` (`string`) · Accessible name for screen readers.\n * - `aria-labelledby` (`string`) · ID reference to an external visible label.\n * - `aria-describedby` (`string`) · ID reference(s) for supplementary description.\n *\n * ### Events\n * - `change` – Fired when the checkbox status changes.\n *   **detail:** `{ status, disabled }`\n * - `disabled` – Fired when the `disabled` property changes.\n *   **detail:** `{ status, disabled }`\n *\n * ### Example\n * ```html\n * <obc-checkbox\n *   status=\"mixed\"\n *   state=\"enabled\"\n *   aria-label=\"Select all items\"\n * ></obc-checkbox>\n * ```\n *\n * @slot - No named slots.\n * @fires {ObcCheckboxChangeEvent} change - Emitted when the status changes.\n * @fires {ObcCheckboxChangeEvent} disabled - Emitted when the disabled state changes.\n * @stable\n */\n@customElement('obc-checkbox')\nexport class ObcCheckbox extends LitElement {\n  /**\n   * Controls the checkbox status: `checked`, `unchecked`, or `mixed` (indeterminate).\n   *\n   * Defaults to `unchecked`.\n   */\n  @property({type: String}) status: CheckboxStatus = CheckboxStatus.unchecked;\n\n  /**\n   * Controls the visual state: `enabled` or `loading`.\n   *\n   * Defaults to `enabled`.\n   */\n  @property({type: String}) state: CheckboxState = CheckboxState.enabled;\n\n  /**\n   * Disables the checkbox and prevents user interaction.\n   *\n   * When `true`, the checkbox is visually styled as disabled and does not respond to user input.\n   * Interaction is also locked when `state === loading`.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /** Internal: controls hover effects on the checkbox. Used by wrapper components such as `obc-checkbox-item`. */\n  @property({type: Boolean, attribute: false}) hasHoverEffects = true;\n\n  @query('.visually-hidden') private checkboxControl?: HTMLDivElement;\n\n  private get _isInteractionLocked() {\n    return this.disabled || this.state === CheckboxState.loading;\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled')) {\n      this.dispatchEvent(\n        new CustomEvent('disabled', {\n          detail: {\n            status: this.status,\n            disabled: this.disabled,\n          },\n        })\n      );\n    }\n  }\n\n  private toggleStatus() {\n    if (this._isInteractionLocked) return;\n\n    if (this.status === CheckboxStatus.checked) {\n      this.status = CheckboxStatus.unchecked;\n    } else {\n      this.status = CheckboxStatus.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          status: this.status,\n          disabled: this.disabled,\n        },\n      })\n    );\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {\n      e.preventDefault();\n      this.toggleStatus();\n    }\n  }\n\n  private get _computedAriaChecked() {\n    switch (this.status) {\n      case 'checked':\n        return 'true';\n      case 'mixed':\n        return 'mixed';\n      case 'unchecked':\n      default:\n        return 'false';\n    }\n  }\n\n  public override focus(options?: FocusOptions): void {\n    this.checkboxControl?.focus(options);\n  }\n\n  private syncFocusVisibleAttribute() {\n    const isFocusVisible = this.checkboxControl?.matches(':focus-visible');\n    this.toggleAttribute('data-focus-visible', Boolean(isFocusVisible));\n  }\n\n  private handleControlFocus() {\n    queueMicrotask(() => this.syncFocusVisibleAttribute());\n  }\n\n  private handleControlBlur() {\n    this.removeAttribute('data-focus-visible');\n  }\n\n  override render() {\n    const hostAriaLabel = this.getAttribute('aria-label') ?? undefined;\n    const hostAriaLabelledBy =\n      this.getAttribute('aria-labelledby') ?? undefined;\n    const hostAriaDescribedBy =\n      this.getAttribute('aria-describedby') ?? undefined;\n    const forwardedAriaLabel = hostAriaLabelledBy\n      ? undefined\n      : (hostAriaLabel ?? 'Checkbox item');\n\n    return html`\n      <div\n        class=${classMap({\n          'visually-hidden': true,\n          [`status-${this.status}`]: true,\n          [`state-${this.state}`]: true,\n          disabled: this.disabled,\n          'no-hover-effects': !this.hasHoverEffects,\n        })}\n        role=\"checkbox\"\n        aria-checked=${this._computedAriaChecked}\n        aria-label=${ifDefined(forwardedAriaLabel)}\n        aria-labelledby=${ifDefined(hostAriaLabelledBy)}\n        aria-describedby=${ifDefined(hostAriaDescribedBy)}\n        aria-disabled=${this._isInteractionLocked ? 'true' : 'false'}\n        aria-busy=${this.state === CheckboxState.loading ? 'true' : 'false'}\n        tabindex=${this._isInteractionLocked ? '-1' : '0'}\n        @click=${this.toggleStatus}\n        @keydown=${this.handleKeydown}\n        @focus=${this.handleControlFocus}\n        @blur=${this.handleControlBlur}\n      >\n        <div class=\"checkbox-container\">\n          <div class=\"checkbox-box\">\n            ${this.state === CheckboxState.loading\n              ? html`\n                  <svg\n                    class=\"checkbox-loading-spinner type-indeterminate size-small style-regular\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle cx=\"8\" cy=\"8\" r=\"6\"></circle>\n                  </svg>\n                `\n              : this.status === 'checked'\n                ? html`<obi-check-google\n                    class=\"checkbox-icon\"\n                  ></obi-check-google>`\n                : this.status === 'mixed'\n                  ? html`<obi-check-mixed\n                      class=\"checkbox-icon\"\n                    ></obi-check-mixed>`\n                  : html`<span class=\"checkbox-icon\"></span>`}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [unsafeCSS(componentStyle)];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-checkbox': ObcCheckbox;\n  }\n}\n"],"names":["CheckboxStatus","CheckboxState"],"mappings":"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"}

package/dist/components/command-menu/command-menu.d.ts

@@ -106,7 +106,7 @@ export declare class ObcCommandMenu extends LitElement {
     /**
      * Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.
      *
-     * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.
+     * @fires change
      */
     private onChange;
     static styles: import('lit').CSSResult;

package/dist/components/command-menu/command-menu.js

@@ -85,7 +85,7 @@ let ObcCommandMenu = class extends LitElement {
   /**
    * Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.
    *
-   * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.
+   * @fires change
    */
   onChange(event) {
     event.stopPropagation();