dap-design-system 0.60.2 → 0.61.0

package/dist/components/input/input-base-element.js

@@ -0,0 +1,308 @@
+import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as b, html as d } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as p } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as m } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as h } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
+import { GenericFormElement as y } from "../../internal/mixin/genericFormElement.js";
+import $ from "./_styles/input.scss.js";
+import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var x = Object.defineProperty, i = (c, t, n, o) => {
+  for (var l = void 0, u = c.length - 1, _; u >= 0; u--)
+    (_ = c[u]) && (l = _(t, n, l) || l);
+  return l && x(t, n, l), l;
+};
+const f = class f extends y {
+  constructor() {
+    super(...arguments), this.type = "text", this.step = 1, this.loading = !1, this.manualValueSet = !1, this.disableEnter = !1, this._hasAddonBefore = !1, this._hasAddonAfter = !1, this._hasPrefix = !1, this._hasPostfix = !1, this.onInput = () => {
+      !this.input.validity.badInput && !this.manualValueSet && (this.value = this.input.value), this.emit("dds-input", { value: this.input.value }), this.setValidity();
+    };
+  }
+  get nativeControl() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(".input__control");
+  }
+  _handleSlotChange(t) {
+    (t == null ? void 0 : t.target).setAttribute("slot", "icon");
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._hasAddonBefore = !!this._addonBeforeNode.length, this._hasAddonAfter = !!this._addonAfterNode.length, this._hasPrefix = !!this._prefixNode.length, this._hasPostfix = !!this._postfixNode.length;
+  }
+  attributeChangedCallback(t, n, o) {
+    super.attributeChangedCallback(t, n, o), t === "value" && this.input && (this.input.value = o);
+  }
+  formResetCallback() {
+    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.input.value = this.defaultValue || "";
+  }
+  onBlur() {
+    this.emit("dds-blur");
+  }
+  onFocus() {
+    this.emit("dds-focus");
+  }
+  onChange() {
+    this.value = this.input.value, this.manualValueSet || this.emit("dds-change", { value: this.input.value }), this.setValidity();
+  }
+  onKeydown(t) {
+    this.emit("dds-keydown", { value: this.input.value, originalEvent: t });
+    const n = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
+    !this.disableEnter && t.key === "Enter" && !n && setTimeout(() => {
+      if (!t.defaultPrevented && !t.isComposing) {
+        const o = document.createElement("button");
+        o.type = "submit", this.insertAdjacentElement("afterend", o), o.click(), o.remove();
+      }
+    });
+  }
+  get focusElement() {
+    return this.input;
+  }
+  /**
+   * 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 t = [];
+    return this.description && t.push("description"), this.feedback && t.push("feedback"), t.length > 0 ? t.join(" ") : void 0;
+  }
+  handleInvalid(t) {
+    t.preventDefault();
+  }
+  renderDefaultContent() {
+    return d` <span
+        part="prefix"
+        class=${r({ "input__addon-prefix": !!this._hasPrefix })}>
+        <slot name="prefix"></slot>
+      </span>
+      <span
+        part="postfix"
+        class=${r({
+      "input__addon-postfix": this._hasPostfix || this.loading
+    })}>
+        ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : b}
+        <slot name="postfix"></slot>
+      </span>`;
+  }
+  renderInput(t) {
+    return d`
+      <div class="label-container">
+        ${this.label && d`<dap-ds-form-label
+          part="label"
+          id="label"
+          for="input"
+          .size=${this.effectiveSize}
+          .required=${this.required}
+          .requiredLabel=${this.requiredLabel}
+          .optional=${this.optional}
+          .optionalLabel=${this.optionalLabel}
+          .disabled=${this.disabled}
+          class=${r("label")}
+          .noMargin=${!!this.description}
+          .hideLabel=${this.hideLabel}
+          label=${s(this.label)}>
+        </dap-ds-form-label>`}
+        ${this.tooltip && d` <dap-ds-tooltip
+          part="tooltip"
+          content=${this.tooltip}
+          mode="toggle"
+          floatingStrategy="fixed"
+          placement=${this.tooltipPlacement}>
+          <dap-ds-icon-button
+            clean
+            class="info-button"
+            slot="trigger"
+            aria-label=${this.tooltipAriaLabel}
+            size=${this.effectiveSize}
+            iconSize=${this.effectiveSize === "xs" ? "16" : "22"}>
+            <dap-ds-icon
+              name="information-line"
+              class="info-button"></dap-ds-icon>
+          </dap-ds-icon-button>
+        </dap-ds-tooltip>`}
+      </div>
+      ${this.description && d`
+        <dap-ds-typography
+          part="description"
+          variant="description"
+          class=${r("input-description")}
+          size=${s(this.effectiveSize)}
+          id="description">
+          ${this.description}
+        </dap-ds-typography>
+      `}
+      <span
+        part="base"
+        class=${r(
+      "input",
+      `input--${this.effectiveSize}`,
+      { "input--success": this.status === "success" },
+      { "input--error": this.status === "error" },
+      { "input--disabled": this.disabled },
+      { "input--readonly": this.readonly },
+      { "input--has-addon-before": !!this._hasAddonBefore },
+      { "input--has-addon-after": !!this._hasAddonAfter },
+      { "input--has-prefix": !!this._hasPrefix },
+      { "input--has-postfix": !!this._hasPostfix || this.loading }
+    )}>
+        <span
+          part="addon-before"
+          class=${r({
+      "input__addon-before": !!this._hasAddonBefore,
+      [`input__addon-before--${this.effectiveSize}`]: !!this._hasAddonBefore,
+      "input__addon-before--disabled": !!this._hasAddonBefore && this.disabled,
+      "input__addon-before--readonly": !!this._hasAddonBefore && this.readonly,
+      "input__addon-before--success": !!this._hasAddonBefore && this.status === "success",
+      "input__addon-before--error": !!this._hasAddonBefore && this.status === "error"
+    })}>
+          <slot name="addon-before"></slot>
+        </span>
+        <div class="input__container">
+          <input
+            id="input"
+            class=${r(
+      "input__control",
+      `input__control--${this.effectiveSize}`,
+      { "input__control--success": this.status === "success" },
+      { "input__control--error": this.status === "error" },
+      { "input__control--disabled": this.disabled },
+      { "input__control--readonly": this.readonly },
+      { "input__control--has-addon-before": !!this._hasAddonBefore },
+      { "input__control--has-addon-after": !!this._hasAddonAfter },
+      { "input__control--has-prefix": !!this._hasPrefix },
+      {
+        "input__control--has-postfix": !!this._hasPostfix || this.loading
+      }
+    )}
+            part="input"
+            name=${s(this.name ? this.name : void 0)}
+            type=${this.type}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            placeholder=${s(this.placeholder)}
+            value=${s(this.value)}
+            minlength=${s(this.minlength)}
+            maxlength=${s(this.maxlength)}
+            aria-labelledby=${s(this.label ? "label" : b)}
+            aria-describedby=${s(this.getAriaDescribedBy())}
+            min=${s(this.min)}
+            max=${s(this.max)}
+            pattern=${s(this.pattern)}
+            step=${s(this.step)}
+            inputmode=${s(this.inputmode)}
+            ?autofocus=${this.autofocus}
+            autocomplete=${this.autocomplete}
+            autocapitalize=${s(this.autocapitalize ? "on" : "off")}
+            @change=${this.onChange}
+            @input=${this.onInput}
+            @keydown=${this.onKeydown}
+            @invalid=${this.handleInvalid}
+            @blur=${this.onBlur}
+            @focus=${this.onFocus} />
+          ${t != null ? t : this.renderDefaultContent()}
+        </div>
+        <span
+          part="addon-after"
+          class=${r({
+      "input__addon-after": !!this._hasAddonAfter,
+      [`input__addon-after--${this.effectiveSize}`]: !!this._hasAddonAfter,
+      "input__addon-after--disabled": !!this._hasAddonAfter && this.disabled,
+      "input__addon-after--readonly": !!this._hasAddonAfter && this.readonly,
+      "input__addon-after--success": !!this._hasAddonAfter && this.status === "success",
+      "input__addon-after--error": !!this._hasAddonAfter && this.status === "error"
+    })}>
+          <slot name="addon-after"></slot>
+        </span>
+      </span>
+      ${this.feedback && this._renderFeedback()}
+    `;
+  }
+  _renderFeedback() {
+    return d`
+      <dap-ds-feedback
+        part="feedback"
+        role="alert"
+        feedbackType=${s(this.feedbackType)}
+        feedbackSize="${s(this.effectiveSize)}"
+        .subtle=${this.subtle}
+        id="feedback">
+        <slot
+          name="feedback-icon"
+          @slotchange="${this._handleSlotChange}"></slot>
+        ${this.feedback}
+      </dap-ds-feedback>
+    `;
+  }
+};
+f.styles = g($);
+let e = f;
+i([
+  m("#input")
+], e.prototype, "input");
+i([
+  h({ slot: "addon-before" })
+], e.prototype, "_addonBeforeNode");
+i([
+  h({ slot: "addon-after" })
+], e.prototype, "_addonAfterNode");
+i([
+  h({ slot: "prefix" })
+], e.prototype, "_prefixNode");
+i([
+  h({ slot: "postfix" })
+], e.prototype, "_postfixNode");
+i([
+  a()
+], e.prototype, "type");
+i([
+  a()
+], e.prototype, "placeholder");
+i([
+  a({ type: Number })
+], e.prototype, "minlength");
+i([
+  a({ type: Number })
+], e.prototype, "maxlength");
+i([
+  a({ type: Number })
+], e.prototype, "min");
+i([
+  a({ type: Number })
+], e.prototype, "max");
+i([
+  a()
+], e.prototype, "pattern");
+i([
+  a({ type: Number })
+], e.prototype, "step");
+i([
+  a()
+], e.prototype, "inputmode");
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "loading");
+i([
+  a({ type: Boolean })
+], e.prototype, "manualValueSet");
+i([
+  a({ type: Boolean })
+], e.prototype, "disableEnter");
+i([
+  p()
+], e.prototype, "_hasAddonBefore");
+i([
+  p()
+], e.prototype, "_hasAddonAfter");
+i([
+  p()
+], e.prototype, "_hasPrefix");
+i([
+  p()
+], e.prototype, "_hasPostfix");
+export {
+  e as InputBaseElement
+};
+//# sourceMappingURL=input-base-element.js.map

package/dist/components/input/input-base-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-base-element.js","sources":["../../../src/components/input/input-base-element.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize, InputTypes } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport styles from './_styles/input.scss?inline'\n\nexport class InputBaseElement extends GenericFormElement {\n  @query('#input') input!: HTMLInputElement\n  @queryAssignedElements({ slot: 'addon-before' })\n  private readonly _addonBeforeNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'addon-after' })\n  private readonly _addonAfterNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'postfix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @property() type: InputTypes = 'text'\n  @property() placeholder?: string\n  @property({ type: Number }) minlength?: number\n  @property({ type: Number }) maxlength?: number\n  @property({ type: Number }) min?: number\n  @property({ type: Number }) max?: number\n  @property() pattern?: string\n  @property({ type: Number }) step?: number | 'any' = 1\n  @property() inputmode?: string\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean }) manualValueSet = false\n  @property({ type: Boolean }) disableEnter = false\n  @state() private _hasAddonBefore = false\n  @state() private _hasAddonAfter = false\n  @state() private _hasPrefix = false\n  @state() private _hasPostfix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  public get nativeControl(): HTMLInputElement {\n    return this.shadowRoot?.querySelector('.input__control') as HTMLInputElement\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // this.role = 'textbox'\n    this._hasAddonBefore = !!this._addonBeforeNode.length\n    this._hasAddonAfter = !!this._addonAfterNode.length\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasPostfix = !!this._postfixNode.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput = () => {\n    if (!this.input.validity.badInput && !this.manualValueSet) {\n      this.value = this.input.value\n    }\n\n    this.emit('dds-input', { value: this.input.value })\n    this.setValidity()\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.input.value = this.defaultValue || ''\n  }\n\n  onBlur() {\n    this.emit('dds-blur')\n  }\n\n  onFocus() {\n    this.emit('dds-focus')\n  }\n\n  onChange() {\n    this.value = this.input.value\n\n    if (!this.manualValueSet) {\n      this.emit('dds-change', { value: this.input.value })\n    }\n\n    this.setValidity()\n  }\n\n  onKeydown(event: KeyboardEvent) {\n    this.emit('dds-keydown', { value: this.input.value, originalEvent: event })\n\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey\n\n    if (!this.disableEnter && event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          const proxy = document.createElement('button')\n          proxy.type = 'submit'\n          this.insertAdjacentElement('afterend', proxy)\n\n          proxy.click()\n          proxy.remove()\n        }\n      })\n    }\n  }\n\n  public get focusElement() {\n    return this.input\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('description')\n    }\n\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  renderDefaultContent() {\n    return html` <span\n        part=\"prefix\"\n        class=${clsx({ 'input__addon-prefix': !!this._hasPrefix })}>\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span\n        part=\"postfix\"\n        class=${clsx({\n          'input__addon-postfix': this._hasPostfix || this.loading,\n        })}>\n        ${this.loading\n          ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n          : nothing}\n        <slot name=\"postfix\"></slot>\n      </span>`\n  }\n\n  renderInput(content?: unknown) {\n    return html`\n      <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=\"label\"\n          for=\"input\"\n          .size=${this.effectiveSize}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .disabled=${this.disabled}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\n          .hideLabel=${this.hideLabel}\n          label=${ifDefined(this.label)}>\n        </dap-ds-form-label>`}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          floatingStrategy=\"fixed\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            clean\n            class=\"info-button\"\n            slot=\"trigger\"\n            aria-label=${this.tooltipAriaLabel}\n            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}>\n            <dap-ds-icon\n              name=\"information-line\"\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <span\n        part=\"base\"\n        class=${clsx(\n          'input',\n          `input--${this.effectiveSize}`,\n          { 'input--success': this.status === 'success' },\n          { 'input--error': this.status === 'error' },\n          { 'input--disabled': this.disabled },\n          { 'input--readonly': this.readonly },\n          { 'input--has-addon-before': !!this._hasAddonBefore },\n          { 'input--has-addon-after': !!this._hasAddonAfter },\n          { 'input--has-prefix': !!this._hasPrefix },\n          { 'input--has-postfix': !!this._hasPostfix || this.loading },\n        )}>\n        <span\n          part=\"addon-before\"\n          class=${clsx({\n            'input__addon-before': !!this._hasAddonBefore,\n            [`input__addon-before--${this.effectiveSize}`]:\n              !!this._hasAddonBefore,\n            'input__addon-before--disabled':\n              !!this._hasAddonBefore && this.disabled,\n            'input__addon-before--readonly':\n              !!this._hasAddonBefore && this.readonly,\n            'input__addon-before--success':\n              !!this._hasAddonBefore && this.status === 'success',\n            'input__addon-before--error':\n              !!this._hasAddonBefore && this.status === 'error',\n          })}>\n          <slot name=\"addon-before\"></slot>\n        </span>\n        <div class=\"input__container\">\n          <input\n            id=\"input\"\n            class=${clsx(\n              'input__control',\n              `input__control--${this.effectiveSize}`,\n              { 'input__control--success': this.status === 'success' },\n              { 'input__control--error': this.status === 'error' },\n              { 'input__control--disabled': this.disabled },\n              { 'input__control--readonly': this.readonly },\n              { 'input__control--has-addon-before': !!this._hasAddonBefore },\n              { 'input__control--has-addon-after': !!this._hasAddonAfter },\n              { 'input__control--has-prefix': !!this._hasPrefix },\n              {\n                'input__control--has-postfix':\n                  !!this._hasPostfix || this.loading,\n              },\n            )}\n            part=\"input\"\n            name=${ifDefined(this.name ? this.name : undefined)}\n            type=${this.type}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            placeholder=${ifDefined(this.placeholder)}\n            value=${ifDefined(this.value)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            aria-labelledby=${ifDefined(this.label ? 'label' : nothing)}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            step=${ifDefined(this.step as number)}\n            inputmode=${ifDefined(this.inputmode)}\n            ?autofocus=${this.autofocus}\n            autocomplete=${this.autocomplete as any}\n            autocapitalize=${ifDefined(this.autocapitalize ? 'on' : 'off')}\n            @change=${this.onChange}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @invalid=${this.handleInvalid}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus} />\n          ${content ?? this.renderDefaultContent()}\n        </div>\n        <span\n          part=\"addon-after\"\n          class=${clsx({\n            'input__addon-after': !!this._hasAddonAfter,\n            [`input__addon-after--${this.effectiveSize}`]:\n              !!this._hasAddonAfter,\n            'input__addon-after--disabled':\n              !!this._hasAddonAfter && this.disabled,\n            'input__addon-after--readonly':\n              !!this._hasAddonAfter && this.readonly,\n            'input__addon-after--success':\n              !!this._hasAddonAfter && this.status === 'success',\n            'input__addon-after--error':\n              !!this._hasAddonAfter && this.status === 'error',\n          })}>\n          <slot name=\"addon-after\"></slot>\n        </span>\n      </span>\n      ${this.feedback && this._renderFeedback()}\n    `\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        role=\"alert\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' | 'sm' | 'xs')}\"\n        .subtle=${this.subtle}\n        id=\"feedback\">\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_InputBaseElement","GenericFormElement","_a","event","_changedProperties","name","oldValue","newValue","hasModifier","proxy","ids","html","clsx","nothing","content","ifDefined","unsafeCSS","styles","InputBaseElement","__decorateClass","query","queryAssignedElements","property","state"],"mappings":"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"}

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

@@ -100,5 +100,6 @@ import { InputBaseElement } from './input-base-element';
  *
  */
 export default class DapDSInput extends InputBaseElement {
+    static tagName: string;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/input/input.component.js

@@ -0,0 +1,12 @@
+import { InputBaseElement as r } from "./input-base-element.js";
+const e = class e extends r {
+  render() {
+    return this.renderInput();
+  }
+};
+e.tagName = "dap-ds-input";
+let t = e;
+export {
+  t as default
+};
+//# sourceMappingURL=input.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.component.js","sources":["../../../src/components/input/input.component.ts"],"sourcesContent":["import { InputBaseElement } from './input-base-element'\n\n/**\n * `dap-ds-input`\n * @summary An input is a field used to collect user input.\n * @element dap-ds-input\n * @title - Input\n *\n * @property {string} label - The label of the input.\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 input.\n * @property {string} optionalLabel - Text of optional label.\n * @property {string} requiredLabel - Text of required indicator. (default: '*')\n * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is false.\n * @property {string} value - The value of the input.\n * @property {string} placeholder - The placeholder of the input.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {string} tooltipAriaLabel - The aria label of the tooltip.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {'succes' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"xs:lg\").\n * @property {string} name - The name of the input.\n * @property {'text' | 'number' | 'button' | 'color' | 'email' | 'hidden' | 'reset' | 'submit' | 'url' | 'password'| 'file' | 'time'} type - The type of the input. Default is 'text'.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {boolean} autocapitalize - The autocapitalize state of the input. Default is false.\n * @property {number} minlength - The minimum length of the input.\n * @property {number} maxlength - The maximum length of the input.\n * @property {number} min - The minimum value of the number input.\n * @property {number} max - The maximum value of the number input.\n * @property {number} step - The step value of the number input.\n * @property {string} inputmode - The inputmode of the input.\n * @property {string} pattern - The regex pattern of the input.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800)).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @slot postfix - The postfix of the input.\n * @slot prefix - The prefix of the input.\n * @slot addon-before - The addon before the input.\n * @slot addon-after - The addon after the input.\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart postfix - The postfix of the input.\n *\n */\nexport default class DapDSInput extends InputBaseElement {\n  static tagName = 'dap-ds-input'\n\n  render() {\n    return this.renderInput()\n  }\n}\n"],"names":["_DapDSInput","InputBaseElement","DapDSInput"],"mappings":";AAsGA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAiB;AAAA,EAGvD,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}

package/dist/components/input/input.d.ts

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

package/dist/components/input/input.js

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

package/dist/components/input/input.js.map

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

package/dist/components/label/_styles/label.scss.js

@@ -0,0 +1,5 @@
+const d = "*,*: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)}:host{--dds-label-background: var(--dds-background-neutral-subtle);--dds-label-border-color: var(--dds-border-neutral-subtle);--dds-label-border-width: var(--dds-border-width-base);--dds-label-border-radius: var(--dds-radius-base);--dds-label-padding: var(--dds-spacing-400);--dds-label-disabled-background: var( --dds-background-neutral-disabled-inverted );--dds-label-checked-border-color: var(--dds-background-brand-base-inverted)}";
+export {
+  d as default
+};
+//# sourceMappingURL=label.scss.js.map

package/dist/components/label/_styles/label.scss.js.map

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

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

@@ -38,6 +38,7 @@ declare const DapDSLabel_base: {
  * @cssproperty {string} --dds-label-checked-border-color - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)).
  */
 export default class DapDSLabel extends DapDSLabel_base {
+    static tagName: string;
     static readonly styles: import('lit').CSSResult;
     render(): unknown;
 }

