dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,148 @@
+var g = (d, t, s) => new Promise((l, o) => {
+  var p = (h) => {
+    try {
+      u(s.next(h));
+    } catch (c) {
+      o(c);
+    }
+  }, n = (h) => {
+    try {
+      u(s.throw(h));
+    } catch (c) {
+      o(c);
+    }
+  }, u = (h) => h.done ? l(h.value) : Promise.resolve(h.value).then(p, n);
+  u((s = s.apply(d, t)).next());
+});
+import { clsx as m } 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 { DdsElement as y } from "../../internal/dds-hu-element.js";
+import b 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;
+};
+const $ = 8, a = class a 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 = () => {
+      this.hasTrigger("focus") && this.hideTooltip();
+    }, this.handleClick = () => {
+      this.hasTrigger("click") && (this.opened && !this.hasTrigger("focus") ? this.hideTooltip() : this.showTooltip());
+    }, this.handleFocus = () => {
+      this.hasTrigger("focus") && this.showTooltip();
+    }, this.handleMouseOver = () => {
+      this.hasTrigger("hover") && this.showTooltip();
+    }, this.handleMouseOut = () => {
+      this.mouseOverTooltip || this.hasTrigger("hover") && this.hideTooltip();
+    }, this.hasTrigger = (t) => this.trigger.split(" ").includes(t);
+  }
+  set trigger(t) {
+    this._trigger = t;
+  }
+  get trigger() {
+    return this.mode ? this.mode === "toggle" ? "click" : this._trigger : "hover focus";
+  }
+  connectedCallback() {
+    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();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.setAttribute("role", "status");
+  }
+  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");
+    });
+  }
+  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");
+    });
+  }
+  render() {
+    return f`
+      <dap-ds-popup
+        part="base"
+        role="tooltip"
+        id="tooltip"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${m("tooltip", {
+      "tooltip--open": this.opened,
+      "tooltip--tooltip": this.mode === "tooltip",
+      "tooltip--toggle": this.mode === "toggle"
+    })}
+        ?opened=${this.opened}
+        placement=${this.placement}
+        offset=${$}
+        floatingStrategy=${this.floatingStrategy}
+        ?disableViewportAutoClose=${this.disableViewportAutoClose}
+        ?hasArrow=${!this.noArrow}
+        @dds-close=${this.hideTooltip}
+        @dds-closed=${this.hideTooltip}
+        @dds-opened=${this.showTooltip}>
+        <slot
+          part="trigger"
+          name="trigger"
+          slot="trigger"
+          aria-describedby="tooltip"></slot>
+        ${this.content ? f`${this.content}` : f`<slot></slot>`}
+      </dap-ds-popup>
+    `;
+  }
+};
+a.tagName = "dap-ds-tooltip", a.dependencies = {
+  "dap-ds-popup": b
+}, a.styles = w(T);
+let e = a;
+i([
+  r()
+], e.prototype, "content", 2);
+i([
+  r({ reflect: !0 })
+], e.prototype, "placement", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "opened", 2);
+i([
+  r()
+], e.prototype, "mode", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "noArrow", 2);
+i([
+  r({ reflect: !0 })
+], e.prototype, "floatingStrategy", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "disableViewportAutoClose", 2);
+i([
+  r()
+], e.prototype, "trigger", 1);
+i([
+  v()
+], e.prototype, "mouseOverTooltip", 2);
+export {
+  e as default
+};
+//# sourceMappingURL=tooltip.component.js.map

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

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

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

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

package/dist/components/tooltip/tooltip.js

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

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

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

package/dist/components/tooltip/tooltip.scss.js

