dap-design-system 0.62.4 → 0.63.0

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

@@ -1 +1 @@
-{"version":3,"file":"switch.component.js","sources":["../../../src/components/switch/switch.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { LabeledChoiceElement } from '@/internal/mixin/labeledChoiceElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './switch.scss?inline'\n\n/**\n * `dap-ds-switch`\n * @summary A switch is a graphical control element that allows the user to toggle between two states.\n * @element dap-ds-switch\n * @title - Switch\n *\n * @property {string} name - The name of the switch.\n * @property {string} value - The value of the switch.\n * @property {string} label - The label of the switch.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the switch.\n * @property {boolean} checked - The checked state of the switch.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the switch.\n * @property {boolean} disabled - The disabled state of the switch.\n * @property {boolean} readonly - Whether the switch is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - The required state of the switch.\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the switch.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the switch.\n * @property {boolean} optional - The optional state of the switch.\n * @property {string} optionalLabel - The optional label of the switch.\n * @property {string} requiredLabel - The required indicator of the switch. (default: '*')\n *\n * @cssProperty --dds-switch-width - Width of the switch control (default: var(--dds-spacing-1000)\n * @cssProperty --dds-switch-height - Height of the switch control (default: var(--dds-spacing-600))\n * @cssProperty --dds-switch-thumb-width - Width of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-height - Height of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-margin - Margin around the switch thumb (default: 0.125rem)\n * @cssProperty --dds-switch-thumb-color - Color of the switch thumb (default: var(--dds-button-primary-icon-enabled))\n * @cssProperty --dds-switch-unchecked-bg - Background color of the switch when unchecked (default: var(--dds-background-neutral-base-inverted))\n * @cssProperty --dds-switch-checked-bg - Background color of the switch when checked (default: var(--dds-background-brand-base-inverted))\n * @cssProperty --dds-switch-invalid-bg - Background color of the switch when invalid (default: var(--dds-background-negative-base-inverted))\n * @cssProperty --dds-switch-disabled-bg - Background color of the switch when disabled (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-readonly-bg - Background color of the switch when readonly (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-wrapper-padding - Padding of the switch wrapper (default: var(--dds-spacing-400))\n * @cssProperty --dds-switch-wrapper-bg - Background color of the switch wrapper (default: var(--dds-background-neutral-subtle))\n * @cssProperty --dds-switch-border-color - Border color of the switch (default: var(--dds-border-neutral-subtle))\n * @cssProperty --dds-switch-high-contrast-border-color - Border color of the switch in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ void }} dds-blur - Emitted when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ value: string }} dds-input - Emitted when the input receives input.\n *\n * @csspart base - The main switch container.\n * @csspart baselabel - The main label container\n * @csspart label - The label of the switch.\n * @csspart input - The native input of the switch.\n * @csspart control - The control of the switch.\n * @csspart description - The description of the switch.\n */\nexport default class DapDSSwitch extends LabeledChoiceElement {\n  static tagName = 'dap-ds-switch'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n\n  @query('.input') private readonly input!: HTMLInputElement\n\n  /** This sets up border around the switch, when true. */\n  @property({ type: Boolean }) border: boolean = false\n\n  /** The type of the switch\n   * @type {'normal' | 'background'}\n   */\n  @property({ type: String }) type: 'normal' | 'background' = 'normal'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSSwitch.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSSwitch.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSSwitch.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSSwitch.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSSwitch.nextId}-${uniqueSuffix}`\n  }\n\n  /**\n   * Validates property combinations and logs warnings for invalid states.\n   * @private\n   */\n  private validateProperties(): void {\n    // Add any switch-specific validation here\n    if (this.required && !this.checked) {\n      // This will be handled by form validation, but we can provide early feedback\n    }\n  }\n\n  /**\n   * Gets the aria-describedby attribute value by combining description and feedback IDs.\n   * @returns {string | undefined} Space-separated IDs or undefined if none exist\n   * @private\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push(this.descriptionId)\n    }\n\n    if (this.feedback) {\n      ids.push(this.feedbackId!)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  /**\n   * Handles click events on the switch.\n   * Manages the checked state transitions and emits change events.\n   * @private\n   */\n  private readonly handleClick = (event?: Event): void => {\n    // Early return if component is disabled or readonly\n    if (this.disabled || this.readonly) {\n      if (this.readonly && event) {\n        event.preventDefault()\n        event.stopPropagation()\n      }\n      return\n    }\n\n    // Validate property combinations before state change\n    this.validateProperties()\n\n    // Toggle the checked state\n    this.checked = !this.checked\n\n    const { checked, value, disabled } = this\n\n    // Emit change event with error handling\n    try {\n      const event = new CustomEvent('dds-change', {\n        bubbles: true,\n        cancelable: false,\n        composed: true,\n        detail: {\n          checked,\n          value: value || '',\n          disabled,\n          readonly: this.readonly,\n        },\n      })\n\n      this.dispatchEvent(event)\n    } catch (error) {\n      console.error('Error emitting switch change event:', error)\n    }\n\n    // Update validity state with error handling\n    try {\n      this.setValidity()\n    } catch (error) {\n      console.error('Error setting switch validity:', error)\n    }\n  }\n\n  public get focusElement(): HTMLInputElement {\n    if (!this.input) {\n      throw new Error(\n        'Switch input element not found. Component may not be properly initialized.',\n      )\n    }\n    return this.input\n  }\n\n  /**\n   * Programmatically focuses the switch input element.\n   * @public\n   */\n  public focus(): void {\n    if (this.input && !this.disabled && !this.readonly) {\n      this.input.focus()\n    }\n  }\n\n  /**\n   * Programmatically blurs the switch input element.\n   * @public\n   */\n  public blur(): void {\n    if (this.input) {\n      this.input.blur()\n    }\n  }\n\n  /**\n   * Handles invalid events on the switch input.\n   * Prevents the default browser validation UI from showing and manages invalid state.\n   * @param {Event} event - The invalid event\n   * @private\n   */\n  public handleInvalid(event: Event): void {\n    event.preventDefault()\n    // Set invalid state if not already set\n    if (!this.invalid) {\n      this.invalid = true\n    }\n  }\n\n  /**\n   * Handles keyboard events on the switch.\n   * Provides enhanced keyboard navigation and accessibility.\n   * @param {KeyboardEvent} event - The keyboard event\n   * @private\n   */\n  private handleKeyDown(event: KeyboardEvent): void {\n    // Early return if readonly\n    if (this.readonly) {\n      return\n    }\n\n    // Handle Space key to toggle switch (in addition to default behavior)\n    if (event.code === 'Space') {\n      // Allow default Space behavior for switch input\n      // This ensures proper accessibility and form behavior\n      return\n    }\n\n    // Handle Enter key to toggle switch (custom behavior)\n    if (event.code === 'Enter') {\n      event.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\">\n        <label\n          part=\"baselabel\"\n          class=${clsx('switch choice', `switch--${this.size}`, {\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--readonly': this.readonly,\n            'switch--required': this.required,\n            'choice--readonly': this.readonly,\n            'choice--disabled': this.disabled,\n            'choice__label--right': this.labelPlacement === 'right',\n            'choice__label--left': this.labelPlacement === 'left',\n          })}>\n          <div\n            class=${clsx('input__wrapper', {\n              'input__wrapper--background': this.type === 'background',\n              'input__wrapper--border': this.border,\n            })}>\n            <input\n              part=\"input\"\n              type=\"checkbox\"\n              class=\"input\"\n              id=${this.inputId}\n              role=\"switch\"\n              .checked=${this.checked}\n              .required=${this.required}\n              .disabled=${this.disabled}\n              .readonly=${this.readonly}\n              aria-labelledby=${ifDefined(\n                !this.ariaLabel && this.label ? this.labelId : undefined,\n              )}\n              aria-describedby=${!this.ariaLabel\n                ? ifDefined(this.getAriaDescribedBy())\n                : ''}\n              aria-checked=${this.checked ? 'true' : 'false'}\n              .aria-invalid=${this.invalid ? 'true' : null}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.onFocus}\n              @blur=${this.onBlur}\n              @input=${this.onInput} />\n            <span\n              part=\"control\"\n              class=${clsx(\n                'input__control',\n                { 'input__control--disabled': this.disabled },\n                { 'input__control--readonly': this.readonly },\n                { 'input__control--invalid': this.invalid },\n                { 'input__control--checked': this.checked },\n              )}>\n              <span class=\"input__control-toggle\">\n                <dap-ds-icon\n                  name=\"checkbox-blank-circle-fill\"\n                  class=\"input__control-toggle-thumb\"\n                  aria-hidden=\"true\"></dap-ds-icon\n                ><dap-ds-icon\n                  name=\"checkbox-circle-fill\"\n                  class=${clsx(\n                    'input__control-toggle-thumb',\n                    'check-indicator',\n                  )}\n                  aria-hidden=\"true\"></dap-ds-icon>\n              </span>\n              <span\n                part=\"high-contrast\"\n                aria-hidden=\"true\"\n                class=${clsx(\n                  'input__control-high-contrast',\n                  `input__control-high-contrast--${this.size}`,\n                  {\n                    'input__control-high-contrast--disabled': this.disabled,\n                    'input__control-high-contrast--readonly': this.readonly,\n                  },\n                )}></span>\n            </span>\n            <div\n              part=\"label-container\"\n              class=${clsx('choice__label-container', {\n                'choice__label-container--disabled': this.disabled,\n                'choice__label-container--readonly': this.readonly,\n                'choice__label--bottom': this.descriptionPlacement === 'top',\n                'choice__label--top': this.descriptionPlacement === 'bottom',\n              })}>\n              ${this.label &&\n              html`<dap-ds-form-label\n                id=${this.labelId}\n                class=\"label\"\n                part=\"label\"\n                .size=${this.size}\n                .required=${this.required}\n                .requiredLabel=${this.requiredLabel}\n                .optional=${this.optional}\n                .optionalLabel=${this.optionalLabel}\n                aria-hidden=\"true\"\n                subtle\n                .disabled=${this.disabled || this.readonly}\n                .readonly=${this.readonly}\n                .hideLabel=${this.hideLabel}\n                label=${ifDefined(this.label)}\n                renderAs=\"span\">\n              </dap-ds-form-label>`}\n              ${this.description &&\n              html`\n                <dap-ds-typography\n                  part=\"description\"\n                  class=\"description\"\n                  variant=\"description\"\n                  aria-hidden=\"true\"\n                  size=${ifDefined(this.size as CommonFormElementSize)}\n                  id=${this.descriptionId}>\n                  ${this.description}\n                </dap-ds-typography>\n              `}\n            </div>\n          </div>\n          ${this.feedback &&\n          html`\n            <dap-ds-feedback\n              part=\"feedback\"\n              feedbackType=${ifDefined(this.feedbackType)}\n              feedbackSize=${ifDefined(this.size) as CommonSize}\n              id=\"feedback\"\n              .subtle=${this.subtle}>\n              ${this.feedback}\n            </dap-ds-feedback>\n          `}\n        </label>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSSwitch","_a","LabeledChoiceElement","event","checked","value","disabled","error","uniqueSuffix","ids","html","clsx","ifDefined","DapDSIcon","DapDSFormLabel","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","DapDSSwitch"],"mappings":"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"}
+{"version":3,"file":"switch.component.js","sources":["../../../src/components/switch/switch.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { LabeledChoiceElement } from '@/internal/mixin/labeledChoiceElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './switch.scss?inline'\n\n/**\n * `dap-ds-switch`\n * @summary A switch is a graphical control element that allows the user to toggle between two states.\n * @element dap-ds-switch\n * @title - Switch\n *\n * @property {string} name - The name of the switch.\n * @property {string} value - The value of the switch.\n * @property {string} label - The label of the switch.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the switch.\n * @property {boolean} checked - The checked state of the switch.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the switch.\n * @property {boolean} disabled - The disabled state of the switch.\n * @property {boolean} readonly - Whether the switch is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - The required state of the switch.\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the switch.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the switch.\n * @property {boolean} optional - The optional state of the switch.\n * @property {string} optionalLabel - The optional label of the switch.\n * @property {string} requiredLabel - The required indicator of the switch. (default: '*')\n *\n * @cssProperty --dds-switch-width - Width of the switch control (default: var(--dds-spacing-1000)\n * @cssProperty --dds-switch-height - Height of the switch control (default: var(--dds-spacing-600))\n * @cssProperty --dds-switch-thumb-width - Width of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-height - Height of the switch thumb (default: var(--dds-spacing-500))\n * @cssProperty --dds-switch-thumb-margin - Margin around the switch thumb (default: 0.125rem)\n * @cssProperty --dds-switch-thumb-color - Color of the switch thumb (default: var(--dds-button-primary-icon-enabled))\n * @cssProperty --dds-switch-unchecked-bg - Background color of the switch when unchecked (default: var(--dds-background-neutral-base-inverted))\n * @cssProperty --dds-switch-checked-bg - Background color of the switch when checked (default: var(--dds-background-brand-base-inverted))\n * @cssProperty --dds-switch-invalid-bg - Background color of the switch when invalid (default: var(--dds-background-negative-base-inverted))\n * @cssProperty --dds-switch-disabled-bg - Background color of the switch when disabled (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-readonly-bg - Background color of the switch when readonly (default: var(--dds-background-neutral-disabled))\n * @cssProperty --dds-switch-wrapper-padding - Padding of the switch wrapper (default: var(--dds-spacing-400))\n * @cssProperty --dds-switch-wrapper-bg - Background color of the switch wrapper (default: var(--dds-background-neutral-subtle))\n * @cssProperty --dds-switch-border-color - Border color of the switch (default: var(--dds-border-neutral-subtle))\n * @cssProperty --dds-switch-high-contrast-border-color - Border color of the switch in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ void }} dds-blur - Emitted when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ value: string }} dds-input - Emitted when the input receives input.\n *\n * @csspart base - The main switch container.\n * @csspart baselabel - The main label container\n * @csspart label - The label of the switch.\n * @csspart input - The native input of the switch.\n * @csspart control - The control of the switch.\n * @csspart description - The description of the switch.\n * @csspart label-container - The label container of the switch.\n * @csspart feedback - The feedback of the switch.\n * @csspart high-contrast - The high contrast indicator of the switch.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\nexport default class DapDSSwitch extends LabeledChoiceElement {\n  static tagName = 'dap-ds-switch'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n\n  @query('.input') private readonly input!: HTMLInputElement\n\n  /** This sets up border around the switch, when true. */\n  @property({ type: Boolean }) border: boolean = false\n\n  /** The type of the switch\n   * @type {'normal' | 'background'}\n   */\n  @property({ type: String }) type: 'normal' | 'background' = 'normal'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSSwitch.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSSwitch.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSSwitch.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSSwitch.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSSwitch.nextId}-${uniqueSuffix}`\n  }\n\n  /**\n   * Validates property combinations and logs warnings for invalid states.\n   * @private\n   */\n  private validateProperties(): void {\n    // Add any switch-specific validation here\n    if (this.required && !this.checked) {\n      // This will be handled by form validation, but we can provide early feedback\n    }\n  }\n\n  /**\n   * Gets the aria-describedby attribute value by combining description and feedback IDs.\n   * @returns {string | undefined} Space-separated IDs or undefined if none exist\n   * @private\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push(this.descriptionId)\n    }\n\n    if (this.feedback) {\n      ids.push(this.feedbackId!)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  /**\n   * Handles click events on the switch.\n   * Manages the checked state transitions and emits change events.\n   * @private\n   */\n  private readonly handleClick = (event?: Event): void => {\n    // Early return if component is disabled or readonly\n    if (this.disabled || this.readonly) {\n      if (this.readonly && event) {\n        event.preventDefault()\n        event.stopPropagation()\n      }\n      return\n    }\n\n    // Validate property combinations before state change\n    this.validateProperties()\n\n    // Toggle the checked state\n    this.checked = !this.checked\n\n    const { checked, value, disabled } = this\n\n    // Emit change event with error handling\n    try {\n      const event = new CustomEvent('dds-change', {\n        bubbles: true,\n        cancelable: false,\n        composed: true,\n        detail: {\n          checked,\n          value: value || '',\n          disabled,\n          readonly: this.readonly,\n        },\n      })\n\n      this.dispatchEvent(event)\n    } catch (error) {\n      console.error('Error emitting switch change event:', error)\n    }\n\n    // Update validity state with error handling\n    try {\n      this.setValidity()\n    } catch (error) {\n      console.error('Error setting switch validity:', error)\n    }\n  }\n\n  public get focusElement(): HTMLInputElement {\n    if (!this.input) {\n      throw new Error(\n        'Switch input element not found. Component may not be properly initialized.',\n      )\n    }\n    return this.input\n  }\n\n  /**\n   * Programmatically focuses the switch input element.\n   * @public\n   */\n  public focus(): void {\n    if (this.input && !this.disabled && !this.readonly) {\n      this.input.focus()\n    }\n  }\n\n  /**\n   * Programmatically blurs the switch input element.\n   * @public\n   */\n  public blur(): void {\n    if (this.input) {\n      this.input.blur()\n    }\n  }\n\n  /**\n   * Handles invalid events on the switch input.\n   * Prevents the default browser validation UI from showing and manages invalid state.\n   * @param {Event} event - The invalid event\n   * @private\n   */\n  public handleInvalid(event: Event): void {\n    event.preventDefault()\n    // Set invalid state if not already set\n    if (!this.invalid) {\n      this.invalid = true\n    }\n  }\n\n  /**\n   * Handles keyboard events on the switch.\n   * Provides enhanced keyboard navigation and accessibility.\n   * @param {KeyboardEvent} event - The keyboard event\n   * @private\n   */\n  private handleKeyDown(event: KeyboardEvent): void {\n    // Early return if readonly\n    if (this.readonly) {\n      return\n    }\n\n    // Handle Space key to toggle switch (in addition to default behavior)\n    if (event.code === 'Space') {\n      // Allow default Space behavior for switch input\n      // This ensures proper accessibility and form behavior\n      return\n    }\n\n    // Handle Enter key to toggle switch (custom behavior)\n    if (event.code === 'Enter') {\n      event.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\">\n        <label\n          part=\"baselabel\"\n          class=${clsx('switch choice', `switch--${this.size}`, {\n            'switch--checked': this.checked,\n            'switch--disabled': this.disabled,\n            'switch--readonly': this.readonly,\n            'switch--required': this.required,\n            'choice--readonly': this.readonly,\n            'choice--disabled': this.disabled,\n            'choice__label--right': this.labelPlacement === 'right',\n            'choice__label--left': this.labelPlacement === 'left',\n          })}>\n          <div\n            class=${clsx('input__wrapper', {\n              'input__wrapper--background': this.type === 'background',\n              'input__wrapper--border': this.border,\n            })}>\n            <input\n              part=\"input\"\n              type=\"checkbox\"\n              class=\"input\"\n              id=${this.inputId}\n              role=\"switch\"\n              .checked=${this.checked}\n              .required=${this.required}\n              .disabled=${this.disabled}\n              .readonly=${this.readonly}\n              aria-labelledby=${ifDefined(\n                !this.ariaLabel && this.label ? this.labelId : undefined,\n              )}\n              aria-describedby=${!this.ariaLabel\n                ? ifDefined(this.getAriaDescribedBy())\n                : ''}\n              aria-checked=${this.checked ? 'true' : 'false'}\n              .aria-invalid=${this.invalid ? 'true' : null}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.onFocus}\n              @blur=${this.onBlur}\n              @input=${this.onInput} />\n            <span\n              part=\"control\"\n              class=${clsx(\n                'input__control',\n                { 'input__control--disabled': this.disabled },\n                { 'input__control--readonly': this.readonly },\n                { 'input__control--invalid': this.invalid },\n                { 'input__control--checked': this.checked },\n              )}>\n              <span class=\"input__control-toggle\">\n                <dap-ds-icon\n                  name=\"checkbox-blank-circle-fill\"\n                  class=\"input__control-toggle-thumb\"\n                  aria-hidden=\"true\"></dap-ds-icon\n                ><dap-ds-icon\n                  name=\"checkbox-circle-fill\"\n                  class=${clsx(\n                    'input__control-toggle-thumb',\n                    'check-indicator',\n                  )}\n                  aria-hidden=\"true\"></dap-ds-icon>\n              </span>\n              <span\n                part=\"high-contrast\"\n                aria-hidden=\"true\"\n                class=${clsx(\n                  'input__control-high-contrast',\n                  `input__control-high-contrast--${this.size}`,\n                  {\n                    'input__control-high-contrast--disabled': this.disabled,\n                    'input__control-high-contrast--readonly': this.readonly,\n                  },\n                )}></span>\n            </span>\n            <div\n              part=\"label-container\"\n              class=${clsx('choice__label-container', {\n                'choice__label-container--disabled': this.disabled,\n                'choice__label-container--readonly': this.readonly,\n                'choice__label--bottom': this.descriptionPlacement === 'top',\n                'choice__label--top': this.descriptionPlacement === 'bottom',\n              })}>\n              ${formLabelTemplate({\n                label: this.label,\n                id: this.labelId,\n                size: this.size,\n                required: this.required,\n                requiredLabel: this.requiredLabel,\n                optional: this.optional,\n                optionalLabel: this.optionalLabel,\n                disabled: this.disabled || this.readonly,\n                hideLabel: this.hideLabel,\n                subtle: true,\n                // Rendered as a decorative <span> (not a <label>): checkbox/switch\n                // already wrap the input in an outer <label>, and the accessible\n                // name comes from the input's aria-labelledby=${labelId}.\n                as: 'span',\n                ariaHidden: true,\n              })}\n              ${this.description &&\n              html`\n                <dap-ds-typography\n                  part=\"description\"\n                  class=\"description\"\n                  variant=\"description\"\n                  aria-hidden=\"true\"\n                  size=${ifDefined(this.size as CommonFormElementSize)}\n                  id=${this.descriptionId}>\n                  ${this.description}\n                </dap-ds-typography>\n              `}\n            </div>\n          </div>\n          ${this.feedback &&\n          html`\n            <dap-ds-feedback\n              part=\"feedback\"\n              feedbackType=${ifDefined(this.feedbackType)}\n              feedbackSize=${ifDefined(this.size) as CommonSize}\n              id=\"feedback\"\n              .subtle=${this.subtle}>\n              ${this.feedback}\n            </dap-ds-feedback>\n          `}\n        </label>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSSwitch","_a","LabeledChoiceElement","event","checked","value","disabled","error","uniqueSuffix","ids","html","clsx","ifDefined","formLabelTemplate","DapDSIcon","DapDSFormLabel","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","DapDSSwitch"],"mappings":"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"}