package/dist/components/label/label.component.js

@@ -0,0 +1,18 @@
+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 { DdsElement as s } from "../../internal/dds-hu-element.js";
+import { LabelableMixin as e } from "../../internal/mixin/labelableMixin.js";
+import i from "./_styles/label.scss.js";
+import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
+const t = class t extends e(s) {
+  render() {
+    return this.renderLabel();
+  }
+};
+t.tagName = "dap-ds-label", t.styles = m(i);
+let r = t;
+export {
+  r as default
+};
+//# sourceMappingURL=label.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.component.js","sources":["../../../src/components/label/label.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { LabelableMixin } from '@/internal/mixin/labelableMixin'\n\nimport styles from './_styles/label.scss?inline'\n\n/**\n * `dap-ds-label`\n * @summary A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n * @element dap-ds-label\n * @title - Label\n *\n * @property {string} label - The label text\n * @property {string} description - The description of the label\n * @property {string} tooltip - The tooltip text\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input. Default is `sm`.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the label.\n * @property {boolean} optional - If the label is optional. Default value is `false`.\n * @property {string} optionalLabel - Label of optional text\n * @property {string} requiredLabel - Indicator of required text (default: '*')\n * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is `false`.\n * @property {boolean} disabled - The disabled state of the label. Default is `false`.\n * @property {boolean} required - The required state of the label. Default is `false`.\n *\n * @csspart base - The main label container.\n * @csspart label - Tha main label container. dap-ds-form-label element.\n * @csspart label-base - The label text.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n * @csspart tooltip - The tooltip of the label. dap-ds-tooltip element.\n * @csspart description - The description of the label.\n *\n * @cssproperty {string} --dds-label-background - The background color of the label container. (default: var(--dds-background-neutral-subtle)).\n * @cssproperty {string} --dds-label-border-color - The border color of the label container. (default: var(--dds-border-neutral-subtle)).\n * @cssproperty {string} --dds-label-border-width - The border width of the label container. (default: var(--dds-border-width-base)).\n * @cssproperty {string} --dds-label-border-radius - The border radius of the label container. (default: var(--dds-radius-base)).\n * @cssproperty {string} --dds-label-padding - The padding of the label container. (default: var(--dds-spacing-400)).\n * @cssproperty {string} --dds-label-disabled-background - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)).\n * @cssproperty {string} --dds-label-checked-border-color - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)).\n */\nexport default class DapDSLabel extends LabelableMixin(DdsElement) {\n  static tagName = 'dap-ds-label'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return this.renderLabel()\n  }\n}\n"],"names":["_DapDSLabel","LabelableMixin","DdsElement","unsafeCSS","styles","DapDSLabel"],"mappings":";;;;;;;AAyCqB,MAAAA,IAAA,MAAAA,UAAmBC,EAAeC,CAAU,EAAE;AAAA,EAKjE,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AAPEF,EAAO,UAAU,gBAEDA,EAAA,SAASG,EAAUC,CAAM;AAHtB,IAAAC,IAAAL;"}