@@ -0,0 +1,5 @@
+const o = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-tooltip-max-width: 14rem;--dds-tooltip-padding: var(--dds-spacing-400);--dds-tooltip-border-color: var(--dds-border-neutral-subtle);--dds-tooltip-bg-color: var(--dds-background-neutral-base);--dds-tooltip-text-color: var(--dds-text-neutral-base);--dds-tooltip-font-size: var(--dds-font-sm);--dds-tooltip-box-shadow: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%);display:inline-flex}:host .tooltip--tooltip::part(popup),:host .tooltip--toggle::part(popup){max-width:var(--dds-tooltip-max-width);padding:var(--dds-tooltip-padding);border-color:var(--dds-tooltip-border-color);background-color:var(--dds-tooltip-bg-color);box-shadow:var(--dds-tooltip-box-shadow);color:var(--dds-tooltip-text-color);font-size:var(--dds-tooltip-font-size)}:host .tooltip--tooltip::part(arrow),:host .tooltip--toggle::part(arrow){border-color:var(--dds-tooltip-border-color);background-color:var(--dds-tooltip-bg-color);color:var(--dds-tooltip-text-color)}";
+export {
+  o as default
+};
+//# sourceMappingURL=tooltip.scss.js.map

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

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

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

@@ -61,6 +61,7 @@ import { default as ModalBaseElement } from '../modal/modal-base-element';
  *
  */
 export default class DapDSTray extends ModalBaseElement {
+    static tagName: string;
     /** The placement of the tray.
      * @type { 'left' | 'right' | 'top' | 'bottom' }
      */

package/dist/components/tray/tray.component.js

@@ -0,0 +1,32 @@
+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 p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import f from "../modal/modal-base-element.js";
+import n from "./tray.scss.js";
+import { unsafeCSS as m, css as d } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var h = Object.defineProperty, c = (o, i, a, u) => {
+  for (var t = void 0, r = o.length - 1, l; r >= 0; r--)
+    (l = o[r]) && (t = l(i, a, t) || t);
+  return t && h(i, a, t), t;
+};
+const e = class e extends f {
+  constructor() {
+    super(), this.placement = "bottom", this.footer = "false", this.header = "false", this.title && (this.header = "true");
+  }
+  render() {
+    return this.renderModal();
+  }
+};
+e.tagName = "dap-ds-tray", e.styles = d`
+    ${m(f.styles)}
+    ${m(n)}
+  `;
+let s = e;
+c([
+  p({ reflect: !0 })
+], s.prototype, "placement");
+export {
+  s as default
+};
+//# sourceMappingURL=tray.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tray.component.js","sources":["../../../src/components/tray/tray.component.ts"],"sourcesContent":["import { css, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport ModalBaseElement from '../modal/modal-base-element'\nimport style from './tray.scss?inline'\n\n/**\n * `dap-ds-tray`\n * @summary A tray is a container for slide in content.\n * @element dap-ds-tray\n * @title - Tray\n *\n * @property {boolean} open - The open state of the tray.\n * @property {boolean} noModal - Whether the tray should have a modal overlay. Default is false. If true the tray will use the .show() method, if false the tray will use the .showModal() method.\n * @property {boolean} closeOnEsc - Whether the tray should close on pressing the escape key. Default is true.\n * @property {boolean} closeOnOverlayClick - Whether the tray should close on clicking the overlay. Default is true.\n * @property {string} closeButton - Whether the tray should have a close button. Default is true.\n * @property {string} title - The title of the tray.\n * @property {string} description - The description of the tray.\n * @property {string} okButtonLabel - The label of the OK button.\n * @property {string} cancelButtonLabel - The label of the Cancel button.\n * @property { 'sm' | 'lg' } size - The size of the tray. Default is 'sm'.\n * @property {string} footer - Whether the tray should have a footer. Default is false.\n * @property {string} header - Whether the tray should have a header. Default is false.\n *\n * @event {{ void }} dds-before-open - Fires before the tray opens.\n * @event {{ void }} dds-opened - Fires after the tray opens.\n * @event {{ void }} dds-before-close - Fires before the tray closes.\n * @event {{ void }} dds-closed - Fires after the tray closed.\n * @event {{ void }} dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n *\n * @slot - The content of the tray.\n * @slot header - The header of the tray.\n * @slot footer - The footer of the tray.\n *\n * @cssproperty --dds-modal-max-block-size - Maximum height of the modal. (default: 80vh)\n * @cssproperty --dds-modal-max-inline-size - Maximum width of the modal. (default: 600px)\n * @cssproperty --dds-modal-padding-sm - Padding inside the modal. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-padding-lg - Padding inside the modal. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-modal-transform-amount - Amount to transform for entrance animation. (default: 2rem)\n * @cssproperty --dds-modal-transition-speed - Speed of transition animations. (default: var(--dds-transition-fast))\n * @cssproperty --dds-modal-transition-timing - Timing function for transitions. (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-modal-border-width - Border width of the modal. (default: var(--dds-border-width-base))\n * @cssproperty --dds-modal-border-color - Border color of the modal. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-modal-border-radius - Border radius of the modal. (default: var(--dds-radius-large, 16px))\n * @cssproperty --dds-modal-background - Background color of the modal. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-modal-header-margin-sm - Margin below the header. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-header-margin-lg - Margin below the header. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-margin-sm - Margin above the footer. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-footer-margin-lg - Margin above the footer. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-gap - Gap between footer elements. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-close-margin - Margin for the close button. (default: var(--dds-spacing-300))\n * @cssproperty --dds-tray-width-side - Width of the side (left/right) trays. (default: 250px)\n * @cssproperty --dds-tray-min-width-horizontal - Minimum width of the horizontal (top/bottom) trays. (default: 400px)\n * @cssproperty --dds-tray-min-height-horizontal - Minimum height of the horizontal (top/bottom) trays. (default: 300px)\n * @cssproperty --dds-tray-min-height-vertical - Minimum height of the vertical (left/right) trays. (default: 100%)\n * @cssproperty --dds-tray-transform-duration - Duration of the transform animation. (default: 0.3s)\n * @cssproperty --dds-tray-transform-timing - Timing function for the transform animation. (default: ease-in-out)\n *\n * @csspart base - The main tray container.\n * @csspart panel - The panel of the tray.\n * @csspart header - The header of the tray.\n * @csspart footer - The footer of the tray.\n * @csspart content - The content of the tray.\n * @csspart body - The body of the tray.\n *\n */\nexport default class DapDSTray extends ModalBaseElement {\n  static tagName = 'dap-ds-tray'\n\n  /** The placement of the tray.\n   * @type { 'left' | 'right' | 'top' | 'bottom' }\n   */\n  @property({ reflect: true }) placement: 'left' | 'right' | 'top' | 'bottom' =\n    'bottom'\n\n  constructor() {\n    super()\n    this.footer = 'false'\n    this.header = 'false'\n\n    if (this.title) {\n      this.header = 'true'\n    }\n  }\n\n  static readonly styles = css`\n    ${unsafeCSS(ModalBaseElement.styles)}\n    ${unsafeCSS(style)}\n  `\n\n  render() {\n    return this.renderModal()\n  }\n}\n"],"names":["_DapDSTray","ModalBaseElement","css","unsafeCSS","style","DapDSTray","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAmEA,MAAqBA,IAArB,MAAqBA,UAAkBC,EAAiB;AAAA,EAStD,cAAc;AACN,UAAA,GAHN,KAAA,YAAA,UAIA,KAAK,SAAS,SACd,KAAK,SAAS,SAEV,KAAK,UACP,KAAK,SAAS;AAAA,EAChB;AAAA,EAQF,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AA1BED,EAAO,UAAU,eAkBjBA,EAAgB,SAASE;AAAAA,MACrBC,EAAUF,EAAiB,MAAM,CAAC;AAAA,MAClCE,EAAUC,CAAK,CAAC;AAAA;AArBtB,IAAqBC,IAArBL;AAM+BM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GANRF,EAMU,WAAA,WAAA;"}

package/dist/components/tray/tray.d.ts

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

package/dist/components/tray/tray.js

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

package/dist/components/tray/tray.js.map

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

package/dist/components/tray/tray.scss.js

@@ -0,0 +1,5 @@
+const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-tray-width-side: 250px;--dds-tray-min-width-horizontal: 400px;--dds-tray-min-height-horizontal: 300px;--dds-tray-min-height-vertical: 100%;--dds-tray-transform-duration: .3s;--dds-tray-transform-timing: ease-in-out;position:fixed;z-index:1000;top:0;left:0;width:100vw;height:100vh;overflow:hidden;pointer-events:none}:host([open]){pointer-events:auto}.modal:not([open]){visibility:hidden}:host([placement=left]) .modal{right:unset;width:var(--dds-tray-width-side);min-height:var(--dds-tray-min-height-vertical);margin:0;transform:translate(-100%);transition:transform var(--dds-tray-transform-duration) var(--dds-tray-transform-timing);border-top-left-radius:0;border-bottom-left-radius:0}:host([placement=left]) .modal[open]{transform:translate(0)}:host([placement=bottom]) .modal{top:unset;min-width:var(--dds-tray-min-width-horizontal);min-height:var(--dds-tray-min-height-horizontal);transform:translateY(100%);transition:transform var(--dds-tray-transform-duration) var(--dds-tray-transform-timing);border-bottom-right-radius:0;border-bottom-left-radius:0}:host([placement=bottom]) .modal[open]{transform:translate(0)}:host([placement=top]) .modal{bottom:unset;min-width:var(--dds-tray-min-width-horizontal);min-height:var(--dds-tray-min-height-horizontal);transform:translateY(-100%);transition:transform var(--dds-tray-transform-duration) var(--dds-tray-transform-timing);border-top-left-radius:0;border-top-right-radius:0}:host([placement=top]) .modal[open]{transform:translate(0)}:host([placement=right]) .modal{left:unset;width:var(--dds-tray-width-side);min-height:var(--dds-tray-min-height-vertical);margin:0;transform:translate(100%);transition:transform var(--dds-tray-transform-duration) var(--dds-tray-transform-timing);border-top-right-radius:0;border-bottom-right-radius:0}:host([placement=right]) .modal[open]{transform:translate(0)}";
+export {
+  t as default
+};
+//# sourceMappingURL=tray.scss.js.map

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

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

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

