bromcom-ui-next 0.1.29 → 0.1.31

package/dist/collection/components/switch/switch.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.component.js","sourceRoot":"","sources":["../../../src/components/switch/switch.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n *   label=\"Accept terms\"\n *   error={true}\n *   caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n *   label=\"Advanced features\"\n *   disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n *   label=\"Dark mode\"\n *   size=\"large\"\n *   labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n  tag: 'bcm-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n  /** Reference to the host element */\n  @Element()\n  el: HTMLElement;\n\n  /** Whether the switch is checked or not */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Whether the switch is disabled */\n  @Prop()\n  disabled: boolean = false;\n\n  /** The name attribute for the hidden input element */\n  @Prop()\n  name: string;\n\n  /** The value attribute for the hidden input element */\n  @Prop()\n  value: string;\n\n  /** Text label for the switch */\n  @Prop()\n  label: string;\n\n  /** Position of the label relative to the switch */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /** Whether to display the switch in an error state */\n  @Prop()\n  error: boolean = false;\n\n  /** Text to display as an error message when error is true */\n  @Prop()\n  caption?: string;\n\n  /** Size variant of the switch */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Whether the switch is in readonly mode */\n  @Prop()\n  readonly: boolean = false;\n\n  /** Whether the switch is required in a form */\n  @Prop()\n  required: boolean = false;\n\n  /** Emitted when the switch state changes */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmSwitchChange: EventEmitter<boolean>;\n\n  private switchId = generateId('switch');\n\n  private toggleSwitch(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = !this.checked;\n    this.bcmSwitchChange.emit(this.checked);\n  }\n\n  private switchStyle = () => {\n    const defaultStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n    };\n\n    const checkedStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n    };\n\n    const readonlyStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n    };\n\n    const disabledStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.checked && checkedStyle),\n      ...(this.error && errorStyle),\n      ...(this.readonly && readonlyStyle),\n      ...(this.disabled && disabledStyle),\n    };\n  };\n\n  private switchClass = tv({\n    slots: {\n      base: 'bcm-ui-element flex flex-col',\n      switchWrapper: 'flex items-center group',\n      dotContainer:\n        'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n      dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n      caption: '!text-color-error font-normal',\n      label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n    },\n    variants: {\n      size: {\n        small: {\n          dotContainer: 'w-8 h-4',\n          dot: 'size-3',\n          label: 'text-size-4',\n          caption: 'text-size-3',\n          switchWrapper: 'gap-2',\n          base: 'gap-0.5',\n        },\n        medium: {\n          dotContainer: 'w-9 h-[1.125rem]',\n          dot: 'size-3.5',\n          label: 'text-size-5',\n          caption: 'text-size-4',\n          switchWrapper: 'gap-2.5',\n          base: 'gap-1',\n        },\n        large: {\n          dotContainer: 'w-10 h-5',\n          dot: 'size-4',\n          label: 'text-size-6',\n          caption: 'text-size-5',\n          switchWrapper: 'gap-3',\n          base: 'gap-2',\n        },\n      },\n      labelPosition: {\n        left: {\n          label: '',\n        },\n        right: {\n          label: 'order-2',\n        },\n      },\n      checked: {\n        true: {\n          dot: '',\n        },\n        false: {\n          dot: 'left-0.5',\n        },\n      },\n      disabled: {\n        true: '',\n        false: {\n          switchWrapper: '',\n        },\n      },\n      readonly: {\n        true: {\n          switchWrapper: 'cursor-default',\n          dotContainer: 'cursor-default',\n          dot: 'cursor-default',\n        },\n        false: {\n          switchWrapper: 'cursor-pointer',\n          dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        size: 'small',\n        checked: true,\n        class: {\n          dot: 'left-[1.125rem]',\n        },\n      },\n      {\n        size: 'medium',\n        checked: true,\n        class: {\n          dot: 'left-[1.25rem]',\n        },\n      },\n      {\n        size: 'large',\n        checked: true,\n        class: {\n          dot: 'left-[1.375rem]',\n        },\n      },\n      {\n        readonly: false,\n        disabled: false,\n        class: {\n          dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n        },\n      },\n    ],\n  });\n\n  render() {\n    const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n      readonly: this.readonly,\n    });\n\n    const ariaAttributes = {\n      'role': 'switch',\n      'aria-checked': this.checked.toString(),\n      'aria-disabled': this.disabled.toString(),\n      'aria-readonly': this.readonly.toString(),\n      ...(this.required && { 'aria-required': 'true' }),\n    };\n\n    const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n    return (\n      <div class={base()}>\n        <label class={switchWrapper()} style={this.switchStyle()}>\n          <input\n            id={this.switchId}\n            type=\"checkbox\"\n            class=\"hidden peer\"\n            checked={this.checked}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            onChange={() => this.toggleSwitch()}\n          />\n\n          {this.label && (\n            <span class={label()}>\n              <slot>{this.label}</slot>\n            </span>\n          )}\n          <label\n            htmlFor={this.switchId}\n            class={dotContainer()}\n            {...tabIndexAttr}\n            {...ariaAttributes}\n            onKeyDown={event => {\n              if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                event.preventDefault();\n                this.toggleSwitch();\n              }\n            }}\n          >\n            <div class={dot()}></div>\n          </label>\n        </label>\n\n        {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n        <slot name=\"caption\"></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"switch.component.js","sourceRoot":"","sources":["../../../src/components/switch/switch.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  AttachInternals,\n} from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\nimport { BaseChoiceControl } from '../_shared/form/base-choice-control';\n\n/**\n * @component BcmSwitch\n * @description\n * A form-associated toggle switch component representing a boolean choice.\n * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.\n *\n * This component supports **three validation strategies** via `validation-mode`:\n *\n * - **`native`**:\n *   - Uses native browser constraint validation.\n *   - Sets the underlying input's `required` attribute.\n *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.\n *\n * - **`silent`**:\n *   - Does **not** rely on native `required` (prevents the browser bubble).\n *   - Computes the \"missing required\" state internally and exposes it via `error` + `caption`.\n *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.\n *\n * - **`none`**:\n *   - Value-only mode (headless): participates in form value submission but never becomes invalid.\n *\n * ## UI error gating (silent mode)\n * To avoid showing errors on initial render, the component tracks:\n * - `touched`: set after the first user interaction\n * - `submitAttempted`: set when the parent form emits `submit`\n *\n * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.\n *\n * ## Value behavior\n * - When checked, the component submits its `value` (default: `\"on\"`).\n * - When unchecked, no value is submitted.\n * - When disabled, the component does not participate in submission or validity.\n *\n * @example Basic usage\n * <bcm-switch name=\"newsletter\" label=\"Receive newsletter?\" />\n *\n * @example Required with silent validation (no native bubble)\n * <form>\n *   <bcm-switch\n *     name=\"terms\"\n *     label=\"Accept terms\"\n *     required\n *     validation-mode=\"silent\">\n *   </bcm-switch>\n *   <button type=\"submit\">Submit</button>\n * </form>\n *\n * @example Native validation mode (may show native bubble)\n * <bcm-switch name=\"terms\" label=\"Accept terms\" required validation-mode=\"native\" />\n *\n * @example Value-only mode (no validation)\n * <bcm-switch name=\"analytics\" label=\"Allow analytics\" validation-mode=\"none\" />\n *\n * @csspart base - Root container\n * @csspart switch-wrapper - Wrapper containing label + track\n * @csspart input - Hidden native input\n * @csspart label - Text label\n * @csspart dot-container - Switch track\n * @csspart dot - Switch knob\n * @csspart caption - Helper/error text\n */\n@Component({\n  tag: 'bcm-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BcmSwitch extends BaseChoiceControl implements ComponentInterface {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Unique id (optional). Generated by default. */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-switch');\n\n  /** Visible label text */\n  @Prop() label!: string;\n\n  /** Position of the label relative to the switch */\n  @Prop() labelPosition: 'left' | 'right' = 'right';\n\n  /** Visual error state (manual/external). In silent mode this can be auto-managed. */\n  @Prop({ mutable: true }) error = false;\n\n  /** Helper / error text shown under the switch */\n  @Prop({ mutable: true }) caption?: string;\n\n  /** Size variant */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Internal checked mirror for UI (kept to preserve old DOM/class behavior) */\n  @State() internalChecked = false;\n\n  /** Gate for silent-mode error UI */\n  @State() private touched = false;\n\n  /** Gate for silent-mode error UI */\n  @State() private submitAttempted = false;\n\n  /** Emitted when the switch toggles */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmSwitchChange',\n  })\n  bcmSwitchChange!: EventEmitter<boolean>;\n\n  private inputEl!: HTMLInputElement;\n\n  // --------------------------------------------------\n  // Lifecycle\n  // --------------------------------------------------\n\n  componentWillLoad() {\n    this.internalChecked = !!this.checked;\n    this.updateFormValueAndValidity({ setUi: false });\n  }\n\n  componentDidLoad() {\n    this.syncNativeInput();\n\n    const form = this.internals?.form;\n    if (form) {\n      // capture = true: ensures we hear submit early\n      form.addEventListener('submit', this.onFormSubmit, true);\n    }\n  }\n\n  disconnectedCallback() {\n    const form = this.internals?.form;\n    if (form) {\n      form.removeEventListener('submit', this.onFormSubmit, true);\n    }\n  }\n\n  private onFormSubmit = () => {\n    this.submitAttempted = true;\n    this.updateFormValueAndValidity({ setUi: true });\n  };\n\n  formResetCallback() {\n    super.formResetCallback();\n    this.internalChecked = false;\n\n    // reset gating\n    this.touched = false;\n    this.submitAttempted = false;\n\n    // reset UI\n    this.error = false;\n    this.caption = undefined;\n\n    this.syncNativeInput();\n    this.updateFormValueAndValidity({ setUi: false });\n  }\n\n  // --------------------------------------------------\n  // Watchers\n  // --------------------------------------------------\n\n  @Watch('checked')\n  protected onBaseCheckedChange(newVal: boolean) {\n    this.internalChecked = !!newVal;\n    this.syncNativeInput();\n  }\n\n  // --------------------------------------------------\n  // Native sync\n  // --------------------------------------------------\n\n  private syncNativeInput() {\n    if (!this.inputEl) return;\n\n    this.inputEl.checked = this.internalChecked;\n    this.inputEl.disabled = this.disabled;\n\n    // ✅ Prevent native validation bubble in silent/none:\n    // only native mode applies native \"required\"\n    this.inputEl.required = this.validationMode === 'native' && this.required;\n  }\n\n  // --------------------------------------------------\n  // Form internals\n  // --------------------------------------------------\n\n  protected updateFormValueAndValidity(opts?: { setUi?: boolean }) {\n    const setUi = opts?.setUi ?? true;\n    if (!this.internals) return;\n\n    // Disabled -> no value, no validity, no UI errors\n    if (this.disabled) {\n      this.internals.setFormValue(null);\n      this.internals.setValidity({});\n\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    // Always set submitted value (even if validation is off)\n    const formValue = this.checked ? this.value ?? 'on' : null;\n    this.internals.setFormValue(formValue);\n\n    // none -> never invalid\n    if (this.validationMode === 'none') {\n      this.internals.setValidity({});\n\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    const isMissing = this.required && !this.checked;\n\n    // silent -> no validity, only gated UI\n    if (this.validationMode === 'silent') {\n      this.internals.setValidity({});\n      if (setUi) {\n        const shouldShow = this.touched || this.submitAttempted;\n        this.error = shouldShow && isMissing;\n        this.caption = shouldShow && isMissing ? 'This field is required' : undefined;\n      }\n      return;\n    }\n\n    // native -> real validity participation\n    if (isMissing) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        'This field is required',\n        this.inputEl ?? undefined,\n      );\n\n      // native mode uses browser UI; don't double-show component UI\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    this.internals.setValidity({});\n\n    if (setUi) {\n      this.error = false;\n      this.caption = undefined;\n    }\n  }\n\n\n  // --------------------------------------------------\n  // Interaction\n  // --------------------------------------------------\n\n  private toggleSwitch = (): void => {\n    if (this.disabled || this.readonly) return;\n\n    if (!this.touched) this.touched = true;\n\n    this.toggleChecked(); // base toggler updates `checked`\n    this.internalChecked = !!this.checked;\n\n    this.syncNativeInput();\n    this.updateFormValueAndValidity({ setUi: true });\n\n    this.bcmSwitchChange.emit(this.checked);\n  };\n\n  // --------------------------------------------------\n  // Styles\n  // --------------------------------------------------\n\n  private switchStyle = () => {\n    const defaultStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n    };\n\n    const checkedStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n    };\n\n    const readonlyStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n    };\n\n    const disabledStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.internalChecked && checkedStyle),\n      ...(this.error && errorStyle),\n      ...(this.readonly && readonlyStyle),\n      ...(this.disabled && disabledStyle),\n    };\n  };\n\n  private switchClass = tv({\n    slots: {\n      base: 'bcm-ui-element flex flex-col',\n      switchWrapper: 'flex items-center group',\n      dotContainer:\n        'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n      dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n      caption: '!text-color-error font-normal',\n      label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n    },\n    variants: {\n      size: {\n        small: {\n          dotContainer: 'w-8 h-4',\n          dot: 'size-3',\n          label: 'text-size-4',\n          caption: 'text-size-3',\n          switchWrapper: 'gap-2',\n          base: 'gap-0.5',\n        },\n        medium: {\n          dotContainer: 'w-9 h-[1.125rem]',\n          dot: 'size-3.5',\n          label: 'text-size-5',\n          caption: 'text-size-4',\n          switchWrapper: 'gap-2.5',\n          base: 'gap-1',\n        },\n        large: {\n          dotContainer: 'w-10 h-5',\n          dot: 'size-4',\n          label: 'text-size-6',\n          caption: 'text-size-5',\n          switchWrapper: 'gap-3',\n          base: 'gap-2',\n        },\n      },\n      labelPosition: {\n        left: { label: '' },\n        right: { label: 'order-2' },\n      },\n      checked: {\n        true: { dot: '' },\n        false: { dot: 'left-0.5' },\n      },\n      disabled: {\n        true: '',\n        false: { switchWrapper: '' },\n      },\n      readonly: {\n        true: {\n          switchWrapper: 'cursor-default',\n          dotContainer: 'cursor-default',\n          dot: 'cursor-default',\n        },\n        false: {\n          switchWrapper: 'cursor-pointer',\n          dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n        },\n      },\n    },\n    compoundVariants: [\n      { size: 'small', checked: true, class: { dot: 'left-[1.125rem]' } },\n      { size: 'medium', checked: true, class: { dot: 'left-[1.25rem]' } },\n      { size: 'large', checked: true, class: { dot: 'left-[1.375rem]' } },\n      {\n        readonly: false,\n        disabled: false,\n        class: {\n          dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n        },\n      },\n    ],\n  });\n\n  // --------------------------------------------------\n  // Render\n  // --------------------------------------------------\n\n  render() {\n    const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n      size: this.size,\n      checked: this.internalChecked,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n      readonly: this.readonly,\n    });\n\n    const ariaAttributes = {\n      role: 'switch',\n      'aria-checked': this.internalChecked.toString(),\n      'aria-disabled': this.disabled.toString(),\n      'aria-readonly': this.readonly.toString(),\n      ...(this.required && { 'aria-required': 'true' }),\n    };\n\n    const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n    return (\n      <div class={base()} part=\"base\">\n        <label class={switchWrapper()} style={this.switchStyle()} part=\"switch-wrapper\">\n          <input\n            id={this._id}\n            type=\"checkbox\"\n            class=\"sr-only peer\"\n            checked={this.internalChecked}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            onChange={this.toggleSwitch}\n            ref={el => (this.inputEl = el as HTMLInputElement)}\n            part=\"input\"\n          />\n\n          {this.label && (\n            <span class={label()} part=\"label\">\n              <slot>{this.label}</slot>\n            </span>\n          )}\n\n          <label\n            htmlFor={this._id}\n            class={dotContainer()}\n            {...tabIndexAttr}\n            {...ariaAttributes}\n            part=\"dot-container\"\n            onKeyDown={event => {\n              if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                event.preventDefault();\n                this.toggleSwitch();\n              }\n            }}\n          >\n            <div class={dot()} part=\"dot\"></div>\n          </label>\n        </label>\n\n        {this.error && this.caption && (\n          <span class={caption()} part=\"caption\">\n            {this.caption}\n          </span>\n        )}\n\n        <slot name=\"caption\"></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/switch/switch.css

