dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,257 @@
+import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
+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 b } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as u } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as l } from "../../node_modules/lit-html/static.js";
+import { LabeledChoiceElement as f } from "../../internal/mixin/labeledChoiceElement.js";
+import y from "../feedback/feedback.component.js";
+import m from "../form/form-label/form-label.component.js";
+import $ from "../icon/icon.component.js";
+import k from "../typography/typography.component.js";
+import _ from "./switch.scss.js";
+import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var v = Object.defineProperty, c = (h, e, s, p) => {
+  for (var t = void 0, o = h.length - 1, a; o >= 0; o--)
+    (a = h[o]) && (t = a(e, s, t) || t);
+  return t && v(e, s, t), t;
+}, i;
+const n = (i = class extends f {
+  constructor() {
+    super(), this.border = !1, this.type = "normal", this.handleClick = (s) => {
+      if (this.disabled || this.readonly) {
+        this.readonly && s && (s.preventDefault(), s.stopPropagation());
+        return;
+      }
+      this.validateProperties(), this.checked = !this.checked;
+      const { checked: p, value: t, disabled: o } = this;
+      try {
+        const a = new CustomEvent("dds-change", {
+          bubbles: !0,
+          cancelable: !1,
+          composed: !0,
+          detail: {
+            checked: p,
+            value: t || "",
+            disabled: o,
+            readonly: this.readonly
+          }
+        });
+        this.dispatchEvent(a);
+      } catch (a) {
+        console.error("Error emitting switch change event:", a);
+      }
+      try {
+        this.setValidity();
+      } catch (a) {
+        console.error("Error setting switch validity:", a);
+      }
+    }, i.nextId++;
+    const e = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
+    this.inputId = `input-${i.nextId}-${e}`, this.labelId = `label-${i.nextId}-${e}`, this.descriptionId = `description-${i.nextId}-${e}`, this.feedbackId = `feedback-${i.nextId}-${e}`;
+  }
+  /**
+   * Validates property combinations and logs warnings for invalid states.
+   * @private
+   */
+  validateProperties() {
+    this.required && this.checked;
+  }
+  /**
+   * Gets the aria-describedby attribute value by combining description and feedback IDs.
+   * @returns {string | undefined} Space-separated IDs or undefined if none exist
+   * @private
+   */
+  getAriaDescribedBy() {
+    const e = [];
+    return this.description && e.push(this.descriptionId), this.feedback && e.push(this.feedbackId), e.length > 0 ? e.join(" ") : void 0;
+  }
+  get focusElement() {
+    if (!this.input)
+      throw new Error(
+        "Switch input element not found. Component may not be properly initialized."
+      );
+    return this.input;
+  }
+  /**
+   * Programmatically focuses the switch input element.
+   * @public
+   */
+  focus() {
+    this.input && !this.disabled && !this.readonly && this.input.focus();
+  }
+  /**
+   * Programmatically blurs the switch input element.
+   * @public
+   */
+  blur() {
+    this.input && this.input.blur();
+  }
+  /**
+   * Handles invalid events on the switch input.
+   * Prevents the default browser validation UI from showing and manages invalid state.
+   * @param {Event} event - The invalid event
+   * @private
+   */
+  handleInvalid(e) {
+    e.preventDefault(), this.invalid || (this.invalid = !0);
+  }
+  /**
+   * Handles keyboard events on the switch.
+   * Provides enhanced keyboard navigation and accessibility.
+   * @param {KeyboardEvent} event - The keyboard event
+   * @private
+   */
+  handleKeyDown(e) {
+    this.readonly || e.code !== "Space" && e.code === "Enter" && (e.preventDefault(), this.handleClick());
+  }
+  render() {
+    return l`
+      <div part="base">
+        <label
+          part="baselabel"
+          class=${r("switch choice", `switch--${this.size}`, {
+      "switch--checked": this.checked,
+      "switch--disabled": this.disabled,
+      "switch--readonly": this.readonly,
+      "switch--required": this.required,
+      "choice--readonly": this.readonly,
+      "choice--disabled": this.disabled,
+      "choice__label--right": this.labelPlacement === "right",
+      "choice__label--left": this.labelPlacement === "left"
+    })}>
+          <div
+            class=${r("input__wrapper", {
+      "input__wrapper--background": this.type === "background",
+      "input__wrapper--border": this.border
+    })}>
+            <input
+              part="input"
+              type="checkbox"
+              class="input"
+              id=${this.inputId}
+              role="switch"
+              .checked=${this.checked}
+              .required=${this.required}
+              .disabled=${this.disabled}
+              .readonly=${this.readonly}
+              aria-labelledby=${d(
+      !this.ariaLabel && this.label ? this.labelId : void 0
+    )}
+              aria-describedby=${this.ariaLabel ? "" : d(this.getAriaDescribedBy())}
+              aria-checked=${this.checked ? "true" : "false"}
+              .aria-invalid=${this.invalid ? "true" : null}
+              @invalid=${this.handleInvalid}
+              @click=${this.handleClick}
+              @keydown=${this.handleKeyDown}
+              @focus=${this.onFocus}
+              @blur=${this.onBlur}
+              @input=${this.onInput} />
+            <span
+              part="control"
+              class=${r(
+      "input__control",
+      { "input__control--disabled": this.disabled },
+      { "input__control--readonly": this.readonly },
+      { "input__control--invalid": this.invalid },
+      { "input__control--checked": this.checked }
+    )}>
+              <span class="input__control-toggle">
+                <dap-ds-icon
+                  name="checkbox-blank-circle-fill"
+                  class="input__control-toggle-thumb"
+                  aria-hidden="true"></dap-ds-icon
+                ><dap-ds-icon
+                  name="checkbox-circle-fill"
+                  class=${r(
+      "input__control-toggle-thumb",
+      "check-indicator"
+    )}
+                  aria-hidden="true"></dap-ds-icon>
+              </span>
+              <span
+                part="high-contrast"
+                aria-hidden="true"
+                class=${r(
+      "input__control-high-contrast",
+      `input__control-high-contrast--${this.size}`,
+      {
+        "input__control-high-contrast--disabled": this.disabled,
+        "input__control-high-contrast--readonly": this.readonly
+      }
+    )}></span>
+            </span>
+            <div
+              part="label-container"
+              class=${r("choice__label-container", {
+      "choice__label-container--disabled": this.disabled,
+      "choice__label-container--readonly": this.readonly,
+      "choice__label--bottom": this.descriptionPlacement === "top",
+      "choice__label--top": this.descriptionPlacement === "bottom"
+    })}>
+              ${this.label && l`<dap-ds-form-label
+                id=${this.labelId}
+                class="label"
+                part="label"
+                .size=${this.size}
+                .required=${this.required}
+                .requiredLabel=${this.requiredLabel}
+                .optional=${this.optional}
+                .optionalLabel=${this.optionalLabel}
+                aria-hidden="true"
+                subtle
+                .disabled=${this.disabled || this.readonly}
+                .readonly=${this.readonly}
+                .hideLabel=${this.hideLabel}
+                label=${d(this.label)}
+                renderAs="span">
+              </dap-ds-form-label>`}
+              ${this.description && l`
+                <dap-ds-typography
+                  part="description"
+                  class="description"
+                  variant="description"
+                  aria-hidden="true"
+                  size=${d(this.size)}
+                  id=${this.descriptionId}>
+                  ${this.description}
+                </dap-ds-typography>
+              `}
+            </div>
+          </div>
+          ${this.feedback && l`
+            <dap-ds-feedback
+              part="feedback"
+              feedbackType=${d(this.feedbackType)}
+              feedbackSize=${d(this.size)}
+              id="feedback"
+              .subtle=${this.subtle}>
+              ${this.feedback}
+            </dap-ds-feedback>
+          `}
+        </label>
+      </div>
+    `;
+  }
+}, i.tagName = "dap-ds-switch", i.dependencies = {
+  "dap-ds-icon": $,
+  "dap-ds-form-label": m,
+  "dap-ds-typography": k,
+  "dap-ds-feedback": y
+}, i.nextId = 0, i.styles = g(_), i);
+c([
+  u(".input")
+], n.prototype, "input");
+c([
+  b({ type: Boolean })
+], n.prototype, "border");
+c([
+  b({ type: String })
+], n.prototype, "type");
+let T = n;
+export {
+  T as default
+};
+//# sourceMappingURL=switch.component.js.map

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