package/dist/components/switch/switch.scss.js

@@ -1,4 +1,4 @@
-const t = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}.choice{display:flex;flex-direction:column;cursor:pointer}.choice:focus-visible{outline:none}.choice--disabled,.choice--readonly{cursor:not-allowed}.choice.choice__label--right .choice__label-container{order:4}.choice.choice__label--right .input__control{margin-right:var(--dds-spacing-200);margin-left:0}.choice.choice__label--left{justify-content:space-between}.choice.choice__label--left .choice__label-container{order:-1}.choice.choice__label--left .input__control{margin-right:0;margin-left:var(--dds-spacing-200)}.choice>div{display:flex}.label{font-weight:400;line-height:150%}.choice__label-container{display:flex;flex-direction:column}.choice__label-container .label,.choice__label-container .description{margin:0}.choice__label-container dap-ds-tooltip::part(icon){order:2}.choice__label-container--disabled,.choice__label-container--readonly{cursor:default}.choice__label-container.choice__label--top .description{order:4}.choice__label-container.choice__label--top .label{order:1}.choice__label-container.choice__label--top dap-ds-tooltip::part(icon){margin-left:var(--dds-spacing-400)}.choice__label-container.choice__label--bottom .description{order:1}.choice__label-container.choice__label--bottom .label{order:4}.choice__label-container.choice__label--bottom dap-ds-tooltip::part(icon){margin-right:var(--dds-spacing-400)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-switch-width: var(--dds-spacing-1000);--dds-switch-height: var(--dds-spacing-600);--dds-switch-thumb-width: var(--dds-spacing-500);--dds-switch-thumb-height: var(--dds-spacing-500);--dds-switch-thumb-margin: .125rem;--dds-switch-thumb-color: var(--dds-button-primary-icon-enabled);--dds-switch-unchecked-bg: var(--dds-background-neutral-base-inverted);--dds-switch-checked-bg: var(--dds-background-brand-base-inverted);--dds-switch-invalid-bg: var(--dds-background-negative-base-inverted);--dds-switch-disabled-bg: var(--dds-background-neutral-disabled);--dds-switch-readonly-bg: var(--dds-background-neutral-disabled);--dds-switch-wrapper-padding: var(--dds-spacing-400);--dds-switch-wrapper-bg: var(--dds-background-neutral-subtle);--dds-switch-border-color: var(--dds-border-neutral-subtle);--dds-switch-high-contrast-border-color: var( --dds-border-neutral-transparent-interactive, #fff500 )}.input__control-high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:var(--dds-switch-width);min-width:var(--dds-switch-width);height:var(--dds-switch-height);border:var(--dds-border-width-large) solid var(--dds-switch-high-contrast-border-color);border-radius:var(--dds-radius-rounded)}.input__control-high-contrast:hover{border-width:var(--dds-border-width-large)}.input__control-high-contrast:active{border-width:var(--dds-border-width-xlarge)}.input__control-high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);cursor:not-allowed}.input__control-high-contrast.input__control-high-contrast--readonly{border-color:var(--dds-border-neutral-transparent-interactive);cursor:default}.input__wrapper{position:relative;border:var(--dds-border-width-base) solid transparent}.input__wrapper--border,.input__wrapper--background{padding:var(--dds-switch-wrapper-padding);border-radius:var(--dds-radius-base)}.input__wrapper--background{background-color:var(--dds-switch-wrapper-bg)}.input__wrapper--border{border:var(--dds-border-width-base) solid var(--dds-switch-border-color)}.input__control-toggle-thumb{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-block;position:absolute;min-width:var(--dds-switch-thumb-width);height:var(--dds-switch-thumb-height);margin-top:var(--dds-switch-thumb-margin);margin-left:var(--dds-switch-thumb-margin);fill:var(--dds-switch-thumb-color);color:var(--dds-switch-thumb-color)}.input__control-toggle-thumb.check-indicator{display:flex;justify-content:center;opacity:0}input:focus-visible+.input__control{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);outline-style:solid}.input__control{display:inline-flex;min-width:var(--dds-switch-width);height:var(--dds-switch-height);border-width:0;border-radius:var(--dds-radius-rounded);background-color:var(--dds-switch-unchecked-bg)}.input__control:hover{background-color:var(--dds-background-neutral-medium-inverted)}.input__control:active{background-color:var(--dds-background-neutral-strong-inverted)}.input__control--checked{background-color:var(--dds-switch-checked-bg)}.input__control--checked .input__control-toggle-thumb{margin-left:1.125rem;opacity:0}.input__control--checked .input__control-toggle-thumb.check-indicator{opacity:1}.input__control--checked:hover{background-color:var(--dds-background-brand-medium-inverted)}.input__control--checked:active{background-color:var(--dds-background-brand-strong-inverted)}.input__control--invalid{background-color:var(--dds-switch-invalid-bg)}.input__control--invalid:hover{background-color:var(--dds-background-negative-medium-inverted)}.input__control--invalid:active{background-color:var(--dds-background-negative-strong-inverted)}.input__control--disabled{background-color:var(--dds-switch-disabled-bg);cursor:not-allowed}.input__control--disabled:hover,.input__control--disabled:active{background-color:var(--dds-switch-disabled-bg)}.input__control--disabled .input__control-toggle-thumb{fill:var(--dds-background-neutral-stronger);color:var(--dds-background-neutral-stronger)}.input__control--readonly{background-color:var(--dds-switch-readonly-bg);cursor:default}.input__control--readonly:hover,.input__control--readonly:active{background-color:var(--dds-switch-readonly-bg)}.input__control--readonly .input__control-toggle-thumb{fill:var(--dds-background-neutral-stronger);color:var(--dds-background-neutral-stronger)}.input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.input:focus-visible~.switch__toggle-wrap{outline-style:solid}.switch--checked .input__wrapper--background{border-color:var(--dds-switch-checked-bg)}.switch--disabled .input__wrapper--background,.switch--readonly .input__wrapper--background{background-color:var(--dds-background-neutral-disabled-inverted)}';
+const t = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}.choice{display:flex;flex-direction:column;cursor:pointer}.choice:focus-visible{outline:none}.choice--disabled,.choice--readonly{cursor:not-allowed}.choice.choice__label--right .choice__label-container{order:4}.choice.choice__label--right .input__control{margin-right:var(--dds-spacing-200);margin-left:0}.choice.choice__label--left{justify-content:space-between}.choice.choice__label--left .choice__label-container{order:-1}.choice.choice__label--left .input__control{margin-right:0;margin-left:var(--dds-spacing-200)}.choice>div{display:flex}.label{font-weight:400;line-height:150%}.choice__label-container{display:flex;flex-direction:column}.choice__label-container .label,.choice__label-container .description{margin:0}.choice__label-container dap-ds-tooltip::part(icon){order:2}.choice__label-container--disabled,.choice__label-container--readonly{cursor:default}.choice__label-container.choice__label--top .description{order:4}.choice__label-container.choice__label--top .label{order:1}.choice__label-container.choice__label--top dap-ds-tooltip::part(icon){margin-left:var(--dds-spacing-400)}.choice__label-container.choice__label--bottom .description{order:1}.choice__label-container.choice__label--bottom .label{order:4}.choice__label-container.choice__label--bottom dap-ds-tooltip::part(icon){margin-right:var(--dds-spacing-400)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{--dds-switch-width: var(--dds-spacing-1000);--dds-switch-height: var(--dds-spacing-600);--dds-switch-thumb-width: var(--dds-spacing-500);--dds-switch-thumb-height: var(--dds-spacing-500);--dds-switch-thumb-margin: .125rem;--dds-switch-thumb-color: var(--dds-button-primary-icon-enabled);--dds-switch-unchecked-bg: var(--dds-background-neutral-base-inverted);--dds-switch-checked-bg: var(--dds-background-brand-base-inverted);--dds-switch-invalid-bg: var(--dds-background-negative-base-inverted);--dds-switch-disabled-bg: var(--dds-background-neutral-disabled);--dds-switch-readonly-bg: var(--dds-background-neutral-disabled);--dds-switch-wrapper-padding: var(--dds-spacing-400);--dds-switch-wrapper-bg: var(--dds-background-neutral-subtle);--dds-switch-border-color: var(--dds-border-neutral-subtle);--dds-switch-high-contrast-border-color: var( --dds-border-neutral-transparent-interactive, #fff500 )}.input__control-high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:var(--dds-switch-width);min-width:var(--dds-switch-width);height:var(--dds-switch-height);border:var(--dds-border-width-large) solid var(--dds-switch-high-contrast-border-color);border-radius:var(--dds-radius-rounded)}.input__control-high-contrast:hover{border-width:var(--dds-border-width-large)}.input__control-high-contrast:active{border-width:var(--dds-border-width-xlarge)}.input__control-high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);cursor:not-allowed}.input__control-high-contrast.input__control-high-contrast--readonly{border-color:var(--dds-border-neutral-transparent-interactive);cursor:default}.input__wrapper{position:relative;border:var(--dds-border-width-base) solid transparent}.input__wrapper--border,.input__wrapper--background{padding:var(--dds-switch-wrapper-padding);border-radius:var(--dds-radius-base)}.input__wrapper--background{background-color:var(--dds-switch-wrapper-bg)}.input__wrapper--border{border:var(--dds-border-width-base) solid var(--dds-switch-border-color)}.input__control-toggle-thumb{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-block;position:absolute;min-width:var(--dds-switch-thumb-width);height:var(--dds-switch-thumb-height);margin-top:var(--dds-switch-thumb-margin);margin-left:var(--dds-switch-thumb-margin);fill:var(--dds-switch-thumb-color);color:var(--dds-switch-thumb-color)}.input__control-toggle-thumb.check-indicator{display:flex;justify-content:center;opacity:0}input:focus-visible+.input__control{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);outline-style:solid}.input__control{display:inline-flex;min-width:var(--dds-switch-width);height:var(--dds-switch-height);border-width:0;border-radius:var(--dds-radius-rounded);background-color:var(--dds-switch-unchecked-bg)}.input__control:hover{background-color:var(--dds-background-neutral-medium-inverted)}.input__control:active{background-color:var(--dds-background-neutral-strong-inverted)}.input__control--checked{background-color:var(--dds-switch-checked-bg)}.input__control--checked .input__control-toggle-thumb{margin-left:1.125rem;opacity:0}.input__control--checked .input__control-toggle-thumb.check-indicator{opacity:1}.input__control--checked:hover{background-color:var(--dds-background-brand-medium-inverted)}.input__control--checked:active{background-color:var(--dds-background-brand-strong-inverted)}.input__control--invalid{background-color:var(--dds-switch-invalid-bg)}.input__control--invalid:hover{background-color:var(--dds-background-negative-medium-inverted)}.input__control--invalid:active{background-color:var(--dds-background-negative-strong-inverted)}.input__control--disabled{background-color:var(--dds-switch-disabled-bg);cursor:not-allowed}.input__control--disabled:hover,.input__control--disabled:active{background-color:var(--dds-switch-disabled-bg)}.input__control--disabled .input__control-toggle-thumb{fill:var(--dds-background-neutral-stronger);color:var(--dds-background-neutral-stronger)}.input__control--readonly{background-color:var(--dds-switch-readonly-bg);cursor:default}.input__control--readonly:hover,.input__control--readonly:active{background-color:var(--dds-switch-readonly-bg)}.input__control--readonly .input__control-toggle-thumb{fill:var(--dds-background-neutral-stronger);color:var(--dds-background-neutral-stronger)}.input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.input:focus-visible~.switch__toggle-wrap{outline-style:solid}.switch--checked .input__wrapper--background{border-color:var(--dds-switch-checked-bg)}.switch--disabled .input__wrapper--background,.switch--readonly .input__wrapper--background{background-color:var(--dds-background-neutral-disabled-inverted)}';
 export {
   t as default
 };

package/dist/components/tab/tab-group.component.d.ts

@@ -12,8 +12,10 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @slot - The tab items.
  *
  * @csspart base - The main container.
- * @csspart tab-nav - The tab navigation container.
- * @csspart tab-content - The tab content container.
+ * @csspart tab-list - The tab list container (role="tablist") holding the tab buttons.
+ * @csspart tab-nav - The individual tab buttons.
+ * @csspart high-contrast - The high contrast indicator inside the tab buttons.
+ * @csspart tab-group-content - The tab content container.
  *
  * @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))
  * @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)
@@ -62,7 +64,10 @@ export default class DapDSTabGroup extends DdsElement {
      * @ignore
      */
     private getTabTitleNodes;
-    handleSlotChange(event: Event): void;
+    protected firstUpdated(changedProps: Map<string, unknown>): void;
+    /** The `dap-ds-tab` elements assigned to the default slot. */
+    private getSlottedTabs;
+    handleSlotChange(event?: Event): void;
     handleClick(tabId: string | null): void;
     handleKeyDown(event: KeyboardEvent): void;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/tab/tab-group.component.js

@@ -1,21 +1,17 @@
-import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as f } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as p } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAll as u } from "../../node_modules/@lit/reactive-element/decorators/query-all.js";
-import { ifDefined as I } from "../../node_modules/lit-html/directives/if-defined.js";
-import { map as T } from "../../node_modules/lit-html/directives/map.js";
-import { DdsElement as g } from "../../internal/dds-hu-element.js";
-import v from "./tab-group.scss.js";
-import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, d = (b, t, e, s) => {
-  for (var a = void 0, r = b.length - 1, i; r >= 0; r--)
-    (i = b[r]) && (a = i(t, e, a) || a);
-  return a && y(t, e, a), a;
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as f } from "lit";
+import { query as p, queryAll as u, property as n } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { map as T } from "lit/directives/map.js";
+import { html as m } from "lit-element";
+import { DdsElement as I } from "../../internal/dds-hu-element.js";
+import _ from "./tab-group.scss.js";
+var v = Object.defineProperty, d = (c, t, e, s) => {
+  for (var a = void 0, i = c.length - 1, r; i >= 0; i--)
+    (r = c[i]) && (a = r(t, e, a) || a);
+  return a && v(t, e, a), a;
 };
