dap-design-system 0.62.1 → 0.62.3

package/dist/components/textarea/textarea.component.js

@@ -1,46 +1,46 @@
 var v = Object.getPrototypeOf;
 var x = Reflect.get;
-var y = (h, t, e) => x(v(h), e, t);
-var g = (h, t, e) => new Promise((n, r) => {
+var $ = (h, t, e) => x(v(h), e, t);
+var y = (h, t, e) => new Promise((n, r) => {
   var c = (d) => {
     try {
-      b(e.next(d));
-    } catch (m) {
-      r(m);
+      f(e.next(d));
+    } catch (b) {
+      r(b);
     }
-  }, p = (d) => {
+  }, u = (d) => {
     try {
-      b(e.throw(d));
-    } catch (m) {
-      r(m);
+      f(e.throw(d));
+    } catch (b) {
+      r(b);
     }
-  }, b = (d) => d.done ? n(d.value) : Promise.resolve(d.value).then(c, p);
-  b((e = e.apply(h, t)).next());
+  }, f = (d) => d.done ? n(d.value) : Promise.resolve(d.value).then(c, u);
+  f((e = e.apply(h, t)).next());
 });
-import { clsx as $ } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u } from "../../node_modules/lit-html/lit-html.js";
+import { nothing as g } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as k } from "../../node_modules/@lit/reactive-element/decorators/state.js";
 import { query as I } from "../../node_modules/@lit/reactive-element/decorators/query.js";
 import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
+import { html as p } from "../../node_modules/lit-html/static.js";
 import { GenericFormElement as C } from "../../internal/mixin/genericFormElement.js";
 import S from "../feedback/feedback.component.js";