@@ -1 +1 @@
-:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\.5{left:.125rem}.left-\[1\.125rem\]{left:1.125rem}.left-\[1\.25rem\]{left:1.25rem}.left-\[1\.375rem\]{left:1.375rem}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\[1\.125rem\]{height:1.125rem}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--switch-bg\]{background-color:var(--switch-bg)}.bg-\[--switch-dot-bg\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\:bg-\[--switch-bg-hover\],.hover\:bg-\[--switch-bg-hover\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}
+:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\.5{left:.125rem}.left-\[1\.125rem\]{left:1.125rem}.left-\[1\.25rem\]{left:1.25rem}.left-\[1\.375rem\]{left:1.375rem}.order-2{order:2}.flex{display:flex}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\[1\.125rem\]{height:1.125rem}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--switch-bg\]{background-color:var(--switch-bg)}.bg-\[--switch-dot-bg\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\:bg-\[--switch-bg-hover\],.hover\:bg-\[--switch-bg-hover\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}

package/dist/collection/components/tabs/bcm-tab.css

@@ -0,0 +1 @@
+.block{display:block}:host{display:none}:host([active]){display:block}.tab-panel{animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.static{position:static}.p-4{padding:1rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

package/dist/collection/components/tabs/bcm-tabs.css

@@ -1 +1 @@
-.relative{position:relative}.block{display:block}:host{display:block;position:relative}:host([variant=full-width]){width:100%}:host([variant=auto-width]){width:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.contents{display:contents}.w-auto{width:auto}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}
+.block{display:block}:host{display:block;width:100%}.tabs-container{--active-index:0;--tab-count:1}.inkbar{transition-timing-function:cubic-bezier(.4,0,.2,1)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.flex{display:flex}.hidden{display:none}.h-0\.5{height:.125rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.rounded-t-lg{border-top-left-radius:var(--bcm-ui-border-radius-lg,8px);border-top-right-radius:var(--bcm-ui-border-radius-lg,8px)}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:var(--bcm-ui-box-shadow-md);--tw-shadow-colored:var(--bcm-ui-box-shadow-md)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.hover\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}

package/dist/collection/components/tabs/tab.component.js

@@ -0,0 +1,169 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Individual tab component - self-contained with label and content panel
+ * @slot - Default slot for tab content
+ */
+export class BcmTab {
+    el;
+    /**
+     * Unique identifier for this tab
+     */
+    value;
+    /**
+     * Label text to display in tab button
+     */
+    label;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Active state (controlled by parent)
+     */
+    active = false;
+    /**
+     * Size variant (inherited from parent)
+     */
+    size = 'md';
+    /**
+     * Internal event emitted when tab button is clicked
+     */
+    bcmTabClick;
+    render() {
+        return (h(Host, { key: '738093c7bae97cdbf80ad64431777a017797437e', role: "tabpanel", "aria-labelledby": `tab-${this.value}`, id: `panel-${this.value}`, "aria-hidden": (!this.active).toString(), style: { display: this.active ? 'block' : 'none' } }, h("div", { key: 'f19a9b3fed8c388b368cd411f429d9f01fb704bc', class: "tab-panel p-4" }, h("slot", { key: '6087e6a56403adff89b34d7ac1bd8419d9fc1895' }))));
+    }
+    static get is() { return "bcm-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bcm-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bcm-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text to display in tab button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active state (controlled by parent)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant (inherited from parent)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmTabClick",
+                "name": "bcmTabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal event emitted when tab button is clicked"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=tab.component.js.map

package/dist/collection/components/tabs/tab.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAEvF;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACN,EAAE,CAAc;IAE3B;;OAEG;IAEH,KAAK,CAAU;IAEf;;OAEG;IAEH,KAAK,CAAU;IAEf;;OAEG;IAEH,QAAQ,GAAY,KAAK,CAAC;IAE1B;;OAEG;IAEH,MAAM,GAAY,KAAK,CAAC;IAExB;;OAEG;IAEH,IAAI,GAAuB,IAAI,CAAC;IAEhC;;OAEG;IAOH,WAAW,CAAuB;IAElC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,qBACE,OAAO,IAAI,CAAC,KAAK,EAAE,EACpC,EAAE,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE,iBACZ,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EACtC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;YAElD,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Individual tab component - self-contained with label and content panel\n * @slot - Default slot for tab content\n */\n@Component({\n  tag: 'bcm-tab',\n  styleUrl: 'bcm-tab.css',\n  shadow: true,\n})\nexport class BcmTab {\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier for this tab\n   */\n  @Prop({ reflect: true })\n  value!: string;\n\n  /**\n   * Label text to display in tab button\n   */\n  @Prop({ reflect: true })\n  label!: string;\n\n  /**\n   * Disabled state\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Active state (controlled by parent)\n   */\n  @Prop({ mutable: true, reflect: true })\n  active: boolean = false;\n\n  /**\n   * Size variant (inherited from parent)\n   */\n  @Prop({ mutable: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Internal event emitted when tab button is clicked\n   */\n  @Event({\n    composed: false,\n    bubbles: true,\n    cancelable: true,\n    eventName: 'bcmTabClick',\n  })\n  bcmTabClick: EventEmitter<string>;\n\n  render() {\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-labelledby={`tab-${this.value}`}\n        id={`panel-${this.value}`}\n        aria-hidden={(!this.active).toString()}\n        style={{ display: this.active ? 'block' : 'none' }}\n      >\n        <div class=\"tab-panel p-4\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}