-const o = class o extends g {
+const o = class o extends I {
   constructor() {
     super(...arguments), this.size = "sm", this.mobile = !1, this._tabNavItems = [], this._activeTabIds = [], this._initialEmit = !0;
   }
@@ -43,19 +39,32 @@ const o = class o extends g {
   getTabTitleNodes(t) {
     return Array.from(t.childNodes).filter((e) => !(e instanceof Element && e.slot)).map((e) => e.cloneNode(!0));
   }
+  firstUpdated(t) {
+    super.firstUpdated(t), requestAnimationFrame(() => {
+      var e;
+      this._tabNavItems.length || (e = this.getSlottedTabs()) != null && e.length && this.handleSlotChange();
+    });
+  }
+  /** The `dap-ds-tab` elements assigned to the default slot. */
+  getSlottedTabs(t) {
+    var s;
+    const e = t != null ? t : (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
+    return e == null ? void 0 : e.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "dap-ds-tab");
+  }
   handleSlotChange(t) {
-    var r;
-    const e = (r = t.target) == null ? void 0 : r.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "dap-ds-tab");
+    const e = this.getSlottedTabs(
+      t == null ? void 0 : t.target
+    );
     if (!e)
       return;
     const s = [], a = [];
     e.forEach((i) => {
-      const n = i.getAttribute("tabId"), m = i.hasAttribute("disabled");
+      const r = i.getAttribute("tabId"), b = i.hasAttribute("disabled");
       s.push({
         titleTemplate: this.getTabTitleNodes(i),
-        disabled: m,
-        tabId: n
-      }), !m && n && a.push(n);
+        disabled: b,
+        tabId: r
+      }), !b && r && a.push(r);
     }), this._tabNavItems = s, this._activeTabIds = a, !this.selectedTabId && this._activeTabIds.length ? this.selectedTabId = this._activeTabIds[0] : this._initialEmit && this.emitTabSelect(this.selectedTabId), this.requestUpdate();
   }
   handleClick(t) {
@@ -95,27 +104,28 @@ const o = class o extends g {
     s && (t.stopPropagation(), t.preventDefault());
   }
   render() {
-    return f`
+    return m`
       <div part="base" class="tab-group">
         <div
+          part="tab-list"
           role="tablist"
-          class="    ${c("tab-group__nav", {
+          class="${h("tab-group__nav", {
       "tab-group--mobile": this.mobile
     })}">
           ${T(
       this._tabNavItems,
       (t) => {
         var e;
-        return f`
+        return m`
               <button
                 part="tab-nav"
                 ?disabled="${t.disabled}"
                 role="tab"
-                aria-controls=${I((e = t.tabId) != null ? e : void 0)}
+                aria-controls=${g((e = t.tabId) != null ? e : void 0)}
                 aria-selected="${this.selectedTabId === t.tabId}"
                 tabindex="${this.selectedTabId === t.tabId ? 0 : -1}"
                 type="button"
-                class=${c("tab", {
+                class=${h("tab", {
           "tab--selected": this.selectedTabId === t.tabId,
           "tab--disabled": t.disabled,
           "tab--sm": this.size === "sm",
@@ -127,7 +137,7 @@ const o = class o extends g {
                 @keydown=${this.handleKeyDown}>
                 <span
                   part="high-contrast"
-                  class=${c(
+                  class=${h(
           "tab__high-contrast",
           {
             "tab__high-contrast--selected": this.selectedTabId === t.tabId
@@ -148,7 +158,7 @@ const o = class o extends g {
     `;
   }
 };
-o.tagName = "dap-ds-tab-group", o.styles = _(v);
+o.tagName = "dap-ds-tab-group", o.styles = f(_);
 let l = o;
 d([
   p("slot")
@@ -157,16 +167,16 @@ d([
   u(".tab:not(.tab--disabled)")
 ], l.prototype, "tabNavElements");
 d([
-  h({
+  n({
     type: String,
     reflect: !0
   })
 ], l.prototype, "selectedTabId");
 d([
-  h({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], l.prototype, "size");
 d([
-  h({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], l.prototype, "mobile");
 export {
   l as default

package/dist/components/tab/tab-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.component.js","sources":["../../../src/components/tab/tab-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, queryAll } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { map } from 'lit/directives/map.js'\nimport { html } from 'lit-element'\n\nimport { CommonSize } from '@/common/types'\nimport DapDSTab from '@/components/tab/tab.component'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './tab-group.scss?inline'\n\ninterface TabNavItem {\n  titleTemplate: Node[]\n  disabled: boolean\n  tabId: string | null\n}\n\n/**\n * `dap-ds-tab-group`\n * @summary A tab group component. It is used with dap-ds-tab component to create a tab group.\n * @element dap-ds-tab-group\n * @title - Tab group\n * @group tab\n *\n * @event dds-tab-select - Fired when select a new tab.\n *\n * @slot - The tab items.\n *\n * @csspart base - The main container.\n * @csspart tab-nav - The tab navigation container.\n * @csspart tab-content - The tab content container.\n *\n * @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))\n * @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)\n * @cssproperty --dds-tab-group-border-width - Border width of the tab navigation (default: var(--dds-border-width-base))\n * @cssproperty --dds-tab-group-border-color - Border color of the tab navigation (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tab-height-sm - Height of small tabs (default: 40px)\n * @cssproperty --dds-tab-height-lg - Height of large tabs (default: 50px)\n * @cssproperty --dds-tab-font-size-sm - Font size of small tabs (default: var(--dds-font-base))\n * @cssproperty --dds-tab-font-size-lg - Font size of large tabs (default: var(--dds-font-lg))\n * @cssproperty --dds-tab-padding - Padding of the tab buttons (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-tab-border-width - Border width for tabs (default: var(--dds-border-width-large))\n * @cssproperty --dds-tab-selected-border-color - Border color for selected tabs (default: var(--dds-border-brand-base))\n * @cssproperty --dds-tab-text-color - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-tab-hover-text-color - Text color for tabs on hover (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-tab-disabled-text-color - Text color for disabled tabs (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-tab-hover-background - Background color for tabs on hover (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-tab-active-background - Background color for active tabs (default: var(--dds-transparent-black-base))\n */\nexport default class DapDSTabGroup extends DdsElement {\n  static tagName = 'dap-ds-tab-group'\n\n  /**@ignore */\n  @query('slot') defaultSlot: HTMLSlotElement\n  /**@ignore */\n  @queryAll('.tab:not(.tab--disabled)') tabNavElements: HTMLElement[]\n\n  /** The selected tab id. */\n  @property({\n    type: String,\n    reflect: true,\n  })\n  selectedTabId: string\n\n  /** The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.\n   * @type {'sm' | 'lg'}\n   */\n  @property({ type: String, reflect: true }) size: CommonSize = 'sm'\n\n  /** If true, the tab group will be displayed in mobile mode. */\n  @property({ type: Boolean, reflect: true }) mobile: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _tabNavItems: TabNavItem[] = []\n  private _activeTabIds: string[] = []\n  private _initialEmit = true\n\n  emitTabSelect(tabId: string) {\n    if (!tabId) {\n      console.warn('Empty tab id!')\n      return\n    }\n\n    this.emit('dds-tab-select', { tabId }, { bubbles: false })\n\n    if (this._initialEmit) {\n      this._initialEmit = false\n    }\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    value: string | null,\n  ): void {\n    super.attributeChangedCallback(name, oldValue, value)\n    if (name.toLocaleLowerCase() === 'selectedtabid' && value !== oldValue) {\n      customElements.whenDefined('dap-ds-tab').then(() => {\n        if (value && this._activeTabIds.includes(value)) {\n          this.emitTabSelect(value)\n        }\n      })\n    }\n  }\n\n  /**\n   * Collects the title nodes of a tab (every light DOM child that is not\n   * slotted into the tab content).\n   *\n   * The nodes are cloned: rendering the original nodes into the nav would move\n   * them out of the tab's light DOM, so any later slotchange would find the tab\n   * title empty and the nav labels would disappear.\n   * @ignore\n   */\n  private getTabTitleNodes(tab: DapDSTab): Node[] {\n    return Array.from(tab.childNodes)\n      .filter(node => !(node instanceof Element && node.slot))\n      .map(node => node.cloneNode(true))\n  }\n\n  handleSlotChange(event: Event) {\n    const tabElements = (event.target as HTMLSlotElement | null)\n      ?.assignedElements({ flatten: true })\n      .filter(el => el.tagName.toLowerCase() === 'dap-ds-tab') as\n      | DapDSTab[]\n      | undefined\n\n    if (!tabElements) {\n      return\n    }\n\n    const tabNavItems: TabNavItem[] = []\n    const tabElementsList: DapDSTab[] = []\n    const activeTabIds: string[] = []\n\n    tabElements.forEach(tab => {\n      const tabId = tab.getAttribute('tabId')\n      const disabled = tab.hasAttribute('disabled')\n\n      tabNavItems.push({\n        titleTemplate: this.getTabTitleNodes(tab),\n        disabled,\n        tabId,\n      })\n\n      tabElementsList.push(tab)\n\n      if (!disabled && tabId) {\n        activeTabIds.push(tabId)\n      }\n    })\n\n    this._tabNavItems = tabNavItems\n    this._activeTabIds = activeTabIds\n\n    if (!this.selectedTabId && this._activeTabIds.length) {\n      this.selectedTabId = this._activeTabIds[0]\n    } else if (this._initialEmit) {\n      this.emitTabSelect(this.selectedTabId)\n    }\n\n    this.requestUpdate()\n  }\n\n  handleClick(tabId: string | null) {\n    if (tabId === this.selectedTabId || !tabId) return\n\n    this.selectedTabId = tabId\n    this.emitTabSelect(tabId)\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const currentTabIndex = this._activeTabIds.indexOf(this.selectedTabId)\n    let flag = false\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        {\n          if (currentTabIndex > 0) {\n            const newTabIndex = currentTabIndex - 1\n            this.handleClick(this._activeTabIds[newTabIndex])\n            this.tabNavElements[newTabIndex].focus()\n          }\n          flag = true\n        }\n        break\n\n      case 'ArrowRight':\n      case 'ArrowDown':\n        {\n          if (currentTabIndex < this._activeTabIds.length - 1) {\n            const newTabIndex = currentTabIndex + 1\n            this.handleClick(this._activeTabIds[newTabIndex])\n            this.tabNavElements[newTabIndex].focus()\n          }\n          flag = true\n        }\n        break\n\n      case 'Home':\n        this.handleClick(this._activeTabIds[0])\n        this.tabNavElements[0].focus()\n        flag = true\n        break\n\n      case 'End':\n        this.handleClick(this._activeTabIds[this._activeTabIds.length - 1])\n        this.tabNavElements[this._activeTabIds.length - 1].focus()\n        flag = true\n        break\n\n      default:\n        break\n    }\n\n    if (flag) {\n      event.stopPropagation()\n      event.preventDefault()\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"tab-group\">\n        <div\n          role=\"tablist\"\n          class=\"    ${clsx('tab-group__nav', {\n            'tab-group--mobile': this.mobile,\n          })}\">\n          ${map(\n            this._tabNavItems,\n            tab => html`\n              <button\n                part=\"tab-nav\"\n                ?disabled=\"${tab.disabled}\"\n                role=\"tab\"\n                aria-controls=${ifDefined(tab.tabId ?? undefined)}\n                aria-selected=\"${this.selectedTabId === tab.tabId}\"\n                tabindex=\"${this.selectedTabId === tab.tabId ? 0 : -1}\"\n                type=\"button\"\n                class=${clsx('tab', {\n                  'tab--selected': this.selectedTabId === tab.tabId,\n                  'tab--disabled': tab.disabled,\n                  'tab--sm': this.size === 'sm',\n                  'tab--lg': this.size === 'lg',\n                })}\n                @click=${() => {\n                  this.handleClick(tab.tabId)\n                }}\n                @keydown=${this.handleKeyDown}>\n                <span\n                  part=\"high-contrast\"\n                  class=${clsx(\n                    'tab__high-contrast',\n                    {\n                      'tab__high-contrast--selected':\n                        this.selectedTabId === tab.tabId,\n                    },\n                    `tab__high-contrast--${this.size}`,\n                  )}></span>\n                ${tab.titleTemplate}\n              </button>\n            `,\n          )}\n        </div>\n\n        <div part=\"tab-group-content\" class=\"tab-group__content\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTabGroup","DdsElement","tabId","name","oldValue","value","tab","node","event","tabElements","_a","el","tabNavItems","activeTabIds","disabled","currentTabIndex","flag","newTabIndex","html","clsx","map","ifDefined","unsafeCSS","styles","DapDSTabGroup","__decorateClass","query","queryAll","property"],"mappings":"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"}
+{"version":3,"file":"tab-group.component.js","sources":["../../../src/components/tab/tab-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, queryAll } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { map } from 'lit/directives/map.js'\nimport { html } from 'lit-element'\n\nimport { CommonSize } from '@/common/types'\nimport DapDSTab from '@/components/tab/tab.component'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './tab-group.scss?inline'\n\ninterface TabNavItem {\n  titleTemplate: Node[]\n  disabled: boolean\n  tabId: string | null\n}\n\n/**\n * `dap-ds-tab-group`\n * @summary A tab group component. It is used with dap-ds-tab component to create a tab group.\n * @element dap-ds-tab-group\n * @title - Tab group\n * @group tab\n *\n * @event dds-tab-select - Fired when select a new tab.\n *\n * @slot - The tab items.\n *\n * @csspart base - The main container.\n * @csspart tab-list - The tab list container (role=\"tablist\") holding the tab buttons.\n * @csspart tab-nav - The individual tab buttons.\n * @csspart high-contrast - The high contrast indicator inside the tab buttons.\n * @csspart tab-group-content - The tab content container.\n *\n * @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))\n * @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)\n * @cssproperty --dds-tab-group-border-width - Border width of the tab navigation (default: var(--dds-border-width-base))\n * @cssproperty --dds-tab-group-border-color - Border color of the tab navigation (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tab-height-sm - Height of small tabs (default: 40px)\n * @cssproperty --dds-tab-height-lg - Height of large tabs (default: 50px)\n * @cssproperty --dds-tab-font-size-sm - Font size of small tabs (default: var(--dds-font-base))\n * @cssproperty --dds-tab-font-size-lg - Font size of large tabs (default: var(--dds-font-lg))\n * @cssproperty --dds-tab-padding - Padding of the tab buttons (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-tab-border-width - Border width for tabs (default: var(--dds-border-width-large))\n * @cssproperty --dds-tab-selected-border-color - Border color for selected tabs (default: var(--dds-border-brand-base))\n * @cssproperty --dds-tab-text-color - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-tab-hover-text-color - Text color for tabs on hover (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-tab-disabled-text-color - Text color for disabled tabs (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-tab-hover-background - Background color for tabs on hover (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-tab-active-background - Background color for active tabs (default: var(--dds-transparent-black-base))\n */\nexport default class DapDSTabGroup extends DdsElement {\n  static tagName = 'dap-ds-tab-group'\n\n  /**@ignore */\n  @query('slot') defaultSlot: HTMLSlotElement\n  /**@ignore */\n  @queryAll('.tab:not(.tab--disabled)') tabNavElements: HTMLElement[]\n\n  /** The selected tab id. */\n  @property({\n    type: String,\n    reflect: true,\n  })\n  selectedTabId: string\n\n  /** The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.\n   * @type {'sm' | 'lg'}\n   */\n  @property({ type: String, reflect: true }) size: CommonSize = 'sm'\n\n  /** If true, the tab group will be displayed in mobile mode. */\n  @property({ type: Boolean, reflect: true }) mobile: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _tabNavItems: TabNavItem[] = []\n  private _activeTabIds: string[] = []\n  private _initialEmit = true\n\n  emitTabSelect(tabId: string) {\n    if (!tabId) {\n      console.warn('Empty tab id!')\n      return\n    }\n\n    this.emit('dds-tab-select', { tabId }, { bubbles: false })\n\n    if (this._initialEmit) {\n      this._initialEmit = false\n    }\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    value: string | null,\n  ): void {\n    super.attributeChangedCallback(name, oldValue, value)\n    if (name.toLocaleLowerCase() === 'selectedtabid' && value !== oldValue) {\n      customElements.whenDefined('dap-ds-tab').then(() => {\n        if (value && this._activeTabIds.includes(value)) {\n          this.emitTabSelect(value)\n        }\n      })\n    }\n  }\n\n  /**\n   * Collects the title nodes of a tab (every light DOM child that is not\n   * slotted into the tab content).\n   *\n   * The nodes are cloned: rendering the original nodes into the nav would move\n   * them out of the tab's light DOM, so any later slotchange would find the tab\n   * title empty and the nav labels would disappear.\n   * @ignore\n   */\n  private getTabTitleNodes(tab: DapDSTab): Node[] {\n    return Array.from(tab.childNodes)\n      .filter(node => !(node instanceof Element && node.slot))\n      .map(node => node.cloneNode(true))\n  }\n\n  protected firstUpdated(changedProps: Map<string, unknown>): void {\n    super.firstUpdated(changedProps)\n\n    // On SSR hydration `slotchange` does not fire, so `_tabNavItems` stays empty\n    // and the tab nav bar renders nothing (only the tab content is visible).\n    // Defer to the next frame: if a real `slotchange` still hasn't populated the\n    // nav by then (the hydration case), resolve it from the already-assigned\n    // slot. On a normal client render `slotchange` fires first, so the guard\n    // makes this a no-op (avoids double-running the selection/emit logic).\n    requestAnimationFrame(() => {\n      if (this._tabNavItems.length) {\n        return\n      }\n      if (this.getSlottedTabs()?.length) {\n        this.handleSlotChange()\n      }\n    })\n  }\n\n  /** The `dap-ds-tab` elements assigned to the default slot. */\n  private getSlottedTabs(\n    slot?: HTMLSlotElement | null,\n  ): DapDSTab[] | undefined {\n    const target = slot ?? this.shadowRoot?.querySelector('slot')\n    return target\n      ?.assignedElements({ flatten: true })\n      .filter(el => el.tagName.toLowerCase() === 'dap-ds-tab') as\n      | DapDSTab[]\n      | undefined\n  }\n\n  handleSlotChange(event?: Event) {\n    const tabElements = this.getSlottedTabs(\n      event?.target as HTMLSlotElement | undefined,\n    )\n\n    if (!tabElements) {\n      return\n    }\n\n    const tabNavItems: TabNavItem[] = []\n    const tabElementsList: DapDSTab[] = []\n    const activeTabIds: string[] = []\n\n    tabElements.forEach(tab => {\n      const tabId = tab.getAttribute('tabId')\n      const disabled = tab.hasAttribute('disabled')\n\n      tabNavItems.push({\n        titleTemplate: this.getTabTitleNodes(tab),\n        disabled,\n        tabId,\n      })\n\n      tabElementsList.push(tab)\n\n      if (!disabled && tabId) {\n        activeTabIds.push(tabId)\n      }\n    })\n\n    this._tabNavItems = tabNavItems\n    this._activeTabIds = activeTabIds\n\n    if (!this.selectedTabId && this._activeTabIds.length) {\n      this.selectedTabId = this._activeTabIds[0]\n    } else if (this._initialEmit) {\n      this.emitTabSelect(this.selectedTabId)\n    }\n\n    this.requestUpdate()\n  }\n\n  handleClick(tabId: string | null) {\n    if (tabId === this.selectedTabId || !tabId) return\n\n    this.selectedTabId = tabId\n    this.emitTabSelect(tabId)\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const currentTabIndex = this._activeTabIds.indexOf(this.selectedTabId)\n    let flag = false\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        {\n          if (currentTabIndex > 0) {\n            const newTabIndex = currentTabIndex - 1\n            this.handleClick(this._activeTabIds[newTabIndex])\n            this.tabNavElements[newTabIndex].focus()\n          }\n          flag = true\n        }\n        break\n\n      case 'ArrowRight':\n      case 'ArrowDown':\n        {\n          if (currentTabIndex < this._activeTabIds.length - 1) {\n            const newTabIndex = currentTabIndex + 1\n            this.handleClick(this._activeTabIds[newTabIndex])\n            this.tabNavElements[newTabIndex].focus()\n          }\n          flag = true\n        }\n        break\n\n      case 'Home':\n        this.handleClick(this._activeTabIds[0])\n        this.tabNavElements[0].focus()\n        flag = true\n        break\n\n      case 'End':\n        this.handleClick(this._activeTabIds[this._activeTabIds.length - 1])\n        this.tabNavElements[this._activeTabIds.length - 1].focus()\n        flag = true\n        break\n\n      default:\n        break\n    }\n\n    if (flag) {\n      event.stopPropagation()\n      event.preventDefault()\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"tab-group\">\n        <div\n          part=\"tab-list\"\n          role=\"tablist\"\n          class=\"${clsx('tab-group__nav', {\n            'tab-group--mobile': this.mobile,\n          })}\">\n          ${map(\n            this._tabNavItems,\n            tab => html`\n              <button\n                part=\"tab-nav\"\n                ?disabled=\"${tab.disabled}\"\n                role=\"tab\"\n                aria-controls=${ifDefined(tab.tabId ?? undefined)}\n                aria-selected=\"${this.selectedTabId === tab.tabId}\"\n                tabindex=\"${this.selectedTabId === tab.tabId ? 0 : -1}\"\n                type=\"button\"\n                class=${clsx('tab', {\n                  'tab--selected': this.selectedTabId === tab.tabId,\n                  'tab--disabled': tab.disabled,\n                  'tab--sm': this.size === 'sm',\n                  'tab--lg': this.size === 'lg',\n                })}\n                @click=${() => {\n                  this.handleClick(tab.tabId)\n                }}\n                @keydown=${this.handleKeyDown}>\n                <span\n                  part=\"high-contrast\"\n                  class=${clsx(\n                    'tab__high-contrast',\n                    {\n                      'tab__high-contrast--selected':\n                        this.selectedTabId === tab.tabId,\n                    },\n                    `tab__high-contrast--${this.size}`,\n                  )}></span>\n                ${tab.titleTemplate}\n              </button>\n            `,\n          )}\n        </div>\n\n        <div part=\"tab-group-content\" class=\"tab-group__content\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTabGroup","DdsElement","tabId","name","oldValue","value","tab","node","changedProps","_a","slot","target","el","event","tabElements","tabNavItems","activeTabIds","disabled","currentTabIndex","flag","newTabIndex","html","clsx","map","ifDefined","unsafeCSS","styles","DapDSTabGroup","__decorateClass","query","queryAll","property"],"mappings":"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"}

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

@@ -1,18 +1,15 @@
 import { clsx as n } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as c } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as f } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import b from "./tab.scss.js";
-import { unsafeCSS as h } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var u = Object.defineProperty, a = (d, t, s, _) => {
-  for (var e = void 0, l = d.length - 1, o; l >= 0; l--)
-    (o = d[l]) && (e = o(t, s, e) || e);
+import { unsafeCSS as f } from "lit";
+import { property as c, state as p } from "lit/decorators.js";
+import { html as b } from "lit-element";
+import { DdsElement as h } from "../../internal/dds-hu-element.js";
+import m from "./tab.scss.js";
+var u = Object.defineProperty, r = (a, t, s, _) => {
+  for (var e = void 0, d = a.length - 1, o; d >= 0; d--)
+    (o = a[d]) && (e = o(t, s, e) || e);
   return e && u(t, s, e), e;
 };
-const i = class i extends m {
+const i = class i extends h {
   constructor() {
     super(...arguments), this.disabled = !1, this._selected = !1;
   }
@@ -24,7 +21,7 @@ const i = class i extends m {
     }), (t == null ? void 0 : t.selectedTabId) === this.tabId && (this._selected = !0);
   }
   render() {
-    return c`<div
+    return b`<div
       id=${this.tabId}
       part="base"
       tabindex=${this._selected ? 0 : -1}
@@ -38,18 +35,18 @@ const i = class i extends m {
     </div>`;
   }
 };
-i.tagName = "dap-ds-tab", i.styles = h(b);
-let r = i;
-a([
-  p({ type: String, reflect: !0 })
-], r.prototype, "tabId");
-a([
-  p({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-a([
-  f()
-], r.prototype, "_selected");
+i.tagName = "dap-ds-tab", i.styles = f(m);
+let l = i;
+r([
+  c({ type: String, reflect: !0 })
+], l.prototype, "tabId");
+r([
+  c({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled");
+r([
+  p()
+], l.prototype, "_selected");
 export {
-  r as default
+  l as default
 };
 //# sourceMappingURL=tab.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.component.js","sources":["../../../src/components/tab/tab.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit-element'\n\nimport { DdsTabSelectEvent } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './tab.scss?inline'\n\n/**\n * `dap-ds-tab`\n * @summary A tab item component. It is used in dap-ds-tab-group component slot to create a tab item.\n * @element dap-ds-tab\n * @title - Tab\n * *\n * @slot - The tab title template.\n * @slot content - The tab content.\n *\n * @csspart base - The main tab content container.\n */\nexport default class DapDSTab extends DdsElement {\n  static tagName = 'dap-ds-tab'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The tab id. Required */\n  @property({ type: String, reflect: true }) tabId: string\n  /** The disabled state of the tab. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @state() private _selected: boolean = false\n\n  firstUpdated() {\n    this.setAttribute('id', this.tabId)\n\n    const parent = this.parentElement as\n      | (HTMLElement & { selectedTabId?: string })\n      | null\n\n    parent?.addEventListener('dds-tab-select', (e: DdsTabSelectEvent) => {\n      if (e.detail && this.tabId === e.detail.tabId) {\n        this._selected = true\n      } else if (this._selected) {\n        this._selected = false\n      }\n    })\n\n    // The group's initial `dds-tab-select` event can be emitted before this\n    // listener is registered (e.g. when `selectedTabId` is set in markup), so\n    // reconcile the selected state from the group's current selection here.\n    if (parent?.selectedTabId === this.tabId) {\n      this._selected = true\n    }\n  }\n\n  render() {\n    return html`<div\n      id=${this.tabId}\n      part=\"base\"\n      tabindex=${this._selected ? 0 : -1}\n      class=${clsx('tab-panel', {\n        'tab-panel--selected': this._selected,\n      })}\n      role=\"tabpanel\"\n      aria-labelledby=${this.tabId}>\n      <slot class=\"tab-panel__title\"></slot>\n      <slot name=\"content\"></slot>\n    </div>`\n  }\n}\n"],"names":["_DapDSTab","DdsElement","parent","e","html","clsx","unsafeCSS","styles","DapDSTab","__decorateClass","property","state"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAqBA,IAArB,MAAqBA,UAAiBC,EAAW;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA,GAQyD,KAAA,WAAA,IAE9C,KAAQ,YAAqB;AAAA,EAAA;AAAA,EAEtC,eAAe;AACR,SAAA,aAAa,MAAM,KAAK,KAAK;AAElC,UAAMC,IAAS,KAAK;AAIZ,IAAAA,KAAA,QAAAA,EAAA,iBAAiB,kBAAkB,CAACC,MAAyB;AACnE,MAAIA,EAAE,UAAU,KAAK,UAAUA,EAAE,OAAO,QACtC,KAAK,YAAY,KACR,KAAK,cACd,KAAK,YAAY;AAAA,IACnB,KAMED,KAAA,gBAAAA,EAAQ,mBAAkB,KAAK,UACjC,KAAK,YAAY;AAAA,EACnB;AAAA,EAGF,SAAS;AACA,WAAAE;AAAAA,WACA,KAAK,KAAK;AAAA;AAAA,iBAEJ,KAAK,YAAY,IAAI,EAAE;AAAA,cAC1BC,EAAK,aAAa;AAAA,MACxB,uBAAuB,KAAK;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA,wBAEgB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAAA;AAKlC;AAhDEL,EAAO,UAAU,cAEDA,EAAA,SAASM,EAAUC,CAAM;AAH3C,IAAqBC,IAArBR;AAM6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GANtBF,EAMwB,WAAA,OAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GARvBF,EAQyB,WAAA,UAAA;AAE3BC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GAVYH,EAUF,WAAA,WAAA;"}
+{"version":3,"file":"tab.component.js","sources":["../../../src/components/tab/tab.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit-element'\n\nimport { DdsTabSelectEvent } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './tab.scss?inline'\n\n/**\n * `dap-ds-tab`\n * @summary A tab item component. It is used in dap-ds-tab-group component slot to create a tab item.\n * @element dap-ds-tab\n * @title - Tab\n * *\n * @slot - The tab title template.\n * @slot content - The tab content.\n *\n * @csspart base - The main tab content container.\n */\nexport default class DapDSTab extends DdsElement {\n  static tagName = 'dap-ds-tab'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The tab id. Required */\n  @property({ type: String, reflect: true }) tabId: string\n  /** The disabled state of the tab. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @state() private _selected: boolean = false\n\n  firstUpdated() {\n    this.setAttribute('id', this.tabId)\n\n    const parent = this.parentElement as\n      | (HTMLElement & { selectedTabId?: string })\n      | null\n\n    parent?.addEventListener('dds-tab-select', (e: DdsTabSelectEvent) => {\n      if (e.detail && this.tabId === e.detail.tabId) {\n        this._selected = true\n      } else if (this._selected) {\n        this._selected = false\n      }\n    })\n\n    // The group's initial `dds-tab-select` event can be emitted before this\n    // listener is registered (e.g. when `selectedTabId` is set in markup), so\n    // reconcile the selected state from the group's current selection here.\n    if (parent?.selectedTabId === this.tabId) {\n      this._selected = true\n    }\n  }\n\n  render() {\n    return html`<div\n      id=${this.tabId}\n      part=\"base\"\n      tabindex=${this._selected ? 0 : -1}\n      class=${clsx('tab-panel', {\n        'tab-panel--selected': this._selected,\n      })}\n      role=\"tabpanel\"\n      aria-labelledby=${this.tabId}>\n      <slot class=\"tab-panel__title\"></slot>\n      <slot name=\"content\"></slot>\n    </div>`\n  }\n}\n"],"names":["_DapDSTab","DdsElement","parent","e","html","clsx","unsafeCSS","styles","DapDSTab","__decorateClass","property","state"],"mappings":";;;;;;;;;;;AAqBA,MAAqBA,IAArB,MAAqBA,UAAiBC,EAAW;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA,GAQyD,KAAA,WAAA,IAE9C,KAAQ,YAAqB;AAAA,EAAA;AAAA,EAEtC,eAAe;AACR,SAAA,aAAa,MAAM,KAAK,KAAK;AAElC,UAAMC,IAAS,KAAK;AAIZ,IAAAA,KAAA,QAAAA,EAAA,iBAAiB,kBAAkB,CAACC,MAAyB;AACnE,MAAIA,EAAE,UAAU,KAAK,UAAUA,EAAE,OAAO,QACtC,KAAK,YAAY,KACR,KAAK,cACd,KAAK,YAAY;AAAA,IACnB,KAMED,KAAA,gBAAAA,EAAQ,mBAAkB,KAAK,UACjC,KAAK,YAAY;AAAA,EACnB;AAAA,EAGF,SAAS;AACA,WAAAE;AAAA,WACA,KAAK,KAAK;AAAA;AAAA,iBAEJ,KAAK,YAAY,IAAI,EAAE;AAAA,cAC1BC,EAAK,aAAa;AAAA,MACxB,uBAAuB,KAAK;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA,wBAEgB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAAA;AAKlC;AAhDEL,EAAO,UAAU,cAEDA,EAAA,SAASM,EAAUC,CAAM;AAH3C,IAAqBC,IAArBR;AAM6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GANtBF,EAMwB,WAAA,OAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GARvBF,EAQyB,WAAA,UAAA;AAE3BC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GAVYH,EAUF,WAAA,WAAA;"}

package/dist/components/table/table-cell.component.d.ts

@@ -7,7 +7,6 @@ import { DdsElement } from '../../internal/dds-hu-element';
  *
  * @slot - The default slot.
  *
- * @csspart base - The main cell container.
  *
  * @cssproperty --dds-table-cell-padding-block - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200))
  * @cssproperty --dds-table-cell-padding-inline-start - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500))
@@ -17,6 +16,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-table-cell-text-color - Text color of the cell. (default: var(--dds-text-neutral-base))
  * @cssproperty --dds-table-cell-line-height - Line height of the cell text. (default: 1.5)
  * @cssproperty --dds-table-cell-text-align - Text alignment in the cell. (default: left)
+ *
  */
 export default class DapDSTableCell extends DdsElement {
     static tagName: string;

package/dist/components/table/table-cell.component.js

@@ -1,31 +1,28 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as f } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as l } from "../../node_modules/lit-html/static.js";
-import { DdsElement as n } from "../../internal/dds-hu-element.js";
-import u from "./table-cell.scss.js";
-import { unsafeCSS as c } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var d = Object.defineProperty, a = (s, m, p, y) => {
-  for (var t = void 0, o = s.length - 1, i; o >= 0; o--)
-    (i = s[o]) && (t = i(m, p, t) || t);
-  return t && d(m, p, t), t;
+import { unsafeCSS as n } from "lit";
+import { property as i } from "lit/decorators.js";
+import { html as a } from "lit/static-html.js";
+import { DdsElement as u } from "../../internal/dds-hu-element.js";
+import c from "./table-cell.scss.js";
+var d = Object.defineProperty, l = (s, f, m, y) => {
+  for (var t = void 0, o = s.length - 1, p; o >= 0; o--)
+    (p = s[o]) && (t = p(f, m, t) || t);
+  return t && d(f, m, t), t;
 };
-const e = class e extends n {
+const e = class e extends u {
   constructor() {
     super(...arguments), this.role = "cell";
   }
   render() {
-    return l` <slot></slot> `;
+    return a` <slot></slot> `;
   }
 };
-e.tagName = "dap-ds-table-cell", e.styles = c(u);
+e.tagName = "dap-ds-table-cell", e.styles = n(c);
 let r = e;
-a([
-  f({ type: Boolean, reflect: !0 })
+l([
+  i({ type: Boolean, reflect: !0 })
 ], r.prototype, "last");
-a([
-  f({ reflect: !0 })
+l([
+  i({ reflect: !0 })
 ], r.prototype, "role");
 export {
   r as default

package/dist/components/table/table-cell.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.component.js","sources":["../../../src/components/table/table-cell.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table-cell.scss?inline'\n\n/**\n * Table cell component.\n * @element dap-ds-table-cell\n * @title - Table cell\n * @group table\n *\n * @slot - The default slot.\n *\n * @csspart base - The main cell container.\n *\n * @cssproperty --dds-table-cell-padding-block - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-cell-padding-inline-start - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-padding-inline-end - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-border-width - Width of the cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-cell-border-color - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-cell-text-color - Text color of the cell. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-table-cell-line-height - Line height of the cell text. (default: 1.5)\n * @cssproperty --dds-table-cell-text-align - Text alignment in the cell. (default: left)\n */\nexport default class DapDSTableCell extends DdsElement {\n  static tagName = 'dap-ds-table-cell'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**If the cell is the last one.*/\n  @property({ type: Boolean, reflect: true }) last: boolean\n  /** The html role of the cell */\n  @property({ reflect: true })\n  public role = 'cell'\n\n  render() {\n    return html` <slot></slot> `\n  }\n}\n"],"names":["_DapDSTableCell","DdsElement","html","unsafeCSS","styles","DapDSTableCell","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAuBC,EAAW;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO;AAAA,EAAA;AAAA,EAEd,SAAS;AACA,WAAAC;AAAAA,EAAA;AAEX;AAbEF,EAAO,UAAU,qBAEDA,EAAA,SAASG,EAAUC,CAAM;AAH3C,IAAqBC,IAArBL;AAM8CM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;"}
+{"version":3,"file":"table-cell.component.js","sources":["../../../src/components/table/table-cell.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table-cell.scss?inline'\n\n/**\n * Table cell component.\n * @element dap-ds-table-cell\n * @title - Table cell\n * @group table\n *\n * @slot - The default slot.\n *\n *\n * @cssproperty --dds-table-cell-padding-block - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-cell-padding-inline-start - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-padding-inline-end - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-cell-border-width - Width of the cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-cell-border-color - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-cell-text-color - Text color of the cell. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-table-cell-line-height - Line height of the cell text. (default: 1.5)\n * @cssproperty --dds-table-cell-text-align - Text alignment in the cell. (default: left)\n *\n */\nexport default class DapDSTableCell extends DdsElement {\n  static tagName = 'dap-ds-table-cell'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**If the cell is the last one.*/\n  @property({ type: Boolean, reflect: true }) last: boolean\n  /** The html role of the cell */\n  @property({ reflect: true })\n  public role = 'cell'\n\n  render() {\n    return html` <slot></slot> `\n  }\n}\n"],"names":["_DapDSTableCell","DdsElement","html","unsafeCSS","styles","DapDSTableCell","__decorateClass","property"],"mappings":";;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAuBC,EAAW;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO;AAAA,EAAA;AAAA,EAEd,SAAS;AACA,WAAAC;AAAA,EAAA;AAEX;AAbEF,EAAO,UAAU,qBAEDA,EAAA,SAASG,EAAUC,CAAM;AAH3C,IAAqBC,IAArBL;AAM8CM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;"}