dap-design-system 0.62.4 → 0.63.0

package/dist/components/button-group/button-group-text.component.d.ts

@@ -0,0 +1,33 @@
+import { DdsElement } from '../../internal/dds-hu-element';
+/**
+ * `dap-ds-button-group-text` shows static text (a label, a unit, an icon) inside a `dap-ds-button-group`.
+ * It joins the group's connected styling like a button does.
+ * @element dap-ds-button-group-text
+ * @summary Non-interactive text displayed inside a button group.
+ * @title - Button Group Text
+ * @group button-group
+ *
+ * @example
+ * ```html
+ * <dap-ds-button-group aria-label="Page size">
+ *   <dap-ds-button-group-text>Per page</dap-ds-button-group-text>
+ *   <dap-ds-button variant="outline">10</dap-ds-button>
+ *   <dap-ds-button variant="outline">50</dap-ds-button>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @slot - The text content. Can also hold an icon or a `<label>` for a grouped input.
+ *
+ * @csspart base - The text container.
+ *
+ * @cssproperty --dds-button-group-text-background - Background color (default: var(--dds-background-neutral-subtle))
+ * @cssproperty --dds-button-group-text-border-color - Border color (default: var(--dds-border-neutral-subtle))
+ * @cssproperty --dds-button-group-text-color - Text color (default: var(--dds-text-neutral-strong))
+ * @cssproperty --dds-button-group-text-padding-x - Horizontal padding (default: var(--dds-spacing-300))
+ * @cssproperty --dds-button-group-text-border-radius - Corner radius outside a group (default: var(--dds-radius-rounded))
+ */
+export default class DapDSButtonGroupText extends DdsElement {
+    static tagName: string;
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/button-group/button-group-text.component.js

@@ -0,0 +1,17 @@
+import { unsafeCSS as e } from "lit";
+import { html as r } from "lit/static-html.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import i from "./_styles/button-group-text.scss.js";
+const t = class t extends m {
+  render() {
+    return r`<div part="base" class="button-group-text">
+      <slot></slot>
+    </div>`;
+  }
+};
+t.tagName = "dap-ds-button-group-text", t.styles = e(i);
+let s = t;
+export {
+  s as default
+};
+//# sourceMappingURL=button-group-text.component.js.map

package/dist/components/button-group/button-group-text.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-text.component.js","sources":["../../../src/components/button-group/button-group-text.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/button-group-text.scss?inline'\n\n/**\n * `dap-ds-button-group-text` shows static text (a label, a unit, an icon) inside a `dap-ds-button-group`.\n * It joins the group's connected styling like a button does.\n * @element dap-ds-button-group-text\n * @summary Non-interactive text displayed inside a button group.\n * @title - Button Group Text\n * @group button-group\n *\n * @example\n * ```html\n * <dap-ds-button-group aria-label=\"Page size\">\n *   <dap-ds-button-group-text>Per page</dap-ds-button-group-text>\n *   <dap-ds-button variant=\"outline\">10</dap-ds-button>\n *   <dap-ds-button variant=\"outline\">50</dap-ds-button>\n * </dap-ds-button-group>\n * ```\n *\n * @slot - The text content. Can also hold an icon or a `<label>` for a grouped input.\n *\n * @csspart base - The text container.\n *\n * @cssproperty --dds-button-group-text-background - Background color (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-button-group-text-border-color - Border color (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-button-group-text-color - Text color (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-button-group-text-padding-x - Horizontal padding (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-group-text-border-radius - Corner radius outside a group (default: var(--dds-radius-rounded))\n */\nexport default class DapDSButtonGroupText extends DdsElement {\n  static tagName = 'dap-ds-button-group-text'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`<div part=\"base\" class=\"button-group-text\">\n      <slot></slot>\n    </div>`\n  }\n}\n"],"names":["_DapDSButtonGroupText","DdsElement","html","unsafeCSS","styles","DapDSButtonGroupText"],"mappings":";;;;AAiCA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAK3D,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,EAAA;AAIX;AATEF,EAAO,UAAU,4BAEDA,EAAA,SAASG,EAAUC,CAAM;AAH3C,IAAqBC,IAArBL;"}

package/dist/components/button-group/button-group-text.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSButtonGroupText } from './button-group-text.component';
+export * from './button-group-text.component';
+export default DapDSButtonGroupText;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-button-group-text': DapDSButtonGroupText;
+    }
+}

package/dist/components/button-group/button-group-text.js

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

package/dist/components/button-group/button-group-text.js.map

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

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

@@ -0,0 +1,52 @@
+import { DdsElement } from '../../internal/dds-hu-element';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+/**
+ * `dap-ds-button-group` visually joins related buttons into a single control.
+ * Inner corners are squared off and adjacent borders collapse into one.
+ * @element dap-ds-button-group
+ * @summary A container that groups related buttons with consistent, connected styling.
+ * @title - Button Group
+ *
+ * @example Basic Usage
+ * ```html
+ * <dap-ds-button-group aria-label="Text alignment">
+ *   <dap-ds-button variant="outline">Left</dap-ds-button>
+ *   <dap-ds-button variant="outline">Center</dap-ds-button>
+ *   <dap-ds-button variant="outline">Right</dap-ds-button>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @example Separator
+ * ```html
+ * <dap-ds-button-group aria-label="Clipboard">
+ *   <dap-ds-button>Copy</dap-ds-button>
+ *   <dap-ds-button-group-separator></dap-ds-button-group-separator>
+ *   <dap-ds-button>Paste</dap-ds-button>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @example Nested groups
+ * ```html
+ * <dap-ds-button-group aria-label="Editor toolbar">
+ *   <dap-ds-button-group>...</dap-ds-button-group>
+ *   <dap-ds-button-group>...</dap-ds-button-group>
+ * </dap-ds-button-group>
+ * ```
+ *
+ * @slot - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.
+ *
+ * @cssproperty --dds-button-group-gap - Spacing between nested button groups (default: var(--dds-spacing-200))
+ * @cssproperty --dds-button-group-overlap - How much adjacent items overlap so their borders collapse into one (default: var(--dds-border-width-large))
+ * @cssproperty --dds-button-group-start-start-radius - Set on grouped items to square off their start-start corner. Read by `dap-ds-button`, `dap-ds-icon-button` and `dap-ds-button-group-text`.
+ * @cssproperty --dds-button-group-start-end-radius - Set on grouped items to square off their start-end corner.
+ * @cssproperty --dds-button-group-end-start-radius - Set on grouped items to square off their end-start corner.
+ * @cssproperty --dds-button-group-end-end-radius - Set on grouped items to square off their end-end corner.
+ */
+export default class DapDSButtonGroup extends DdsElement {
+    static tagName: string;
+    /** The layout direction of the group */
+    orientation: ButtonGroupOrientation;
+    static readonly styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult;
+}

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

@@ -0,0 +1,30 @@
+import { unsafeCSS as n } from "lit";
+import { property as f } from "lit/decorators.js";
+import { html as m } from "lit/static-html.js";
+import { DdsElement as c } from "../../internal/dds-hu-element.js";
+import d from "./_styles/button-group.scss.js";
+var p = Object.defineProperty, h = (o, i, l, u) => {
+  for (var t = void 0, r = o.length - 1, a; r >= 0; r--)
+    (a = o[r]) && (t = a(i, l, t) || t);
+  return t && p(i, l, t), t;
+};
+const e = class e extends c {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group");
+  }
+  render() {
+    return m`<slot></slot>`;
+  }
+};
+e.tagName = "dap-ds-button-group", e.styles = n(d);
+let s = e;
+h([
+  f({ reflect: !0 })
+], s.prototype, "orientation");
+export {
+  s as default
+};
+//# sourceMappingURL=button-group.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.component.js","sources":["../../../src/components/button-group/button-group.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/button-group.scss?inline'\n\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical'\n\n/**\n * `dap-ds-button-group` visually joins related buttons into a single control.\n * Inner corners are squared off and adjacent borders collapse into one.\n * @element dap-ds-button-group\n * @summary A container that groups related buttons with consistent, connected styling.\n * @title - Button Group\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-button-group aria-label=\"Text alignment\">\n *   <dap-ds-button variant=\"outline\">Left</dap-ds-button>\n *   <dap-ds-button variant=\"outline\">Center</dap-ds-button>\n *   <dap-ds-button variant=\"outline\">Right</dap-ds-button>\n * </dap-ds-button-group>\n * ```\n *\n * @example Separator\n * ```html\n * <dap-ds-button-group aria-label=\"Clipboard\">\n *   <dap-ds-button>Copy</dap-ds-button>\n *   <dap-ds-button-group-separator></dap-ds-button-group-separator>\n *   <dap-ds-button>Paste</dap-ds-button>\n * </dap-ds-button-group>\n * ```\n *\n * @example Nested groups\n * ```html\n * <dap-ds-button-group aria-label=\"Editor toolbar\">\n *   <dap-ds-button-group>...</dap-ds-button-group>\n *   <dap-ds-button-group>...</dap-ds-button-group>\n * </dap-ds-button-group>\n * ```\n *\n * @slot - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.\n *\n * @cssproperty --dds-button-group-gap - Spacing between nested button groups (default: var(--dds-spacing-200))\n * @cssproperty --dds-button-group-overlap - How much adjacent items overlap so their borders collapse into one (default: var(--dds-border-width-large))\n * @cssproperty --dds-button-group-start-start-radius - Set on grouped items to square off their start-start corner. Read by `dap-ds-button`, `dap-ds-icon-button` and `dap-ds-button-group-text`.\n * @cssproperty --dds-button-group-start-end-radius - Set on grouped items to square off their start-end corner.\n * @cssproperty --dds-button-group-end-start-radius - Set on grouped items to square off their end-start corner.\n * @cssproperty --dds-button-group-end-end-radius - Set on grouped items to square off their end-end corner.\n */\nexport default class DapDSButtonGroup extends DdsElement {\n  static tagName = 'dap-ds-button-group'\n\n  /** The layout direction of the group */\n  @property({ reflect: true }) orientation: ButtonGroupOrientation =\n    'horizontal'\n\n  static readonly styles = unsafeCSS(styles)\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Keyboard users still Tab between the items; the group role only names\n    // the set. Label it with aria-label or aria-labelledby on the host.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group')\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n"],"names":["_DapDSButtonGroup","DdsElement","html","unsafeCSS","styles","DapDSButtonGroup","__decorateClass","property"],"mappings":";;;;;;;;;;AAmDA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GAKI,KAAA,cAAA;AAAA,EAAA;AAAA,EAIF,oBAAoB;AAClB,UAAM,kBAAkB,GAGnB,KAAK,aAAa,MAAM,KACtB,KAAA,aAAa,QAAQ,OAAO;AAAA,EACnC;AAAA,EAGF,SAAS;AACA,WAAAC;AAAA,EAAA;AAEX;AApBEF,EAAO,UAAU,uBAMDA,EAAA,SAASG,EAAUC,CAAM;AAP3C,IAAqBC,IAArBL;AAI+BM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAJRF,EAIU,WAAA,aAAA;"}

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

