@oicl/openbridge-webcomponents 0.0.20260326144449 → 0.0.20260327071335

package/dist/components/toggle-switch/toggle-switch.css.js

@@ -14,7 +14,7 @@ label {
   padding: 0px var(--ui-components-toggle-switch-item-padding-horizontal);
   flex: 1 0 0;
 
-  color: var(--element-active-color, #1a1a1a);
+  color: var(--element-active-color);
   cursor: pointer;
   user-select: none;
 }

package/dist/components/toggle-switch/toggle-switch.d.ts

@@ -1,5 +1,8 @@
 import { LitElement } from 'lit';
 import '../icon-button/icon-button.js';
+export type ObcToggleSwitchInputEvent = CustomEvent<{
+    checked: boolean;
+}>;
 /**
  * `<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).
  *
@@ -75,7 +78,7 @@ import '../icon-button/icon-button.js';
  * In this example, the toggle switch displays a label, an icon, and a description, and is in the checked state.
  *
  * @slot icon - Leading icon slot (shown when `hasIcon` is true)
- * @fires input - Dispatched when the value of the input changes
+ * @fires input - {ObcToggleSwitchInputEvent} Dispatched when the value of the input changes
  */
 export declare class ObcToggleSwitch extends LitElement {
     /**
@@ -110,6 +113,11 @@ export declare class ObcToggleSwitch extends LitElement {
      * Provide icon content via the `icon` slot.
      */
     hasIcon: boolean;
+    /**
+     * If true, the toggle is controlled externally.
+     * Use to control the toggle state from outside the component.
+     */
+    externalControl: boolean;
     /**
      * Handles input events to change the toggle state.
      * Prevents changes if the toggle is disabled.

package/dist/components/toggle-switch/toggle-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,+BAA+B,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;OAEG;IACwB,cAAc,UAAS;IAElD;;;OAGG;IACuB,WAAW,SAAM;IAE3C;;;OAGG;IACwB,gBAAgB,UAAS;IAEpD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAQT,MAAM;IAsCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,+BAA+B,CAAC;AAIvC,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;OAEG;IACwB,cAAc,UAAS;IAElD;;;OAGG;IACuB,WAAW,SAAM;IAE3C;;;OAGG;IACwB,gBAAgB,UAAS;IAEpD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACwB,eAAe,UAAS;IAEnD;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAsBT,MAAM;IAsCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/toggle-switch/toggle-switch.js

@@ -24,6 +24,7 @@ let ObcToggleSwitch = class extends LitElement {
     this.description = "";
     this.hasBottomDivider = false;
     this.hasIcon = false;
+    this.externalControl = false;
   }
   /**
    * Handles input events to change the toggle state.
@@ -36,7 +37,19 @@ let ObcToggleSwitch = class extends LitElement {
       e.preventDefault();
       return;
     }
-    this.checked = e.target.checked;
+    const nextChecked = !this.checked;
+    if (!this.externalControl) {
+      this.checked = nextChecked;
+    }
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { checked: nextChecked }
+      })
+    );
+    if (this.externalControl) {
+      e.target.checked = this.checked;
+    }
   }
   render() {
     return html`
@@ -59,7 +72,7 @@ let ObcToggleSwitch = class extends LitElement {
             <div class="knob"></div>
             <input
               type="checkbox"
-              ?checked=${this.checked}
+              .checked=${this.checked}
               ?disabled=${this.disabled}
               @input=${this._tryChange}
             />
@@ -92,6 +105,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcToggleSwitch.prototype, "hasIcon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcToggleSwitch.prototype, "externalControl", 2);
 ObcToggleSwitch = __decorateClass([
   customElement("obc-toggle-switch")
 ], ObcToggleSwitch);

package/dist/components/toggle-switch/toggle-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.js","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../icon-button/icon-button.js';\nimport componentStyle from './toggle-switch.css?inline';\nimport {customElement} from '../../decorator.js';\n\n/**\n * `<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).\n *\n * Provides a visual switch control for toggling between two states (checked/unchecked), commonly used for enabling or disabling a setting or feature. The component supports an optional label, description, icon, and divider for flexible presentation in lists or forms.\n *\n * ---\n *\n * ### Features\n * - **Binary toggle:** Allows users to switch between checked (on) and unchecked (off) states.\n * - **Label and Description:** Displays a primary label and an optional secondary description for context.\n * - **Icon Support:** Can display a leading icon via the `icon` slot for visual emphasis.\n * - **Disabled State:** Can be set to disabled, preventing user interaction and visually indicating inactivity.\n * - **Bottom Divider:** Optional divider for use in lists or grouped settings.\n * - **Responsive Layout:** Adapts label/description layout based on content; long descriptions are truncated with ellipsis.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `obc-toggle-switch` for settings or preferences that require a simple on/off or enable/disable control. Ideal for scenarios where the user needs to quickly toggle a feature, such as activating notifications, enabling dark mode, or switching connectivity options. Avoid using for mutually exclusive choices—use radio buttons for those cases.\n *\n * - Place in forms, settings panels, or lists where binary choices are needed.\n * - Use the description property to clarify the effect of the toggle if the label alone is not sufficient.\n * - If an icon is relevant, provide it via the `icon` slot to reinforce the meaning.\n * - For accessibility, ensure the label clearly describes the toggle's function.\n *\n * ---\n *\n * ### Slots\n * | Slot Name | Renders When...      | Purpose                                   |\n * |-----------|---------------------|-------------------------------------------|\n * | icon      | `hasIcon` is true   | Leading icon to visually represent toggle |\n *\n * ---\n *\n * ### Properties and Attributes\n * - `label` (string): Main label for the toggle (required for clarity).\n * - `checked` (boolean): Whether the toggle is in the \"on\" state. Defaults to `false`.\n * - `disabled` (boolean): Disables interaction and applies a disabled style.\n * - `hasDescription` (boolean): If true, shows the description text below the label.\n * - `description` (string): Supplementary text shown when `hasDescription` is true.\n * - `hasBottomDivider` (boolean): If true, renders a divider below the toggle (useful in lists).\n * - `hasIcon` (boolean): If true, displays the `icon` slot before the label.\n *\n * ---\n *\n * ### Events\n * - `input` – Fired when the toggle state changes (checked/unchecked).\n *\n * ---\n *\n * ### Best Practices\n * - Use concise labels and keep descriptions brief; long descriptions are truncated.\n * - Only use the divider when presenting multiple toggles in a list for visual separation.\n * - For accessibility, ensure the label is descriptive and unique within the context.\n * - Avoid using toggle switches for actions that require confirmation or have destructive effects.\n * - For mutually exclusive options, use radio buttons instead.\n *\n * ---\n *\n * **Example:**\n * ```html\n * <obc-toggle-switch\n *   label=\"Enable notifications\"\n *   ?checked=${true}\n *   ?hasDescription=${true}\n *   description=\"Receive updates and alerts\"\n *   ?hasIcon=${true}\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-switch>\n * ```\n *\n * In this example, the toggle switch displays a label, an icon, and a description, and is in the checked state.\n *\n * @slot icon - Leading icon slot (shown when `hasIcon` is true)\n * @fires input - Dispatched when the value of the input changes\n */\n@customElement('obc-toggle-switch')\nexport class ObcToggleSwitch extends LitElement {\n  /**\n   * Main label for the toggle switch. Should clearly describe the setting being toggled.\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * Whether the toggle is in the \"on\" (checked) state.\n   * Set to true to display as active/on.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Disables the toggle, preventing user interaction and applying a disabled style.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * If true, displays the description text below the label.\n   */\n  @property({type: Boolean}) hasDescription = false;\n\n  /**\n   * Supplementary description text shown when `hasDescription` is true.\n   * Use to clarify the effect or details of the toggle.\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * If true, renders a divider below the toggle switch.\n   * Useful for visually separating items in a list.\n   */\n  @property({type: Boolean}) hasBottomDivider = false;\n\n  /**\n   * If true, displays a leading icon before the label.\n   * Provide icon content via the `icon` slot.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * Handles input events to change the toggle state.\n   * Prevents changes if the toggle is disabled.\n   * @param e {InputEvent}\n   * @fires input - Dispatched when the value of the input changes\n   */\n  private _tryChange(e: InputEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n    this.checked = (e.target as HTMLInputElement).checked;\n  }\n\n  override render() {\n    return html`\n      <label\n        class=${classMap({\n          checked: this.checked,\n          disabled: this.disabled,\n          'has-description': this.hasDescription,\n        })}\n      >\n        <div class=\"icon-label-container\">\n          ${this.hasIcon\n            ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n            : nothing}\n          <div class=\"label-container\">\n            <span class=\"label\">${this.label}</span>\n            ${this.hasDescription\n              ? html`<span class=\"description\">${this.description}</span>`\n              : nothing}\n          </div>\n        </div>\n        <div class=\"switch\">\n          <div class=\"presenter ${classMap({checked: this.checked})}\">\n            <div class=\"knob\"></div>\n            <input\n              type=\"checkbox\"\n              ?checked=${this.checked}\n              ?disabled=${this.disabled}\n              @input=${this._tryChange}\n            />\n          </div>\n        </div>\n        ${this.hasBottomDivider\n          ? html`<div class=\"bottom-divider\"></div>`\n          : nothing}\n      </label>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-toggle-switch': ObcToggleSwitch;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqFO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIqB,SAAA,QAAQ;AAMP,SAAA,UAAU;AAKV,SAAA,WAAW;AAKX,SAAA,iBAAiB;AAMlB,SAAA,cAAc;AAMb,SAAA,mBAAmB;AAMnB,SAAA,UAAU;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7B,WAAW,GAAe;AAChC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF;AAAA,IACF;AACA,SAAK,UAAW,EAAE,OAA4B;AAAA,EAChD;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,mBAAmB,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,UACH,oEACA,OAAO;AAAA;AAAA,kCAEa,KAAK,KAAK;AAAA,cAC9B,KAAK,iBACH,iCAAiC,KAAK,WAAW,YACjD,OAAO;AAAA;AAAA;AAAA;AAAA,kCAIW,SAAS,EAAC,SAAS,KAAK,QAAA,CAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI1C,KAAK,OAAO;AAAA,0BACX,KAAK,QAAQ;AAAA,uBAChB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,UAI5B,KAAK,mBACH,2CACA,OAAO;AAAA;AAAA;AAAA,EAGjB;AAGF;AA7Fa,gBA4FK,SAAS,UAAU,cAAc;AAxFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,gBAIe,WAAA,SAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAVd,gBAUgB,WAAA,WAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAfd,gBAegB,WAAA,YAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApBd,gBAoBgB,WAAA,kBAAA,CAAA;AAMD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Bb,gBA0Be,WAAA,eAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhCd,gBAgCgB,WAAA,oBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAtCd,gBAsCgB,WAAA,WAAA,CAAA;AAtChB,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
+{"version":3,"file":"toggle-switch.js","sources":["../../../src/components/toggle-switch/toggle-switch.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../icon-button/icon-button.js';\nimport componentStyle from './toggle-switch.css?inline';\nimport {customElement} from '../../decorator.js';\n\nexport type ObcToggleSwitchInputEvent = CustomEvent<{\n  checked: boolean;\n}>;\n\n/**\n * `<obc-toggle-switch>` – A toggle switch component for binary on/off selection (also known as a switch, toggle, or enable/disable control).\n *\n * Provides a visual switch control for toggling between two states (checked/unchecked), commonly used for enabling or disabling a setting or feature. The component supports an optional label, description, icon, and divider for flexible presentation in lists or forms.\n *\n * ---\n *\n * ### Features\n * - **Binary toggle:** Allows users to switch between checked (on) and unchecked (off) states.\n * - **Label and Description:** Displays a primary label and an optional secondary description for context.\n * - **Icon Support:** Can display a leading icon via the `icon` slot for visual emphasis.\n * - **Disabled State:** Can be set to disabled, preventing user interaction and visually indicating inactivity.\n * - **Bottom Divider:** Optional divider for use in lists or grouped settings.\n * - **Responsive Layout:** Adapts label/description layout based on content; long descriptions are truncated with ellipsis.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `obc-toggle-switch` for settings or preferences that require a simple on/off or enable/disable control. Ideal for scenarios where the user needs to quickly toggle a feature, such as activating notifications, enabling dark mode, or switching connectivity options. Avoid using for mutually exclusive choices—use radio buttons for those cases.\n *\n * - Place in forms, settings panels, or lists where binary choices are needed.\n * - Use the description property to clarify the effect of the toggle if the label alone is not sufficient.\n * - If an icon is relevant, provide it via the `icon` slot to reinforce the meaning.\n * - For accessibility, ensure the label clearly describes the toggle's function.\n *\n * ---\n *\n * ### Slots\n * | Slot Name | Renders When...      | Purpose                                   |\n * |-----------|---------------------|-------------------------------------------|\n * | icon      | `hasIcon` is true   | Leading icon to visually represent toggle |\n *\n * ---\n *\n * ### Properties and Attributes\n * - `label` (string): Main label for the toggle (required for clarity).\n * - `checked` (boolean): Whether the toggle is in the \"on\" state. Defaults to `false`.\n * - `disabled` (boolean): Disables interaction and applies a disabled style.\n * - `hasDescription` (boolean): If true, shows the description text below the label.\n * - `description` (string): Supplementary text shown when `hasDescription` is true.\n * - `hasBottomDivider` (boolean): If true, renders a divider below the toggle (useful in lists).\n * - `hasIcon` (boolean): If true, displays the `icon` slot before the label.\n *\n * ---\n *\n * ### Events\n * - `input` – Fired when the toggle state changes (checked/unchecked).\n *\n * ---\n *\n * ### Best Practices\n * - Use concise labels and keep descriptions brief; long descriptions are truncated.\n * - Only use the divider when presenting multiple toggles in a list for visual separation.\n * - For accessibility, ensure the label is descriptive and unique within the context.\n * - Avoid using toggle switches for actions that require confirmation or have destructive effects.\n * - For mutually exclusive options, use radio buttons instead.\n *\n * ---\n *\n * **Example:**\n * ```html\n * <obc-toggle-switch\n *   label=\"Enable notifications\"\n *   ?checked=${true}\n *   ?hasDescription=${true}\n *   description=\"Receive updates and alerts\"\n *   ?hasIcon=${true}\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-switch>\n * ```\n *\n * In this example, the toggle switch displays a label, an icon, and a description, and is in the checked state.\n *\n * @slot icon - Leading icon slot (shown when `hasIcon` is true)\n * @fires input - {ObcToggleSwitchInputEvent} Dispatched when the value of the input changes\n */\n@customElement('obc-toggle-switch')\nexport class ObcToggleSwitch extends LitElement {\n  /**\n   * Main label for the toggle switch. Should clearly describe the setting being toggled.\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * Whether the toggle is in the \"on\" (checked) state.\n   * Set to true to display as active/on.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Disables the toggle, preventing user interaction and applying a disabled style.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * If true, displays the description text below the label.\n   */\n  @property({type: Boolean}) hasDescription = false;\n\n  /**\n   * Supplementary description text shown when `hasDescription` is true.\n   * Use to clarify the effect or details of the toggle.\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * If true, renders a divider below the toggle switch.\n   * Useful for visually separating items in a list.\n   */\n  @property({type: Boolean}) hasBottomDivider = false;\n\n  /**\n   * If true, displays a leading icon before the label.\n   * Provide icon content via the `icon` slot.\n   */\n  @property({type: Boolean}) hasIcon = false;\n\n  /**\n   * If true, the toggle is controlled externally.\n   * Use to control the toggle state from outside the component.\n   */\n  @property({type: Boolean}) externalControl = false;\n\n  /**\n   * Handles input events to change the toggle state.\n   * Prevents changes if the toggle is disabled.\n   * @param e {InputEvent}\n   * @fires input - Dispatched when the value of the input changes\n   */\n  private _tryChange(e: InputEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const nextChecked = !this.checked;\n    if (!this.externalControl) {\n      this.checked = nextChecked;\n    }\n    e.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: {checked: nextChecked},\n      })\n    );\n\n    if (this.externalControl) {\n      (e.target as HTMLInputElement).checked = this.checked;\n    }\n  }\n\n  override render() {\n    return html`\n      <label\n        class=${classMap({\n          checked: this.checked,\n          disabled: this.disabled,\n          'has-description': this.hasDescription,\n        })}\n      >\n        <div class=\"icon-label-container\">\n          ${this.hasIcon\n            ? html`<div class=\"icon-container\"><slot name=\"icon\"></slot></div>`\n            : nothing}\n          <div class=\"label-container\">\n            <span class=\"label\">${this.label}</span>\n            ${this.hasDescription\n              ? html`<span class=\"description\">${this.description}</span>`\n              : nothing}\n          </div>\n        </div>\n        <div class=\"switch\">\n          <div class=\"presenter ${classMap({checked: this.checked})}\">\n            <div class=\"knob\"></div>\n            <input\n              type=\"checkbox\"\n              .checked=${this.checked}\n              ?disabled=${this.disabled}\n              @input=${this._tryChange}\n            />\n          </div>\n        </div>\n        ${this.hasBottomDivider\n          ? html`<div class=\"bottom-divider\"></div>`\n          : nothing}\n      </label>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-toggle-switch': ObcToggleSwitch;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyFO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIqB,SAAA,QAAQ;AAMP,SAAA,UAAU;AAKV,SAAA,WAAW;AAKX,SAAA,iBAAiB;AAMlB,SAAA,cAAc;AAMb,SAAA,mBAAmB;AAMnB,SAAA,UAAU;AAMV,SAAA,kBAAkB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrC,WAAW,GAAe;AAChC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,KAAK;AAC1B,QAAI,CAAC,KAAK,iBAAiB;AACzB,WAAK,UAAU;AAAA,IACjB;AACA,MAAE,gBAAA;AACF,SAAK;AAAA,MACH,IAAI,YAAY,SAAS;AAAA,QACvB,QAAQ,EAAC,SAAS,YAAA;AAAA,MAAW,CAC9B;AAAA,IAAA;AAGH,QAAI,KAAK,iBAAiB;AACvB,QAAE,OAA4B,UAAU,KAAK;AAAA,IAChD;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,mBAAmB,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,UACH,oEACA,OAAO;AAAA;AAAA,kCAEa,KAAK,KAAK;AAAA,cAC9B,KAAK,iBACH,iCAAiC,KAAK,WAAW,YACjD,OAAO;AAAA;AAAA;AAAA;AAAA,kCAIW,SAAS,EAAC,SAAS,KAAK,QAAA,CAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI1C,KAAK,OAAO;AAAA,0BACX,KAAK,QAAQ;AAAA,uBAChB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,UAI5B,KAAK,mBACH,2CACA,OAAO;AAAA;AAAA;AAAA,EAGjB;AAGF;AAjHa,gBAgHK,SAAS,UAAU,cAAc;AA5GvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,gBAIe,WAAA,SAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAVd,gBAUgB,WAAA,WAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAfd,gBAegB,WAAA,YAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApBd,gBAoBgB,WAAA,kBAAA,CAAA;AAMD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Bb,gBA0Be,WAAA,eAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhCd,gBAgCgB,WAAA,oBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAtCd,gBAsCgB,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA5Cd,gBA4CgB,WAAA,mBAAA,CAAA;AA5ChB,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/dist/components/toggle-switch/toggle-switch.spec.d.ts

@@ -0,0 +1,2 @@
+import './toggle-switch.js';
+//# sourceMappingURL=toggle-switch.spec.d.ts.map

package/dist/components/toggle-switch/toggle-switch.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.spec.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.spec.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC"}

package/dist/components/toggle-switch/toggle-switch.spec.js

@@ -0,0 +1,115 @@
+import "./toggle-switch.js";
+import "../../node_modules/vitest-browser-lit/dist/index.js";
+import { html } from "lit";
+import { describe, beforeEach, it } from "../../node_modules/@vitest/runner/dist/index.js";
+import { g as globalExpect, v as vi } from "../../node_modules/vitest/dist/chunks/test.CTcmp4Su.js";
+import { render as render$1 } from "../../node_modules/vitest-browser-lit/dist/pure-D9bcvh0k.js";
+describe("obc-toggle-switch", () => {
+  let el;
+  let input;
+  async function setup(markup = html`<obc-toggle-switch></obc-toggle-switch>`) {
+    const screen = render$1(markup);
+    el = screen.baseElement.querySelector(
+      "obc-toggle-switch"
+    );
+    await el.updateComplete;
+    if (!el.shadowRoot) {
+      console.error("Shadow root not found", el);
+      throw new Error("Shadow root not found");
+    }
+    input = el.shadowRoot.querySelector(
+      'input[type="checkbox"]'
+    );
+    if (!input) {
+      console.error("Input not found", el.shadowRoot);
+      throw new Error("Input not found");
+    }
+  }
+  beforeEach(async () => {
+    await setup();
+  });
+  it("defaults to unchecked", async () => {
+    globalExpect(el.checked).toBe(false);
+    globalExpect(input.checked).toBe(false);
+  });
+  describe("toggling (internal control)", () => {
+    it("dispatches input event with next checked value", async () => {
+      const handler = vi.fn();
+      el.addEventListener("input", handler);
+      input.click();
+      await el.updateComplete;
+      globalExpect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0]?.[0];
+      globalExpect(event.detail).toEqual({ checked: true });
+    });
+    it("combination of click and js control", async () => {
+      el.checked = true;
+      await el.updateComplete;
+      globalExpect(el.checked).toBe(true);
+      globalExpect(input.checked).toBe(true);
+      input.click();
+      await el.updateComplete;
+      globalExpect(el.checked).toBe(false);
+      globalExpect(input.checked).toBe(false);
+      input.click();
+      await el.updateComplete;
+      globalExpect(el.checked).toBe(true);
+      globalExpect(input.checked).toBe(true);
+      el.checked = false;
+      await el.updateComplete;
+      globalExpect(el.checked).toBe(false);
+      globalExpect(input.checked).toBe(false);
+    });
+    it("updates checked when user toggles", async () => {
+      input.click();
+      await el.updateComplete;
+      globalExpect(el.checked).toBe(true);
+      globalExpect(input.checked).toBe(true);
+    });
+  });
+  describe("externalControl", () => {
+    beforeEach(async () => {
+      el.externalControl = true;
+      await el.updateComplete;
+    });
+    it("does not change checked when user toggles", async () => {
+      globalExpect(el.checked).toBe(false);
+      globalExpect(input.checked).toBe(false);
+      input.click();
+      await el.updateComplete;
+      globalExpect(el.checked).toBe(false);
+      globalExpect(input.checked).toBe(false);
+    });
+    it("still dispatches input event with suggested next state", async () => {
+      const handler = vi.fn();
+      el.addEventListener("input", handler);
+      input.click();
+      await el.updateComplete;
+      globalExpect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0]?.[0];
+      globalExpect(event.detail).toEqual({ checked: true });
+    });
+  });
+  describe("disabled", () => {
+    beforeEach(async () => {
+      el.disabled = true;
+      await el.updateComplete;
+    });
+    it("prevents toggling", async () => {
+      globalExpect(el.checked).toBe(false);
+      globalExpect(input.disabled).toBe(true);
+      input.click();
+      await el.updateComplete;
+      globalExpect(el.checked).toBe(false);
+      globalExpect(input.checked).toBe(false);
+    });
+    it("does not dispatch input event", async () => {
+      const handler = vi.fn();
+      el.addEventListener("input", handler);
+      input.click();
+      await el.updateComplete;
+      globalExpect(handler).not.toHaveBeenCalled();
+    });
+  });
+});
+//# sourceMappingURL=toggle-switch.spec.js.map

package/dist/components/toggle-switch/toggle-switch.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.spec.js","sources":["../../../src/components/toggle-switch/toggle-switch.spec.ts"],"sourcesContent":["import {beforeEach, describe, expect, it, vi} from 'vitest';\nimport './toggle-switch.js';\nimport {ObcToggleSwitch} from './toggle-switch.js';\nimport {render} from 'vitest-browser-lit';\nimport {html} from 'lit';\n\ndescribe('obc-toggle-switch', () => {\n  let el: ObcToggleSwitch;\n  let input: HTMLInputElement;\n\n  async function setup(markup = html`<obc-toggle-switch></obc-toggle-switch>`) {\n    const screen = render(markup);\n    el = screen.baseElement.querySelector(\n      'obc-toggle-switch'\n    ) as ObcToggleSwitch;\n    await el.updateComplete;\n\n    if (!el.shadowRoot) {\n      console.error('Shadow root not found', el);\n      throw new Error('Shadow root not found');\n    }\n\n    input = el.shadowRoot.querySelector(\n      'input[type=\"checkbox\"]'\n    ) as HTMLInputElement;\n    if (!input) {\n      console.error('Input not found', el.shadowRoot);\n      throw new Error('Input not found');\n    }\n  }\n\n  beforeEach(async () => {\n    await setup();\n  });\n\n  it('defaults to unchecked', async () => {\n    expect(el.checked).toBe(false);\n    expect(input.checked).toBe(false);\n  });\n\n  describe('toggling (internal control)', () => {\n    it('dispatches input event with next checked value', async () => {\n      const handler = vi.fn();\n      el.addEventListener('input', handler);\n\n      input.click();\n      await el.updateComplete;\n\n      expect(handler).toHaveBeenCalledTimes(1);\n      const event = handler.mock.calls[0]?.[0] as CustomEvent<{\n        checked: boolean;\n      }>;\n      expect(event.detail).toEqual({checked: true});\n    });\n\n    it('combination of click and js control', async () => {\n      el.checked = true;\n      await el.updateComplete;\n      expect(el.checked).toBe(true);\n      expect(input.checked).toBe(true);\n\n      input.click();\n      await el.updateComplete;\n\n      expect(el.checked).toBe(false);\n      expect(input.checked).toBe(false);\n\n      input.click();\n      await el.updateComplete;\n\n      expect(el.checked).toBe(true);\n      expect(input.checked).toBe(true);\n\n      el.checked = false;\n      await el.updateComplete;\n      expect(el.checked).toBe(false);\n      expect(input.checked).toBe(false);\n    });\n\n    it('updates checked when user toggles', async () => {\n      input.click();\n      await el.updateComplete;\n\n      expect(el.checked).toBe(true);\n      expect(input.checked).toBe(true);\n    });\n  });\n\n  describe('externalControl', () => {\n    beforeEach(async () => {\n      el.externalControl = true;\n      await el.updateComplete;\n    });\n\n    it('does not change checked when user toggles', async () => {\n      expect(el.checked).toBe(false);\n      expect(input.checked).toBe(false);\n\n      input.click();\n      await el.updateComplete;\n\n      expect(el.checked).toBe(false);\n      expect(input.checked).toBe(false);\n    });\n\n    it('still dispatches input event with suggested next state', async () => {\n      const handler = vi.fn();\n      el.addEventListener('input', handler);\n\n      input.click();\n      await el.updateComplete;\n\n      expect(handler).toHaveBeenCalledTimes(1);\n      const event = handler.mock.calls[0]?.[0] as CustomEvent<{\n        checked: boolean;\n      }>;\n      expect(event.detail).toEqual({checked: true});\n    });\n  });\n\n  describe('disabled', () => {\n    beforeEach(async () => {\n      el.disabled = true;\n      await el.updateComplete;\n    });\n\n    it('prevents toggling', async () => {\n      expect(el.checked).toBe(false);\n      expect(input.disabled).toBe(true);\n\n      input.click();\n      await el.updateComplete;\n\n      expect(el.checked).toBe(false);\n      expect(input.checked).toBe(false);\n    });\n\n    it('does not dispatch input event', async () => {\n      const handler = vi.fn();\n      el.addEventListener('input', handler);\n\n      input.click();\n      await el.updateComplete;\n\n      expect(handler).not.toHaveBeenCalled();\n    });\n  });\n});\n"],"names":["render","expect"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.20260326144449",
+  "version": "0.0.20260327071335",
   "type": "module",
   "repository": {
     "type": "git",