@sebgroup/green-core 1.80.0 → 1.82.0

package/components/breadcrumbs/breadcrumbs.component.d.ts

@@ -0,0 +1,23 @@
+import { GdsElement } from '../../gds-element';
+declare const GdsBreadcrumbs_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & typeof GdsElement;
+/**
+ * @element gds-breadcrumbs
+ * @summary The `gds-breadcrumbs` component is a navigation element
+ * It helps users understand their current * location within a hierarchical structure of a website or application.
+ *
+ * @status beta
+ */
+export declare class GdsBreadcrumbs extends GdsBreadcrumbs_base {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Controls the font-size and spacing of separators and breadcrumbs items
+     */
+    size: 'large' | 'small';
+    /**
+     * This property allow you to set the accessible label of the breadcrumbs.
+     * If not provided, the default label is "breadcrumbs".
+     */
+    label: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/components/breadcrumbs/breadcrumbs.component.js

@@ -0,0 +1,71 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QTSIPXV3.js";
+import { localized, msg } from "@lit/localize";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { GdsElement } from "../../gds-element.js";
+import { tokens } from "../../tokens.style.js";
+import { gdsCustomElement } from "../../utils/helpers/custom-element-scoping.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { IconChevronLeft } from "../icon/icons/chevron-left.component.js";
+import breadcrumbsCSS from "./breadcrumbs.styles.js";
+let GdsBreadcrumbs = class extends withLayoutChildProps(
+  withSizeXProps(withMarginProps(GdsElement))
+) {
+  constructor() {
+    super(...arguments);
+    this.size = "large";
+    this.label = msg("Breadcrumbs");
+  }
+  render() {
+    const elements = Array.from(this.children);
+    const secondToLastIndex = elements.length - 2;
+    return html`
+      <nav
+        role="navigation"
+        aria-label=${this.label}
+        class=${classMap({ "size-small": this.size === "small" })}
+      >
+        <div class="mobile-return">
+          <gds-icon-chevron-left></gds-icon-chevron-left>
+        </div>
+        <ol>
+          ${elements.map(
+      (element, index) => html`
+              <li
+                class=${classMap({
+        "show-on-mobile": index === secondToLastIndex
+      })}
+              >
+                ${element}
+              </li>
+              ${index < elements.length - 1 ? html`<span class="separator" aria-hidden="true">/</span>` : null}
+            `
+    )}
+        </ol>
+      </nav>
+    `;
+  }
+};
+GdsBreadcrumbs.styles = [tokens, breadcrumbsCSS];
+__decorateClass([
+  property({ type: String })
+], GdsBreadcrumbs.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], GdsBreadcrumbs.prototype, "label", 2);
+GdsBreadcrumbs = __decorateClass([
+  gdsCustomElement("gds-breadcrumbs", {
+    dependsOn: [IconChevronLeft]
+  }),
+  localized()
+], GdsBreadcrumbs);
+export {
+  GdsBreadcrumbs
+};

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import { GdsBreadcrumbs } from './breadcrumbs.component';
+export { GdsBreadcrumbs };

package/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsBreadcrumbs } from "./breadcrumbs.component.js";
+GdsBreadcrumbs.define();
+export {
+  GdsBreadcrumbs
+};

package/components/breadcrumbs/breadcrumbs.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/breadcrumbs/breadcrumbs.styles.js

@@ -0,0 +1,95 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const style = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      container-type: inline-size;
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      width: max-content;
+      gap: var(--gds-sys-space-s);
+      font-size: var(--gds-sys-text-size-detail-m);
+      line-height: var(--gds-sys-text-line-height-detail-m);
+      font-weight: var(--gds-sys-text-weight-regular);
+    }
+
+    .size-small {
+      font-size: var(--gds-sys-text-size-detail-s);
+      line-height: var(--gds-sys-text-line-height-detail-s);
+      gap: var(--gds-sys-space-xs);
+    }
+
+    .size-small ol {
+      gap: var(--gds-sys-space-xs);
+    }
+
+    ol {
+      display: flex;
+      align-items: center;
+      gap: var(--gds-sys-space-s);
+      list-style: none;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding-inline-start: 0;
+      height: max-content;
+      font-weight: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      list-style: none;
+      margin: unset;
+      padding: unset;
+      height: max-content;
+      font-weight: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    li:last-child {
+      color: var(--gds-sys-color-l3-content-secondary);
+    }
+
+    .separator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .mobile-return {
+      display: none;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @container (max-width: 400px) {
+      .mobile-return {
+        display: flex;
+      }
+
+      li {
+        display: none;
+      }
+
+      .show-on-mobile {
+        display: flex;
+      }
+
+      .separator {
+        display: none;
+      }
+    }
+  }
+`;
+var breadcrumbs_styles_default = style;
+export {
+  breadcrumbs_styles_default as default
+};

package/components/breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './breadcrumbs';

package/components/breadcrumbs/index.js

@@ -0,0 +1 @@
+export * from "./breadcrumbs.js";

package/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -153,7 +153,7 @@ renderFieldControlFooter_fn = function() {
   return html`<gds-form-control-footer
       id="footer"
       class="size-${this.size}"
-      .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+      .errorMessage=${this.invalid ? this.errorMessage : void 0}
     >
     </gds-form-control-footer>`;
 };

package/components/datepicker/datepicker.component.js

@@ -369,13 +369,16 @@ let Datepicker = class extends GdsFormControlElement {
 
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
-      () => html`<gds-form-control-footer class="size-${this.size}">
+      () => html`<gds-form-control-footer
+            class="size-${this.size}"
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
+          >
             ${``}
             <slot id="message" name="message" slot="message">
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
-              ${this.errorMessage || this.validationMessage}
+              ${this.errorMessage}
             </slot>
           </gds-form-control-footer>`
     )}