@@ -0,0 +1,5 @@
+const t = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}';
+export {
+  t as default
+};
+//# sourceMappingURL=typography.scss.js.map

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

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

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

@@ -55,6 +55,7 @@ export type TypographyProps = HeadingProps | BodyProps | CaptionProps | Descript
  * @cssproperty --dds-text-font-size-xs - The font size of the xs typography. (default: var(--dds-font-xs))
  */
 export default class DapDSTypography extends DdsElement implements Common<TypographyProps> {
+    static tagName: string;
     /**
      * The variant of the typography.
      * @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description'}

package/dist/components/typography/typography.component.js

@@ -0,0 +1,198 @@
+import { cva as u } from "../../node_modules/class-variance-authority/dist/index.js";
+import { clsx as h } 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 p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
+import { unsafeStatic as y, html as c } from "../../node_modules/lit-html/static.js";
+import { anchorClass as f } from "../../common/const.js";
+import { DdsElement as v } from "../../internal/dds-hu-element.js";
+import b from "./_styles/typography.scss.js";
+import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var $ = Object.defineProperty, n = (m, r, s, e) => {
+  for (var t = void 0, i = m.length - 1, o; i >= 0; i--)
+    (o = m[i]) && (t = o(r, s, t) || t);
+  return t && $(r, s, t), t;
+};
+const l = u("typography", {
+  variants: {
+    variant: {
+      h1: "heading typography-h1",
+      h2: "heading typography-h2",
+      h3: "heading typography-h3",
+      h4: "heading typography-h4",
+      h5: "heading typography-h5",
+      h6: "heading typography-h6",
+      body: "typography-body",
+      caption: "typography-caption",
+      description: "typography-description"
+    },
+    size: {
+      lg: "typography-size-lg",
+      md: "typography-size-md",
+      sm: "typography-size-sm",
+      xs: "typography-size-xs"
+    },
+    inverted: {
+      true: "typography-inverted"
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      class: ""
+    },
+    {
+      variant: "description",
+      size: "lg",
+      class: "typography-description-lg"
+    },
+    {
+      variant: "description",
+      size: "sm",
+      class: "typography-description-sm"
+    },
+    {
+      variant: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      inverted: !0,
+      class: "typography-heading-inverted"
+    },
+    {
+      variant: "description",
+      inverted: !0,
+      class: "typography-description-inverted"
+    },
+    {
+      variant: "body",
+      inverted: !0,
+      class: "typography-inverted"
+    },
+    {
+      variant: "caption",
+      inverted: !0,
+      class: "typography-caption-inverted"
+    }
+  ]
+}), g = class g extends v {
+  constructor() {
+    super(...arguments), this.anchor = !1, this.inverted = !1;
+  }
+  firstUpdated(r) {
+    super.firstUpdated(r), this.elementId && this.setAttribute("id", this.elementId);
+  }
+  get elementId() {
+    return this.id ? this.id : void 0;
+  }
+  _renderHeading(r, s, e, t, i) {
+    return c`
+      <${y(e)}
+        part="base"
+        id=${d(r)}
+        class=${h(
+      l({ variant: e, size: t, inverted: i }),
+      { [f]: this.anchor },
+      s
+    )}
+      >
+       <slot></slot>
+      </${y(e)}>
+    `;
+  }
+  _renderBody(r, s, e, t, i) {
+    return c`
+      <${y(t)}
+        id=${d(r)}
+        part="base"
+        class=${h(l({ variant: "body", size: e, inverted: i }), s)}
+      >
+        <slot></slot>
+      </${y(t)}>
+    `;
+  }
+  _renderCaption(r, s, e) {
+    return c`
+      <span
+        id=${d(r)}
+        part="base"
+        class=${h(
+      l({ variant: "caption", inverted: e }),
+      s
+    )}>
+        <slot></slot>
+      </span>
+    `;
+  }
+  _renderDescription(r, s, e, t) {
+    return c`
+      <span
+        id=${d(r)}
+        part="base"
+        class=${h(
+      l({ variant: "description", size: e, inverted: t }),
+      s
+    )}>
+        <slot></slot>
+      </span>
+    `;
+  }
+  _getElement(r, s, e, t = "", i = "p", o = !1) {
+    switch (s) {
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+        return this._renderHeading(
+          r,
+          t,
+          s,
+          e,
+          o
+        );
+      case "body":
+        return this._renderBody(r, t, e, i, o);
+      case "caption":
+        return this._renderCaption(r, t, o);
+      case "description":
+        return this._renderDescription(r, t, e, o);
+      default:
+        return null;
+    }
+  }
+  render() {
+    return this._getElement(
+      this.elementId,
+      this.variant,
+      this.size,
+      this.customClass,
+      this.bodyAs,
+      this.inverted
+    );
+  }
+};
+g.tagName = "dap-ds-typography", g.styles = _(b);
+let a = g;
+n([
+  p({ reflect: !0 })
+], a.prototype, "variant");
+n([
+  p({ reflect: !0 })
+], a.prototype, "size");
+n([
+  p({ reflect: !0 })
+], a.prototype, "bodyAs");
+n([
+  p()
+], a.prototype, "customClass");
+n([
+  p({ type: Boolean, reflect: !0 })
+], a.prototype, "anchor");
+n([
+  p({ type: Boolean, reflect: !0 })
+], a.prototype, "inverted");
+export {
+  a as default
+};
+//# sourceMappingURL=typography.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.component.js","sources":["../../../src/components/typography/typography.component.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { anchorClass } from '@/common/const'\n\nimport { Common, Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/typography.scss?inline'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'body'\n  | 'caption'\n  | 'description'\n\nexport type TypographySize =\n  | Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n  | null\n  | undefined\n\ntype HeadingProps = {\n  variant: Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>\n  size?: TypographySize\n}\n\ntype BodyProps = {\n  variant: Extract<TypographyVariant, 'body'>\n  size: TypographySize\n}\n\ntype CaptionProps = {\n  variant: Extract<TypographyVariant, 'caption'>\n  size: never\n}\n\ntype DescriptionProps = {\n  variant: Extract<TypographyVariant, 'description'>\n  size: Extract<TypographySize, 'lg' | 'sm'>\n}\n\nexport type TypographyProps =\n  | HeadingProps\n  | BodyProps\n  | CaptionProps\n  | DescriptionProps\n\nconst typographyStyles = cva('typography', {\n  variants: {\n    variant: {\n      h1: 'heading typography-h1',\n      h2: 'heading typography-h2',\n      h3: 'heading typography-h3',\n      h4: 'heading typography-h4',\n      h5: 'heading typography-h5',\n      h6: 'heading typography-h6',\n      body: 'typography-body',\n      caption: 'typography-caption',\n      description: 'typography-description',\n    },\n    size: {\n      lg: 'typography-size-lg',\n      md: 'typography-size-md',\n      sm: 'typography-size-sm',\n      xs: 'typography-size-xs',\n    },\n    inverted: {\n      true: 'typography-inverted',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      class: '',\n    },\n    {\n      variant: 'description',\n      size: 'lg',\n      class: 'typography-description-lg',\n    },\n    {\n      variant: 'description',\n      size: 'sm',\n      class: 'typography-description-sm',\n    },\n    {\n      variant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      inverted: true,\n      class: 'typography-heading-inverted',\n    },\n    {\n      variant: 'description',\n      inverted: true,\n      class: 'typography-description-inverted',\n    },\n    {\n      variant: 'body',\n      inverted: true,\n      class: 'typography-inverted',\n    },\n    {\n      variant: 'caption',\n      inverted: true,\n      class: 'typography-caption-inverted',\n    },\n  ],\n})\n\n/**\n * @element dap-ds-typography\n * @summary Typography is used to display text in different styles.\n * @title - Typography\n *\n * @slot default - The content of the typography.\n *\n * @csspart base - The main typography container.\n *\n * @cssproperty --dds-text-color - The color of the typography. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-text-color-inverted - The color of the typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-heading-color - The color of the heading typography. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-text-heading-color-inverted - The color of the heading typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-description-color - The color of the subtle typography. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-text-description-color-inverted - The color of the subtle typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-font-family - The font family of the typography. (default: var(--font-family))\n * @cssproperty --dds-text-font-weight-medium - The font weight of the medium typography. (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-text-font-weight-bold - The font weight of the bold typography. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-text-font-size-h1 - The font size of the h1 typography. (default: var(--dds-font-7xl))\n * @cssproperty --dds-text-font-size-h2 - The font size of the h2 typography. (default: var(--dds-font-4xl))\n * @cssproperty --dds-text-font-size-h3 - The font size of the h3 typography. (default: var(--dds-font-2xl))\n * @cssproperty --dds-text-font-size-h4 - The font size of the h4 typography. (default: var(--dds-font-xl))\n * @cssproperty --dds-text-font-size-h5 - The font size of the h5 typography. (default: var(--dds-font-lg))\n * @cssproperty --dds-text-font-size-h6 - The font size of the h6 typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-body - The font size of the body typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-caption - The font size of the caption typography. (default: var(--dds-font-xs))\n * @cssproperty --dds-text-font-size-description - The font size of the description typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-description-lg - The font size of the description lg typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-description-sm - The font size of the description sm typography. (default: var(--dds-font-sm))\n * @cssproperty --dds-text-font-size-lg - The font size of the lg typography. (default: var(--dds-font-lg))\n * @cssproperty --dds-text-font-size-md - The font size of the md typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-sm - The font size of the sm typography. (default: var(--dds-font-sm))\n * @cssproperty --dds-text-font-size-xs - The font size of the xs typography. (default: var(--dds-font-xs))\n */\nexport default class DapDSTypography\n  extends DdsElement\n  implements Common<TypographyProps>\n{\n  static tagName = 'dap-ds-typography'\n\n  /**\n   * The variant of the typography.\n   * @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description'}\n   */\n  @property({ reflect: true }) variant!: TypographyVariant\n  /**\n   * The size of the typography.\n   * @type {'xs' | 'sm' | 'md' | 'lg'}\n   */\n  @property({ reflect: true }) size?: TypographySize\n  /**\n   * The html element of the body typography.\n   */\n  @property({ reflect: true }) bodyAs?: string\n  /** The custom class of the typography. */\n  @property() customClass?: string\n  /** Whether the typography is an anchor for the TOC component. */\n  @property({ type: Boolean, reflect: true }) anchor = false\n  /** Whether the typography is inverted. */\n  @property({ type: Boolean, reflect: true }) inverted = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    if (this.elementId) {\n      this.setAttribute('id', this.elementId)\n    }\n  }\n\n  private get elementId() {\n    return this.id ? this.id : undefined\n  }\n\n  private _renderHeading(\n    elementId: string | undefined,\n    customClass: string,\n    variant: TypographyVariant,\n    size: TypographySize,\n    inverted: boolean,\n  ) {\n    return html`\n      <${unsafeStatic(variant)}\n        part=\"base\"\n        id=${ifDefined(elementId)}\n        class=${clsx(\n          typographyStyles({ variant, size, inverted }),\n          { [anchorClass]: this.anchor },\n          customClass,\n        )}\n      >\n       <slot></slot>\n      </${unsafeStatic(variant)}>\n    `\n  }\n\n  private _renderBody(\n    elementId: string | undefined,\n    customClass: string,\n    size: TypographySize,\n    bodyAs: string,\n    inverted: boolean,\n  ) {\n    return html`\n      <${unsafeStatic(bodyAs)}\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(typographyStyles({ variant: 'body', size, inverted }), customClass)}\n      >\n        <slot></slot>\n      </${unsafeStatic(bodyAs)}>\n    `\n  }\n\n  private _renderCaption(\n    elementId: string | undefined,\n    customClass: string,\n    inverted: boolean,\n  ) {\n    return html`\n      <span\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(\n          typographyStyles({ variant: 'caption', inverted }),\n          customClass,\n        )}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _renderDescription(\n    elementId: string | undefined,\n    customClass: string,\n    size: TypographySize,\n    inverted: boolean,\n  ) {\n    return html`\n      <span\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(\n          typographyStyles({ variant: 'description', size, inverted }),\n          customClass,\n        )}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _getElement(\n    elementId: string | undefined,\n    variant: TypographyVariant,\n    size: TypographySize,\n    customClass: string = '',\n    bodyAs: string = 'p',\n    inverted: boolean = false,\n  ) {\n    switch (variant) {\n      case 'h1':\n      case 'h2':\n      case 'h3':\n      case 'h4':\n      case 'h5':\n      case 'h6':\n        return this._renderHeading(\n          elementId,\n          customClass,\n          variant,\n          size,\n          inverted,\n        )\n      case 'body':\n        return this._renderBody(elementId, customClass, size, bodyAs, inverted)\n      case 'caption':\n        return this._renderCaption(elementId, customClass, inverted)\n      case 'description':\n        return this._renderDescription(elementId, customClass, size, inverted)\n      default:\n        return null\n    }\n  }\n\n  render() {\n    return this._getElement(\n      this.elementId,\n      this.variant,\n      this.size,\n      this.customClass,\n      this.bodyAs,\n      this.inverted,\n    )\n  }\n}\n"],"names":["typographyStyles","cva","_DapDSTypography","DdsElement","_changedProperties","elementId","customClass","variant","size","inverted","html","unsafeStatic","ifDefined","clsx","anchorClass","bodyAs","unsafeCSS","styles","DapDSTypography","__decorateClass","property"],"mappings":"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"}

package/dist/components/typography/typography.d.ts

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

package/dist/components/typography/typography.js

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

package/dist/components/typography/typography.js.map

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