@@ -0,0 +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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"}

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

@@ -1,5 +1,5 @@
-import { default as DapDSSwitch } from './switch.component.js';
-export * from './switch.component.js';
+import { default as DapDSSwitch } from './switch.component';
+export * from './switch.component';
 export default DapDSSwitch;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/switch/switch.js

@@ -0,0 +1,6 @@
+import e from "./switch.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.ts"],"sourcesContent":["import DapDSSwitch from './switch.component'\n\nexport * from './switch.component'\nexport default DapDSSwitch\n\nDapDSSwitch.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-switch': DapDSSwitch\n  }\n}\n"],"names":["DapDSSwitch"],"mappings":";AAKAA,EAAY,OAAO;"}

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

@@ -0,0 +1,5 @@
+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)}';
+export {
+  t as default
+};
+//# sourceMappingURL=switch.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -33,6 +33,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-tab-active-background - Background color for active tabs (default: var(--dds-transparent-black-base))
  */
 export default class DapDSTabGroup extends DdsElement {
+    static tagName: string;
     /**@ignore */
     defaultSlot: HTMLSlotElement;
     /**@ignore */

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

@@ -0,0 +1,174 @@
+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;
+};
+const o = class o extends g {
+  constructor() {
+    super(...arguments), this.size = "sm", this.mobile = !1, this._tabNavItems = [], this._activeTabIds = [], this._initialEmit = !0;
+  }
+  emitTabSelect(t) {
+    if (!t) {
+      console.warn("Empty tab id!");
+      return;
+    }
+    this.emit("dds-tab-select", { tabId: t }, { bubbles: !1 }), this._initialEmit && (this._initialEmit = !1);
+  }
+  attributeChangedCallback(t, e, s) {
+    super.attributeChangedCallback(t, e, s), t.toLocaleLowerCase() === "selectedtabid" && s !== e && customElements.whenDefined("dap-ds-tab").then(() => {
+      s && this._activeTabIds.includes(s) && this.emitTabSelect(s);
+    });
+  }
+  /**
+   * Collects the title nodes of a tab (every light DOM child that is not
+   * slotted into the tab content).
+   *
+   * The nodes are cloned: rendering the original nodes into the nav would move
+   * them out of the tab's light DOM, so any later slotchange would find the tab
+   * title empty and the nav labels would disappear.
+   * @ignore
+   */
+  getTabTitleNodes(t) {
+    return Array.from(t.childNodes).filter((e) => !(e instanceof Element && e.slot)).map((e) => e.cloneNode(!0));
+  }
+  handleSlotChange(t) {
+    var r;
+    const e = (r = t.target) == null ? void 0 : r.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "dap-ds-tab");
+    if (!e)
+      return;
+    const s = [], a = [];
+    e.forEach((i) => {
+      const n = i.getAttribute("tabId"), m = i.hasAttribute("disabled");
+      s.push({
+        titleTemplate: this.getTabTitleNodes(i),
+        disabled: m,
+        tabId: n
+      }), !m && n && a.push(n);
+    }), 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) {
+    t === this.selectedTabId || !t || (this.selectedTabId = t, this.emitTabSelect(t));
+  }
+  handleKeyDown(t) {
+    const e = this._activeTabIds.indexOf(this.selectedTabId);
+    let s = !1;
+    switch (t.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        {
+          if (e > 0) {
+            const a = e - 1;
+            this.handleClick(this._activeTabIds[a]), this.tabNavElements[a].focus();
+          }
+          s = !0;
+        }
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        {
+          if (e < this._activeTabIds.length - 1) {
+            const a = e + 1;
+            this.handleClick(this._activeTabIds[a]), this.tabNavElements[a].focus();
+          }
+          s = !0;
+        }
+        break;
+      case "Home":
+        this.handleClick(this._activeTabIds[0]), this.tabNavElements[0].focus(), s = !0;
+        break;
+      case "End":
+        this.handleClick(this._activeTabIds[this._activeTabIds.length - 1]), this.tabNavElements[this._activeTabIds.length - 1].focus(), s = !0;
+        break;
+    }
+    s && (t.stopPropagation(), t.preventDefault());
+  }
+  render() {
+    return f`
+      <div part="base" class="tab-group">
+        <div
+          role="tablist"
+          class="    ${c("tab-group__nav", {
+      "tab-group--mobile": this.mobile
+    })}">
+          ${T(
+      this._tabNavItems,
+      (t) => {
+        var e;
+        return f`
+              <button
+                part="tab-nav"
+                ?disabled="${t.disabled}"
+                role="tab"
+                aria-controls=${I((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", {
+          "tab--selected": this.selectedTabId === t.tabId,
+          "tab--disabled": t.disabled,
+          "tab--sm": this.size === "sm",
+          "tab--lg": this.size === "lg"
+        })}
+                @click=${() => {
+          this.handleClick(t.tabId);
+        }}
+                @keydown=${this.handleKeyDown}>
+                <span
+                  part="high-contrast"
+                  class=${c(
+          "tab__high-contrast",
+          {
+            "tab__high-contrast--selected": this.selectedTabId === t.tabId
+          },
+          `tab__high-contrast--${this.size}`
+        )}></span>
+                ${t.titleTemplate}
+              </button>
+            `;
+      }
+    )}
+        </div>
+
+        <div part="tab-group-content" class="tab-group__content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+o.tagName = "dap-ds-tab-group", o.styles = _(v);
+let l = o;
+d([
+  p("slot")
+], l.prototype, "defaultSlot");
+d([
+  u(".tab:not(.tab--disabled)")
+], l.prototype, "tabNavElements");
+d([
+  h({
+    type: String,
+    reflect: !0
+  })
+], l.prototype, "selectedTabId");
+d([
+  h({ type: String, reflect: !0 })
+], l.prototype, "size");
+d([
+  h({ type: Boolean, reflect: !0 })
+], l.prototype, "mobile");
+export {
+  l as default
+};
+//# sourceMappingURL=tab-group.component.js.map

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

@@ -0,0 +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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"}

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

@@ -1,5 +1,5 @@
-import { default as DapDSTabGroup } from './tab-group.component.js';
-export * from './tab-group.component.js';
+import { default as DapDSTabGroup } from './tab-group.component';
+export * from './tab-group.component';
 export default DapDSTabGroup;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,6 @@
+import a from "./tab-group.component.js";
+a.define();
+export {
+  a as default
+};
+//# sourceMappingURL=tab-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.js","sources":["../../../src/components/tab/tab-group.ts"],"sourcesContent":["import DapDSTabGroup from './tab-group.component'\n\nexport * from './tab-group.component'\nexport default DapDSTabGroup\n\nDapDSTabGroup.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-tab-group': DapDSTabGroup\n  }\n}\n"],"names":["DapDSTabGroup"],"mappings":";AAKAA,EAAc,OAAO;"}

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

@@ -0,0 +1,5 @@
+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}}:host{display:flex;flex-direction:column;width:100%;min-height:0;--dds-tab-group-border-radius: var(--dds-radius-base);--dds-tab-group-border-width: var(--dds-border-width-base);--dds-tab-group-border-color: var(--dds-border-neutral-subtle);--dds-tab-height-sm: 40px;--dds-tab-height-lg: 50px;--dds-tab-font-size-sm: var(--dds-font-base);--dds-tab-font-size-lg: var(--dds-font-lg);--dds-tab-padding: 0 var(--dds-spacing-400);--dds-tab-border-width: var(--dds-border-width-large);--dds-tab-selected-border-color: var(--dds-border-brand-base);--dds-tab-text-color: var(--dds-button-subtle-text-neutral-enabled);--dds-tab-hover-text-color: var(--dds-text-brand-subtle);--dds-tab-disabled-text-color: var(--dds-text-neutral-disabled);--dds-tab-hover-background: var(--dds-transparent-black-subtle);--dds-tab-active-background: var(--dds-transparent-black-base);--dds-tab-border-radius: var(--dds-radius-base) var(--dds-radius-base) 0 0}.tab-group{display:flex;flex:1;flex-direction:column;min-height:0;border-radius:var(--dds-tab-group-border-radius)}.tab-group__nav{display:flex;flex:0 0 auto;overflow-x:auto;scrollbar-width:none;border-bottom:var(--dds-tab-group-border-width) solid var(--dds-tab-group-border-color)}.tab__high-contrast--selected{display:flex;position:absolute;bottom:0;box-sizing:border-box;flex:0 0 auto;width:100%;height:var(--dds-tab-height-lg);margin:calc(var(--dds-spacing-400) * -1 + 2px);margin-bottom:0;border:var(--dds-border-width-large) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-radius-small)}.tab__high-contrast--selected:hover{border-width:var(--dds-border-width-large)}.tab__high-contrast--selected:active{border-width:var(--dds-border-width-xlarge)}.tab__high-contrast--selected.tab__high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:not-allowed}.tab{display:flex;position:relative;align-items:center;justify-content:center;padding:var(--dds-tab-padding);border-top:var(--dds-tab-border-width) solid transparent;border-right:var(--dds-tab-border-width) solid transparent;border-left:var(--dds-tab-border-width) solid transparent;border-bottom-style:none;background-color:transparent;color:var(--dds-tab-text-color);font-weight:var(--dds-font-weight-medium);white-space:nowrap;cursor:pointer;user-select:none}.tab:after{content:"";display:block;position:absolute;bottom:0;left:calc(0 - var(--dds-tab-border-width));width:calc(100% + 2 * var(--dds-tab-border-width));height:1px}.tab:active:not(.tab--disabled){background:var(--dds-tab-active-background)}.tab:hover:not(.tab--disabled){border-radius:var(--dds-tab-border-radius);background:var(--dds-tab-hover-background);color:var(--dds-tab-hover-text-color)}.tab:focus-visible:not(.tab--disabled){border-radius:var(--dds-tab-border-radius);border-color:var(--dds-focus-outer-ring)}.tab--sm{height:var(--dds-tab-height-sm);font-size:var(--dds-tab-font-size-sm);line-height:var(--dds-font-line-height-base)}.tab--lg{height:var(--dds-tab-height-lg);font-size:var(--dds-tab-font-size-lg);line-height:var(--dds-font-line-height-large)}.tab--selected:not(.tab--disabled):after{height:var(--dds-tab-border-width);background-color:var(--dds-tab-selected-border-color)}.tab--disabled{color:var(--dds-tab-disabled-text-color);cursor:not-allowed}.tab-group--mobile{display:flex;flex-direction:column;border-bottom:0}.tab-group--mobile .tab{justify-content:flex-start;text-align:left}.tab-group--mobile .tab:hover{border-radius:var(--dds-radius-base)}.tab-group--mobile .tab--selected:after{display:none}.tab-group--mobile .tab--selected:before{content:"";position:absolute;top:0;left:0;height:100%;border-left:var(--dds-tab-border-width) solid var(--dds-button-primary-background-enabled)}.tab-group__content{flex:1;min-height:0;padding:var(--dds-spacing-400) 0;overflow:hidden auto}.tab-panel{display:none!important}.tab-panel--selected{display:block!important}';
+export {
+  t as default
+};
+//# sourceMappingURL=tab-group.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -11,6 +11,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @csspart base - The main tab content container.
  */
 export default class DapDSTab extends DdsElement {
+    static tagName: string;
     static readonly styles: import('lit').CSSResult;
     /** The tab id. Required */
     tabId: string;