@@ -553,7 +556,7 @@ let Datepicker = class extends GdsFormControlElement {
 _valueOnOpen = new WeakMap();
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && this.invalid;
+  return !this.plain;
 };
 _renderBackToValidRangeButton = new WeakSet();
 renderBackToValidRangeButton_fn = async function() {

package/components/datepicker/datepicker.styles.js

@@ -38,8 +38,8 @@ const styles = css`
       text-align: center;
 
       &:focus {
-        background-color: var(--gds-color-l2-background-tertiary);
-        color: var(--gds-color-l2-content-tertiary);
+        background-color: var(--gds-sys-color-l2-background-tertiary);
+        color: var(--gds-sys-color-l2-content-tertiary);
       }
     }
   }

package/components/dropdown/dropdown.component.js

@@ -373,13 +373,16 @@ let GdsDropdown = class extends GdsFormControlElement {
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
       () => html`
-          <gds-form-control-footer class="size-${this.size}">
+          <gds-form-control-footer
+            class="size-${this.size}"
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
+          >
             ${``}
             <slot id="message" name="message" slot="message">
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
-              ${this.errorMessage || this.validationMessage}
+              ${this.validationMessage || this.errorMessage}
             </slot>
           </gds-form-control-footer>
         `
@@ -439,7 +442,7 @@ let GdsDropdown = class extends GdsFormControlElement {
 _optionElements = new WeakMap();
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && this.invalid;
+  return !this.plain;
 };
 _renderCombobox = new WeakMap();
 _renderTriggerButton = new WeakMap();

package/components/form/form-control.js

@@ -5,7 +5,6 @@ import {
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _internals;
-import { msg } from "@lit/localize";
 import { property } from "lit/decorators.js";
 import { GdsElement } from "../../gds-element.js";
 import { watch } from "../../utils/decorators/index.js";
@@ -59,7 +58,7 @@ class GdsFormControlElement extends GdsElement {
         customError: value,
         valid: !value
       },
-      this.validationMessage || msg(`Error message.`),
+      this.errorMessage || this.validationMessage || "   ",
       // @ts-expect-error - setValidity actually takes an element as the third argument, but the type definition is wrong.
       this._getValidityAnchor() || void 0
     );
@@ -99,6 +98,7 @@ class GdsFormControlElement extends GdsElement {
       { ...this.validity, valid: true },
       ""
     ];
+    this.errorMessage = validity[1] || this.errorMessage;
     __privateGet(this, _internals).setValidity(
       validity[0],
       validity[1],

package/components/index.d.ts

@@ -3,6 +3,7 @@ export * from '../primitives/menu/menu-heading';
 export * from '../primitives/menu/menu-item';
 export * from './button';
 export * from './badge';
+export * from './breadcrumbs';
 export * from './menu-button';
 export * from './context-menu';
 export * from './coachmark';

package/components/index.js

@@ -3,6 +3,7 @@ export * from "../primitives/menu/menu-heading.js";
 export * from "../primitives/menu/menu-item.js";
 export * from "./button/index.js";
 export * from "./badge/index.js";
+export * from "./breadcrumbs/index.js";
 export * from "./menu-button/index.js";
 export * from "./context-menu/index.js";
 export * from "./coachmark/index.js";

package/components/input/input.component.js

@@ -121,10 +121,10 @@ let Input = class extends GdsFormControlElement {
       </gds-field-base>
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
-      () => html`<gds-form-control-footer
+      () => html` <gds-form-control-footer
             class="size-${this.size}"
-            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - (this.value?.length || 0)}
-            .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) ? this.maxlength - (this.value?.length || 0) : void 0}
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
           ></gds-form-control-footer>`
     )}
     `;
@@ -135,7 +135,7 @@ let Input = class extends GdsFormControlElement {
 };
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && (this.invalid || __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get));
+  return !this.plain;
 };
 _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();

package/components/popover/popover.component.js

@@ -145,7 +145,7 @@ let GdsPopover = class extends GdsElement {
     });
     this.addEventListener("focusin", (e) => {
       const t = e.target;
-      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+      if (t === this || t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
         this._isVirtKbVisible = true;
       } else {
         this._isVirtKbVisible = false;

package/components/pure.d.ts

@@ -3,6 +3,7 @@ export * from '../primitives/menu/menu-heading.component';
 export * from '../primitives/menu/menu-item.component';
 export * from './button/button.component';
 export * from './badge/badge.component';
+export * from './breadcrumbs/breadcrumbs.component';
 export * from './menu-button/menu-button.component';
 export * from './context-menu/context-menu.component';
 export * from './coachmark/coachmark.component';

package/components/pure.js

@@ -3,6 +3,7 @@ export * from "../primitives/menu/menu-heading.component.js";
 export * from "../primitives/menu/menu-item.component.js";
 export * from "./button/button.component.js";
 export * from "./badge/badge.component.js";
+export * from "./breadcrumbs/breadcrumbs.component.js";
 export * from "./menu-button/menu-button.component.js";
 export * from "./context-menu/context-menu.component.js";
 export * from "./coachmark/coachmark.component.js";

package/components/radio/radio-group/radio-group.component.js

@@ -245,7 +245,7 @@ renderFieldControlFooter_fn = function() {
   return html` <gds-form-control-footer
       id="footer"
       class="size-${this.size}"
