@sebgroup/green-core 1.4.0 → 1.4.2

package/index.js

@@ -33,8 +33,8 @@ var __privateMethod = (obj, member, method) => {
 };
 
 // libs/core/src/components/dropdown/dropdown.ts
-import { property as property5, query, queryAsync } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { property as property5, query, queryAsync, state as state4 } from "lit/decorators.js";
+import { unsafeHTML as unsafeHTML2 } from "lit/directives/unsafe-html.js";
 import { when as when2 } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { msg as msg2, str, updateWhenLocaleChanges } from "@lit/localize";
@@ -139,7 +139,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-98c004";
+var VER_SUFFIX = "-3bff35";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -187,27 +187,38 @@ function getUnscopedTagName(tagName) {
 }
 
 // libs/core/src/primitives/listbox/listbox.ts
-import { LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 // libs/core/src/utils/helpers/transitional-styles.ts
-var TransitionalStyles = class _TransitionalStyles {
+import { html as html2 } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+var TransitionalStyles = class {
   constructor() {
     this.sheets = /* @__PURE__ */ new Map();
     this.elements = /* @__PURE__ */ new Map();
+    this.sheetsLegacy = /* @__PURE__ */ new Map();
+    this.useLegacyStylesheets = true;
   }
   static get instance() {
     if (!globalThis.__gdsTransitionalStyles?.[VER_SUFFIX])
       globalThis.__gdsTransitionalStyles = {
         ...globalThis.__gdsTransitionalStyles,
-        [VER_SUFFIX]: new _TransitionalStyles()
+        [VER_SUFFIX]: new TransitionalStyles()
       };
     return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
   }
+  //!supportsConstructedStylesheets()
   apply(element, styleKey) {
+    if (!element.shadowRoot)
+      return;
+    if (this.useLegacyStylesheets) {
+      this.elements.set(styleKey, element);
+      this.applyToElementLegacy(styleKey);
+      return;
+    }
     const sheet = this.sheets.get(styleKey);
-    if (!sheet || !element.shadowRoot)
+    if (!sheet)
       return;
     this.elements.set(styleKey, element);
     this.applyToElement(styleKey, sheet);
@@ -218,7 +229,39 @@ var TransitionalStyles = class _TransitionalStyles {
       return;
     element.shadowRoot.adoptedStyleSheets = [sheet];
   }
+  // This is a fallback for browsers that don't support constructed stylesheets.
+  // Primarily, this is here to support Safari/iOS 15.x
+  //
+  // To work around the lack of Constructed Stylesheets, we use a regular <style>
+  // element instead. The _tStyles property needs to be added to the render template
+  // of each component.
+  //
+  // Lit itself will also add a <style> element to the shadow root in these browsers,
+  // meaning that we have to override the base styles added from the static style
+  // property in this case. This is what the `all: revert` rule is for.
+  // We can use cascade layers to ensure that the revert rule ovverides the base styles
+  // but not the transitional styles.
+  // `@layer base, reset, transitional-styles;`
+  applyToElementLegacy(styleKey) {
+    const sheet = this.sheetsLegacy.get(styleKey);
+    const element = this.elements.get(styleKey);
+    if (!element)
+      return;
+    element._tStyles = html2`<style>
+      @layer reset {
+        *:not(style, [gds-element]) {
+          all: revert;
+        }
+      }
+      ${unsafeHTML(sheet)}
+    </style>`;
+  }
   register(name, styles2) {
+    if (this.useLegacyStylesheets) {
+      this.sheetsLegacy.set(name, styles2);
+      this.applyToElementLegacy(name);
+      return;
+    }
     const sheet = new CSSStyleSheet();
     sheet.replaceSync(styles2);
     this.sheets.set(name, sheet);
@@ -229,12 +272,32 @@ var TransitionalStyles = class _TransitionalStyles {
 // libs/core/src/primitives/listbox/listbox.ts
 import "reflect-metadata";
 
+// libs/core/src/gds-element.ts
+import { LitElement as LitElement2 } from "lit";
+var GdsElement = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    /**
+     * The unscoped name of this element.
+     */
+    this.gdsElementName = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.gdsElementName = getUnscopedTagName(this.tagName.toLowerCase()) || this.gdsElementName;
+    this.setAttribute("gds-element", this.gdsElementName);
+  }
+};
+
 // libs/core/src/primitives/listbox/listbox.styles.ts
 import { css } from "lit";
 var style = css`
-  :host {
-    display: flex;
-    flex-direction: column;
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
   }
 `;
 var listbox_styles_default = style;
@@ -307,7 +370,7 @@ function unwrap(slotRef) {
 
 // libs/core/src/primitives/listbox/listbox.ts
 var _slotRef, _handleSelect;
-var GdsListbox = class extends LitElement {
+var GdsListbox = class extends GdsElement {
   constructor() {
     super();
     this.multiple = false;
@@ -386,7 +449,7 @@ var GdsListbox = class extends LitElement {
     (this.visibleSelectedOptionElements[0] || this.visibleOptionElements[0])?.focus();
   }
   render() {
-    return html`<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
+    return html`${this._tStyles}<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
   }
   _rerenderOptions() {
     this.options.forEach((el) => {
@@ -411,6 +474,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsListbox.prototype, "compareWith", 2);
+__decorateClass([
+  state()
+], GdsListbox.prototype, "_tStyles", 2);
 __decorateClass([
   watch("multiple")
 ], GdsListbox.prototype, "_rerenderOptions", 1);
@@ -419,21 +485,24 @@ GdsListbox = __decorateClass([
 ], GdsListbox);
 
 // libs/core/src/primitives/listbox/option.ts
-import { LitElement as LitElement2, html as html2 } from "lit";
-import { property as property2 } from "lit/decorators.js";
+import { html as html3 } from "lit";
+import { property as property2, state as state2 } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { classMap } from "lit/directives/class-map.js";
 
 // libs/core/src/primitives/listbox/option.styles.ts
 import { css as css2 } from "lit";
 var style2 = css2`
-  :host {
-    padding: 0.5 1rem;
-    cursor: pointer;
-  }
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      padding: 0.5 1rem;
+      cursor: pointer;
+    }
 
-  :host(:hover) {
-    background-color: grey;
+    :host(:hover) {
+      background-color: grey;
+    }
   }
 `;
 var option_styles_default = style2;
@@ -476,7 +545,7 @@ var Focusable = (superClass) => {
 
 // libs/core/src/primitives/listbox/option.ts
 var _hidden, _emitSelect, emitSelect_fn;
-var GdsOption = class extends Focusable(LitElement2) {
+var GdsOption = class extends Focusable(GdsElement) {
   constructor() {
     super();
     __privateAdd(this, _emitSelect);
@@ -525,7 +594,7 @@ var GdsOption = class extends Focusable(LitElement2) {
   }
   render() {
     const isMultiple = this.parentElement?.multiple;
-    const checkbox = html2`<span
+    const checkbox = html3` <span
       class="checkbox ${classMap({ checked: this.selected })}"
     ></span>`;
     if (!isMultiple) {
@@ -534,7 +603,8 @@ var GdsOption = class extends Focusable(LitElement2) {
       else
         this.removeAttribute("highlighted");
     }
-    return html2`${when(isMultiple, () => checkbox)}<slot></slot>`;
+    return html3`${this._tStyles}${when(isMultiple, () => checkbox)}
+      <slot></slot>`;
   }
 };
 _hidden = new WeakMap();
@@ -570,6 +640,9 @@ __decorateClass([
 __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], GdsOption.prototype, "isPlaceholder", 2);
+__decorateClass([
+  state2()
+], GdsOption.prototype, "_tStyles", 2);
 __decorateClass([
   watch("isplaceholder")
 ], GdsOption.prototype, "_handlePlaceholderStatusChange", 1);
@@ -578,8 +651,8 @@ GdsOption = __decorateClass([
 ], GdsOption);
 
 // libs/core/src/primitives/popover/popover.ts
-import { LitElement as LitElement3, html as html3, unsafeCSS } from "lit";
-import { property as property3, state } from "lit/decorators.js";
+import { html as html4, unsafeCSS } from "lit";
+import { property as property3, state as state3 } from "lit/decorators.js";
 import { classMap as classMap2 } from "lit/directives/class-map.js";
 import { msg } from "@lit/localize";
 import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
@@ -750,27 +823,31 @@ function isHTMLElement(value) {
 // libs/core/src/primitives/popover/popover.styles.ts
 import { css as css3 } from "lit";
 var style3 = css3`
-  :host([open]) dialog {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host([open]) dialog {
+      opacity: 1;
+      box-sizing: border-box;
+      transform: translate3d(0, 0, 0);
+      visibility: visible;
+    }
 
-  dialog {
-    inset: auto;
-    position: fixed;
-    overflow: hidden;
-    padding: 0px;
-    box-sizing: border-box;
-    border-width: 0;
-    right: 0;
+    dialog {
+      inset: auto;
+      position: fixed;
+      overflow: hidden;
+      padding: 0px;
+      box-sizing: border-box;
+      border-width: 0;
+      right: 0;
+    }
   }
 `;
 var popover_styles_default = style3;
 
 // libs/core/src/primitives/popover/popover.ts
 var _dialogElementRef, _autoPositionCleanupFn, _isMobileViewport, _dispatchUiStateEvent, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
-var GdsPopover = class extends LitElement3 {
+var GdsPopover = class extends GdsElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _registerTriggerEvents);
@@ -883,22 +960,23 @@ var GdsPopover = class extends LitElement3 {
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
   }
   render() {
-    return html3`<dialog
-      class="${classMap2({ "v-kb-visible": this._isVirtKbVisible })}"
-      ${ref2(__privateGet(this, _dialogElementRef))}
-    >
-      <header>
-        <h2>${this.label}</h2>
-        <button
-          class="close"
-          @click=${__privateGet(this, _handleCloseButton)}
-          aria-label="${msg("Close")}"
-        >
-          <i></i>
-        </button>
-      </header>
-      <slot></slot>
-    </dialog>`;
+    return html4`${this._tStyles}
+      <dialog
+        class="${classMap2({ "v-kb-visible": this._isVirtKbVisible })}"
+        ${ref2(__privateGet(this, _dialogElementRef))}
+      >
+        <header>
+          <h2>${this.label}</h2>
+          <button
+            class="close"
+            @click=${__privateGet(this, _handleCloseButton)}
+            aria-label="${msg("Close")}"
+          >
+            <i></i>
+          </button>
+        </header>
+        <slot></slot>
+      </dialog>`;
   }
   _handleOpenChange() {
     this.setAttribute("aria-hidden", String(!this.open));
@@ -1004,10 +1082,10 @@ __decorateClass([
   property3()
 ], GdsPopover.prototype, "calcMaxWidth", 2);
 __decorateClass([
-  state()
+  state3()
 ], GdsPopover.prototype, "_trigger", 2);
 __decorateClass([
-  state()
+  state3()
 ], GdsPopover.prototype, "_isVirtKbVisible", 2);
 __decorateClass([
   watch("triggerRef")
@@ -1015,6 +1093,9 @@ __decorateClass([
 __decorateClass([
   watch("_trigger")
 ], GdsPopover.prototype, "_handleTriggerChanged", 1);
+__decorateClass([
+  state3()
+], GdsPopover.prototype, "_tStyles", 2);
 __decorateClass([
   watch("open")
 ], GdsPopover.prototype, "_handleOpenChange", 1);
@@ -1026,11 +1107,12 @@ GdsPopover = __decorateClass([
 ], GdsPopover);
 
 // libs/core/src/components/form-control.ts
-import { LitElement as LitElement4 } from "lit";
 import { property as property4 } from "lit/decorators.js";
-var GdsFormControlElement = class extends LitElement4 {
+var _internals;
+var GdsFormControlElement = class extends GdsElement {
   constructor() {
     super();
+    __privateAdd(this, _internals, void 0);
     this.invalid = false;
     this.name = "";
     /**
@@ -1040,43 +1122,68 @@ var GdsFormControlElement = class extends LitElement4 {
     this._handleFormReset = () => {
       this.value = void 0;
     };
-    this.#internals = this.attachInternals();
-  }
-  #internals;
-  static {
-    this.formAssociated = true;
+    try {
+      __privateSet(this, _internals, this.attachInternals());
+    } catch (e) {
+      __privateSet(this, _internals, {
+        form: this.closest("form"),
+        setFormValue: (value) => {
+          this.value = value;
+        },
+        setValidity: (validity, validationMessage) => {
+          this.invalid = validity.customError;
+        },
+        validationMessage: "",
+        validity: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: true
+        },
+        willValidate: true,
+        checkValidity: () => true,
+        reportValidity: () => true
+      });
+    }
   }
   get form() {
-    return this.#internals.form;
+    return __privateGet(this, _internals).form;
   }
   get type() {
     return getUnscopedTagName(this.localName) || "gds-form-control";
   }
   get validity() {
-    return this.#internals.validity;
+    return __privateGet(this, _internals).validity;
   }
   get validationMessage() {
-    return this.#internals.validationMessage;
+    return __privateGet(this, _internals).validationMessage;
   }
   get willValidate() {
-    return this.#internals.willValidate;
+    return __privateGet(this, _internals).willValidate;
   }
   checkValidity() {
-    return this.#internals.checkValidity();
+    return __privateGet(this, _internals).checkValidity();
   }
   reportValidity() {
-    return this.#internals.reportValidity();
+    return __privateGet(this, _internals).reportValidity();
   }
   connectedCallback() {
     super.connectedCallback();
-    this.#internals.form?.addEventListener("reset", this._handleFormReset);
+    __privateGet(this, _internals).form?.addEventListener("reset", this._handleFormReset);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#internals.form?.removeEventListener("reset", this._handleFormReset);
+    __privateGet(this, _internals).form?.removeEventListener("reset", this._handleFormReset);
   }
   __handleValidityChange() {
-    this.#internals.setValidity(
+    __privateGet(this, _internals).setValidity(
       {
         badInput: false,
         customError: this.invalid,
@@ -1087,15 +1194,18 @@ var GdsFormControlElement = class extends LitElement4 {
         tooLong: false,
         tooShort: false,
         typeMismatch: false,
-        valueMissing: false
+        valueMissing: false,
+        valid: !this.invalid
       },
       this.validationMessage || "Error message"
     );
   }
   __handleValueChange() {
-    this.#internals.setFormValue(this.value);
+    __privateGet(this, _internals).setFormValue(this.value);
   }
 };
+_internals = new WeakMap();
+GdsFormControlElement.formAssociated = true;
 __decorateClass([
   property4({
     type: Boolean,
@@ -1123,16 +1233,20 @@ __decorateClass([
 // libs/core/src/components/dropdown/dropdown.styles.ts
 import { css as css4 } from "lit";
 var style4 = css4`
-  button {
-    appearance: none;
-    display: block;
-    background-color: black;
-    border-radius: 2rem;
-    border: none;
-    color: white;
-    padding: 0.7rem 2rem;
-    margin: 0.5rem 0;
-    box-sizing: border-box;
+  @layer base, reset, transitional-styles;
+
+  @layer base {
+    button {
+      appearance: none;
+      display: block;
+      background-color: black;
+      border-radius: 2rem;
+      border: none;
+      color: white;
+      padding: 0.7rem 2rem;
+      margin: 0.5rem 0;
+      box-sizing: border-box;
+    }
   }
 `;
 var dropdown_styles_default = style4;
@@ -1157,7 +1271,6 @@ var GdsDropdown = class extends GdsFormControlElement {
     this.compareWith = (a, b) => a === b;
     this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
     this.syncPopoverWidth = false;
-    // Private members
     __privateAdd(this, _optionElements, void 0);
     /**
      * Event handler for filtering the options in the dropdown.
@@ -1266,6 +1379,7 @@ var GdsDropdown = class extends GdsFormControlElement {
   }
   render() {
     return html`
+      ${this._tStyles}
       ${when2(
       this.label,
       () => html`<label for="trigger">${this.label}</label>`
@@ -1283,7 +1397,7 @@ var GdsDropdown = class extends GdsFormControlElement {
         aria-expanded="${this.open}"
       >
         <slot name="trigger">
-          <span>${unsafeHTML(this.displayValue)}</span>
+          <span>${unsafeHTML2(this.displayValue)}</span>
         </slot>
       </button>
 
@@ -1428,6 +1542,9 @@ __decorateClass([
 __decorateClass([
   property5({ type: Boolean })
 ], GdsDropdown.prototype, "syncPopoverWidth", 2);
+__decorateClass([
+  state4()
+], GdsDropdown.prototype, "_tStyles", 2);
 __decorateClass([
   query("#trigger")
 ], GdsDropdown.prototype, "elTriggerBtn", 2);
@@ -1454,30 +1571,29 @@ GdsDropdown = __decorateClass([
 ], GdsDropdown);
 
 // libs/core/src/components/context-menu/context-menu.ts
-import { LitElement as LitElement6 } from "lit";
 import { msg as msg3 } from "@lit/localize";
 import { classMap as classMap3 } from "lit-html/directives/class-map.js";
-import { property as property6, queryAsync as queryAsync2 } from "lit/decorators.js";
+import { property as property6, queryAsync as queryAsync2, state as state6 } from "lit/decorators.js";
 
 // libs/core/src/primitives/menu/menu.ts
-import { LitElement as LitElement5 } from "lit";
 import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
-var _slotRef2;
-var GdsMenu = class extends LitElement5 {
+import { state as state5 } from "lit/decorators.js";
+var GdsMenu = class extends GdsElement {
   constructor() {
     super();
-    __privateAdd(this, _slotRef2, createRef3());
+    this.#slotRef = createRef3();
     new ListboxKbNavController(this);
   }
+  #slotRef;
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "menu");
     TransitionalStyles.instance.apply(this, "gds-listbox");
   }
   get navigableItems() {
-    if (!__privateGet(this, _slotRef2).value)
+    if (!this.#slotRef.value)
       return [];
-    return unwrap(__privateGet(this, _slotRef2).value).assignedElements().filter(
+    return unwrap(this.#slotRef.value).assignedElements().filter(
       (o) => !o.hasAttribute("isplaceholder")
     ) || [];
   }
@@ -1488,17 +1604,19 @@ var GdsMenu = class extends LitElement5 {
     this.navigableItems[0]?.focus();
   }
   render() {
-    return html`<slot ${ref3(__privateGet(this, _slotRef2))}></slot>`;
+    return html`${this._tStyles}<slot ${ref3(this.#slotRef)}></slot>`;
   }
 };
-_slotRef2 = new WeakMap();
+__decorateClass([
+  state5()
+], GdsMenu.prototype, "_tStyles", 2);
 GdsMenu = __decorateClass([
   gdsCustomElement("gds-menu")
 ], GdsMenu);
 
 // libs/core/src/components/context-menu/context-menu.ts
 var _handleItemClick, handleItemClick_fn;
-var GdsContextMenu = class extends LitElement6 {
+var GdsContextMenu = class extends GdsElement {
   constructor() {
     super();
     __privateAdd(this, _handleItemClick);
@@ -1520,7 +1638,8 @@ var GdsContextMenu = class extends LitElement6 {
     });
   }
   render() {
-    return html`<button
+    return html`${this._tStyles}
+      <button
         id="trigger"
         class="ghost border-0 small ${classMap3({ highlighted: this.open })}"
         aria-label="${this.buttonLabel}"
@@ -1570,6 +1689,9 @@ __decorateClass([
 __decorateClass([
   property6()
 ], GdsContextMenu.prototype, "placement", 2);
+__decorateClass([
+  state6()
+], GdsContextMenu.prototype, "_tStyles", 2);
 __decorateClass([
   queryAsync2("#trigger")
 ], GdsContextMenu.prototype, "elTriggerBtn", 2);
@@ -1578,19 +1700,18 @@ GdsContextMenu = __decorateClass([
 ], GdsContextMenu);
 
 // libs/core/src/primitives/menu/menu-item.ts
-import { LitElement as LitElement7 } from "lit";
-var _handleOnClick;
-var GdsMenuItem = class extends Focusable(LitElement7) {
+import { state as state7 } from "lit/decorators.js";
+var GdsMenuItem = class extends Focusable(GdsElement) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _handleOnClick, () => {
+    this.#handleOnClick = () => {
       this.dispatchEvent(
         new CustomEvent("gds-menu-item-click", {
           bubbles: true,
           composed: true
         })
       );
-    });
+    };
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1601,33 +1722,37 @@ var GdsMenuItem = class extends Focusable(LitElement7) {
       e.preventDefault();
       this.click();
     });
-    this.addEventListener("click", __privateGet(this, _handleOnClick));
+    this.addEventListener("click", this.#handleOnClick);
     TransitionalStyles.instance.apply(this, "gds-option");
   }
+  #handleOnClick;
   render() {
-    return html`<slot></slot>`;
+    return html`${this._tStyles}<slot></slot>`;
   }
 };
-_handleOnClick = new WeakMap();
+__decorateClass([
+  state7()
+], GdsMenuItem.prototype, "_tStyles", 2);
 GdsMenuItem = __decorateClass([
   gdsCustomElement("gds-menu-item")
 ], GdsMenuItem);
 
 // libs/core/src/components/datepicker/datepicker.ts
-import { property as property9, queryAll, queryAsync as queryAsync3, state as state3 } from "lit/decorators.js";
+import { property as property9, queryAll, queryAsync as queryAsync3, state as state10 } from "lit/decorators.js";
 import { join } from "lit/directives/join.js";
 import { when as when4 } from "lit/directives/when.js";
 import { until } from "lit/directives/until.js";
 import { map } from "lit/directives/map.js";
 import { repeat } from "lit/directives/repeat.js";
+import { nothing } from "lit";
 import { msg as msg5 } from "@lit/localize";
 import { eachYearOfInterval } from "date-fns";
 
 // libs/core/src/primitives/calendar/calendar.ts
-import { LitElement as LitElement8, html as html5 } from "lit";
+import { html as html6 } from "lit";
 import { classMap as classMap4 } from "lit/directives/class-map.js";
 import { when as when3 } from "lit/directives/when.js";
-import { property as property7, query as query2 } from "lit/decorators.js";
+import { property as property7, query as query2, state as state8 } from "lit/decorators.js";
 import { msg as msg4 } from "@lit/localize";
 import {
   addDays as addDays2,
@@ -1646,7 +1771,7 @@ import {
   eachWeekOfInterval,
   eachDayOfInterval
 } from "date-fns";
-import { html as html4 } from "lit-html";
+import { html as html5 } from "lit-html";
 function renderMonthGridView(date, template) {
   const monthStart = startOfMonth(date);
   const monthEnd = endOfMonth(date);
@@ -1654,7 +1779,7 @@ function renderMonthGridView(date, template) {
     { start: monthStart, end: monthEnd },
     { weekStartsOn: 1 }
   );
-  return html4`${template(
+  return html5`${template(
     weeks.map((weekStartDay) => ({
       days: eachDayOfInterval({
         start: weekStartDay,
@@ -1667,19 +1792,22 @@ function renderMonthGridView(date, template) {
 // libs/core/src/primitives/calendar/calendar.styles.ts
 import { css as css5 } from "lit";
 var style5 = css5`
-  td.disabled {
-    color: #999;
-    cursor: default;
-  }
-  td.today {
-    background-color: #eee;
+  @layer base, reset, transitional-styles;
+  @layer base {
+    td.disabled {
+      color: #999;
+      cursor: default;
+    }
+    td.today {
+      background-color: #eee;
+    }
   }
 `;
 var calendar_styles_default = style5;
 
 // libs/core/src/primitives/calendar/calendar.ts
 var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
-var GdsCalendar = class extends LitElement8 {
+var GdsCalendar = class extends GdsElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _setSelectedDate);
@@ -1719,58 +1847,59 @@ var GdsCalendar = class extends LitElement8 {
   }
   render() {
     const currentDate = /* @__PURE__ */ new Date();
-    return html5`<table>
-      <thead>
-        <tr>
-          ${when3(this.showWeekNumbers, () => html5`<th></th>`)}
-          <th>${msg4("Mon")}</th>
-          <th>${msg4("Tue")}</th>
-          <th>${msg4("Wed")}</th>
-          <th>${msg4("Thu")}</th>
-          <th>${msg4("Fri")}</th>
-          <th>${msg4("Sat")}</th>
-          <th>${msg4("Sun")}</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${renderMonthGridView(
+    return html6`${this._tStyles}
+      <table>
+        <thead>
+          <tr>
+            ${when3(this.showWeekNumbers, () => html6`<th></th>`)}
+            <th>${msg4("Mon")}</th>
+            <th>${msg4("Tue")}</th>
+            <th>${msg4("Wed")}</th>
+            <th>${msg4("Thu")}</th>
+            <th>${msg4("Fri")}</th>
+            <th>${msg4("Sat")}</th>
+            <th>${msg4("Sun")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${renderMonthGridView(
       this.focusedDate,
-      (weeks) => html5`
-            ${weeks.map(
-        (week) => html5`
-                <tr>
-                  ${when3(
+      (weeks) => html6`
+              ${weeks.map(
+        (week) => html6`
+                  <tr>
+                    ${when3(
           this.showWeekNumbers,
-          () => html5`<td class="week-number">
-                        ${getWeek(week.days[0])}
-                      </td>`
+          () => html6`<td class="week-number">
+                          ${getWeek(week.days[0])}
+                        </td>`
         )}
-                  ${week.days.map((day) => {
+                    ${week.days.map((day) => {
           const isDisabled = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
-          return html5`
-                      <td
-                        class="${classMap4({
+          return html6`
+                        <td
+                          class="${classMap4({
             disabled: isDisabled,
             today: isSameDay(currentDate, day)
           })}"
-                        ?disabled=${isDisabled}
-                        tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
-                        aria-selected="${isSameDay(this.value, day)}"
-                        aria-label="${day.toDateString()}"
-                        @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
-                        id="dateCell-${day.getDate()}"
-                      >
-                        ${day.getDate()}
-                      </td>
-                    `;
+                          ?disabled=${isDisabled}
+                          tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
+                          aria-selected="${isSameDay(this.value, day)}"
+                          aria-label="${day.toDateString()}"
+                          @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
+                          id="dateCell-${day.getDate()}"
+                        >
+                          ${day.getDate()}
+                        </td>
+                      `;
         })}
-                </tr>
-              `
+                  </tr>
+                `
       )}
-          `
+            `
     )}
-      </tbody>
-    </table>`;
+        </tbody>
+      </table>`;
   }
 };
 _setSelectedDate = new WeakSet();
@@ -1865,15 +1994,18 @@ __decorateClass([
 __decorateClass([
   query2('td[tabindex="0"]')
 ], GdsCalendar.prototype, "_elFocusedCell", 2);
+__decorateClass([
+  state8()
+], GdsCalendar.prototype, "_tStyles", 2);
 GdsCalendar = __decorateClass([
   gdsCustomElement("gds-calendar")
 ], GdsCalendar);
 
 // libs/core/src/components/datepicker/date-part-spinner.ts
-import { LitElement as LitElement9 } from "lit";
-import { property as property8, state as state2 } from "lit/decorators.js";
+import { LitElement as LitElement6 } from "lit";
+import { property as property8, state as state9 } from "lit/decorators.js";
 var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown2, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
-var GdsDatePartSpinner = class extends LitElement9 {
+var GdsDatePartSpinner = class extends LitElement6 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _focusNextSpinner);
@@ -2032,7 +2164,7 @@ __decorateClass([
   property8({ type: Number, attribute: "aria-valuemax" })
 ], GdsDatePartSpinner.prototype, "max", 2);
 __decorateClass([
-  state2()
+  state9()
 ], GdsDatePartSpinner.prototype, "displayValue", 2);
 __decorateClass([
   watch("value")
@@ -2044,13 +2176,15 @@ GdsDatePartSpinner = __decorateClass([
 // libs/core/src/components/datepicker/datepicker.styles.ts
 import { css as css6 } from "lit";
 var styles = css6`
-  label {
-    display: block;
+  @layer base, reset, transitional-styles;
+  @layer base {
+    label {
+      display: block;
+    }
   }
 `;
 
 // libs/core/src/components/datepicker/datepicker.ts
-import { nothing } from "lit";
 var dateConverter = {
   fromAttribute(value) {
     return new Date(value);
@@ -2059,7 +2193,7 @@ var dateConverter = {
     return value.toISOString();
   }
 };
-var _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get;
+var _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get;
 var GdsDatepicker = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
@@ -2086,6 +2220,20 @@ var GdsDatepicker = class extends GdsFormControlElement {
     this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
+    __privateAdd(this, _handleCalendarChange, (e) => {
+      e.stopPropagation();
+      this.value = e.detail;
+      this.open = false;
+      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+    });
+    __privateAdd(this, _handleMonthChange, (e) => {
+      e.stopPropagation();
+      this._focusedMonth = e.target?.value;
+    });
+    __privateAdd(this, _handleYearChange, (e) => {
+      e.stopPropagation();
+      this._focusedYear = e.target?.value;
+    });
     __privateAdd(this, _handleIncrementFocusedMonth, (_e) => {
       this._focusedMonth++;
       if (this._focusedMonth > 11) {
@@ -2173,7 +2321,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
     TransitionalStyles.instance.apply(this, "gds-datepicker");
   }
   render() {
-    return html`
+    return html`${this._tStyles}
       <label for="spinner-0" id="label">${this.label}</label>
 
       <div class="form-info"><slot name="sub-label"></slot></div>
@@ -2241,7 +2389,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
           </button>
           <gds-dropdown
             .value=${this._focusedMonth.toString()}
-            @change=${(e) => this._focusedMonth = e.target?.value}
+            @change=${__privateGet(this, _handleMonthChange)}
             aria-label="${msg5("Month")}"
           >
             <gds-option value="0">${msg5("January")}</gds-option>
@@ -2259,7 +2407,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
           </gds-dropdown>
           <gds-dropdown
             .value=${this._focusedYear.toString()}
-            @change=${(e) => this._focusedYear = e.target?.value}
+            @change=${__privateGet(this, _handleYearChange)}
             aria-label="${msg5("Year")}"
           >
             ${repeat(
@@ -2275,12 +2423,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
 
         <gds-calendar
           id="calendar"
-          @change=${(e) => {
-      e.stopPropagation();
-      this.value = e.detail;
-      this.open = false;
-      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
-    }}
+          @change=${__privateGet(this, _handleCalendarChange)}
           @gds-date-focused=${__privateGet(this, _handleFocusChange)}
           .focusedMonth=${this._focusedMonth}
           .focusedYear=${this._focusedYear}
@@ -2311,8 +2454,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
             ${msg5("Today")}
           </button>
         </div>
-      </gds-popover>
-    `;
+      </gds-popover> `;
   }
   _handleValueChange() {
     if (!this.value) {
@@ -2392,6 +2534,9 @@ dispatchChangeEvent_fn2 = function() {
     })
   );
 };
+_handleCalendarChange = new WeakMap();
+_handleMonthChange = new WeakMap();
+_handleYearChange = new WeakMap();
 _handleIncrementFocusedMonth = new WeakMap();
 _handleDecrementFocusedMonth = new WeakMap();
 _handleFocusChange = new WeakMap();
@@ -2461,13 +2606,13 @@ __decorateClass([
   queryAsync3("#calendar-button")
 ], GdsDatepicker.prototype, "test_calendarButton", 2);
 __decorateClass([
-  state3()
+  state10()
 ], GdsDatepicker.prototype, "_focusedMonth", 2);
 __decorateClass([
-  state3()
+  state10()
 ], GdsDatepicker.prototype, "_focusedYear", 2);
 __decorateClass([
-  state3()
+  state10()
 ], GdsDatepicker.prototype, "_dateFormatLayout", 2);
 __decorateClass([
   queryAsync3("#calendar")
@@ -2478,6 +2623,9 @@ __decorateClass([
 __decorateClass([
   queryAll(getScopedTagName("gds-date-part-spinner"))
 ], GdsDatepicker.prototype, "_elSpinners", 2);
+__decorateClass([
+  state10()
+], GdsDatepicker.prototype, "_tStyles", 2);
 __decorateClass([
   watch("value")
 ], GdsDatepicker.prototype, "_handleValueChange", 1);