@@ -0,0 +1,8 @@
+import { default as DapDSButtonGroup } from './button-group.component';
+export * from './button-group.component';
+export default DapDSButtonGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-button-group': DapDSButtonGroup;
+    }
+}

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

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

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

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

package/dist/components/calendar/calendar-cell.component.js

@@ -1,22 +1,19 @@
 import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
 import h from "../../_virtual/dayjs.min.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as y } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as p } from "../../node_modules/lit-html/static.js";
-import { DdsElement as b } from "../../internal/dds-hu-element.js";
-import { FocusableMixin as m } from "../../internal/mixin/focusableMixin.js";
+import { unsafeCSS as y, nothing as b } from "lit";
+import { property as a } from "lit/decorators.js";
+import { html as p } from "lit/static-html.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import { FocusableMixin as g } from "../../internal/mixin/focusableMixin.js";
 import "../../localization/localization.js";
-import g from "./calendar-cell.scss.js";
+import L from "./calendar-cell.scss.js";
 import { t as f } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as L } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, s = (c, e, o, i) => {
-  for (var l = void 0, d = c.length - 1, n; d >= 0; d--)
-    (n = c[d]) && (l = n(e, o, l) || l);
-  return l && v(e, o, l), l;
+var v = Object.defineProperty, l = (c, e, o, i) => {
+  for (var s = void 0, d = c.length - 1, n; d >= 0; d--)
+    (n = c[d]) && (s = n(e, o, s) || s);
+  return s && v(e, o, s), s;
 };
-const r = class r extends m(b) {
+const r = class r extends g(m) {
   constructor() {
     super(...arguments), this.selected = !1, this.disabledDay = !1, this.today = !1, this.outOfRange = !1, this.header = !1, this.focused = !1, this.rangestart = !1, this.rangeend = !1, this.inrange = !1, this.locale = h.locale(), this._cachedLabel = "", this._lastLabelUpdate = 0, this._lastLocale = "";
   }
@@ -24,8 +21,8 @@ const r = class r extends m(b) {
     if (this.value) {
       const e = Date.now();
       if (this._cachedLabel === "" || this._lastLabelUpdate === 0 || this._lastLocale !== this.locale || e - this._lastLabelUpdate > 100) {
-        const o = h(this.value).locale(this.locale).format("LL, dddd"), i = this.today ? f("calendar.today", { lng: this.locale }) : "", l = this.selected ? f("selected", { lng: this.locale }) : "";
-        this._cachedLabel = `${o} ${i} ${l}`.trim(), this._lastLabelUpdate = e, this._lastLocale = this.locale;
+        const o = h(this.value).locale(this.locale).format("LL, dddd"), i = this.today ? f("calendar.today", { lng: this.locale }) : "", s = this.selected ? f("selected", { lng: this.locale }) : "";
+        this._cachedLabel = `${o} ${i} ${s}`.trim(), this._lastLabelUpdate = e, this._lastLocale = this.locale;
       }
       return this._cachedLabel;
     }
@@ -62,44 +59,44 @@ const r = class r extends m(b) {
         <slot></slot>
         ${this.today ? p`<span
               part="today-mark"
-              class="calendar-cell__today-mark"></span>` : y}
+              class="calendar-cell__today-mark"></span>` : b}
       </div>
     `;
   }
 };
-r.tagName = "dap-ds-calendar-cell", r.styles = L(g);
+r.tagName = "dap-ds-calendar-cell", r.styles = y(L);
 let t = r;
-s([
+l([
   a({ attribute: !1 })
 ], t.prototype, "value");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "selected");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "disabledDay");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "today");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "outOfRange");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "header");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "focused");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "rangestart");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "rangeend");