-      .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+      .errorMessage=${this.invalid ? this.errorMessage : void 0}
     >
     </gds-form-control-footer>`;
 };

package/components/textarea/textarea.component.js

@@ -188,9 +188,10 @@ let Textarea = class extends GdsFormControlElement {
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
       () => html`<gds-form-control-footer
-            lass="size-${this.size}"
-            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - (this.value?.length || 0)}
-            .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+            id="footer"
+            class="size-${this.size}"
+            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) ? this.maxlength - (this.value?.length || 0) : void 0}
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
           ></gds-form-control-footer>`
     )}
     `;
@@ -239,7 +240,7 @@ let Textarea = class extends GdsFormControlElement {
 };
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && (this.invalid || __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get));
+  return !this.plain;
 };
 _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();
@@ -276,6 +277,7 @@ renderNativeTextarea_fn = function() {
         class="native-control resize-${this.resizable}"
         aria-label=${this.plain && this.label || nothing}
         aria-describedby="supporting-text extended-supporting-text sub-label message"
+        aria-errormessage="footer"
         placeholder=" "
         autocapitalize=${ifDefined(this.autocapitalize)}
         autocomplete=${ifDefined(this.autocomplete)}

package/generated/locales/da.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/da.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Annuller`,
   "s39938ecdae568740": `September`,
+  "s3b8a6245b12fa2ad": `Br\xF8dkrummer`,
   "s407a88a592a0987c": `August`,
   "s46d6587089bd0356": `N\xE6ste m\xE5ned`,
   "s49730f3d5751a433": `Indl\xE6ser...`,

package/generated/locales/de.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/de.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Abbrechen`,
   "s39938ecdae568740": `September`,
+  "s3b8a6245b12fa2ad": `Brotkr\xFCmelnavigation`,
   "s407a88a592a0987c": `August`,
   "s46d6587089bd0356": `N\xE4chster Monat`,
   "s49730f3d5751a433": `Laden...`,

package/generated/locales/fi.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/fi.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `Marraskuu`,
   "s2ceb11be2290bb1b": `Peruuta`,
   "s39938ecdae568740": `Syys`,
+  "s3b8a6245b12fa2ad": `Murupolku`,
   "s407a88a592a0987c": `Elokuu`,
   "s46d6587089bd0356": `Seuraava kuukausi`,
   "s49730f3d5751a433": `Ladataan...`,

package/generated/locales/fr.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/fr.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `Novembre`,
   "s2ceb11be2290bb1b": `Annuler`,
   "s39938ecdae568740": `Septembre`,
+  "s3b8a6245b12fa2ad": `Fil d'Ariane`,
   "s407a88a592a0987c": `Ao\xFBt`,
   "s46d6587089bd0356": `Mois suivant`,
   "s49730f3d5751a433": `Chargement...`,

package/generated/locales/it.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/it.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `Novembre`,
   "s2ceb11be2290bb1b": `Annulla`,
   "s39938ecdae568740": `Settembre`,
+  "s3b8a6245b12fa2ad": `Percorso di navigazione`,
   "s407a88a592a0987c": `Agosto`,
   "s46d6587089bd0356": `Mese successivo`,
   "s49730f3d5751a433": `Caricamento...`,

package/generated/locales/nl.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/nl.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Annuleren`,
   "s39938ecdae568740": `September`,
+  "s3b8a6245b12fa2ad": `Kruimelpad`,
   "s407a88a592a0987c": `Augustus`,
   "s46d6587089bd0356": `Volgende maand`,
   "s49730f3d5751a433": `Laden...`,

package/generated/locales/no.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/no.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Avbryt`,
   "s39938ecdae568740": `September`,
+  "s3b8a6245b12fa2ad": `Br\xF8dsmuler`,
   "s407a88a592a0987c": `August`,
   "s46d6587089bd0356": `Neste m\xE5ned`,
   "s49730f3d5751a433": `Laster...`,

package/generated/locales/sv.d.ts

@@ -8,6 +8,7 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s2ceb11be2290bb1b: string;
     s39938ecdae568740: string;
+    s3b8a6245b12fa2ad: string;
     s407a88a592a0987c: string;
     s46d6587089bd0356: string;
     s49730f3d5751a433: string;

package/generated/locales/sv.js

@@ -10,6 +10,7 @@ const templates = {
   "s281846ef0421c71f": `November`,
   "s2ceb11be2290bb1b": `Avbryt`,
   "s39938ecdae568740": `September`,
+  "s3b8a6245b12fa2ad": `Br\xF6dsmulor`,
   "s407a88a592a0987c": `Augusti`,
   "s46d6587089bd0356": `N\xE4sta m\xE5nad`,
   "s49730f3d5751a433": `Laddar...`,

package/generated/react/breadcrumbs/index.d.ts

@@ -0,0 +1,383 @@
+import { getReactComponent } from "../../../utils/react";
+import { GdsBreadcrumbs as GdsBreadcrumbsClass } from "../../../components/breadcrumbs/breadcrumbs.component";
+export declare const GdsBreadcrumbs: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsBreadcrumbsClass>>>) => import("react").ReactElement<Omit<{
+    size?: "small" | "large" | undefined;
+    label?: string | undefined;
+    render?: (() => import("lit-html").TemplateResult<1>) | undefined;
+    'align-self'?: string | undefined;
+    'justify-self'?: string | undefined;
+    'place-self'?: string | undefined;
+    'grid-column'?: string | undefined;
+    'grid-row'?: string | undefined;
+    'grid-area'?: string | undefined;
+    flex?: string | undefined;
+    width?: string | undefined;
+    'min-width'?: string | undefined;
+    'max-width'?: string | undefined;
+    'inline-size'?: string | undefined;
+    'min-inline-size'?: string | undefined;
+    'max-inline-size'?: string | undefined;
+    margin?: string | undefined;
+    'margin-inline'?: string | undefined;
+    'margin-block'?: string | undefined;
+    gdsElementName?: string | undefined;
+    _isUsingTransitionalStyles?: boolean | undefined;
+    _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
+    connectedCallback?: (() => void) | undefined;
+    disconnectedCallback?: (() => void) | undefined;
+    readonly renderOptions?: import("lit-html").RenderOptions | undefined;
+    readonly renderRoot?: HTMLElement | DocumentFragment | undefined;
+    isUpdatePending?: boolean | undefined;
+    hasUpdated?: boolean | undefined;
+    addController?: ((controller: import("lit").ReactiveController) => void) | undefined;
+    removeController?: ((controller: import("lit").ReactiveController) => void) | undefined;
+    attributeChangedCallback?: ((name: string, _old: string | null, value: string | null) => void) | undefined;
+    requestUpdate?: ((name?: PropertyKey | undefined, oldValue?: unknown, options?: import("lit").PropertyDeclaration<unknown, unknown> | undefined) => void) | undefined;
+    readonly updateComplete?: Promise<boolean> | undefined;
+    accessKey?: string | undefined;
+    readonly accessKeyLabel?: string | undefined;
+    autocapitalize?: string | undefined;
+    dir?: string | undefined;
+    draggable?: boolean | undefined;
+    hidden?: boolean | undefined;
+    inert?: boolean | undefined;
+    innerText?: string | undefined;
+    lang?: string | undefined;
+    readonly offsetHeight?: number | undefined;
+    readonly offsetLeft?: number | undefined;
+    readonly offsetParent?: Element | null | undefined;
+    readonly offsetTop?: number | undefined;
+    readonly offsetWidth?: number | undefined;
+    outerText?: string | undefined;
+    popover?: string | null | undefined;
+    spellcheck?: boolean | undefined;
+    title?: string | undefined;
+    translate?: boolean | undefined;
+    attachInternals?: (() => ElementInternals) | undefined;
+    click?: (() => void) | undefined;
+    hidePopover?: (() => void) | undefined;
+    showPopover?: (() => void) | undefined;
+    togglePopover?: ((force?: boolean | undefined) => boolean) | undefined;
+    addEventListener?: {
+        <K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+    } | undefined;
+    removeEventListener?: {
+        <K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+    } | undefined;
+    readonly attributes?: NamedNodeMap | undefined;
+    readonly classList?: DOMTokenList | undefined;
+    className?: string | undefined;
+    readonly clientHeight?: number | undefined;
+    readonly clientLeft?: number | undefined;
+    readonly clientTop?: number | undefined;
+    readonly clientWidth?: number | undefined;
+    id?: string | undefined;
+    readonly localName?: string | undefined;
+    readonly namespaceURI?: string | null | undefined;
+    onfullscreenchange?: ((this: Element, ev: Event) => any) | null | undefined;
+    onfullscreenerror?: ((this: Element, ev: Event) => any) | null | undefined;
+    outerHTML?: string | undefined;
+    readonly ownerDocument?: Document | undefined;
+    readonly part?: DOMTokenList | undefined;
+    readonly prefix?: string | null | undefined;
+    readonly scrollHeight?: number | undefined;
+    scrollLeft?: number | undefined;
+    scrollTop?: number | undefined;
+    readonly scrollWidth?: number | undefined;
+    readonly shadowRoot?: ShadowRoot | null | undefined;
+    slot?: string | undefined;
+    readonly tagName?: string | undefined;
+    attachShadow?: ((init: ShadowRootInit) => ShadowRoot) | undefined;
+    checkVisibility?: ((options?: CheckVisibilityOptions | undefined) => boolean) | undefined;
+    closest?: {
+        <K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+        <K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        <K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
+        <E extends Element = Element>(selectors: string): E | null;
+    } | undefined;
+    computedStyleMap?: (() => StylePropertyMapReadOnly) | undefined;
+    getAttribute?: ((qualifiedName: string) => string | null) | undefined;
+    getAttributeNS?: ((namespace: string | null, localName: string) => string | null) | undefined;
+    getAttributeNames?: (() => string[]) | undefined;
+    getAttributeNode?: ((qualifiedName: string) => Attr | null) | undefined;
+    getAttributeNodeNS?: ((namespace: string | null, localName: string) => Attr | null) | undefined;
+    getBoundingClientRect?: (() => DOMRect) | undefined;
+    getClientRects?: (() => DOMRectList) | undefined;
+    getElementsByClassName?: ((classNames: string) => HTMLCollectionOf<Element>) | undefined;
+    getElementsByTagName?: {
+        <K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>;
+        <K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>;
+        <K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
+        <K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>;
+        (qualifiedName: string): HTMLCollectionOf<Element>;
+    } | undefined;
+    getElementsByTagNameNS?: {
+        (namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        (namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        (namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+        (namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    } | undefined;
+    hasAttribute?: ((qualifiedName: string) => boolean) | undefined;
+    hasAttributeNS?: ((namespace: string | null, localName: string) => boolean) | undefined;
+    hasAttributes?: (() => boolean) | undefined;
+    hasPointerCapture?: ((pointerId: number) => boolean) | undefined;
+    insertAdjacentElement?: ((where: InsertPosition, element: Element) => Element | null) | undefined;
+    insertAdjacentHTML?: ((position: InsertPosition, text: string) => void) | undefined;
+    insertAdjacentText?: ((where: InsertPosition, data: string) => void) | undefined;
+    matches?: ((selectors: string) => boolean) | undefined;
+    releasePointerCapture?: ((pointerId: number) => void) | undefined;
+    removeAttribute?: ((qualifiedName: string) => void) | undefined;
+    removeAttributeNS?: ((namespace: string | null, localName: string) => void) | undefined;
+    removeAttributeNode?: ((attr: Attr) => Attr) | undefined;
+    requestFullscreen?: ((options?: FullscreenOptions | undefined) => Promise<void>) | undefined;
+    requestPointerLock?: (() => void) | undefined;
+    scroll?: {
+        (options?: ScrollToOptions | undefined): void;
+        (x: number, y: number): void;
+    } | undefined;
+    scrollBy?: {
+        (options?: ScrollToOptions | undefined): void;
+        (x: number, y: number): void;
+    } | undefined;
+    scrollIntoView?: ((arg?: boolean | ScrollIntoViewOptions | undefined) => void) | undefined;
+    scrollTo?: {
+        (options?: ScrollToOptions | undefined): void;
+        (x: number, y: number): void;
+    } | undefined;
+    setAttribute?: ((qualifiedName: string, value: string) => void) | undefined;
+    setAttributeNS?: ((namespace: string | null, qualifiedName: string, value: string) => void) | undefined;
+    setAttributeNode?: ((attr: Attr) => Attr | null) | undefined;
+    setAttributeNodeNS?: ((attr: Attr) => Attr | null) | undefined;
+    setPointerCapture?: ((pointerId: number) => void) | undefined;
+    toggleAttribute?: ((qualifiedName: string, force?: boolean | undefined) => boolean) | undefined;
+    webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+    readonly baseURI?: string | undefined;
+    readonly childNodes?: NodeListOf<ChildNode> | undefined;
+    readonly firstChild?: ChildNode | null | undefined;
+    readonly isConnected?: boolean | undefined;
+    readonly lastChild?: ChildNode | null | undefined;
+    readonly nextSibling?: ChildNode | null | undefined;
+    readonly nodeName?: string | undefined;
+    readonly nodeType?: number | undefined;
+    nodeValue?: string | null | undefined;
+    readonly parentElement?: HTMLElement | null | undefined;
+    readonly parentNode?: ParentNode | null | undefined;
+    readonly previousSibling?: ChildNode | null | undefined;
+    textContent?: string | null | undefined;
+    appendChild?: (<T extends Node>(node: T) => T) | undefined;
+    cloneNode?: ((deep?: boolean | undefined) => Node) | undefined;
+    compareDocumentPosition?: ((other: Node) => number) | undefined;
+    contains?: ((other: Node | null) => boolean) | undefined;
+    getRootNode?: ((options?: GetRootNodeOptions | undefined) => Node) | undefined;
+    hasChildNodes?: (() => boolean) | undefined;
+    insertBefore?: (<T_1 extends Node>(node: T_1, child: Node | null) => T_1) | undefined;
+    isDefaultNamespace?: ((namespace: string | null) => boolean) | undefined;
+    isEqualNode?: ((otherNode: Node | null) => boolean) | undefined;
+    isSameNode?: ((otherNode: Node | null) => boolean) | undefined;
+    lookupNamespaceURI?: ((prefix: string | null) => string | null) | undefined;
+    lookupPrefix?: ((namespace: string | null) => string | null) | undefined;
+    normalize?: (() => void) | undefined;
+    removeChild?: (<T_2 extends Node>(child: T_2) => T_2) | undefined;
+    replaceChild?: (<T_3 extends Node>(node: Node, child: T_3) => T_3) | undefined;
+    readonly ELEMENT_NODE?: 1 | undefined;
+    readonly ATTRIBUTE_NODE?: 2 | undefined;
+    readonly TEXT_NODE?: 3 | undefined;
+    readonly CDATA_SECTION_NODE?: 4 | undefined;
+    readonly ENTITY_REFERENCE_NODE?: 5 | undefined;
+    readonly ENTITY_NODE?: 6 | undefined;
+    readonly PROCESSING_INSTRUCTION_NODE?: 7 | undefined;
+    readonly COMMENT_NODE?: 8 | undefined;
+    readonly DOCUMENT_NODE?: 9 | undefined;
+    readonly DOCUMENT_TYPE_NODE?: 10 | undefined;
+    readonly DOCUMENT_FRAGMENT_NODE?: 11 | undefined;
+    readonly NOTATION_NODE?: 12 | undefined;
+    readonly DOCUMENT_POSITION_DISCONNECTED?: 1 | undefined;
+    readonly DOCUMENT_POSITION_PRECEDING?: 2 | undefined;
+    readonly DOCUMENT_POSITION_FOLLOWING?: 4 | undefined;
+    readonly DOCUMENT_POSITION_CONTAINS?: 8 | undefined;
+    readonly DOCUMENT_POSITION_CONTAINED_BY?: 16 | undefined;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC?: 32 | undefined;
+    dispatchEvent?: ((event: Event) => boolean) | undefined;
+    ariaAtomic?: string | null | undefined;
+    ariaAutoComplete?: string | null | undefined;
+    ariaBusy?: string | null | undefined;
+    ariaChecked?: string | null | undefined;
+    ariaColCount?: string | null | undefined;
+    ariaColIndex?: string | null | undefined;
+    ariaColSpan?: string | null | undefined;
+    ariaCurrent?: string | null | undefined;
+    ariaDescription?: string | null | undefined;
+    ariaDisabled?: string | null | undefined;
+    ariaExpanded?: string | null | undefined;
+    ariaHasPopup?: string | null | undefined;
+    ariaHidden?: string | null | undefined;
+    ariaInvalid?: string | null | undefined;
+    ariaKeyShortcuts?: string | null | undefined;
+    ariaLabel?: string | null | undefined;
+    ariaLevel?: string | null | undefined;
+    ariaLive?: string | null | undefined;
+    ariaModal?: string | null | undefined;
+    ariaMultiLine?: string | null | undefined;
+    ariaMultiSelectable?: string | null | undefined;
+    ariaOrientation?: string | null | undefined;
+    ariaPlaceholder?: string | null | undefined;
+    ariaPosInSet?: string | null | undefined;
+    ariaPressed?: string | null | undefined;
+    ariaReadOnly?: string | null | undefined;
+    ariaRequired?: string | null | undefined;
+    ariaRoleDescription?: string | null | undefined;
+    ariaRowCount?: string | null | undefined;
+    ariaRowIndex?: string | null | undefined;
+    ariaRowSpan?: string | null | undefined;
+    ariaSelected?: string | null | undefined;
+    ariaSetSize?: string | null | undefined;
+    ariaSort?: string | null | undefined;
+    ariaValueMax?: string | null | undefined;
+    ariaValueMin?: string | null | undefined;
+    ariaValueNow?: string | null | undefined;
+    ariaValueText?: string | null | undefined;
+    role?: string | null | undefined;
+    animate?: ((keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined) => Animation) | undefined;
+    getAnimations?: ((options?: GetAnimationsOptions | undefined) => Animation[]) | undefined;
+    after?: ((...nodes: (string | Node)[]) => void) | undefined;
+    before?: ((...nodes: (string | Node)[]) => void) | undefined;
+    remove?: (() => void) | undefined;
+    replaceWith?: ((...nodes: (string | Node)[]) => void) | undefined;
+    innerHTML?: string | undefined;
+    readonly nextElementSibling?: Element | null | undefined;
+    readonly previousElementSibling?: Element | null | undefined;
+    readonly childElementCount?: number | undefined;
+    readonly children?: HTMLCollection | undefined;
+    readonly firstElementChild?: Element | null | undefined;
+    readonly lastElementChild?: Element | null | undefined;
+    append?: ((...nodes: (string | Node)[]) => void) | undefined;
+    prepend?: ((...nodes: (string | Node)[]) => void) | undefined;
+    querySelector?: {
+        <K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null;
+        <K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null;
+        <K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
+        <K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null;
+        <E_1 extends Element = Element>(selectors: string): E_1 | null;
+    } | undefined;
+    querySelectorAll?: {
+        <K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>;
+        <K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>;
+        <K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
+        <K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>;
+        <E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+    } | undefined;
+    replaceChildren?: ((...nodes: (string | Node)[]) => void) | undefined;
+    readonly assignedSlot?: HTMLSlotElement | null | undefined;
+    readonly attributeStyleMap?: StylePropertyMap | undefined;
+    readonly style?: CSSStyleDeclaration | undefined;
+    contentEditable?: string | undefined;
+    enterKeyHint?: string | undefined;
+    inputMode?: string | undefined;
+    readonly isContentEditable?: boolean | undefined;
+    onabort?: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null | undefined;
+    onanimationcancel?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onanimationend?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onanimationiteration?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onanimationstart?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
+    onauxclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onbeforeinput?: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null | undefined;
+    onbeforetoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onblur?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
+    oncancel?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncanplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncanplaythrough?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onclose?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncontextmenu?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    oncopy?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
+    oncuechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncut?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
+    ondblclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    ondrag?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragend?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragenter?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragleave?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragover?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondragstart?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondrop?: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null | undefined;
+    ondurationchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onemptied?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onended?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onerror?: OnErrorEventHandler | undefined;
+    onfocus?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
+    onformdata?: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null | undefined;
+    ongotpointercapture?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    oninput?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oninvalid?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onkeydown?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
+    onkeypress?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
+    onkeyup?: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null | undefined;
+    onload?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onloadeddata?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onloadedmetadata?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onloadstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onlostpointercapture?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onmousedown?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseenter?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseleave?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmousemove?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseout?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseover?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onmouseup?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    onpaste?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
+    onpause?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onplaying?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onpointercancel?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerdown?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerenter?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerleave?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointermove?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerout?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerover?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onpointerup?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+    onprogress?: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null | undefined;
+    onratechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onreset?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onresize?: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null | undefined;
+    onscroll?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onscrollend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onsecuritypolicyviolation?: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null | undefined;
+    onseeked?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onseeking?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onselect?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onselectionchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onselectstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onslotchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onstalled?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onsubmit?: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null | undefined;
+    onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    ontoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontransitioncancel?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    ontransitionend?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    ontransitionrun?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    ontransitionstart?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
+    onvolumechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwaiting?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkitanimationend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkitanimationiteration?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkitanimationstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwebkittransitionend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    onwheel?: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null | undefined;
+    autofocus?: boolean | undefined;
+    readonly dataset?: DOMStringMap | undefined;
+    nonce?: string | undefined;
+    tabIndex?: number | undefined;
+    blur?: (() => void) | undefined;
+    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
+}, "children"> & {
+    children?: import("react").ReactNode;
+} & Omit<import("react").HTMLAttributes<HTMLElement>, "children"> & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;

package/generated/react/breadcrumbs/index.js

@@ -0,0 +1,13 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsBreadcrumbs as GdsBreadcrumbsClass } from "../../../components/breadcrumbs/breadcrumbs.component.js";
+import { createElement } from "react";
+const GdsBreadcrumbs = (props) => {
+  GdsBreadcrumbsClass.define();
+  const JSXElement = getReactComponent("gds-breadcrumbs");
+  const propsWithClass = { ...props, class: props.className };
+  return createElement(JSXElement, propsWithClass);
+};
+export {
+  GdsBreadcrumbs
+};

package/generated/react/form-control-footer/index.d.ts

@@ -2,12 +2,12 @@ import { getReactComponent } from "../../../utils/react";
 import { GdsFormControlFooter as GdsFormControlFooterClass } from "../../../primitives/form-control-footer/form-control-footer.component";
 export declare const GdsFormControlFooter: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsFormControlFooterClass>>>) => import("react").ReactElement<Omit<{
     charCounter?: number | undefined;
-    validationMessage?: string | undefined;
+    errorMessage?: string | undefined;
+    connectedCallback?: (() => void) | undefined;
     render?: (() => any) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
-    connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     readonly renderOptions?: import("lit-html").RenderOptions | undefined;
     readonly renderRoot?: HTMLElement | DocumentFragment | undefined;

package/generated/react/index.d.ts

@@ -1,5 +1,6 @@
 export * from './badge/index.js';
 export * from './blur/index.js';
+export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
@@ -48,6 +49,9 @@ export * from './filter-chip/index.js';
 export * from './formatted-account/index.js';
 export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
+export * from './radio-group/index.js';
+export * from './segment/index.js';
+export * from './sensitive-account/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -335,8 +339,5 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
-export * from './radio-group/index.js';
-export * from './segment/index.js';
-export * from './sensitive-account/index.js';
 export * from './sensitive-date/index.js';
 export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -1,5 +1,6 @@
 export * from "./badge/index.js";
 export * from "./blur/index.js";
+export * from "./breadcrumbs/index.js";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
@@ -48,6 +49,9 @@ export * from "./filter-chip/index.js";
 export * from "./formatted-account/index.js";
 export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
+export * from "./radio-group/index.js";
+export * from "./segment/index.js";
+export * from "./sensitive-account/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -335,8 +339,5 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
-export * from "./radio-group/index.js";
-export * from "./segment/index.js";
-export * from "./sensitive-account/index.js";
 export * from "./sensitive-date/index.js";
 export * from "./sensitive-number/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.80.0",
+  "version": "1.82.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -47,6 +47,8 @@
     "./components/badge/index.js",
     "./components/blur/blur.js",
     "./components/blur/index.js",
+    "./components/breadcrumbs/breadcrumbs.js",
+    "./components/breadcrumbs/index.js",
     "./components/button/button.js",
     "./components/button/index.js",
     "./components/calendar/calendar.js",

package/primitives/form-control-footer/form-control-footer.component.d.ts

@@ -6,6 +6,8 @@ export declare class GdsFormControlFooter extends GdsElement {
     #private;
     static styles: import("lit").CSSResult[];
     charCounter?: number;
-    validationMessage?: string;
+    errorMessage?: string;
+    private _handleVisibilityChange;
+    connectedCallback(): void;
     render(): any;
 }

package/primitives/form-control-footer/form-control-footer.component.js

@@ -9,6 +9,7 @@ import { when } from "lit/directives/when.js";
 import { GdsBadge } from "../../components/badge/badge.component.js";
 import { IconTriangleExclamation } from "../../components/icon/icons/triangle-exclamation.component.js";
 import { GdsElement } from "../../gds-element.js";
+import { watch } from "../../utils/decorators/watch.js";
 import {
   gdsCustomElement,
   html
@@ -19,22 +20,32 @@ let GdsFormControlFooter = class extends GdsElement {
     super(...arguments);
     __privateAdd(this, _renderRemainingCharsBadge);
   }
+  _handleVisibilityChange() {
+    this.classList.toggle(
+      "visually-hidden",
+      !this.errorMessage && !this.charCounter
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleVisibilityChange();
+  }
   render() {
     return html`<div aria-live="polite">
       <div class="error-message">
         <slot name="message"
           >${when(
-      this.validationMessage,
+      this.errorMessage,
       () => html`
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
-              ${this.validationMessage}
+              ${this.errorMessage}
             `
     )}</slot
         >
       </div>
-      <div class="char-counter">
+      <div class="char-counter" aria-hidden="true">
         ${when(
       Number.isInteger(this.charCounter),
       () => __privateMethod(this, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn).call(this, this.charCounter)
@@ -61,7 +72,11 @@ __decorateClass([
 ], GdsFormControlFooter.prototype, "charCounter", 2);
 __decorateClass([
   property()
-], GdsFormControlFooter.prototype, "validationMessage", 2);
+], GdsFormControlFooter.prototype, "errorMessage", 2);
+__decorateClass([
+  watch("charCounter"),
+  watch("errorMessage")
+], GdsFormControlFooter.prototype, "_handleVisibilityChange", 1);
 GdsFormControlFooter = __decorateClass([
   gdsCustomElement("gds-form-control-footer", {
     dependsOn: [GdsBadge, IconTriangleExclamation]

package/primitives/form-control-footer/form-control-footer.styles.js

@@ -3,6 +3,14 @@ import { css } from "lit";
 const styles = css`
   @layer base, reset, transitional-styles;
   @layer base {
+    :host(.visually-hidden) {
+      position: absolute;
+      clip: rect(0 0 0 0);
+      width: 0px;
+      height: 0px;
+      overflow: hidden;
+    }
+
     :host > *:not(style) {
       display: flex;
       justify-content: space-between;

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-d6c10a";
+const VER_SUFFIX = "-bddd3f";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])