-import w from "../typography/typography.component.js";
-import _ from "./textarea.scss.js";
+import _ from "../typography/typography.component.js";
+import w from "./textarea.scss.js";
 import { unsafeCSS as F } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var z = Object.defineProperty, o = (h, t, e, n) => {
-  for (var r = void 0, c = h.length - 1, p; c >= 0; c--)
-    (p = h[c]) && (r = p(t, e, r) || r);
-  return r && z(t, e, r), r;
+var D = Object.defineProperty, o = (h, t, e, n) => {
+  for (var r = void 0, c = h.length - 1, u; c >= 0; c--)
+    (u = h[c]) && (r = u(t, e, r) || r);
+  return r && D(t, e, r), r;
 }, a;
 const i = (a = class extends C {
   constructor() {
     super(), this.hideCounter = !1, this.rows = 6, this.placeholder = "", this.count = 0, a.nextId++;
     const t = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
-    this.inputId = `input-${a.nextId}-${t}`, this.labelId = `label-${a.nextId}-${t}`, this.descriptionId = `description-${a.nextId}-${t}`, this.counterId = `counter-${a.nextId}-${t}`, this.feedbackId = `feedback-${a.nextId}-${t}`;
+    this.inputId = `input-${a.nextId}-${t}`, this.labelId = `label-${a.nextId}-${t}`, this.counterId = `counter-${a.nextId}-${t}`, this.feedbackId = `feedback-${a.nextId}-${t}`;
   }
   get focusElement() {
     return this.input;
@@ -49,9 +49,9 @@ const i = (a = class extends C {
     (t == null ? void 0 : t.target).setAttribute("slot", "icon");
   }
   connectedCallback() {
-    return g(this, null, function* () {
+    return y(this, null, function* () {
       var t;
-      y(a.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.input.value = (t = this.value) != null ? t : "", this.count = this.input.value.length;
+      $(a.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.input.value = (t = this.value) != null ? t : "", this.count = this.input.value.length;
     });
   }
   attributeChangedCallback(t, e, n) {
@@ -76,12 +76,21 @@ const i = (a = class extends C {
   handleInvalid(t) {
     t.preventDefault();
   }
+  /**
+   * Combines description and feedback ids. Built as one value because a Lit
+   * attribute with several parts is removed entirely if any part is `nothing`.
+   * The description element is rendered by LabelableMixin with id="description".
+   */
+  getAriaDescribedBy() {
+    const t = [];
+    return this.description && t.push("description"), this.feedback && this.feedbackId && t.push(this.feedbackId), t.length > 0 ? t.join(" ") : void 0;
+  }
   _renderFooter() {
-    const t = this.hideCounter ? u : f`
+    const t = this.hideCounter ? g : p`
     <dap-ds-typography
           part="counter"
           exportparts="base: counter-base"
-          class=${$("textarea__counter", {
+          class=${m("textarea__counter", {
       "textarea__counter--error": this.status === "error"
     })}
           variant="caption"
@@ -92,7 +101,7 @@ const i = (a = class extends C {
         </dap-ds-typography>
       </div>
     `;
-    return f`
+    return p`
       <div class="textarea__footer" part="footer">
         ${this.feedback && this._renderFeedback()}
         <span part="counter-container">${t}</span>
@@ -102,10 +111,10 @@ const i = (a = class extends C {
   render() {
     return this.renderLabel(
       this.labelId,
-      f`
+      p`
         <div
           part="base"
-          class=${$(
+          class=${m(
         "textarea",
         `textarea--${this.effectiveSize}`,
         { "textarea--success": this.status === "success" },
@@ -119,9 +128,7 @@ const i = (a = class extends C {
             part="input"
             class="textarea__control"
             aria-disabled=${this.disabled}
-            aria-describedby="${s(
-        this.description ? this.descriptionId : u
-      )} ${this.feedback ? this.feedbackId : u}"
+            aria-describedby=${s(this.getAriaDescribedBy())}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
@@ -133,7 +140,7 @@ const i = (a = class extends C {
             placeholder=${s(this.placeholder)}
             ?autofocus=${this.autofocus}
             ?value=${this.value}
-            aria-labelledby=${s(this.label ? this.labelId : u)}
+            aria-labelledby=${s(this.label ? this.labelId : g)}
             @input=${this.onInput}
             @keydown=${this.onKeydown}
             @change=${this.onChange}
@@ -148,12 +155,12 @@ const i = (a = class extends C {
     );
   }
   _renderFeedback() {
-    return f`
+    return p`
       <dap-ds-feedback
         part="feedback"
         feedbackType=${s(this.feedbackType)}
         feedbackSize=${s(this.effectiveSize)}
-        class=${$("textarea__feedback", {
+        class=${m("textarea__feedback", {
       "textarea__feedback--sm": this.effectiveSize === "sm"
     })}
         id=${s(this.feedbackId)}
@@ -167,9 +174,9 @@ const i = (a = class extends C {
     `;
   }
 }, a.tagName = "dap-ds-textarea", a.dependencies = {
-  "dap-ds-typography": w,
+  "dap-ds-typography": _,
   "dap-ds-feedback": S
-}, a.nextId = 0, a.styles = F(_), a);
+}, a.nextId = 0, a.styles = F(w), a);
 o([
   I(".textarea__control")
 ], i.prototype, "input");

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\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 textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea 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 textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n  static tagName = 'dap-ds-textarea'\n\n  static dependencies = {\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  private readonly counterId: string\n\n  /**@ignore */\n  @query('.textarea__control') input!: HTMLTextAreaElement\n  /** Hide character counter. */\n  @property({ type: Boolean, reflect: true }) hideCounter = false\n  /** The minimum length of the textarea. */\n  @property({ type: Number }) minlength?: number\n  /** The maximum length of the textarea. */\n  @property({ type: Number }) maxlength?: number\n  /** The number of rows in the textarea. */\n  @property({ type: Number }) rows?: number = 6\n  /** The number of columns in the textarea. */\n  @property({ type: Number }) cols?: number\n  /** The placeholder of the textarea. */\n  @property() placeholder = ''\n  /** Indicates how the control should wrap the value for form submission. */\n  @property() wrap: 'hard' | 'soft'\n\n  /**@ignore */\n  @state() count = 0\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSTextarea.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-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n  }\n\n  get focusElement() {\n    return this.input\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.input.value = this.value ?? ''\n    this.count = this.input.value.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    // Sync the host `value` property BEFORE emitting dds-input. super.onInput()\n    // dispatches dds-input synchronously, so consumers that read the host `value`\n    // in that listener (e.g. RHF bindings) would otherwise see the previous value\n    // and lag one keystroke behind. Matches dap-ds-input's ordering.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onInput()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onChange() {\n    // Same ordering as onInput: update the host `value` before super emits dds-change.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onChange()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onSelect(e: Event) {\n    const target = e.target as HTMLTextAreaElement\n    const selection = target.value.substring(\n      target.selectionStart,\n      target.selectionEnd,\n    )\n    this.emit('dds-select', { value: selection })\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  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  private _renderFooter() {\n    const counter = !this.hideCounter\n      ? html`\n    <dap-ds-typography\n          part=\"counter\"\n          exportparts=\"base: counter-base\"\n          class=${clsx('textarea__counter', {\n            'textarea__counter--error': this.status === 'error',\n          })}\n          variant=\"caption\"\n          size=\"${this.size as CommonFormElementSize}\"\n          id=${this.counterId}\n          aria-hidden=\"true\">\n          ${this.count}\n        </dap-ds-typography>\n      </div>\n    `\n      : nothing\n\n    return html`\n      <div class=\"textarea__footer\" part=\"footer\">\n        ${this.feedback && this._renderFeedback()}\n        <span part=\"counter-container\">${counter}</span>\n      </div>\n    `\n  }\n\n  render() {\n    return this.renderLabel(\n      this.labelId,\n      html`\n        <div\n          part=\"base\"\n          class=${clsx(\n            'textarea',\n            `textarea--${this.effectiveSize}`,\n            { 'textarea--success': this.status === 'success' },\n            { 'textarea--error': this.status === 'error' },\n            { 'textarea--disabled': this.disabled },\n            { 'textarea--readonly': this.readonly },\n            { 'textarea--optional': this.optional },\n          )}>\n          <textarea\n            id=${this.inputId}\n            part=\"input\"\n            class=\"textarea__control\"\n            aria-disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(\n              this.description ? this.descriptionId : nothing,\n            )} ${this.feedback ? this.feedbackId : nothing}\"\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            wrap=${ifDefined(this.wrap)}\n            cols=${ifDefined(this.cols)}\n            rows=${ifDefined(this.rows)}\n            placeholder=${ifDefined(this.placeholder)}\n            ?autofocus=${this.autofocus}\n            ?value=${this.value}\n            aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @change=${this.onChange}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus}\n            @select=${this.onSelect}\n            @invalid=${this.handleInvalid}></textarea>\n\n          ${this._renderFooter()}\n        </div>\n      `,\n    )\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n        class=${clsx('textarea__feedback', {\n          'textarea__feedback--sm': this.effectiveSize === 'sm',\n        })}\n        id=${ifDefined(this.feedbackId)}\n        exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n        .subtle=${this.subtle}>\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}
+{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\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 textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea 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 textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n  static tagName = 'dap-ds-textarea'\n\n  static dependencies = {\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 counterId: string\n\n  /**@ignore */\n  @query('.textarea__control') input!: HTMLTextAreaElement\n  /** Hide character counter. */\n  @property({ type: Boolean, reflect: true }) hideCounter = false\n  /** The minimum length of the textarea. */\n  @property({ type: Number }) minlength?: number\n  /** The maximum length of the textarea. */\n  @property({ type: Number }) maxlength?: number\n  /** The number of rows in the textarea. */\n  @property({ type: Number }) rows?: number = 6\n  /** The number of columns in the textarea. */\n  @property({ type: Number }) cols?: number\n  /** The placeholder of the textarea. */\n  @property() placeholder = ''\n  /** Indicates how the control should wrap the value for form submission. */\n  @property() wrap: 'hard' | 'soft'\n\n  /**@ignore */\n  @state() count = 0\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSTextarea.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-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n  }\n\n  get focusElement() {\n    return this.input\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.input.value = this.value ?? ''\n    this.count = this.input.value.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    // Sync the host `value` property BEFORE emitting dds-input. super.onInput()\n    // dispatches dds-input synchronously, so consumers that read the host `value`\n    // in that listener (e.g. RHF bindings) would otherwise see the previous value\n    // and lag one keystroke behind. Matches dap-ds-input's ordering.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onInput()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onChange() {\n    // Same ordering as onInput: update the host `value` before super emits dds-change.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onChange()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onSelect(e: Event) {\n    const target = e.target as HTMLTextAreaElement\n    const selection = target.value.substring(\n      target.selectionStart,\n      target.selectionEnd,\n    )\n    this.emit('dds-select', { value: selection })\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  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  /**\n   * Combines description and feedback ids. Built as one value because a Lit\n   * attribute with several parts is removed entirely if any part is `nothing`.\n   * The description element is rendered by LabelableMixin with id=\"description\".\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 && this.feedbackId) {\n      ids.push(this.feedbackId)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  private _renderFooter() {\n    const counter = !this.hideCounter\n      ? html`\n    <dap-ds-typography\n          part=\"counter\"\n          exportparts=\"base: counter-base\"\n          class=${clsx('textarea__counter', {\n            'textarea__counter--error': this.status === 'error',\n          })}\n          variant=\"caption\"\n          size=\"${this.size as CommonFormElementSize}\"\n          id=${this.counterId}\n          aria-hidden=\"true\">\n          ${this.count}\n        </dap-ds-typography>\n      </div>\n    `\n      : nothing\n\n    return html`\n      <div class=\"textarea__footer\" part=\"footer\">\n        ${this.feedback && this._renderFeedback()}\n        <span part=\"counter-container\">${counter}</span>\n      </div>\n    `\n  }\n\n  render() {\n    return this.renderLabel(\n      this.labelId,\n      html`\n        <div\n          part=\"base\"\n          class=${clsx(\n            'textarea',\n            `textarea--${this.effectiveSize}`,\n            { 'textarea--success': this.status === 'success' },\n            { 'textarea--error': this.status === 'error' },\n            { 'textarea--disabled': this.disabled },\n            { 'textarea--readonly': this.readonly },\n            { 'textarea--optional': this.optional },\n          )}>\n          <textarea\n            id=${this.inputId}\n            part=\"input\"\n            class=\"textarea__control\"\n            aria-disabled=${this.disabled}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            wrap=${ifDefined(this.wrap)}\n            cols=${ifDefined(this.cols)}\n            rows=${ifDefined(this.rows)}\n            placeholder=${ifDefined(this.placeholder)}\n            ?autofocus=${this.autofocus}\n            ?value=${this.value}\n            aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @change=${this.onChange}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus}\n            @select=${this.onSelect}\n            @invalid=${this.handleInvalid}></textarea>\n\n          ${this._renderFooter()}\n        </div>\n      `,\n    )\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n        class=${clsx('textarea__feedback', {\n          'textarea__feedback--sm': this.effectiveSize === 'sm',\n        })}\n        id=${ifDefined(this.feedbackId)}\n        exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n        .subtle=${this.subtle}>\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","ids","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}

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

@@ -60,8 +60,10 @@ export default class DapDSTooltip extends DdsElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private setTriggerExpanded;
     showTooltip(): Promise<void>;
     hideTooltip(): Promise<void>;
+    private readonly handleDocumentKeyDown;
     private readonly handleBlur;
     private readonly handleClick;
     private readonly handleFocus;

package/dist/components/tooltip/tooltip.component.js

@@ -1,38 +1,40 @@
-var g = (d, t, s) => new Promise((l, o) => {
-  var p = (h) => {
+var g = (a, e, t) => new Promise((h, s) => {
+  var p = (n) => {
     try {
-      u(s.next(h));
+      u(t.next(n));
     } catch (c) {
-      o(c);
+      s(c);
     }
-  }, n = (h) => {
+  }, l = (n) => {
     try {
-      u(s.throw(h));
+      u(t.throw(n));
     } catch (c) {
-      o(c);
+      s(c);
     }
-  }, u = (h) => h.done ? l(h.value) : Promise.resolve(h.value).then(p, n);
-  u((s = s.apply(d, t)).next());
+  }, u = (n) => n.done ? h(n.value) : Promise.resolve(n.value).then(p, l);
+  u((t = t.apply(a, e)).next());
 });
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as f } 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 r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
+import { html as m } from "../../node_modules/lit-html/static.js";
 import { DdsElement as y } from "../../internal/dds-hu-element.js";
-import b from "../popup/popup.component.js";
+import w from "../popup/popup.component.js";
 import T from "./tooltip.scss.js";
-import { unsafeCSS as w } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var O = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (d, t, s, l) => {
-  for (var o = l > 1 ? void 0 : l ? C(t, s) : t, p = d.length - 1, n; p >= 0; p--)
-    (n = d[p]) && (o = (l ? n(t, s, o) : n(o)) || o);
-  return l && o && O(t, s, o), o;
+import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (a, e, t, h) => {
+  for (var s = h > 1 ? void 0 : h ? O(e, t) : e, p = a.length - 1, l; p >= 0; p--)
+    (l = a[p]) && (s = (h ? l(e, t, s) : l(s)) || s);
+  return h && s && E(e, t, s), s;
 };
-const $ = 8, a = class a extends y {
+const L = 8, d = class d extends y {
   constructor() {
-    super(...arguments), this.placement = "bottom", this.opened = !1, this.mode = "tooltip", this.noArrow = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this._trigger = "hover focus", this.mouseOverTooltip = !1, this.handleBlur = () => {
+    super(...arguments), this.placement = "bottom", this.opened = !1, this.mode = "tooltip", this.noArrow = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this._trigger = "hover focus", this.mouseOverTooltip = !1, this.handleDocumentKeyDown = (e) => {
+      e.key === "Escape" && this.opened && (e.preventDefault(), e.stopPropagation(), this.hideTooltip());
+    }, this.handleBlur = () => {
       this.hasTrigger("focus") && this.hideTooltip();
     }, this.handleClick = () => {
       this.hasTrigger("click") && (this.opened && !this.hasTrigger("focus") ? this.hideTooltip() : this.showTooltip());
@@ -42,10 +44,10 @@ const $ = 8, a = class a extends y {
       this.hasTrigger("hover") && this.showTooltip();
     }, this.handleMouseOut = () => {
       this.mouseOverTooltip || this.hasTrigger("hover") && this.hideTooltip();
-    }, this.hasTrigger = (t) => this.trigger.split(" ").includes(t);
+    }, this.hasTrigger = (e) => this.trigger.split(" ").includes(e);
   }
-  set trigger(t) {
-    this._trigger = t;
+  set trigger(e) {
+    this._trigger = e;
   }
   get trigger() {
     return this.mode ? this.mode === "toggle" ? "click" : this._trigger : "hover focus";
@@ -54,31 +56,27 @@ const $ = 8, a = class a extends y {
     super.connectedCallback(), this.addEventListener("blur", this.handleBlur, !0), this.addEventListener("focus", this.handleFocus, !0), this.addEventListener("click", this.handleClick), this.addEventListener("mouseover", this.handleMouseOver), this.addEventListener("mouseout", this.handleMouseOut);
   }
   disconnectedCallback() {
-    this.removeEventListener("blur", this.handleBlur, !0), this.removeEventListener("focus", this.handleFocus, !0), this.removeEventListener("click", this.handleClick), this.removeEventListener("mouseover", this.handleMouseOver), this.removeEventListener("mouseout", this.handleMouseOut), super.disconnectedCallback();
+    this.removeEventListener("blur", this.handleBlur, !0), this.removeEventListener("focus", this.handleFocus, !0), this.removeEventListener("click", this.handleClick), this.removeEventListener("mouseover", this.handleMouseOver), this.removeEventListener("mouseout", this.handleMouseOut), document.removeEventListener("keydown", this.handleDocumentKeyDown, !0), super.disconnectedCallback();
   }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.setAttribute("role", "status");
+  firstUpdated(e) {
+    super.firstUpdated(e), this.setAttribute("role", "status"), this.setTriggerExpanded(!!this.opened), this.opened && document.addEventListener("keydown", this.handleDocumentKeyDown, !0);
+  }
+  setTriggerExpanded(e) {
+    const t = this.querySelector('[slot="trigger"]');
+    t && t.setAttribute("aria-expanded", String(e));
   }
   showTooltip() {
     return g(this, null, function* () {
-      if (this.opened)
-        return;
-      this.opened = !0;
-      const t = this.querySelector('[slot="trigger"]');
-      t && t.setAttribute("aria-expanded", "true");
+      this.opened || (this.opened = !0, this.setTriggerExpanded(!0), document.addEventListener("keydown", this.handleDocumentKeyDown, !0));
     });
   }
   hideTooltip() {
     return g(this, null, function* () {
-      if (!this.opened)
-        return;
-      this.opened = !1;
-      const t = this.querySelector('[slot="trigger"]');
-      t && t.setAttribute("aria-expanded", "false");
+      this.opened && (this.opened = !1, this.setTriggerExpanded(!1), document.removeEventListener("keydown", this.handleDocumentKeyDown, !0));
     });
   }
   render() {
-    return f`
+    return m`
       <dap-ds-popup
         part="base"
         role="tooltip"
@@ -87,14 +85,14 @@ const $ = 8, a = class a extends y {
           popup:base__popup,
           arrow:base__arrow
         "
-        class=${m("tooltip", {
+        class=${f("tooltip", {
       "tooltip--open": this.opened,
       "tooltip--tooltip": this.mode === "tooltip",
       "tooltip--toggle": this.mode === "toggle"
     })}
         ?opened=${this.opened}
         placement=${this.placement}
-        offset=${$}
+        offset=${L}
         floatingStrategy=${this.floatingStrategy}
         ?disableViewportAutoClose=${this.disableViewportAutoClose}
         ?hasArrow=${!this.noArrow}
@@ -106,43 +104,43 @@ const $ = 8, a = class a extends y {
           name="trigger"
           slot="trigger"
           aria-describedby="tooltip"></slot>
-        ${this.content ? f`${this.content}` : f`<slot></slot>`}
+        ${this.content ? m`${this.content}` : m`<slot></slot>`}
       </dap-ds-popup>
     `;
   }
 };
-a.tagName = "dap-ds-tooltip", a.dependencies = {
-  "dap-ds-popup": b
-}, a.styles = w(T);
-let e = a;
+d.tagName = "dap-ds-tooltip", d.dependencies = {
+  "dap-ds-popup": w
+}, d.styles = b(T);
+let o = d;
 i([
   r()
-], e.prototype, "content", 2);
+], o.prototype, "content", 2);
 i([
   r({ reflect: !0 })
-], e.prototype, "placement", 2);
+], o.prototype, "placement", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "opened", 2);
+], o.prototype, "opened", 2);
 i([
   r()
-], e.prototype, "mode", 2);
+], o.prototype, "mode", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "noArrow", 2);
+], o.prototype, "noArrow", 2);
 i([
   r({ reflect: !0 })
-], e.prototype, "floatingStrategy", 2);
+], o.prototype, "floatingStrategy", 2);
 i([
   r({ type: Boolean })
-], e.prototype, "disableViewportAutoClose", 2);
+], o.prototype, "disableViewportAutoClose", 2);
 i([
   r()
-], e.prototype, "trigger", 1);
+], o.prototype, "trigger", 1);
 i([
   v()
-], e.prototype, "mouseOverTooltip", 2);
+], o.prototype, "mouseOverTooltip", 2);
 export {
-  e as default
+  o as default
 };
 //# sourceMappingURL=tooltip.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.component.js","sources":["../../../src/components/tooltip/tooltip.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSPopup from '../popup/popup.component'\nimport styles from './tooltip.scss?inline'\nexport type TooltipMode = 'tooltip' | 'toggle'\n\n/**\n * The distance in pixels between the tooltip and the trigger element.\n */\nconst TOOLTIP_OFFSET = 8\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nexport default class DapDSTooltip extends DdsElement {\n  static tagName = 'dap-ds-tooltip'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The content of the tooltip, supporting text only. */\n  @property() content: string\n\n  /** The position of the tooltip around the trigger element.\n   * @type { 'top' | 'right' | 'bottom' | 'left' }\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** Sets the tooltip to opened by default (will still be closed on closing events). */\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** Sets the tooltip to toggle mode.\n   * @type { 'tooltip' | 'toggle' }\n   */\n  @property() mode?: TooltipMode = 'tooltip'\n\n  /** Hides the arrow of the tooltip. */\n  @property({ type: Boolean, reflect: true }) noArrow? = false\n\n  /** The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.\n   * @type { 'absolute' | 'fixed' }\n   */\n  @property({ reflect: true })\n  floatingStrategy: 'absolute' | 'fixed' = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  private _trigger: string = 'hover focus'\n\n  /** Sets custom trigger event (hover, focus, click). Default is `hover focus`. */\n  @property()\n  set trigger(value: string) {\n    this._trigger = value\n  }\n  get trigger() {\n    if (!this.mode) {\n      return 'hover focus'\n    }\n\n    if (this.mode === 'toggle') {\n      return 'click'\n    }\n\n    return this._trigger\n  }\n\n  /** @ignore */\n  @state() mouseOverTooltip: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.addEventListener('blur', this.handleBlur, true)\n    this.addEventListener('focus', this.handleFocus, true)\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('mouseover', this.handleMouseOver)\n    this.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('blur', this.handleBlur, true)\n    this.removeEventListener('focus', this.handleFocus, true)\n    this.removeEventListener('click', this.handleClick)\n    this.removeEventListener('mouseover', this.handleMouseOver)\n    this.removeEventListener('mouseout', this.handleMouseOut)\n    super.disconnectedCallback()\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'status')\n  }\n\n  async showTooltip() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', 'true')\n    }\n  }\n\n  async hideTooltip() {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', 'false')\n    }\n  }\n\n  private readonly handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.opened && !this.hasTrigger('focus')\n        ? this.hideTooltip()\n        : this.showTooltip()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOut = () => {\n    if (!this.mouseOverTooltip) {\n      if (this.hasTrigger('hover')) {\n        this.hideTooltip()\n      }\n    }\n  }\n\n  private readonly hasTrigger = (triggerType: string) => {\n    const triggers = this.trigger.split(' ')\n    return triggers.includes(triggerType)\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"base\"\n        role=\"tooltip\"\n        id=\"tooltip\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${clsx('tooltip', {\n          'tooltip--open': this.opened,\n          'tooltip--tooltip': this.mode === 'tooltip',\n          'tooltip--toggle': this.mode === 'toggle',\n        })}\n        ?opened=${this.opened}\n        placement=${this.placement}\n        offset=${TOOLTIP_OFFSET}\n        floatingStrategy=${this.floatingStrategy}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        ?hasArrow=${!this.noArrow}\n        @dds-close=${this.hideTooltip}\n        @dds-closed=${this.hideTooltip}\n        @dds-opened=${this.showTooltip}>\n        <slot\n          part=\"trigger\"\n          name=\"trigger\"\n          slot=\"trigger\"\n          aria-describedby=\"tooltip\"></slot>\n        ${this.content ? html`${this.content}` : html`<slot></slot>`}\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["TOOLTIP_OFFSET","_DapDSTooltip","DdsElement","triggerType","value","_changedProperties","__async","trigger","html","clsx","DapDSPopup","unsafeCSS","styles","DapDSTooltip","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"tooltip.component.js","sources":["../../../src/components/tooltip/tooltip.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSPopup from '../popup/popup.component'\nimport styles from './tooltip.scss?inline'\nexport type TooltipMode = 'tooltip' | 'toggle'\n\n/**\n * The distance in pixels between the tooltip and the trigger element.\n */\nconst TOOLTIP_OFFSET = 8\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nexport default class DapDSTooltip extends DdsElement {\n  static tagName = 'dap-ds-tooltip'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The content of the tooltip, supporting text only. */\n  @property() content: string\n\n  /** The position of the tooltip around the trigger element.\n   * @type { 'top' | 'right' | 'bottom' | 'left' }\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** Sets the tooltip to opened by default (will still be closed on closing events). */\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** Sets the tooltip to toggle mode.\n   * @type { 'tooltip' | 'toggle' }\n   */\n  @property() mode?: TooltipMode = 'tooltip'\n\n  /** Hides the arrow of the tooltip. */\n  @property({ type: Boolean, reflect: true }) noArrow? = false\n\n  /** The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.\n   * @type { 'absolute' | 'fixed' }\n   */\n  @property({ reflect: true })\n  floatingStrategy: 'absolute' | 'fixed' = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  private _trigger: string = 'hover focus'\n\n  /** Sets custom trigger event (hover, focus, click). Default is `hover focus`. */\n  @property()\n  set trigger(value: string) {\n    this._trigger = value\n  }\n  get trigger() {\n    if (!this.mode) {\n      return 'hover focus'\n    }\n\n    if (this.mode === 'toggle') {\n      return 'click'\n    }\n\n    return this._trigger\n  }\n\n  /** @ignore */\n  @state() mouseOverTooltip: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.addEventListener('blur', this.handleBlur, true)\n    this.addEventListener('focus', this.handleFocus, true)\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('mouseover', this.handleMouseOver)\n    this.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('blur', this.handleBlur, true)\n    this.removeEventListener('focus', this.handleFocus, true)\n    this.removeEventListener('click', this.handleClick)\n    this.removeEventListener('mouseover', this.handleMouseOver)\n    this.removeEventListener('mouseout', this.handleMouseOut)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n    super.disconnectedCallback()\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'status')\n\n    // Expose the collapsed state from the start, not only after the first open\n    this.setTriggerExpanded(!!this.opened)\n    if (this.opened) {\n      document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n    }\n  }\n\n  private setTriggerExpanded(expanded: boolean) {\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', String(expanded))\n    }\n  }\n\n  async showTooltip() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this.setTriggerExpanded(true)\n    document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  async hideTooltip() {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this.setTriggerExpanded(false)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  // Escape dismisses the tooltip without moving focus or pointer (WCAG 1.4.13).\n  // Captured on document so it works for hover too, and stopped so an enclosing\n  // modal does not close on the same keypress.\n  private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.opened) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.opened && !this.hasTrigger('focus')\n        ? this.hideTooltip()\n        : this.showTooltip()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOut = () => {\n    if (!this.mouseOverTooltip) {\n      if (this.hasTrigger('hover')) {\n        this.hideTooltip()\n      }\n    }\n  }\n\n  private readonly hasTrigger = (triggerType: string) => {\n    const triggers = this.trigger.split(' ')\n    return triggers.includes(triggerType)\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"base\"\n        role=\"tooltip\"\n        id=\"tooltip\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${clsx('tooltip', {\n          'tooltip--open': this.opened,\n          'tooltip--tooltip': this.mode === 'tooltip',\n          'tooltip--toggle': this.mode === 'toggle',\n        })}\n        ?opened=${this.opened}\n        placement=${this.placement}\n        offset=${TOOLTIP_OFFSET}\n        floatingStrategy=${this.floatingStrategy}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        ?hasArrow=${!this.noArrow}\n        @dds-close=${this.hideTooltip}\n        @dds-closed=${this.hideTooltip}\n        @dds-opened=${this.showTooltip}>\n        <slot\n          part=\"trigger\"\n          name=\"trigger\"\n          slot=\"trigger\"\n          aria-describedby=\"tooltip\"></slot>\n        ${this.content ? html`${this.content}` : html`<slot></slot>`}\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["TOOLTIP_OFFSET","_DapDSTooltip","DdsElement","event","triggerType","value","_changedProperties","expanded","trigger","__async","html","clsx","DapDSPopup","unsafeCSS","styles","DapDSTooltip","__decorateClass","property","state"],"mappings":"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"}

package/dist/internal/mixin/labelableMixin.d.ts

@@ -1,5 +1,7 @@
 import { LitElement } from 'lit';
 import { PopupPlacement, Size } from '../../common/types';
+/** How a form label tooltip opens: `click` (click/Enter toggle) or `hover` (hover + keyboard focus). */
+export type TooltipTrigger = 'click' | 'hover';
 type Constructor<T = Record<string, unknown>> = {
     new (...args: any[]): T;
     prototype: T;
@@ -10,6 +12,7 @@ export interface LabelableElementInterface {
     description?: string;
     tooltip?: string;
     tooltipPlacement: PopupPlacement;
+    tooltipTrigger: TooltipTrigger;
     size: Size;
     required: boolean;
     requiredLabel: string;

package/dist/internal/mixin/labelableMixin.js

@@ -1,26 +1,26 @@
 import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as r } from "../../node_modules/lit-html/lit-html.js";
+import { html as a } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { ifDefined as b } from "../../node_modules/lit-html/directives/if-defined.js";
 import "../../localization/localization.js";
 import { t as h } from "../../node_modules/i18next/dist/esm/i18next.js";
-var c = Object.defineProperty, o = (l, t, p, a) => {
+var c = Object.defineProperty, o = (l, t, p, r) => {
   for (var i = void 0, s = l.length - 1, n; s >= 0; s--)
     (n = l[s]) && (i = n(t, p, i) || i);
   return i && c(t, p, i), i;
 };
-const g = (l) => {
+const q = (l) => {
   class t extends l {
     constructor() {
-      super(...arguments), this.hideLabel = !1, this.tooltipPlacement = "bottom", this.size = "sm", this.optional = !1, this.optionalLabel = h("label.optional"), this.subtle = !1, this.required = !1, this.requiredLabel = "*", this.disabled = !1, this.tooltipAriaLabel = h("label.tooltip");
+      super(...arguments), this.hideLabel = !1, this.tooltipPlacement = "bottom", this.tooltipTrigger = "click", this.size = "sm", this.optional = !1, this.optionalLabel = h("label.optional"), this.subtle = !1, this.required = !1, this.requiredLabel = "*", this.disabled = !1, this.tooltipAriaLabel = h("label.tooltip");
     }
-    renderLabel(a, i) {
-      return r` <div class="label-container">
-      ${this.label && r`<dap-ds-form-label
+    renderLabel(r, i) {
+      return a` <div class="label-container">
+      ${this.label && a`<dap-ds-form-label
           part="label"
-          id=${a != null ? a : "label"}
+          id=${r != null ? r : "label"}
           exportparts="base: label-base, required: label-required, optional: label-optional"
           .size=${this.size}
           .required=${this.required}
@@ -35,10 +35,11 @@ const g = (l) => {
           for="input"
           label=${b(this.label)}></dap-ds-form-label>`}
       </dap-ds-form-label>
-      ${this.tooltip && r` <dap-ds-tooltip
+      ${this.tooltip && a` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
-          mode="toggle"
+          mode=${this.tooltipTrigger === "hover" ? "tooltip" : "toggle"}
+          trigger=${this.tooltipTrigger === "hover" ? "hover focus" : "click"}
           placement=${this.tooltipPlacement}>
           <dap-ds-icon-button
             slot="trigger"
@@ -53,7 +54,7 @@ const g = (l) => {
           </dap-ds-icon-button>
         </dap-ds-tooltip>`}
     </div>
-    ${this.description && r`
+    ${this.description && a`
         <dap-ds-typography
           part="description"
           variant="description"
@@ -78,6 +79,8 @@ const g = (l) => {
     e()
   ], t.prototype, "tooltipPlacement"), o([
     e()
+  ], t.prototype, "tooltipTrigger"), o([
+    e()
   ], t.prototype, "size"), o([
     e({ type: Boolean, reflect: !0 })
   ], t.prototype, "optional"), o([
@@ -95,6 +98,6 @@ const g = (l) => {
   ], t.prototype, "tooltipAriaLabel"), t;
 };
 export {
-  g as LabelableMixin
+  q as LabelableMixin
 };
 //# sourceMappingURL=labelableMixin.js.map