package/dist/components/label/label.d.ts

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

package/dist/components/label/label.js

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

package/dist/components/label/label.js.map

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

package/dist/components/link/_styles/link.scss.js

@@ -0,0 +1,5 @@
+const i = "*,*: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}.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{--dds-link-color: var(--dds-link-enabled);--dds-link-hover-color: var(--dds-link-hover);--dds-link-active-color: var(--dds-link-pressed);--dds-link-visited-color: var(--dds-link-pressed);--dds-link-font-size: var(--dds-font-base);--dds-link-line-height: var(--dds-font-line-height-xlarge);--dds-link-font-weight: var(--dds-font-weight-medium);--dds-link-text-decoration: underline;--dds-link-neutral-color: var(--dds-link-neutral-enabled);--dds-link-neutral-hover-color: var(--dds-link-neutral-hover);--dds-link-neutral-active-color: var(--dds-link-neutral-pressed);--dds-link-neutral-visited-color: var(--dds-link-neutral-pressed);--dds-link-brand-color: var(--dds-link-enabled);--dds-link-brand-hover-color: var(--dds-link-hover);--dds-link-brand-active-color: var(--dds-link-pressed);--dds-link-brand-visited-color: var(--dds-link-pressed);--dds-link-inverted-color: var(--dds-link-inverted-enabled);--dds-link-inverted-hover-color: var(--dds-link-inverted-hover);--dds-link-inverted-active-color: var(--dds-link-inverted-pressed);--dds-link-inverted-visited-color: var(--dds-link-inverted-pressed);--dds-link-warning-color: var(--dds-banner-action-inverted-enabled);--dds-link-warning-hover-color: var(--dds-banner-action-inverted-hover);--dds-link-warning-active-color: var(--dds-banner-action-inverted-pressed);--dds-link-warning-visited-color: var(--dds-banner-action-inverted-pressed);--dds-link-disabled-color: var(--dds-text-neutral-disabled);--dds-link-disabled-hover-color: var(--dds-text-neutral-disabled);--dds-link-disabled-active-color: var(--dds-text-neutral-disabled);--dds-link-disabled-visited-color: var(--dds-text-neutral-disabled);--dds-link-lg-font-size: var(--dds-font-lg);--dds-link-lg-line-height: var(--dds-font-line-height-xlarge);--dds-link-md-font-size: var(--dds-font-base);--dds-link-md-line-height: var(--dds-font-line-height-xlarge);--dds-link-sm-font-size: var(--dds-font-sm);--dds-link-sm-line-height: var(--dds-font-line-height-xlarge);--dds-link-xs-font-size: var(--dds-font-xs);--dds-link-xs-line-height: var(--dds-font-line-height-xlarge);--dds-link-normal-font-weight: var(--dds-font-weight-medium);--dds-link-bold-font-weight: var(--dds-font-weight-bold);--dds-link-no-underline-text-decoration: none}.link{align-items:center;justify-content:center;transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;flex-direction:row;text-decoration:none;text-decoration:underline;cursor:pointer}.link:focus-visible{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);border-radius:var(--dds-radius-base);outline-style:solid}.link--neutral:hover{color:var(--dds-link-neutral-hover-color)}.link--neutral:active{color:var(--dds-link-neutral-active-color)}.link--neutral:link,.link--neutral:visited{color:var(--dds-link-neutral-color)}.link--neutral:visited:hover{color:var(--dds-link-neutral-hover-color)}.link--brand:link{color:var(--dds-link-brand-color)}.link--brand:hover{color:var(--dds-link-brand-hover-color)}.link--brand:active{color:var(--dds-link-brand-active-color)}.link--brand:visited{color:var(--dds-link-brand-visited-color)}.link--brand:visited:hover{color:var(--dds-link-brand-hover-color)}.link--inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring)}.link--inverted:link{color:var(--dds-link-inverted-color)}.link--inverted:hover{color:var(--dds-link-inverted-hover-color)}.link--inverted:active{color:var(--dds-link-inverted-active-color)}.link--inverted:visited{color:var(--dds-link-inverted-visited-color)}.link--inverted:visited:hover{color:var(--dds-link-inverted-hover-color)}.link--warning:link{color:var(--dds-link-warning-color)}.link--warning:hover{color:var(--dds-link-warning-hover-color)}.link--warning:active{color:var(--dds-link-warning-active-color)}.link--warning:visited{color:var(--dds-link-warning-visited-color)}.link--warning:visited:hover{color:var(--dds-link-warning-hover-color)}.link--disabled{pointer-events:none}.link--disabled:link,.link--disabled:visited{color:var(--dds-link-disabled-color);text-decoration:none;pointer-events:none}.link--disabled>*{pointer-events:none}.link--lg{font-size:var(--dds-link-lg-font-size);line-height:var(--dds-link-lg-line-height)}.link--md{font-size:var(--dds-link-md-font-size);line-height:var(--dds-link-md-line-height)}.link--sm{font-size:var(--dds-link-sm-font-size);line-height:var(--dds-link-sm-line-height)}.link--xs{font-size:var(--dds-link-xs-font-size);line-height:var(--dds-link-xs-line-height)}.link--normal{font-weight:var(--dds-link-normal-font-weight)}.link--bold{font-weight:var(--dds-link-bold-font-weight)}.link--no-under-line,.link--no-under-line:hover{text-decoration:var(--dds-link-no-underline-text-decoration)}.link__text{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}.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}.link__link-wrapper{position:absolute;width:0;height:0;overflow:hidden;clip:rect(0,0,0,0)}";
+export {
+  i as default
+};
+//# sourceMappingURL=link.scss.js.map

package/dist/components/link/_styles/link.scss.js.map

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

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

@@ -64,6 +64,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none).
  */
 export default class DapDSLink extends DdsElement {
+    static tagName: string;
     /** The size of the link
      * @type {'lg' | 'md' | 'sm' | 'xs'}
      */