-s([
+l([
   a({ type: Boolean })
 ], t.prototype, "inrange");
-s([
+l([
   a({ reflect: !0 })
 ], t.prototype, "locale");
 export {

package/dist/components/calendar/calendar-cell.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-cell.component.js","sources":["../../../src/components/calendar/calendar-cell.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { FocusableMixin } from '@/internal/mixin/focusableMixin'\nimport { t } from '@/localization/localization'\n\nimport styles from './calendar-cell.scss?inline'\n\n/**\n * `dap-ds-calendar-cell`\n * @summary Calendar cell represents a single cell in the calendar.\n * @element dap-ds-calendar-cell\n * @title - Calendar cell\n * @group calendar\n *\n * @slot - The content of the calendar cell.\n *\n * @csspart base - The main calendar cell container.\n * @csspart today-mark - The today mark of the calendar cell.\n *\n * @cssproperty --dds-calendar-cell-display - The display property of the calendar cell host (default: flex)\n * @cssproperty --dds-calendar-cell-position - The position property of the calendar cell host (default: relative)\n * @cssproperty --dds-calendar-cell-border-radius - The border radius of the calendar cell (default: var(--dds-radius-rounded))\n * @cssproperty --dds-calendar-cell-min-width - The minimum width of the calendar cell (default: var(--dds-spacing-1000))\n * @cssproperty --dds-calendar-cell-height - The height of the calendar cell (default: var(--dds-spacing-1000))\n * @cssproperty --dds-calendar-cell-min-height - The minimum height of the calendar cell (default: var(--dds-spacing-1000))\n * @cssproperty --dds-calendar-cell-color - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-calendar-cell-font-size - The font size of the calendar cell (default: var(--dds-font-sm))\n * @cssproperty --dds-calendar-cell-font-weight - The font weight of the calendar cell (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-calendar-cell-text-align - The text alignment of the calendar cell (default: center)\n * @cssproperty --dds-calendar-cell-cursor - The cursor style of the calendar cell (default: pointer)\n * @cssproperty --dds-calendar-cell-background-hover - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-calendar-cell-background-active - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong))\n *\n * @cssproperty --dds-calendar-cell-selected-background - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-calendar-cell-selected-color - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-calendar-cell-selected-background-hover - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover))\n * @cssproperty --dds-calendar-cell-selected-background-pressed - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed))\n * @cssproperty --dds-calendar-cell-selected-today-mark-background - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted))\n *\n * @cssproperty --dds-calendar-cell-disabled-color - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-calendar-cell-disabled-cursor - The cursor style of the disabled calendar cell (default: not-allowed)\n *\n * @cssproperty --dds-calendar-cell-out-of-range-color - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder))\n *\n * @cssproperty --dds-calendar-cell-today-font-weight - The font weight of the today calendar cell (default: var(--dds-font-weight-bold))\n *\n * @cssproperty --dds-calendar-cell-header-background - The background color of the header calendar cell (default: transparent)\n * @cssproperty --dds-calendar-cell-header-color - The text color of the header calendar cell (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-calendar-cell-header-text-transform - The text transform of the header calendar cell (default: capitalize)\n * @cssproperty --dds-calendar-cell-header-cursor - The cursor style of the header calendar cell (default: default)\n *\n * @cssproperty --dds-calendar-cell-in-range-color - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-calendar-cell-in-range-background-hover - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover))\n * @cssproperty --dds-calendar-cell-in-range-background-pressed - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed))\n *\n * @cssproperty --dds-calendar-cell-range-background - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-calendar-cell-range-color - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-calendar-cell-range-today-mark-background - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted))\n *\n * @cssproperty --dds-calendar-cell-today-mark-bottom - The bottom position of the today mark (default: var(--dds-spacing-100))\n * @cssproperty --dds-calendar-cell-today-mark-width - The width of the today mark (default: 5px)\n * @cssproperty --dds-calendar-cell-today-mark-height - The height of the today mark (default: 5px)\n * @cssproperty --dds-calendar-cell-today-mark-stroke - The stroke color of the today mark (default: var(--dds-border-neutral-transparent))\n * @cssproperty --dds-calendar-cell-today-mark-background - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted))\n * @cssproperty --dds-calendar-cell-today-mark-fill - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted))\n *\n */\nexport default class DapDSCalendarCell extends FocusableMixin(DdsElement) {\n  static tagName = 'dap-ds-calendar-cell'\n\n  /** The value of the calendar cell. */\n  @property({ attribute: false }) value: Dayjs\n  /** Whether the calendar cell is selected. */\n  @property({ type: Boolean }) selected: boolean = false\n  /** Whether the calendar cell is disabled. */\n  @property({ type: Boolean }) disabledDay: boolean = false\n  /** Whether the calendar cell is today. */\n  @property({ type: Boolean }) today: boolean = false\n  /** Whether the calendar cell is out of range. */\n  @property({ type: Boolean }) outOfRange: boolean = false\n  /** Whether the calendar cell is a date header. */\n  @property({ type: Boolean }) header: boolean = false\n  /** Whether the calendar cell is focused. */\n  @property({ type: Boolean }) focused: boolean = false\n  /** Whether the calendar cell is the start of a range. */\n  @property({ type: Boolean }) rangestart: boolean = false\n  /** Whether the calendar cell is the end of a range. */\n  @property({ type: Boolean }) rangeend: boolean = false\n  /** Whether the calendar cell is in the middle of a range. */\n  @property({ type: Boolean }) inrange: boolean = false\n\n  /** The locale of the calendar cell.\n   * @type {'hu' | 'en' | 'de'}\n   * @default dayjs.locale()\n   */\n  @property({ reflect: true }) locale: string = dayjs.locale()\n\n  private _cachedLabel: string = ''\n  private _lastLabelUpdate: number = 0\n  private _lastLocale: string = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  get label(): string {\n    if (this.value) {\n      const currentTime = Date.now()\n\n      // Only recalculate if state changed, locale changed, or more than 100ms passed (debounce rapid updates)\n      if (\n        this._cachedLabel === '' ||\n        this._lastLabelUpdate === 0 ||\n        this._lastLocale !== this.locale ||\n        currentTime - this._lastLabelUpdate > 100\n      ) {\n        // Cache expensive dayjs formatting\n        const dateLabel = dayjs(this.value)\n          .locale(this.locale)\n          .format('LL, dddd')\n        const todayLabel = this.today\n          ? t('calendar.today', { lng: this.locale })\n          : ''\n        const selectedLabel = this.selected\n          ? t('selected', { lng: this.locale })\n          : ''\n        this._cachedLabel = `${dateLabel} ${todayLabel} ${selectedLabel}`.trim()\n        this._lastLabelUpdate = currentTime\n        this._lastLocale = this.locale\n      }\n\n      return this._cachedLabel\n    }\n\n    return ''\n  }\n\n  public get focusElement(): HTMLElement {\n    return this\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    // Remove aria-selected if it exists (not valid for button role)\n    // The calendar component sets aria-pressed instead for button role\n    if (this.role === 'button' && this.hasAttribute('aria-selected')) {\n      this.removeAttribute('aria-selected')\n    }\n\n    this.setAttribute('aria-label', this.label)\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('disabledDay')) {\n      this.setAttribute('aria-disabled', this.disabledDay ? 'true' : 'false')\n    }\n\n    if (\n      _changedProperties.has('selected') ||\n      _changedProperties.has('locale') ||\n      _changedProperties.has('value') ||\n      _changedProperties.has('today')\n    ) {\n      if (this.role === 'button' && this.hasAttribute('aria-selected')) {\n        this.removeAttribute('aria-selected')\n      }\n      // Invalidate cache when locale changes\n      if (_changedProperties.has('locale')) {\n        this._cachedLabel = ''\n        this._lastLabelUpdate = 0\n      }\n      this.setAttribute('aria-label', this.label)\n    }\n  }\n\n  getDayName(dateStr: string, locale: string) {\n    const date = new Date(dateStr)\n    return date.toLocaleDateString(locale, { weekday: 'long' })\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'calendar-cell',\n          { 'calendar-cell--selected': this.selected },\n          { 'calendar-cell--disabled': this.disabledDay },\n          { 'calendar-cell--today': this.today },\n          { 'calendar-cell--out-of-range': this.outOfRange },\n          { 'calendar-cell--header': this.header },\n          { 'calendar-cell--focused': this.focused },\n          { 'calendar-cell--range-start': this.rangestart },\n          { 'calendar-cell--range-end': this.rangeend },\n          { 'calendar-cell--in-range': this.inrange },\n        )}>\n        <slot></slot>\n        ${this.today\n          ? html`<span\n              part=\"today-mark\"\n              class=\"calendar-cell__today-mark\"></span>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCalendarCell","FocusableMixin","DdsElement","dayjs","currentTime","dateLabel","todayLabel","t","selectedLabel","_changedProperties","dateStr","locale","html","clsx","nothing","unsafeCSS","styles","DapDSCalendarCell","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"calendar-cell.component.js","sources":["../../../src/components/calendar/calendar-cell.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { FocusableMixin } from '@/internal/mixin/focusableMixin'\nimport { t } from '@/localization/localization'\n\nimport styles from './calendar-cell.scss?inline'\n\n/**\n * `dap-ds-calendar-cell`\n * @summary Calendar cell represents a single cell in the calendar.\n * @element dap-ds-calendar-cell\n * @title - Calendar cell\n * @group calendar\n *\n * @slot - The content of the calendar cell.\n *\n * @csspart base - The main calendar cell container.\n * @csspart today-mark - The today mark of the calendar cell.\n *\n * @cssproperty --dds-calendar-cell-display - The display property of the calendar cell host (default: flex)\n * @cssproperty --dds-calendar-cell-position - The position property of the calendar cell host (default: relative)\n * @cssproperty --dds-calendar-cell-border-radius - The border radius of the calendar cell (default: var(--dds-radius-rounded))\n * @cssproperty --dds-calendar-cell-min-width - The minimum width of the calendar cell (default: var(--dds-spacing-1000))\n * @cssproperty --dds-calendar-cell-height - The height of the calendar cell (default: var(--dds-spacing-1000))\n * @cssproperty --dds-calendar-cell-min-height - The minimum height of the calendar cell (default: var(--dds-spacing-1000))\n * @cssproperty --dds-calendar-cell-color - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-calendar-cell-font-size - The font size of the calendar cell (default: var(--dds-font-sm))\n * @cssproperty --dds-calendar-cell-font-weight - The font weight of the calendar cell (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-calendar-cell-text-align - The text alignment of the calendar cell (default: center)\n * @cssproperty --dds-calendar-cell-cursor - The cursor style of the calendar cell (default: pointer)\n * @cssproperty --dds-calendar-cell-background-hover - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-calendar-cell-background-active - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong))\n *\n * @cssproperty --dds-calendar-cell-selected-background - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-calendar-cell-selected-color - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-calendar-cell-selected-background-hover - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover))\n * @cssproperty --dds-calendar-cell-selected-background-pressed - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed))\n * @cssproperty --dds-calendar-cell-selected-today-mark-background - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted))\n *\n * @cssproperty --dds-calendar-cell-disabled-color - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-calendar-cell-disabled-cursor - The cursor style of the disabled calendar cell (default: not-allowed)\n *\n * @cssproperty --dds-calendar-cell-out-of-range-color - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder))\n *\n * @cssproperty --dds-calendar-cell-today-font-weight - The font weight of the today calendar cell (default: var(--dds-font-weight-bold))\n *\n * @cssproperty --dds-calendar-cell-header-background - The background color of the header calendar cell (default: transparent)\n * @cssproperty --dds-calendar-cell-header-color - The text color of the header calendar cell (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-calendar-cell-header-text-transform - The text transform of the header calendar cell (default: capitalize)\n * @cssproperty --dds-calendar-cell-header-cursor - The cursor style of the header calendar cell (default: default)\n *\n * @cssproperty --dds-calendar-cell-in-range-color - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-calendar-cell-in-range-background-hover - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover))\n * @cssproperty --dds-calendar-cell-in-range-background-pressed - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed))\n *\n * @cssproperty --dds-calendar-cell-range-background - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-calendar-cell-range-color - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-calendar-cell-range-today-mark-background - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted))\n *\n * @cssproperty --dds-calendar-cell-today-mark-bottom - The bottom position of the today mark (default: var(--dds-spacing-100))\n * @cssproperty --dds-calendar-cell-today-mark-width - The width of the today mark (default: 5px)\n * @cssproperty --dds-calendar-cell-today-mark-height - The height of the today mark (default: 5px)\n * @cssproperty --dds-calendar-cell-today-mark-stroke - The stroke color of the today mark (default: var(--dds-border-neutral-transparent))\n * @cssproperty --dds-calendar-cell-today-mark-background - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted))\n * @cssproperty --dds-calendar-cell-today-mark-fill - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted))\n *\n */\nexport default class DapDSCalendarCell extends FocusableMixin(DdsElement) {\n  static tagName = 'dap-ds-calendar-cell'\n\n  /** The value of the calendar cell. */\n  @property({ attribute: false }) value: Dayjs\n  /** Whether the calendar cell is selected. */\n  @property({ type: Boolean }) selected: boolean = false\n  /** Whether the calendar cell is disabled. */\n  @property({ type: Boolean }) disabledDay: boolean = false\n  /** Whether the calendar cell is today. */\n  @property({ type: Boolean }) today: boolean = false\n  /** Whether the calendar cell is out of range. */\n  @property({ type: Boolean }) outOfRange: boolean = false\n  /** Whether the calendar cell is a date header. */\n  @property({ type: Boolean }) header: boolean = false\n  /** Whether the calendar cell is focused. */\n  @property({ type: Boolean }) focused: boolean = false\n  /** Whether the calendar cell is the start of a range. */\n  @property({ type: Boolean }) rangestart: boolean = false\n  /** Whether the calendar cell is the end of a range. */\n  @property({ type: Boolean }) rangeend: boolean = false\n  /** Whether the calendar cell is in the middle of a range. */\n  @property({ type: Boolean }) inrange: boolean = false\n\n  /** The locale of the calendar cell.\n   * @type {'hu' | 'en' | 'de'}\n   * @default dayjs.locale()\n   */\n  @property({ reflect: true }) locale: string = dayjs.locale()\n\n  private _cachedLabel: string = ''\n  private _lastLabelUpdate: number = 0\n  private _lastLocale: string = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  get label(): string {\n    if (this.value) {\n      const currentTime = Date.now()\n\n      // Only recalculate if state changed, locale changed, or more than 100ms passed (debounce rapid updates)\n      if (\n        this._cachedLabel === '' ||\n        this._lastLabelUpdate === 0 ||\n        this._lastLocale !== this.locale ||\n        currentTime - this._lastLabelUpdate > 100\n      ) {\n        // Cache expensive dayjs formatting\n        const dateLabel = dayjs(this.value)\n          .locale(this.locale)\n          .format('LL, dddd')\n        const todayLabel = this.today\n          ? t('calendar.today', { lng: this.locale })\n          : ''\n        const selectedLabel = this.selected\n          ? t('selected', { lng: this.locale })\n          : ''\n        this._cachedLabel = `${dateLabel} ${todayLabel} ${selectedLabel}`.trim()\n        this._lastLabelUpdate = currentTime\n        this._lastLocale = this.locale\n      }\n\n      return this._cachedLabel\n    }\n\n    return ''\n  }\n\n  public get focusElement(): HTMLElement {\n    return this\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    // Remove aria-selected if it exists (not valid for button role)\n    // The calendar component sets aria-pressed instead for button role\n    if (this.role === 'button' && this.hasAttribute('aria-selected')) {\n      this.removeAttribute('aria-selected')\n    }\n\n    this.setAttribute('aria-label', this.label)\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('disabledDay')) {\n      this.setAttribute('aria-disabled', this.disabledDay ? 'true' : 'false')\n    }\n\n    if (\n      _changedProperties.has('selected') ||\n      _changedProperties.has('locale') ||\n      _changedProperties.has('value') ||\n      _changedProperties.has('today')\n    ) {\n      if (this.role === 'button' && this.hasAttribute('aria-selected')) {\n        this.removeAttribute('aria-selected')\n      }\n      // Invalidate cache when locale changes\n      if (_changedProperties.has('locale')) {\n        this._cachedLabel = ''\n        this._lastLabelUpdate = 0\n      }\n      this.setAttribute('aria-label', this.label)\n    }\n  }\n\n  getDayName(dateStr: string, locale: string) {\n    const date = new Date(dateStr)\n    return date.toLocaleDateString(locale, { weekday: 'long' })\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'calendar-cell',\n          { 'calendar-cell--selected': this.selected },\n          { 'calendar-cell--disabled': this.disabledDay },\n          { 'calendar-cell--today': this.today },\n          { 'calendar-cell--out-of-range': this.outOfRange },\n          { 'calendar-cell--header': this.header },\n          { 'calendar-cell--focused': this.focused },\n          { 'calendar-cell--range-start': this.rangestart },\n          { 'calendar-cell--range-end': this.rangeend },\n          { 'calendar-cell--in-range': this.inrange },\n        )}>\n        <slot></slot>\n        ${this.today\n          ? html`<span\n              part=\"today-mark\"\n              class=\"calendar-cell__today-mark\"></span>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCalendarCell","FocusableMixin","DdsElement","dayjs","currentTime","dateLabel","todayLabel","t","selectedLabel","_changedProperties","dateStr","locale","html","clsx","nothing","unsafeCSS","styles","DapDSCalendarCell","__decorateClass","property"],"mappings":"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"}

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

@@ -26,6 +26,9 @@ import { default as DapDSCalendarCell } from './calendar-cell.component';
  * @csspart calendar-header-button-next - The next month button of the calendar header.
  * @csspart calendar-header-year-select - The year select of the calendar header.
  * @csspart calendar-header-month-select - The month select of the calendar header.
+ * @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.
+ * @csspart calendar-grid-cell-base - The base of the calendar grid cell.
+ * @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.
  *
  * @cssproperty --dds-calendar-display - The display property of the calendar container (default: flex)
  * @cssproperty --dds-calendar-isolation - The isolation property of the calendar (default: isolate)
@@ -109,7 +112,13 @@ export default class DapDSCalendar extends DdsElement {
     nextButtonTestId: string;
     private _currentCell;
     private _yearOptionsLoaded;
-    private instanceLocalData;
+    /** Locale-aware month/weekday data. Derived from `this.locale` (a reactive
+     * property Lit sets from the attribute during SSR) so the weekday/month names
+     * are correct in the SERVER render. The old approach set this field only from
+     * `connectedCallback`/`attributeChangedCallback`, neither of which takes effect
+     * on the server, so SSR rendered English names that then mismatched the
+     * Hungarian client hydration render. */
+    private get instanceLocalData();
     connectedCallback(): Promise<void>;
     static readonly styles: import('lit').CSSResult;
     get startDate(): dayjs.Dayjs;

package/dist/components/calendar/calendar.component.js

@@ -17,48 +17,29 @@ var C = (f, e, a) => new Promise((s, r) => {
   }, c = (u) => u.done ? s(u.value) : Promise.resolve(u.value).then(l, n);
   c((a = a.apply(f, e)).next());
 });
-import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as D } from "../../node_modules/clsx/dist/clsx.js";
 import t from "../../_virtual/dayjs.min.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 d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as _ } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAll as O } from "../../node_modules/@lit/reactive-element/decorators/query-all.js";
-import { html as h } from "../../node_modules/lit-html/static.js";
-import { DdsElement as S } from "../../internal/dds-hu-element.js";
+import { unsafeCSS as _ } from "lit";
+import { queryAll as O, query as S, property as d, state as v } from "lit/decorators.js";
+import { html as h } from "lit/static-html.js";
+import { DdsElement as M } from "../../internal/dds-hu-element.js";
 import "../../localization/localization.js";
-import M from "../icon-button/icon-button.component.js";
+import k from "../icon-button/icon-button.component.js";
 import A from "../icons/arrows/arrows-expand-up-down-fill/arrows-expand-up-down-fill.component.js";
-import k from "../option-item/option-item.component.js";
-import I from "../select/select.component.js";
-import E from "./calendar.scss.js";
+import I from "../option-item/option-item.component.js";
+import R from "../select/select.component.js";
+import B from "./calendar.scss.js";
 import $ from "./calendar-cell.component.js";
 import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as R } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var L = Object.defineProperty, o = (f, e, a, s) => {
+var E = Object.defineProperty, o = (f, e, a, s) => {
   for (var r = void 0, l = f.length - 1, n; l >= 0; l--)
     (n = f[l]) && (r = n(e, a, r) || r);
-  return r && L(e, a, r), r;
+  return r && E(e, a, r), r;
 };
-const D = class D extends S {
+const g = class g extends M {
   constructor() {
-    super(...arguments), this.mode = "single", this.hideAdjacentMonths = !1, this.currentDate = t(), this.minDate = t().subtract(50, "year"), this.maxDate = t().add(50, "year"), this.disabledDate = (e) => !e, this.locale = t.locale(), this.prevButtonTestId = "calendar-prev-button", this.nextButtonTestId = "calendar-next-button", this._yearOptionsLoaded = !1, this.instanceLocalData = t().localeData(), this.updateLocale = (e) => {
-      e ? (this.instanceLocalData = t().locale(e).localeData(), this.locale = e, this.updateComplete.then(() => {
-        var s;
-        (s = this.monthSelect) == null || s.querySelectorAll("dap-ds-option-item").forEach((r) => r.remove()), this.getAllowedMonths(
-          t(this.currentDate).locale(this.locale)
-        ).map((r) => {
-          const l = document.createElement("dap-ds-option-item");
-          return l.value = `${this.instanceLocalData.months().indexOf(r) + 1}`, l.appendChild(document.createTextNode(r)), l;
-        }).forEach(
-          (r) => {
-            var l;
-            return (l = this.monthSelect) == null ? void 0 : l.appendChild(r);
-          }
-        );
-      })) : this.locale = t.locale();
+    super(...arguments), this.mode = "single", this.hideAdjacentMonths = !1, this.currentDate = t(), this.minDate = t().subtract(50, "year"), this.maxDate = t().add(50, "year"), this.disabledDate = (e) => !e, this.locale = t.locale(), this.prevButtonTestId = "calendar-prev-button", this.nextButtonTestId = "calendar-next-button", this._yearOptionsLoaded = !1, this.updateLocale = (e) => {
+      e ? this.locale = e : this.locale = t.locale(), this.requestUpdate();
     }, this.updateLocaleFromHtml = (e) => {
       this.updateLocale(e[0].target[e[0].attributeName]);
     }, this.getWeeksInMonth = (e) => {
@@ -66,9 +47,18 @@ const D = class D extends S {
       return Math.ceil((a + s) / 7);
     };
   }
+  /** Locale-aware month/weekday data. Derived from `this.locale` (a reactive
+   * property Lit sets from the attribute during SSR) so the weekday/month names
+   * are correct in the SERVER render. The old approach set this field only from
+   * `connectedCallback`/`attributeChangedCallback`, neither of which takes effect
+   * on the server, so SSR rendered English names that then mismatched the
+   * Hungarian client hydration render. */
+  get instanceLocalData() {
+    return t().locale(this.locale || t.locale()).localeData();
+  }
   connectedCallback() {
     return C(this, null, function* () {
-      b(D.prototype, this, "connectedCallback").call(this), t.isDayjs(this.currentDate) || (this.currentDate = t(this.currentDate)), this.locale && (this.instanceLocalData = t().locale(this.locale).localeData(), this.currentDate = t(this.currentDate).locale(this.locale));
+      b(g.prototype, this, "connectedCallback").call(this), t.isDayjs(this.currentDate) || (this.currentDate = t(this.currentDate)), this.locale && (this.currentDate = t(this.currentDate).locale(this.locale));
     });
   }
   get startDate() {
@@ -89,7 +79,8 @@ const D = class D extends S {
     }), this.setValue(this.value, !1), queueMicrotask(() => this.loadYearOptions());
   }
   updated(e) {
-    super.updated(e), e.has("value") && this.setValue(this.value, !1);
+    var a;
+    super.updated(e), e.has("value") && this.setValue(this.value, !1), e.has("locale") && ((a = this.monthSelect) == null || a.requestUpdate());
   }
   attributeChangedCallback(e, a, s) {
     super.attributeChangedCallback(e, a, s), e === "locale" && this.updateLocale(s);
@@ -310,9 +301,9 @@ const D = class D extends S {
         const r = this.isOutOfRange(e, s), l = !this.isDateInAllowedRange(s) || this.disabledDate(s), n = this.isRangeStart(s), c = this.isRangeEnd(s), u = this.isInRange(s);
         return this.shouldHideAdjacentMonths && r ? h`<td
                   role="gridcell"
-                  class="${g("calendar-cell calendar-cell--empty")}"></td>` : h`<td
+                  class="${D("calendar-cell calendar-cell--empty")}"></td>` : h`<td
                 role="gridcell"
-                class="${g("calendar-cell")}"
+                class="${D("calendar-cell")}"
                 aria-disabled=${l}>
                 <dap-ds-calendar-cell
                   part="calendar-grid-cell"
@@ -362,7 +353,7 @@ const D = class D extends S {
         <dap-ds-select
           part="calendar-header-year-select"
           floatingStrategy="fixed"
-          class=${g(
+          class=${D(
       "calendar__header-select",
       "calendar__header-year-select"
     )}
@@ -394,7 +385,7 @@ const D = class D extends S {
           id="monthSelect"
           part="calendar-header-month-select"
           floatingStrategy="fixed"
-          class=${g(
+          class=${D(
       "calendar__header-select",
       "calendar__header-month-select"
     )}
@@ -477,19 +468,19 @@ const D = class D extends S {
     </div>`;
   }
 };
-D.tagName = "dap-ds-calendar", D.dependencies = {
+g.tagName = "dap-ds-calendar", g.dependencies = {
   "dap-ds-calendar-cell": $,
-  "dap-ds-icon-button": M,
-  "dap-ds-select": I,
+  "dap-ds-icon-button": k,
+  "dap-ds-select": R,
   "dap-ds-icon-expand-up-down-fill": A,
-  "dap-ds-option-item": k
-}, D.styles = R(E);
-let i = D;
+  "dap-ds-option-item": I
+}, g.styles = _(B);
+let i = g;
 o([
   O("dap-ds-calendar-cell:not([header])")
 ], i.prototype, "cells");
 o([
-  _("#monthSelect")
+  S("#monthSelect")
 ], i.prototype, "monthSelect");
 o([
   d({ reflect: !0 })