dap-design-system 0.62.3 → 0.63.0

package/dist/internal/mixin/sizedMixin.js

@@ -1,14 +1,14 @@
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { setFromParentSize as h } from "../../common/utils.js";
-import { parseResponsiveSizeMap as n, getResponsiveSize as z, subscribeToBreakpoints as c } from "../../common/viewport.js";
-var d = Object.defineProperty, p = (r, i, u, e) => {
-  for (var t = void 0, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (t = o(i, u, t) || t);
-  return t && d(i, u, t), t;
+import { property as a } from "lit/decorators.js";
+import { setFromParentSize as c } from "../../common/utils.js";
+import { parseResponsiveSizeMap as p, getResponsiveSize as h, subscribeToBreakpoints as l } from "../../common/viewport.js";
+var z = Object.defineProperty, u = (n, i, o, e) => {
+  for (var t = void 0, s = n.length - 1, r; s >= 0; s--)
+    (r = n[s]) && (t = r(i, o, t) || t);
+  return t && z(i, o, t), t;
 };
-const l = ["xs", "sm", "md", "lg", "xl", "2xl"];
-function f(r) {
-  class i extends r {
+const d = ["xs", "sm", "md", "lg", "xl", "2xl"];
+function f(n) {
+  class i extends n {
     constructor() {
       super(...arguments), this.sizeMap = "", this.size = "sm", this.parentSized = "false", this.spacing = "none", this._unsubscribeBreakpoints = null, this._parentSizeObserver = null, this._requestedSize = null, this._internalSizeUpdate = !1;
     }
@@ -18,16 +18,16 @@ function f(r) {
       return this.sizeMap || e.getAttribute("sizemap") || e.getAttribute("size-map") || "";
     }
     get effectiveSize() {
-      const e = this._getBaseSize(), t = n(this._getSizeMapValue());
-      return t ? z(e, t) : e;
+      const e = this._getBaseSize(), t = p(this._getSizeMapValue());
+      return t ? h(e, t) : e;
     }
     _getBaseSize() {
       var t;
       if (this.parentSized === "true") {
-        const s = (t = this.closest("dap-ds-card")) == null ? void 0 : t.getAttribute("size");
-        return s != null ? s : "sm";
+        const s = this, r = typeof s.closest == "function" ? (t = s.closest("dap-ds-card")) == null ? void 0 : t.getAttribute("size") : null;
+        return r != null ? r : "sm";
       }
-      return n(this._getSizeMapValue()) && this._requestedSize != null ? this._requestedSize : this.size;
+      return p(this._getSizeMapValue()) && this._requestedSize != null ? this._requestedSize : this.size;
     }
     connectedCallback() {
       var e;
@@ -38,10 +38,12 @@ function f(r) {
     }
     _observeParentCardSize() {
       if (this.parentSized !== "true") return;
-      const e = this.closest("dap-ds-card");
-      e && (this._clearParentCardSizeObserver(), this._parentSizeObserver = new MutationObserver(() => {
+      const e = this;
+      if (typeof e.closest != "function") return;
+      const t = e.closest("dap-ds-card");
+      t && (this._clearParentCardSizeObserver(), this._parentSizeObserver = new MutationObserver(() => {
         this.isConnected && this.requestUpdate();
-      }), this._parentSizeObserver.observe(e, {
+      }), this._parentSizeObserver.observe(t, {
         attributes: !0,
         attributeFilter: ["size"]
       }));
@@ -51,12 +53,12 @@ function f(r) {
       (e = this._parentSizeObserver) == null || e.disconnect(), this._parentSizeObserver = null;
     }
     _updateBreakpointSubscription() {
-      if (!n(this._getSizeMapValue())) {
+      if (!p(this._getSizeMapValue())) {
         this._clearBreakpointSubscription();
         return;
       }
-      this._clearBreakpointSubscription(), this._unsubscribeBreakpoints = c(
-        l,
+      this._clearBreakpointSubscription(), this._unsubscribeBreakpoints = l(
+        d,
         () => {
           this.isConnected && this.requestUpdate();
         }
@@ -68,17 +70,17 @@ function f(r) {
     }
     update(e) {
       e.has("sizeMap") && this._updateBreakpointSubscription(), e.has("parentSized") && (this.parentSized === "true" ? this._observeParentCardSize() : this._clearParentCardSizeObserver());
-      const t = n(this._getSizeMapValue());
-      t && this._requestedSize == null && (this._requestedSize = this.size), t && !this._unsubscribeBreakpoints && this._updateBreakpointSubscription(), e.has("size") && !this._internalSizeUpdate && (this._requestedSize = this.size), this._internalSizeUpdate && (this._internalSizeUpdate = !1), this.parentSized === "true" && h(this), this._internalSizeUpdate = !0, this.setAttribute("size", this.effectiveSize), super.update(e);
+      const t = p(this._getSizeMapValue());
+      t && this._requestedSize == null && (this._requestedSize = this.size), t && !this._unsubscribeBreakpoints && this._updateBreakpointSubscription(), e.has("size") && !this._internalSizeUpdate && (this._requestedSize = this.size), this._internalSizeUpdate && (this._internalSizeUpdate = !1), this.parentSized === "true" && c(this), this._internalSizeUpdate = !0, this.setAttribute("size", this.effectiveSize), super.update(e);
     }
   }
-  return p([
+  return u([
     a()
-  ], i.prototype, "sizeMap"), p([
+  ], i.prototype, "sizeMap"), u([
     a()
-  ], i.prototype, "size"), p([
+  ], i.prototype, "size"), u([
     a()
-  ], i.prototype, "parentSized"), p([
+  ], i.prototype, "parentSized"), u([
     a()
   ], i.prototype, "spacing"), i;
 }

package/dist/internal/mixin/sizedMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizedMixin.js","sources":["../../../src/internal/mixin/sizedMixin.ts"],"sourcesContent":["import { LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ElementSpacing, Size } from '@/common/types'\nimport { setFromParentSize } from '@/common/utils'\nimport {\n  type BreakpointName,\n  getResponsiveSize,\n  parseResponsiveSizeMap,\n  subscribeToBreakpoints,\n} from '@/common/viewport'\n\n/** All breakpoints; we subscribe to all so effective size updates whenever viewport crosses any breakpoint. */\nconst ALL_BREAKPOINTS: BreakpointName[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl']\n\ntype Constructor<T = Record<string, unknown>> = {\n  new (...args: any[]): T\n  prototype: T\n}\n\nexport interface SizedElementInterface {\n  size: Size\n  parentSized: string\n  spacing: ElementSpacing\n  /** Breakpoint→size map; e.g. \"md:lg\" = at md and narrower use size lg. Keys: xs, sm, md, lg, xl, 2xl. Values: xxs, xs, sm, md, lg. */\n  sizeMap: string\n  /** The size used for rendering; viewport-adjusted when sizeMap applies, otherwise the requested size. */\n  readonly effectiveSize: Size\n}\n\nexport function SizedMixin<T extends Constructor<LitElement>>(\n  constructor: T,\n): T & Constructor<SizedElementInterface> {\n  class SizedElement extends constructor {\n    /** Breakpoint→size map; e.g. \"md:lg\" applies at md and all narrower breakpoints. Keys: xs, sm, md, lg, xl, 2xl. */\n    @property() sizeMap = ''\n\n    @property() size: Size = 'sm'\n    @property() parentSized = 'false'\n    @property() spacing: ElementSpacing = 'none'\n\n    private _unsubscribeBreakpoints: (() => void) | null = null\n\n    /** When parentSized is true, observes the parent card's size attribute so children re-render when it changes. */\n    private _parentSizeObserver: MutationObserver | null = null\n\n    /** User-requested base size; preserved because we overwrite the size attribute with effectiveSize for styling. */\n    private _requestedSize: Size | null = null\n\n    /** When true, the next size property change came from our setAttribute (do not store as _requestedSize). */\n    private _internalSizeUpdate = false\n\n    /** Resolve sizeMap from property or attribute so it works before Lit has reflected the attribute. */\n    private _getSizeMapValue(): string {\n      const el = this as unknown as HTMLElement\n      return (\n        this.sizeMap ||\n        el.getAttribute('sizemap') ||\n        el.getAttribute('size-map') ||\n        ''\n      )\n    }\n\n    get effectiveSize(): Size {\n      const baseSize = this._getBaseSize()\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (!map) return baseSize\n      return getResponsiveSize(baseSize, map)\n    }\n\n    private _getBaseSize(): Size {\n      if (this.parentSized === 'true') {\n        const parentSize = (this as unknown as HTMLElement)\n          .closest('dap-ds-card')\n          ?.getAttribute('size') as Size | null\n        return parentSize ?? 'sm'\n      }\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (map && this._requestedSize != null) return this._requestedSize\n      return this.size\n    }\n\n    override connectedCallback(): void {\n      super.connectedCallback()\n      this._requestedSize =\n        (this.getAttribute('size') as Size | null) ?? this.size\n      this._updateBreakpointSubscription()\n      this._observeParentCardSize()\n    }\n\n    override disconnectedCallback(): void {\n      this._clearBreakpointSubscription()\n      this._clearParentCardSizeObserver()\n      super.disconnectedCallback()\n    }\n\n    private _observeParentCardSize(): void {\n      if (this.parentSized !== 'true') return\n      const card = (this as unknown as HTMLElement).closest('dap-ds-card')\n      if (!card) return\n      this._clearParentCardSizeObserver()\n      this._parentSizeObserver = new MutationObserver(() => {\n        if (this.isConnected) this.requestUpdate()\n      })\n      this._parentSizeObserver.observe(card, {\n        attributes: true,\n        attributeFilter: ['size'],\n      })\n    }\n\n    private _clearParentCardSizeObserver(): void {\n      this._parentSizeObserver?.disconnect()\n      this._parentSizeObserver = null\n    }\n\n    private _updateBreakpointSubscription(): void {\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (!map) {\n        this._clearBreakpointSubscription()\n        return\n      }\n      this._clearBreakpointSubscription()\n      // Subscribe to all breakpoints so effective size updates whenever viewport\n      // crosses any boundary; otherwise we only revert to base size when crossing\n      // a breakpoint that was in the map (e.g. xs:md only at xs → must update when leaving xs).\n      this._unsubscribeBreakpoints = subscribeToBreakpoints(\n        ALL_BREAKPOINTS,\n        () => {\n          if (this.isConnected) this.requestUpdate()\n        },\n      )\n    }\n\n    private _clearBreakpointSubscription(): void {\n      this._unsubscribeBreakpoints?.()\n      this._unsubscribeBreakpoints = null\n    }\n\n    protected override update(changes: PropertyValues): void {\n      if (changes.has('sizeMap')) {\n        this._updateBreakpointSubscription()\n      }\n      if (changes.has('parentSized')) {\n        if (this.parentSized === 'true') {\n          this._observeParentCardSize()\n        } else {\n          this._clearParentCardSizeObserver()\n        }\n      }\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (map && this._requestedSize == null) this._requestedSize = this.size\n      // Subscribe on first update when sizeMap came from attribute (no change event)\n      if (map && !this._unsubscribeBreakpoints) {\n        this._updateBreakpointSubscription()\n      }\n      if (changes.has('size') && !this._internalSizeUpdate) {\n        this._requestedSize = this.size\n      }\n      if (this._internalSizeUpdate) this._internalSizeUpdate = false\n      if (this.parentSized === 'true') {\n        setFromParentSize(this as unknown as HTMLElement)\n      }\n      this._internalSizeUpdate = true\n      this.setAttribute('size', this.effectiveSize)\n      super.update(changes)\n    }\n  }\n  return SizedElement as Constructor<SizedElementInterface> & T\n}\n"],"names":["ALL_BREAKPOINTS","SizedMixin","constructor","SizedElement","el","baseSize","map","parseResponsiveSizeMap","getResponsiveSize","parentSize","_a","card","subscribeToBreakpoints","changes","setFromParentSize","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"sizedMixin.js","sources":["../../../src/internal/mixin/sizedMixin.ts"],"sourcesContent":["import { LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ElementSpacing, Size } from '@/common/types'\nimport { setFromParentSize } from '@/common/utils'\nimport {\n  type BreakpointName,\n  getResponsiveSize,\n  parseResponsiveSizeMap,\n  subscribeToBreakpoints,\n} from '@/common/viewport'\n\n/** All breakpoints; we subscribe to all so effective size updates whenever viewport crosses any breakpoint. */\nconst ALL_BREAKPOINTS: BreakpointName[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl']\n\ntype Constructor<T = Record<string, unknown>> = {\n  new (...args: any[]): T\n  prototype: T\n}\n\nexport interface SizedElementInterface {\n  size: Size\n  parentSized: string\n  spacing: ElementSpacing\n  /** Breakpoint→size map; e.g. \"md:lg\" = at md and narrower use size lg. Keys: xs, sm, md, lg, xl, 2xl. Values: xxs, xs, sm, md, lg. */\n  sizeMap: string\n  /** The size used for rendering; viewport-adjusted when sizeMap applies, otherwise the requested size. */\n  readonly effectiveSize: Size\n}\n\nexport function SizedMixin<T extends Constructor<LitElement>>(\n  constructor: T,\n): T & Constructor<SizedElementInterface> {\n  class SizedElement extends constructor {\n    /** Breakpoint→size map; e.g. \"md:lg\" applies at md and all narrower breakpoints. Keys: xs, sm, md, lg, xl, 2xl. */\n    @property() sizeMap = ''\n\n    @property() size: Size = 'sm'\n    @property() parentSized = 'false'\n    @property() spacing: ElementSpacing = 'none'\n\n    private _unsubscribeBreakpoints: (() => void) | null = null\n\n    /** When parentSized is true, observes the parent card's size attribute so children re-render when it changes. */\n    private _parentSizeObserver: MutationObserver | null = null\n\n    /** User-requested base size; preserved because we overwrite the size attribute with effectiveSize for styling. */\n    private _requestedSize: Size | null = null\n\n    /** When true, the next size property change came from our setAttribute (do not store as _requestedSize). */\n    private _internalSizeUpdate = false\n\n    /** Resolve sizeMap from property or attribute so it works before Lit has reflected the attribute. */\n    private _getSizeMapValue(): string {\n      const el = this as unknown as HTMLElement\n      return (\n        this.sizeMap ||\n        el.getAttribute('sizemap') ||\n        el.getAttribute('size-map') ||\n        ''\n      )\n    }\n\n    get effectiveSize(): Size {\n      const baseSize = this._getBaseSize()\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (!map) return baseSize\n      return getResponsiveSize(baseSize, map)\n    }\n\n    private _getBaseSize(): Size {\n      if (this.parentSized === 'true') {\n        const element = this as unknown as HTMLElement\n        // `closest` is unavailable in the Lit SSR DOM shim; fall back to the\n        // default size on the server (resolved on the client after hydration).\n        const parentSize =\n          typeof element.closest === 'function'\n            ? (element\n                .closest('dap-ds-card')\n                ?.getAttribute('size') as Size | null)\n            : null\n        return parentSize ?? 'sm'\n      }\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (map && this._requestedSize != null) return this._requestedSize\n      return this.size\n    }\n\n    override connectedCallback(): void {\n      super.connectedCallback()\n      this._requestedSize =\n        (this.getAttribute('size') as Size | null) ?? this.size\n      this._updateBreakpointSubscription()\n      this._observeParentCardSize()\n    }\n\n    override disconnectedCallback(): void {\n      this._clearBreakpointSubscription()\n      this._clearParentCardSizeObserver()\n      super.disconnectedCallback()\n    }\n\n    private _observeParentCardSize(): void {\n      if (this.parentSized !== 'true') return\n      const element = this as unknown as HTMLElement\n      // Observing a parent card is a client-only concern; `closest` and\n      // MutationObserver are unavailable in the Lit SSR DOM shim.\n      if (typeof element.closest !== 'function') return\n      const card = element.closest('dap-ds-card')\n      if (!card) return\n      this._clearParentCardSizeObserver()\n      this._parentSizeObserver = new MutationObserver(() => {\n        if (this.isConnected) this.requestUpdate()\n      })\n      this._parentSizeObserver.observe(card, {\n        attributes: true,\n        attributeFilter: ['size'],\n      })\n    }\n\n    private _clearParentCardSizeObserver(): void {\n      this._parentSizeObserver?.disconnect()\n      this._parentSizeObserver = null\n    }\n\n    private _updateBreakpointSubscription(): void {\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (!map) {\n        this._clearBreakpointSubscription()\n        return\n      }\n      this._clearBreakpointSubscription()\n      // Subscribe to all breakpoints so effective size updates whenever viewport\n      // crosses any boundary; otherwise we only revert to base size when crossing\n      // a breakpoint that was in the map (e.g. xs:md only at xs → must update when leaving xs).\n      this._unsubscribeBreakpoints = subscribeToBreakpoints(\n        ALL_BREAKPOINTS,\n        () => {\n          if (this.isConnected) this.requestUpdate()\n        },\n      )\n    }\n\n    private _clearBreakpointSubscription(): void {\n      this._unsubscribeBreakpoints?.()\n      this._unsubscribeBreakpoints = null\n    }\n\n    protected override update(changes: PropertyValues): void {\n      if (changes.has('sizeMap')) {\n        this._updateBreakpointSubscription()\n      }\n      if (changes.has('parentSized')) {\n        if (this.parentSized === 'true') {\n          this._observeParentCardSize()\n        } else {\n          this._clearParentCardSizeObserver()\n        }\n      }\n      const map = parseResponsiveSizeMap(this._getSizeMapValue())\n      if (map && this._requestedSize == null) this._requestedSize = this.size\n      // Subscribe on first update when sizeMap came from attribute (no change event)\n      if (map && !this._unsubscribeBreakpoints) {\n        this._updateBreakpointSubscription()\n      }\n      if (changes.has('size') && !this._internalSizeUpdate) {\n        this._requestedSize = this.size\n      }\n      if (this._internalSizeUpdate) this._internalSizeUpdate = false\n      if (this.parentSized === 'true') {\n        setFromParentSize(this as unknown as HTMLElement)\n      }\n      this._internalSizeUpdate = true\n      this.setAttribute('size', this.effectiveSize)\n      super.update(changes)\n    }\n  }\n  return SizedElement as Constructor<SizedElementInterface> & T\n}\n"],"names":["ALL_BREAKPOINTS","SizedMixin","constructor","SizedElement","el","baseSize","map","parseResponsiveSizeMap","getResponsiveSize","element","parentSize","_a","card","subscribeToBreakpoints","changes","setFromParentSize","__decorateClass","property"],"mappings":"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"}

package/dist/internal/templates/formLabel.d.ts

@@ -0,0 +1,41 @@
+import { nothing } from 'lit';
+export interface FormLabelTemplateOptions {
+    label?: string;
+    size?: string;
+    required?: boolean;
+    requiredLabel?: string;
+    optional?: boolean;
+    optionalLabel?: string;
+    disabled?: boolean;
+    subtle?: boolean;
+    hideLabel?: boolean;
+    noMargin?: boolean;
+    /** id of the control this label names (rendered as the native `for`). */
+    htmlFor?: string;
+    /** id of the label element itself (for `aria-labelledby` references). */
+    id?: string;
+    /**
+     * Element to render. `'label'` (default) for a real form label with a `for`
+     * association. `'span'` for controls that already wrap their input in an outer
+     * `<label>` (checkbox/switch) — nesting a second `<label>` would be invalid HTML,
+     * so the visual label is a decorative span instead.
+     */
+    as?: 'label' | 'span';
+    /** Hide from the accessibility tree (used when the name comes from elsewhere). */
+    ariaHidden?: boolean;
+}
+/**
+ * Renders the form-label markup directly so it lives in the SAME shadow tree as the
+ * control it names.
+ *
+ * A nested `<dap-ds-form-label>` custom element puts the `<label for>` in its own
+ * shadow root, a different tree from the control's `<input id>` — which breaks both
+ * `for`/`id` click-to-focus (never crosses shadow boundaries in any browser) and
+ * the accessible name in non-Chromium browsers. It also styles inconsistently under
+ * SSR because `@lit-labs/ssr` forces the light-DOM component into a shadow root.
+ *
+ * Rendering the label inline keeps it in-tree (a11y correct) and makes it normal
+ * shadow content styled by the host's stylesheet (via the `form-label.mixin`'s
+ * `embedded-label`). The consuming component must include those styles.
+ */
+export declare function formLabelTemplate(o: FormLabelTemplateOptions): typeof nothing | import('lit-html').TemplateResult<1>;

package/dist/internal/templates/formLabel.js

@@ -0,0 +1,47 @@
+import { clsx as t } from "../../node_modules/clsx/dist/clsx.js";
+import { nothing as d, html as l } from "lit";
+import { ifDefined as e } from "lit/directives/if-defined.js";
+function $(a) {
+  var n;
+  if (!a.label)
+    return d;
+  const i = t("dds-label", `dds-label--${(n = a.size) != null ? n : "sm"}`, {
+    "dds-label--disabled": a.disabled,
+    "dds-label--required": a.required,
+    "dds-label--optional": a.optional,
+    "dds-label--subtle": a.subtle,
+    "dds-label--no-margin": a.noMargin,
+    "dds-label--hidden": a.hideLabel
+  }), r = a.ariaHidden ? "true" : void 0, s = l`${a.label}
+  ${a.required ? l`<span
+        part="label-required"
+        aria-hidden="true"
+        class="dds-label__required-indicator"
+        >${a.requiredLabel}</span
+      >` : d}
+  ${a.optional ? l`<span
+        part="label-optional"
+        class=${t("dds-label__optional-indicator", {
+    [`dds-label__optional-indicator--${a.size}`]: a.size
+  })}
+        >${a.optionalLabel}</span
+      >` : d}`;
+  return a.as === "span" ? l`<span
+      part="label label-base"
+      id=${e(a.id)}
+      class=${i}
+      aria-hidden=${e(r)}
+      >${s}</span
+    >` : l`<label
+    part="label label-base"
+    id=${e(a.id)}
+    class=${i}
+    for=${e(a.htmlFor)}
+    aria-hidden=${e(r)}
+    >${s}</label
+  >`;
+}
+export {
+  $ as formLabelTemplate
+};
+//# sourceMappingURL=formLabel.js.map

package/dist/internal/templates/formLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formLabel.js","sources":["../../../src/internal/templates/formLabel.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nexport interface FormLabelTemplateOptions {\n  label?: string\n  size?: string\n  required?: boolean\n  requiredLabel?: string\n  optional?: boolean\n  optionalLabel?: string\n  disabled?: boolean\n  subtle?: boolean\n  hideLabel?: boolean\n  noMargin?: boolean\n  /** id of the control this label names (rendered as the native `for`). */\n  htmlFor?: string\n  /** id of the label element itself (for `aria-labelledby` references). */\n  id?: string\n  /**\n   * Element to render. `'label'` (default) for a real form label with a `for`\n   * association. `'span'` for controls that already wrap their input in an outer\n   * `<label>` (checkbox/switch) — nesting a second `<label>` would be invalid HTML,\n   * so the visual label is a decorative span instead.\n   */\n  as?: 'label' | 'span'\n  /** Hide from the accessibility tree (used when the name comes from elsewhere). */\n  ariaHidden?: boolean\n}\n\n/**\n * Renders the form-label markup directly so it lives in the SAME shadow tree as the\n * control it names.\n *\n * A nested `<dap-ds-form-label>` custom element puts the `<label for>` in its own\n * shadow root, a different tree from the control's `<input id>` — which breaks both\n * `for`/`id` click-to-focus (never crosses shadow boundaries in any browser) and\n * the accessible name in non-Chromium browsers. It also styles inconsistently under\n * SSR because `@lit-labs/ssr` forces the light-DOM component into a shadow root.\n *\n * Rendering the label inline keeps it in-tree (a11y correct) and makes it normal\n * shadow content styled by the host's stylesheet (via the `form-label.mixin`'s\n * `embedded-label`). The consuming component must include those styles.\n */\nexport function formLabelTemplate(o: FormLabelTemplateOptions) {\n  if (!o.label) {\n    return nothing\n  }\n\n  const cls = clsx('dds-label', `dds-label--${o.size ?? 'sm'}`, {\n    'dds-label--disabled': o.disabled,\n    'dds-label--required': o.required,\n    'dds-label--optional': o.optional,\n    'dds-label--subtle': o.subtle,\n    'dds-label--no-margin': o.noMargin,\n    'dds-label--hidden': o.hideLabel,\n  })\n\n  const ariaHidden = o.ariaHidden ? 'true' : undefined\n\n  const content = html`${o.label}\n  ${o.required\n    ? html`<span\n        part=\"label-required\"\n        aria-hidden=\"true\"\n        class=\"dds-label__required-indicator\"\n        >${o.requiredLabel}</span\n      >`\n    : nothing}\n  ${o.optional\n    ? html`<span\n        part=\"label-optional\"\n        class=${clsx('dds-label__optional-indicator', {\n          [`dds-label__optional-indicator--${o.size}`]: o.size,\n        })}\n        >${o.optionalLabel}</span\n      >`\n    : nothing}`\n\n  if (o.as === 'span') {\n    return html`<span\n      part=\"label label-base\"\n      id=${ifDefined(o.id)}\n      class=${cls}\n      aria-hidden=${ifDefined(ariaHidden)}\n      >${content}</span\n    >`\n  }\n\n  return html`<label\n    part=\"label label-base\"\n    id=${ifDefined(o.id)}\n    class=${cls}\n    for=${ifDefined(o.htmlFor)}\n    aria-hidden=${ifDefined(ariaHidden)}\n    >${content}</label\n  >`\n}\n"],"names":["formLabelTemplate","o","nothing","cls","clsx","_a","ariaHidden","content","html","ifDefined"],"mappings":";;;AA4CO,SAASA,EAAkBC,GAA6B;;AACzD,MAAA,CAACA,EAAE;AACE,WAAAC;AAGT,QAAMC,IAAMC,EAAK,aAAa,eAAcC,IAAAJ,EAAE,SAAF,OAAAI,IAAU,IAAI,IAAI;AAAA,IAC5D,uBAAuBJ,EAAE;AAAA,IACzB,uBAAuBA,EAAE;AAAA,IACzB,uBAAuBA,EAAE;AAAA,IACzB,qBAAqBA,EAAE;AAAA,IACvB,wBAAwBA,EAAE;AAAA,IAC1B,qBAAqBA,EAAE;AAAA,EAAA,CACxB,GAEKK,IAAaL,EAAE,aAAa,SAAS,QAErCM,IAAUC,IAAOP,EAAE,KAAK;AAAA,IAC5BA,EAAE,WACAO;AAAA;AAAA;AAAA;AAAA,WAIKP,EAAE,aAAa;AAAA,WAEpBC,CAAO;AAAA,IACTD,EAAE,WACAO;AAAA;AAAA,gBAEUJ,EAAK,iCAAiC;AAAA,IAC5C,CAAC,kCAAkCH,EAAE,IAAI,EAAE,GAAGA,EAAE;AAAA,EAAA,CACjD,CAAC;AAAA,WACCA,EAAE,aAAa;AAAA,WAEpBC,CAAO;AAEP,SAAAD,EAAE,OAAO,SACJO;AAAA;AAAA,WAEAC,EAAUR,EAAE,EAAE,CAAC;AAAA,cACZE,CAAG;AAAA,oBACGM,EAAUH,CAAU,CAAC;AAAA,SAChCC,CAAO;AAAA,SAIPC;AAAA;AAAA,SAEAC,EAAUR,EAAE,EAAE,CAAC;AAAA,YACZE,CAAG;AAAA,UACLM,EAAUR,EAAE,OAAO,CAAC;AAAA,kBACZQ,EAAUH,CAAU,CAAC;AAAA,OAChCC,CAAO;AAAA;AAEd;"}

package/dist/localization/locales/de.json.js

@@ -1,4 +1,4 @@
-const e = "./_schema.json", n = { neutral: "Information", informative: "Information", positive: "Erfolg", warning: "Warnung", negative: "Fehler" }, t = "Schließen", i = "Abbrechen", a = "Auswahl löschen", r = "Kopieren", o = "Bestätigen", s = "Ok", c = "Suchen", l = "Tag", d = "(öffnet in neuem Tab)", h = { optional: "(Optional)", tooltip: "Information" }, g = { maxLength: "Maximale Länge um {{count}} Zeichen überschritten" }, u = { info: "Info", success: "Erfolg", error: "Fehler" }, m = { selected: "ausgewählt", disabled: "nicht verfügbar" }, b = "lädt", f = "Lädt...", p = "anzeigen", v = "ausblenden", D = "verringern", S = "erhöhen", w = "Inhaltsverzeichnis", z = "{{val, datetime}}", k = "ausgewählt", A = { today: "heute", now: "jetzt", nextMonth: "nächster Monat", prevMonth: "vorheriger Monat", year: "Jahr", month: "Monat" }, L = { validationMessage: { select: "Bitte wählen Sie eine Option", datepicker: "Bitte wählen Sie ein Datum" } }, x = { dragDropArea: "Dateien hier ablegen oder klicken zum Hochladen", dragDropInstructions: "Sie können Dateien auch durch Ziehen und Ablegen in den Bereich hochladen.", files: "Dateien", uploadButtonLabel: "Hochladen", browseButtonLabel: "Durchsuchen", browse: "Dateien durchsuchen", fileList: "Dateiliste", fileSize: "{{size}} MB", upload: "Hochladen", uploading: "Hochladen läuft", dropzone: { label: "Dateien hochladen", text: "Dateien hier ablegen oder klicken zum Hochladen", acceptedTypes: "Erlaubte Dateitypen" }, link: "Link", cancel: "Abbrechen", delete: "Löschen", view: "Ansehen", error: { fileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB", fileType: "Der Dateityp ist nicht erlaubt", fileAmount: "Die Anzahl der Dateien überschreitet das maximale Limit von {count}", perFileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB" }, removeDialog: { title: "Datei entfernen", message: "Sind Sie sicher, dass Sie {{fileName}} entfernen möchten?", confirm: "Löschen", cancel: "Abbrechen" } }, B = { pageSize: "{{count}} Einträge / Seite", first: "Erste", previous: "Zurück", next: "Weiter", last: "Letzte", pageInfo: "{{rangeStart}}-{{rangeEnd}} von {{totalRows}}" }, E = { sortAscending: "Aufsteigend sortieren", sortDescending: "Absteigend sortieren", clearSort: "Sortierung löschen", tableDescription: "Datentabelle mit sortierbaren Spalten", defaultCaption: "Datentabelle", rowSelected: "Zeile ausgewählt", rowDeselected: "Zeile abgewählt", sortedBy: "Sortiert nach {{column}} {{direction}}", pageChanged: "Seite {{page}} von {{total}}", noData: "Keine Daten verfügbar", resizeColumn: "Spaltenbreite ändern" }, M = { expand: "Abschnitt erweitern", collapse: "Abschnitt einklappen" }, I = { hour: "Stunde", minute: "Minute", second: "Sekunde" }, y = { remove: "Entfernen", removable: "entfernbar, drücken Sie Entf zum Entfernen" }, T = { notifications: "Benachrichtigungen" }, Z = { multiselect: { selected: "{{count}} Element{{count > 1 ? 'e' : ''}} ausgewählt" } }, H = { loading: "Lädt", progress: "Fortschritt: {{percentage}}%" }, R = {
+const e = "./_schema.json", n = { neutral: "Information", informative: "Information", positive: "Erfolg", warning: "Warnung", negative: "Fehler" }, t = "Schließen", i = "Abbrechen", a = "Auswahl löschen", r = "Kopieren", o = "Bestätigen", s = "Ok", c = "Suchen", l = "Tag", d = "(öffnet in neuem Tab)", h = { optional: "(Optional)", tooltip: "Information" }, g = { maxLength: "Maximale Länge um {{count}} Zeichen überschritten" }, u = { info: "Info", success: "Erfolg", error: "Fehler" }, m = { selected: "ausgewählt", disabled: "nicht verfügbar" }, b = "lädt", f = "Lädt...", p = "anzeigen", v = "ausblenden", D = "verringern", w = "erhöhen", S = "Inhaltsverzeichnis", z = "{{val, datetime}}", k = "ausgewählt", A = { today: "heute", now: "jetzt", nextMonth: "nächster Monat", prevMonth: "vorheriger Monat", year: "Jahr", month: "Monat" }, L = { validationMessage: { select: "Bitte wählen Sie eine Option", datepicker: "Bitte wählen Sie ein Datum" } }, x = { dragDropArea: "Dateien hier ablegen oder klicken zum Hochladen", dragDropInstructions: "Sie können Dateien auch durch Ziehen und Ablegen in den Bereich hochladen.", files: "Dateien", uploadButtonLabel: "Hochladen", browseButtonLabel: "Durchsuchen", browse: "Dateien durchsuchen", fileList: "Dateiliste", fileSize: "{{size}} MB", upload: "Hochladen", uploading: "Hochladen läuft", dropzone: { label: "Dateien hochladen", text: "Dateien hier ablegen oder klicken zum Hochladen", acceptedTypes: "Erlaubte Dateitypen" }, link: "Link", cancel: "Abbrechen", delete: "Löschen", view: "Ansehen", error: { fileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB", fileType: "Der Dateityp ist nicht erlaubt", fileAmount: "Die Anzahl der Dateien überschreitet das maximale Limit von {count}", perFileSize: "Die Dateigröße überschreitet das maximale Limit von {size} MB" }, removeDialog: { title: "Datei entfernen", message: "Sind Sie sicher, dass Sie {{fileName}} entfernen möchten?", confirm: "Löschen", cancel: "Abbrechen" } }, B = { pageSize: "{{count}} Einträge / Seite", first: "Erste", previous: "Zurück", next: "Weiter", last: "Letzte", pageInfo: "{{rangeStart}}-{{rangeEnd}} von {{totalRows}}" }, E = { sortAscending: "Aufsteigend sortieren", sortDescending: "Absteigend sortieren", clearSort: "Sortierung löschen", tableDescription: "Datentabelle mit sortierbaren Spalten", defaultCaption: "Datentabelle", rowSelected: "Zeile ausgewählt", rowDeselected: "Zeile abgewählt", sortedBy: "Sortiert nach {{column}} {{direction}}", pageChanged: "Seite {{page}} von {{total}}", noData: "Keine Daten verfügbar", resizeColumn: "Spaltenbreite ändern" }, M = { expand: "Abschnitt erweitern", collapse: "Abschnitt einklappen" }, I = { hour: "Stunde", minute: "Minute", second: "Sekunde" }, y = { remove: "Entfernen", removable: "entfernbar, drücken Sie Entf zum Entfernen" }, T = { notifications: "Benachrichtigungen" }, Z = { activeOption: "{{option}}, {{position}} von {{count}}", multiselect: { selected_one: "{{count}} Element ausgewählt", selected_other: "{{count}} Elemente ausgewählt" } }, H = { loading: "Lädt", progress: "Fortschritt: {{percentage}}%" }, O = {
   $schema: e,
   bannerType: n,
   close: t,
@@ -22,8 +22,8 @@ const e = "./_schema.json", n = { neutral: "Information", informative: "Informat
   show: p,
   hide: v,
   decrease: D,
-  increase: S,
-  tocTitle: w,
+  increase: w,
+  tocTitle: S,
   date: z,
   selected: k,
   calendar: A,
@@ -33,7 +33,7 @@ const e = "./_schema.json", n = { neutral: "Information", informative: "Informat
   datatable: E,
   accordion: M,
   "official-website-banner": { heading: "Die offizielle Website von Ungarn.", "heading-2": "Offizielle Regierungswebsite", content: "Nur offizielle Regierungswebsites mit der Endung gov.hu können verwendet werden, die gesetzlich geregelt sind und mehrere Schutzschichten haben." },
-  "avatar-group": { "overflow-label": "{{count}} weitere{{count > 1 ? '' : 'r'}} Avatar{{count > 1 ? 'e' : ''}}" },
+  "avatar-group": { "overflow-label_one": "{{count}} weiterer Avatar", "overflow-label_other": "{{count}} weitere Avatare" },
   timepicker: I,
   chip: y,
   snackbar: T,
@@ -57,13 +57,13 @@ export {
   E as datatable,
   z as date,
   D as decrease,
-  R as default,
+  O as default,
   g as errors,
   u as feedback,
   x as fileInput,
   L as form,
   v as hide,
-  S as increase,
+  w as increase,
   h as label,
   m as listItems,
   b as loading,
@@ -78,6 +78,6 @@ export {
   f as spinner,
   l as tag,
   I as timepicker,
-  w as tocTitle
+  S as tocTitle
 };
 //# sourceMappingURL=de.json.js.map

package/dist/localization/locales/en.json.js

@@ -1,4 +1,4 @@
-const e = "./_schema.json", o = { neutral: "Information", informative: "Information", positive: "Success", warning: "Warning", negative: "Error" }, t = "Close", a = "Cancel", n = "Clear selection", i = "Copy", s = "Confirm", l = "Ok", c = "Search", r = "tag", d = "(opens in new tab)", p = { optional: "(Optional)", tooltip: "Information" }, m = { maxLength: "Exceeded the maximum length by {{count}} character" }, g = { info: "Info", success: "Success", error: "Error" }, f = { selected: "kiválasztva", disabled: "nem elérhető" }, u = "loading", h = "Loading...", b = "show", w = "hide", v = "decrease", x = "increase", y = "Table of contents", z = "{{val, datetime}}", D = "selected", k = { today: "today", now: "now", nextMonth: "next month", prevMonth: "previous month", year: "year", month: "month" }, C = { validationMessage: { select: "Please select an option", datepicker: "Please select a date" } }, S = { dragDropArea: "Drag and drop files here or click to upload", dragDropInstructions: "You can also upload files by dragging and dropping them into the area.", files: "Files", uploadButtonLabel: "Upload", browseButtonLabel: "Browse", browse: "Browse files", fileList: "File list", fileSize: "{{size}} MB", upload: "Upload", uploading: "Uploading", dropzone: { label: "Upload files", text: "Drag and drop files here or click to upload", acceptedTypes: "Accepted file types" }, link: "Link", cancel: "Cancel", delete: "Delete", view: "View", error: { fileSize: "The file size exceeds the maximum limit of {size} MB", fileType: "The file type is not allowed", fileAmount: "The number of files exceeds the maximum limit of {count}", perFileSize: "The file size exceeds the maximum limit of {size} MB" }, removeDialog: { title: "Remove file", message: "Are you sure you want to remove {{fileName}}?", confirm: "Delete", cancel: "Cancel" } }, T = { pageSize: "{{count}} items / page", first: "First", previous: "Previous", next: "Next", last: "Last", pageInfo: "{{rangeStart}}-{{rangeEnd}} of {{totalRows}}" }, B = { sortAscending: "Sort ascending", sortDescending: "Sort descending", clearSort: "Clear sort", tableDescription: "Data table with sortable columns", defaultCaption: "Data table", rowSelected: "Row selected", rowDeselected: "Row deselected", sortedBy: "Sorted by {{column}} {{direction}}", pageChanged: "Page {{page}} of {{total}}", noData: "No data available", resizeColumn: "Resize column" }, I = { expand: "Expand section", collapse: "Collapse section" }, L = { hour: "Hour", minute: "Minute", second: "Second" }, M = { remove: "Remove", removable: "removable, press Delete or Backspace to remove" }, P = { notifications: "Notifications" }, E = { multiselect: { selected: "{{count}} item{{count > 1 ? 's' : ''}} selected" } }, R = { loading: "Loading", progress: "Progress: {{percentage}}%" }, A = {
+const e = "./_schema.json", o = { neutral: "Information", informative: "Information", positive: "Success", warning: "Warning", negative: "Error" }, t = "Close", a = "Cancel", n = "Clear selection", i = "Copy", s = "Confirm", l = "Ok", c = "Search", r = "tag", d = "(opens in new tab)", p = { optional: "(Optional)", tooltip: "Information" }, m = { maxLength: "Exceeded the maximum length by {{count}} character" }, g = { info: "Info", success: "Success", error: "Error" }, f = { selected: "kiválasztva", disabled: "nem elérhető" }, u = "loading", h = "Loading...", b = "show", v = "hide", w = "decrease", x = "increase", y = "Table of contents", z = "{{val, datetime}}", D = "selected", k = { today: "today", now: "now", nextMonth: "next month", prevMonth: "previous month", year: "year", month: "month" }, C = { validationMessage: { select: "Please select an option", datepicker: "Please select a date" } }, S = { dragDropArea: "Drag and drop files here or click to upload", dragDropInstructions: "You can also upload files by dragging and dropping them into the area.", files: "Files", uploadButtonLabel: "Upload", browseButtonLabel: "Browse", browse: "Browse files", fileList: "File list", fileSize: "{{size}} MB", upload: "Upload", uploading: "Uploading", dropzone: { label: "Upload files", text: "Drag and drop files here or click to upload", acceptedTypes: "Accepted file types" }, link: "Link", cancel: "Cancel", delete: "Delete", view: "View", error: { fileSize: "The file size exceeds the maximum limit of {size} MB", fileType: "The file type is not allowed", fileAmount: "The number of files exceeds the maximum limit of {count}", perFileSize: "The file size exceeds the maximum limit of {size} MB" }, removeDialog: { title: "Remove file", message: "Are you sure you want to remove {{fileName}}?", confirm: "Delete", cancel: "Cancel" } }, T = { pageSize: "{{count}} items / page", first: "First", previous: "Previous", next: "Next", last: "Last", pageInfo: "{{rangeStart}}-{{rangeEnd}} of {{totalRows}}" }, B = { sortAscending: "Sort ascending", sortDescending: "Sort descending", clearSort: "Clear sort", tableDescription: "Data table with sortable columns", defaultCaption: "Data table", rowSelected: "Row selected", rowDeselected: "Row deselected", sortedBy: "Sorted by {{column}} {{direction}}", pageChanged: "Page {{page}} of {{total}}", noData: "No data available", resizeColumn: "Resize column" }, I = { expand: "Expand section", collapse: "Collapse section" }, L = { hour: "Hour", minute: "Minute", second: "Second" }, M = { remove: "Remove", removable: "removable, press Delete or Backspace to remove" }, P = { notifications: "Notifications" }, E = { activeOption: "{{option}}, {{position}} of {{count}}", multiselect: { selected_one: "{{count}} item selected", selected_other: "{{count}} items selected" } }, R = { loading: "Loading", progress: "Progress: {{percentage}}%" }, A = {
   $schema: e,
   bannerType: o,
   close: t,
@@ -20,8 +20,8 @@ const e = "./_schema.json", o = { neutral: "Information", informative: "Informat
   loading: u,
   spinner: h,
   show: b,
-  hide: w,
-  decrease: v,
+  hide: v,
+  decrease: w,
   increase: x,
   tocTitle: y,
   date: z,
@@ -33,7 +33,7 @@ const e = "./_schema.json", o = { neutral: "Information", informative: "Informat
   datatable: B,
   accordion: I,
   "official-website-banner": { heading: "The official website of Hungary.", "heading-2": "Official government website", content: "Only official government websites ending in gov.hu can be used, which are legally regulated and have multiple layers of protection." },
-  "avatar-group": { "overflow-label": "{{count}} more avatar{{count > 1 ? 's' : ''}}" },
+  "avatar-group": { "overflow-label_one": "{{count}} more avatar", "overflow-label_other": "{{count}} more avatars" },
   timepicker: L,
   chip: M,
   snackbar: P,
@@ -56,13 +56,13 @@ export {
   i as copy,
   B as datatable,
   z as date,
-  v as decrease,
+  w as decrease,
   A as default,
   m as errors,
   g as feedback,
   S as fileInput,
   C as form,
-  w as hide,
+  v as hide,
   x as increase,
   p as label,
   f as listItems,

package/dist/localization/locales/hu.json.js

@@ -1,4 +1,4 @@
-const e = "./_schema.json", t = { neutral: "Információ", informative: "Információ", positive: "Sikeres", warning: "Figyelmeztetés", negative: "Hiba" }, a = "Bezár", l = "(új ablakban nyílik meg)", s = "címke", o = "Mégse", n = "Kiválasztás törlése", i = "Másolás", r = "Megerősít", c = "Ok", m = "Keresés", d = { optional: "(Nem kötelező)", tooltip: "Információ" }, g = { maxLength: "Túllépte {{count}} karakterrel a maximális hosszúságot" }, z = { info: "Tájékoztató", success: "Sikeres", error: "Hiba" }, k = { selected: "kiválasztva", disabled: "nem elérhető" }, p = "Betöltés", v = "mutat", b = "elrejt", f = "Csökkentés", h = "Növelés", u = "Tartalom", j = "{{val, datetime}}", y = "kiválasztva", M = { today: "mai nap", now: "most", nextMonth: "következő hónap", prevMonth: "előző hónap", year: "év", month: "hónap" }, w = { validationMessage: { select: "Kérem válasszon egy lehetőséget", datepicker: "Kérem válasszon egy dátumot" } }, x = { files: "Fájlok", dragDropArea: "Húzza ide a fájlokat vagy kattintson a feltöltésre", dragDropInstructions: "A fájlokat a területre húzva is feltöltheti.", uploadButtonLabel: "Feltöltés", browseButtonLabel: "Fájlok tallózása", browse: "Fájlok tallózása", fileList: "Fájl lista", upload: "Feltöltés", fileSize: "{{size}} MB", uploading: "Feltöltés folyamatban", dropzone: { label: "Fájlok feltöltése", text: "Húzza ide a fájlokat vagy kattintson a feltöltésre", acceptedTypes: "Megengedett fájl típusok" }, link: "Link", cancel: "Mégse", delete: "Törlés", view: "Megnézem", error: { fileSize: "A fájl mérete meghaladja a {{size}} MB maximális limitet", fileType: "A fájl típusa nem megengedett", fileAmount: "A fájlok száma meghaladja maximális limitet: {{count}}", perFileSize: "A fájl mérete meghaladja a {{size}} MB maximális limitet" }, removeDialog: { title: "Fájl törlése", message: "Biztosan törölni akarja a {{fileName}} fájlt?", confirm: "Törlés", cancel: "Mégse" } }, S = { pageSize: "{{count}} elem / oldal", first: "Első", previous: "Előző", next: "Következő", last: "Utolsó", pageInfo: "{{rangeStart}}-{{rangeEnd}} a {{totalRows}} elemből" }, A = { sortAscending: "Növekvő", sortDescending: "Csökkenő", clearSort: "Nincs rendezés", tableDescription: "Adattábla rendezhető oszlopokkal", defaultCaption: "Adattábla", rowSelected: "Sor kiválasztva", rowDeselected: "Sor kiválasztás törölve", sortedBy: "Rendezve {{column}} oszlop szerint {{direction}}", pageChanged: "{{page}}. oldal a {{total}} oldalból", noData: "Nincs elérhető adat", resizeColumn: "Oszlopszélesség módosítása" }, F = { expand: "Szakasz kibontása", collapse: "Szakasz összecsukása" }, B = { hour: "Óra", minute: "Perc", second: "Másodperc" }, T = { remove: "Eltávolítás", removable: "eltávolítható, nyomja meg a törlés billentyűt az eltávolításhoz" }, D = { multiselect: { selected: "{{count}} elem kiválasztva" } }, I = { notifications: "Értesítések" }, K = { loading: "Betöltés", progress: "Folyamat: {{percentage}}%" }, N = {
+const e = "./_schema.json", t = { neutral: "Információ", informative: "Információ", positive: "Sikeres", warning: "Figyelmeztetés", negative: "Hiba" }, a = "Bezár", l = "(új ablakban nyílik meg)", s = "címke", o = "Mégse", n = "Kiválasztás törlése", i = "Másolás", r = "Megerősít", c = "Ok", m = "Keresés", d = { optional: "(Nem kötelező)", tooltip: "Információ" }, g = { maxLength: "Túllépte {{count}} karakterrel a maximális hosszúságot" }, z = { info: "Tájékoztató", success: "Sikeres", error: "Hiba" }, k = { selected: "kiválasztva", disabled: "nem elérhető" }, p = "Betöltés", v = "mutat", b = "elrejt", f = "Csökkentés", h = "Növelés", u = "Tartalom", j = "{{val, datetime}}", y = "kiválasztva", M = { today: "mai nap", now: "most", nextMonth: "következő hónap", prevMonth: "előző hónap", year: "év", month: "hónap" }, w = { validationMessage: { select: "Kérem válasszon egy lehetőséget", datepicker: "Kérem válasszon egy dátumot" } }, x = { files: "Fájlok", dragDropArea: "Húzza ide a fájlokat vagy kattintson a feltöltésre", dragDropInstructions: "A fájlokat a területre húzva is feltöltheti.", uploadButtonLabel: "Feltöltés", browseButtonLabel: "Fájlok tallózása", browse: "Fájlok tallózása", fileList: "Fájl lista", upload: "Feltöltés", fileSize: "{{size}} MB", uploading: "Feltöltés folyamatban", dropzone: { label: "Fájlok feltöltése", text: "Húzza ide a fájlokat vagy kattintson a feltöltésre", acceptedTypes: "Megengedett fájl típusok" }, link: "Link", cancel: "Mégse", delete: "Törlés", view: "Megnézem", error: { fileSize: "A fájl mérete meghaladja a {{size}} MB maximális limitet", fileType: "A fájl típusa nem megengedett", fileAmount: "A fájlok száma meghaladja maximális limitet: {{count}}", perFileSize: "A fájl mérete meghaladja a {{size}} MB maximális limitet" }, removeDialog: { title: "Fájl törlése", message: "Biztosan törölni akarja a {{fileName}} fájlt?", confirm: "Törlés", cancel: "Mégse" } }, S = { pageSize: "{{count}} elem / oldal", first: "Első", previous: "Előző", next: "Következő", last: "Utolsó", pageInfo: "{{rangeStart}}-{{rangeEnd}} a {{totalRows}} elemből" }, A = { sortAscending: "Növekvő", sortDescending: "Csökkenő", clearSort: "Nincs rendezés", tableDescription: "Adattábla rendezhető oszlopokkal", defaultCaption: "Adattábla", rowSelected: "Sor kiválasztva", rowDeselected: "Sor kiválasztás törölve", sortedBy: "Rendezve {{column}} oszlop szerint {{direction}}", pageChanged: "{{page}}. oldal a {{total}} oldalból", noData: "Nincs elérhető adat", resizeColumn: "Oszlopszélesség módosítása" }, F = { expand: "Szakasz kibontása", collapse: "Szakasz összecsukása" }, B = { hour: "Óra", minute: "Perc", second: "Másodperc" }, T = { remove: "Eltávolítás", removable: "eltávolítható, nyomja meg a törlés billentyűt az eltávolításhoz" }, D = { activeOption: "{{option}}, {{count}} találatból {{position}}.", multiselect: { selected: "{{count}} elem kiválasztva" } }, I = { notifications: "Értesítések" }, K = { loading: "Betöltés", progress: "Folyamat: {{percentage}}%" }, N = {
   $schema: e,
   bannerType: t,
   close: a,

package/dist/localization/localization.d.ts

@@ -1,5 +1,4 @@
 import { default as i18next, t } from 'i18next';
-import { translate } from 'lit-i18n';
 export declare function update(): void;
 /**
  * Detects whether a locale prefers 12-hour or 24-hour time format.
@@ -20,4 +19,4 @@ export declare function getTimeFormatPreference(locale: string): '12h' | '24h';
  * ```
  */
 export declare function registerDayjsLocale(localeCode: string): void;
-export { i18next, t, translate };
+export { i18next, t };

package/dist/localization/localization.js

@@ -1,98 +1,100 @@
-var j = Object.defineProperty;
-var d = Object.getOwnPropertySymbols;
-var b = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
-var f = (a, e, t) => e in a ? j(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t, n = (a, e) => {
+var b = Object.defineProperty, j = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var F = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var g = (s, e, t) => e in s ? b(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, i = (s, e) => {
   for (var t in e || (e = {}))
-    b.call(e, t) && f(a, t, e[t]);
-  if (d)
-    for (var t of d(e))
-      w.call(e, t) && f(a, t, e[t]);
-  return a;
-};
-var g = (a, e, t) => new Promise((o, s) => {
-  var y = (i) => {
+    F.call(e, t) && g(s, t, e[t]);
+  if (f)
+    for (var t of f(e))
+      k.call(e, t) && g(s, t, e[t]);
+  return s;
+}, p = (s, e) => j(s, x(e));
+var W = (s, e, t) => new Promise((o, a) => {
+  var D = (n) => {
     try {
-      l(t.next(i));
-    } catch (c) {
-      s(c);
+      h(t.next(n));
+    } catch (u) {
+      a(u);
     }
-  }, D = (i) => {
+  }, w = (n) => {
     try {
-      l(t.throw(i));
-    } catch (c) {
-      s(c);
+      h(t.throw(n));
+    } catch (u) {
+      a(u);
     }
-  }, l = (i) => i.done ? o(i.value) : Promise.resolve(i.value).then(y, D);
-  l((t = t.apply(a, e)).next());
+  }, h = (n) => n.done ? o(n.value) : Promise.resolve(n.value).then(D, w);
+  h((t = t.apply(s, e)).next());
 });
 import "../_virtual/hu.js";
 import "../_virtual/en.js";
 import "../_virtual/de.js";
 import r from "../_virtual/dayjs.min.js";
-import x from "../_virtual/customParseFormat.js";
-import F from "../_virtual/localeData.js";
-import k from "../_virtual/localizedFormat.js";
-import v from "../_virtual/weekday.js";
-import u from "../node_modules/i18next/dist/esm/i18next.js";
-import { t as tt } from "../node_modules/i18next/dist/esm/i18next.js";
-import T from "../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { initLitI18n as E } from "../node_modules/lit-i18n/src/lit-i18n.js";
-import { translate as at } from "../node_modules/lit-i18n/src/lit-i18n.js";
-import z from "./locales/de.json.js";
-import A from "./locales/en.json.js";
+import v from "../_virtual/customParseFormat.js";
+import E from "../_virtual/localeData.js";
+import T from "../_virtual/localizedFormat.js";
+import z from "../_virtual/weekday.js";
+import l from "../node_modules/i18next/dist/esm/i18next.js";
+import { t as et } from "../node_modules/i18next/dist/esm/i18next.js";
+import A from "../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import C from "./locales/de.json.js";
+import O from "./locales/en.json.js";
 import $ from "./locales/hu.json.js";
-r.extend(F);
+r.extend(E);
+r.extend(z);
+r.extend(T);
 r.extend(v);
-r.extend(k);
-r.extend(x);
-const m = "hu", p = () => {
-  let a = document.documentElement.lang || navigator.language || m;
-  return a = a.slice(0, 2), a;
-}, h = /* @__PURE__ */ new Set(["hu", "en", "de"]);
-function W(a) {
-  return g(this, null, function* () {
-    const e = a.slice(0, 2);
-    e && (h.has(e) || console.warn(
-      `[DAP Design System] Day.js locale "${e}" is not registered. Date/month/day names will not be localized for this language. Falling back to "${m}" locale for Day.js. To fix this, manually import and register the locale:
+const c = "hu", m = typeof window != "undefined" && typeof document != "undefined", L = () => {
+  if (!m)
+    return c;
+  let s = document.documentElement.lang || navigator.language || c;
+  return s = s.slice(0, 2), s;
+}, d = /* @__PURE__ */ new Set(["hu", "en", "de"]);
+function y(s) {
+  return W(this, null, function* () {
+    const e = s.slice(0, 2);
+    e && (d.has(e) || console.warn(
+      `[DAP Design System] Day.js locale "${e}" is not registered. Date/month/day names will not be localized for this language. Falling back to "${c}" locale for Day.js. To fix this, manually import and register the locale:
   import 'dayjs/locale/${e}'
   import { registerDayjsLocale } from 'dap-design-system'
   registerDayjsLocale('${e}')`
-    ), h.has(e) ? r.locale(e) : r.locale(m));
+    ), d.has(e) ? r.locale(e) : r.locale(c));
   });
 }
-u.use(T).use(E).init({
-  fallbackLng: "hu",
+const H = m ? l.use(A) : l;
+H.init(p(i({
+  fallbackLng: "hu"
+}, m ? {} : { lng: "hu" }), {
   interpolation: {
     escapeValue: !1
   },
   resources: {
     de: {
-      translation: n({}, z)
+      translation: i({}, C)
     },
     en: {
-      translation: n({}, A)
+      translation: i({}, O)
     },
     hu: {
-      translation: n({}, $)
+      translation: i({}, $)
     }
   }
-});
-const L = p();
-W(L);
-u.changeLanguage(L);
-const C = new MutationObserver(H);
-C.observe(document.documentElement, {
-  attributes: !0,
-  attributeFilter: ["dir", "lang"]
-});
-function H() {
-  const a = p();
-  W(a), u.changeLanguage(a);
+}));
+if (m) {
+  const s = L();
+  y(s), l.changeLanguage(s), new MutationObserver(P).observe(document.documentElement, {
+    attributes: !0,
+    attributeFilter: ["dir", "lang"]
+  });
+}
+function P() {
+  const s = L();
+  y(s), l.changeLanguage(s);
 }
-function R(a) {
+function X(s) {
   try {
     const e = r.locale();
-    r.locale(a);
+    r.locale(s);
     const o = r.localeData().longDateFormat("LT");
     if (r.locale(e), o && o !== "LT") {
       if (o.includes("A") || o.includes("a"))
@@ -102,23 +104,22 @@ function R(a) {
       if (o.includes("h:mm"))
         return "12h";
     }
-    const s = a.toLowerCase();
-    return s.startsWith("en") || s.startsWith("us") || s.startsWith("ca") || s.startsWith("au") || s.startsWith("nz") || s.startsWith("ph") || s.startsWith("in") || s.startsWith("pk") || s.startsWith("bd") || s.startsWith("lk") || s.startsWith("np") || s.startsWith("mm") || s.startsWith("my") || s.startsWith("sg") ? "12h" : "24h";
+    const a = s.toLowerCase();
+    return a.startsWith("en") || a.startsWith("us") || a.startsWith("ca") || a.startsWith("au") || a.startsWith("nz") || a.startsWith("ph") || a.startsWith("in") || a.startsWith("pk") || a.startsWith("bd") || a.startsWith("lk") || a.startsWith("np") || a.startsWith("mm") || a.startsWith("my") || a.startsWith("sg") ? "12h" : "24h";
   } catch (e) {
-    const t = a.toLowerCase();
+    const t = s.toLowerCase();
     return t.startsWith("en") || t.startsWith("us") || t.startsWith("ca") || t.startsWith("au") || t.startsWith("nz") || t.startsWith("ph") || t.startsWith("in") || t.startsWith("pk") || t.startsWith("bd") || t.startsWith("lk") || t.startsWith("np") || t.startsWith("mm") || t.startsWith("my") || t.startsWith("sg") ? "12h" : "24h";
   }
 }
-function X(a) {
-  const e = a.slice(0, 2);
-  e && (h.add(e), r.locale(e));
+function Y(s) {
+  const e = s.slice(0, 2);
+  e && (d.add(e), r.locale(e));
 }
 export {
-  R as getTimeFormatPreference,
-  u as i18next,
-  X as registerDayjsLocale,
-  tt as t,
-  at as translate,
-  H as update
+  X as getTimeFormatPreference,
+  l as i18next,
+  Y as registerDayjsLocale,
+  et as t,
+  P as update
 };
 //# sourceMappingURL=localization.js.map