@sebgroup/green-core 2.11.0 → 2.12.0

package/generated/react/sensitive-number/index.d.ts

@@ -40,6 +40,9 @@ export declare const GdsSensitiveNumber: (props: React.ComponentProps<ReturnType
     'flex-wrap'?: string | undefined;
     'place-items'?: string | undefined;
     'place-content'?: string | undefined;
+    'aspect-ratio'?: string | undefined;
+    cursor?: string | undefined;
+    'pointer-events'?: string | undefined;
     width?: string | undefined;
     'min-width'?: string | undefined;
     'max-width'?: string | undefined;

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

@@ -35,6 +35,9 @@ export declare const GdsText: (props: React.ComponentProps<ReturnType<typeof get
     'flex-wrap'?: string | undefined;
     'place-items'?: string | undefined;
     'place-content'?: string | undefined;
+    'aspect-ratio'?: string | undefined;
+    cursor?: string | undefined;
+    'pointer-events'?: string | undefined;
     width?: string | undefined;
     'min-width'?: string | undefined;
     'max-width'?: string | undefined;

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": "2.11.0",
+  "version": "2.12.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -66,6 +66,8 @@
     "./components/calendar/calendar.js",
     "./components/calendar/functions.js",
     "./components/calendar/index.js",
+    "./components/card-linked/card-linked.js",
+    "./components/card-linked/index.js",
     "./components/card/card.js",
     "./components/card/index.js",
     "./components/checkbox/checkbox-group/checkbox-group.js",
@@ -464,7 +466,6 @@
     "./components/popover/backdrop.js",
     "./components/popover/index.js",
     "./components/popover/popover.js",
-    "./components/pure.js",
     "./components/radio/index.js",
     "./components/radio/radio-group/radio-group.js",
     "./components/radio/radio.js",
@@ -495,6 +496,9 @@
     "./components/theme/theme.js",
     "./components/video/index.js",
     "./components/video/video.js",
+    "./patterns/card-pattern-01/card-pattern-01.js",
+    "./patterns/card-pattern-01/index.js",
+    "./patterns/index.js",
     "./primitives/field-base/field-base.js",
     "./primitives/field-base/index.js",
     "./primitives/form-control-footer/form-control-footer.js",

package/patterns/card-pattern-01/card-pattern-01.component.d.ts

@@ -0,0 +1,48 @@
+import { GdsElement } from '../../gds-element';
+declare const GdsCardPattern01_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/props-link").LinkProps) & (new (...args: any[]) => import("../../utils/mixins/props-image").ImageProps) & typeof GdsElement;
+/**
+ * @element gds-card-pattern-01
+ * @status beta
+ *
+ * @slot header - Custom header content
+ * @slot footer - Action items (buttons, links)
+ *
+ */
+export declare class GdsCardPattern01 extends GdsCardPattern01_base {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The main title of the card
+     */
+    title: string;
+    /**
+     * A brief description or summary text
+     */
+    excerpt: string;
+    /**
+     * Optional label text used on the linked card footer decorative element.
+     */
+    label: string;
+    /**
+     * Card background variant
+     */
+    variant: 'neutral-01' | 'neutral-02';
+    /**
+     * Enables border styling
+     * Designed to work with neutral-02 variant
+     */
+    outlined: boolean;
+    /**
+     * HTML tag for the card title
+     * Controls heading level for accessibility
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Aspect ratio/format of the card's media section
+     * - landscape: 16:9 or similar horizontal format
+     * - square: 1:1 square format
+     */
+    ratio: 'landscape' | 'square';
+    render(): any;
+}
+export {};

package/patterns/card-pattern-01/card-pattern-01.component.js

@@ -0,0 +1,258 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _GdsCardPattern01_instances, hasFooterContent_fn, getVariant_fn, getClasses_fn, renderLinkedCard_fn, renderLinkedFooter_fn, renderStaticCard_fn, renderStaticFooter_fn, renderCardContent_fn;
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+import { GdsCardLinked } from "../../components/card-linked/card-linked.component.js";
+import { GdsCard } from "../../components/card/card.component.js";
+import { GdsFlex } from "../../components/flex/flex.component.js";
+import { IconChainLink } from "../../components/icon/icons/chain-link.js";
+import { GdsImg } from "../../components/img/img.component.js";
+import { GdsText } from "../../components/text/text.component.js";
+import { GdsElement } from "../../gds-element.js";
+import { tokens } from "../../tokens.style.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { withImageProps } from "../../utils/mixins/props-image.js";
+import { withLinkProps } from "../../utils/mixins/props-link.js";
+import CardPattern01Styles from "./card-pattern-01.styles.js";
+let GdsCardPattern01 = class extends withSizeXProps(
+  withMarginProps(
+    withLayoutChildProps(withLinkProps(withImageProps(GdsElement)))
+  )
+) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _GdsCardPattern01_instances);
+    this.title = "";
+    this.excerpt = "";
+    this.label = "";
+    this.variant = "neutral-01";
+    this.outlined = false;
+    this.tag = "h2";
+    this.ratio = "landscape";
+  }
+  render() {
+    return when(
+      this.href,
+      () => __privateMethod(this, _GdsCardPattern01_instances, renderLinkedCard_fn).call(this),
+      () => __privateMethod(this, _GdsCardPattern01_instances, renderStaticCard_fn).call(this)
+    );
+  }
+};
+_GdsCardPattern01_instances = new WeakSet();
+/**
+ * Checks if footer content exists
+ * @param isLinked - Determines if label should be considered for linked cards
+ */
+hasFooterContent_fn = function(isLinked = false) {
+  return isLinked && this.label || this.querySelector('[slot="footer"]');
+};
+/**
+ * Determines card variant based on neutral-01/02 and outlined state
+ * neutral-01 → primary
+ * neutral-02 + outlined → secondary
+ * neutral-02 → tertiary
+ */
+getVariant_fn = function() {
+  switch (this.variant) {
+    case "neutral-02":
+      return this.outlined ? "secondary" : "tertiary";
+    case "neutral-01":
+    default:
+      return "primary";
+  }
+};
+getClasses_fn = function(type) {
+  return classMap({
+    card: true,
+    outlined: this.outlined,
+    [`card-${type}`]: !!type,
+    [`variant-${this.variant}`]: true,
+    [`ratio-${this.ratio}`]: true
+  });
+};
+/**
+ * Renders linked version of the card
+ * Includes href, target, and rel attributes
+ */
+renderLinkedCard_fn = function() {
+  return html`
+      <gds-card-linked
+        padding="0"
+        gap="0"
+        href=${ifDefined(this.href)}
+        target=${ifDefined(this.target)}
+        rel=${ifDefined(this.rel)}
+        variant=${__privateMethod(this, _GdsCardPattern01_instances, getVariant_fn).call(this)}
+        class=${__privateMethod(this, _GdsCardPattern01_instances, getClasses_fn).call(this, "linked")}
+      >
+        ${__privateMethod(this, _GdsCardPattern01_instances, renderCardContent_fn).call(this)}
+      </gds-card-linked>
+    `;
+};
+/**
+ * Renders footer for linked cards
+ * Includes accessibility attributes and default link
+ */
+renderLinkedFooter_fn = function() {
+  return when(
+    __privateMethod(this, _GdsCardPattern01_instances, hasFooterContent_fn).call(this, true),
+    () => html`
+        <gds-flex
+          font="detail-book-m"
+          align-items="center"
+          gap="s"
+          pointer-events="none"
+          aria-hidden="true"
+          inert
+        >
+          <slot name="footer">
+            ${when(
+      this.label,
+      () => html`
+                <gds-link href=${ifDefined(this.href)}>
+                  <gds-icon-chain-link slot="lead"></gds-icon-chain-link>
+                  ${this.label}
+                </gds-link>
+              `
+    )}
+          </slot>
+        </gds-flex>
+      `
+  );
+};
+/**
+ * Renders static version of the card
+ * Used when no href is provided
+ */
+renderStaticCard_fn = function() {
+  return html`
+      <gds-card
+        padding="0"
+        gap="0"
+        variant=${__privateMethod(this, _GdsCardPattern01_instances, getVariant_fn).call(this)}
+        class=${__privateMethod(this, _GdsCardPattern01_instances, getClasses_fn).call(this, "static")}
+      >
+        ${__privateMethod(this, _GdsCardPattern01_instances, renderCardContent_fn).call(this)}
+      </gds-card>
+    `;
+};
+/**
+ * Renders footer for static cards
+ * Simple slot without accessibility restrictions
+ */
+renderStaticFooter_fn = function() {
+  return when(
+    __privateMethod(this, _GdsCardPattern01_instances, hasFooterContent_fn).call(this),
+    () => html`
+        <gds-flex font="detail-book-m" align-items="center" gap="s">
+          <slot name="footer"></slot>
+        </gds-flex>
+      `
+  );
+};
+/**
+ * Renders card content structure
+ * Includes media, header slot, title/excerpt, and footer
+ * Header slot only shows when no media is present
+ */
+renderCardContent_fn = function() {
+  return html`
+      ${when(
+    this.src,
+    () => html`
+          <gds-flex padding="xs xs 0 xs">
+            <gds-img
+              src=${ifDefined(this.src)}
+              srcset=${ifDefined(this.srcset)}
+              sizes=${ifDefined(this.sizes)}
+              width="100%"
+              height="100%"
+              object-fit="cover"
+              object-position="center"
+              border-radius="xs"
+              aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
+              loading=${ifDefined(this.loading)}
+              decoding=${ifDefined(this.decoding)}
+              alt=${ifDefined(this.alt)}
+              class="card-media"
+            ></gds-img>
+          </gds-flex>
+        `
+  )}
+      <gds-flex flex-direction="column" gap="xl" padding="xl">
+        ${when(!this.src, () => html`<slot name="header"></slot>`)}
+        ${when(
+    this.title || this.excerpt,
+    () => html`
+            <gds-flex flex-direction="column" gap="xs">
+              ${when(
+      this.title,
+      () => html`
+                  <gds-text tag=${ifDefined(this.tag)} font="heading-s">
+                    ${this.title}
+                  </gds-text>
+                `
+    )}
+              ${when(
+      this.excerpt,
+      () => html`
+                  <gds-text tag="p" lines="3" font="body-regular-m">
+                    ${this.excerpt}
+                  </gds-text>
+                `
+    )}
+            </gds-flex>
+          `
+  )}
+        ${when(
+    this.href,
+    () => __privateMethod(this, _GdsCardPattern01_instances, renderLinkedFooter_fn).call(this),
+    () => __privateMethod(this, _GdsCardPattern01_instances, renderStaticFooter_fn).call(this)
+  )}
+      </gds-flex>
+    `;
+};
+GdsCardPattern01.styles = [tokens, CardPattern01Styles];
+__decorateClass([
+  property({ reflect: false })
+], GdsCardPattern01.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: false })
+], GdsCardPattern01.prototype, "excerpt", 2);
+__decorateClass([
+  property({ reflect: false })
+], GdsCardPattern01.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: false })
+], GdsCardPattern01.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: false })
+], GdsCardPattern01.prototype, "outlined", 2);
+__decorateClass([
+  property({ reflect: false })
+], GdsCardPattern01.prototype, "tag", 2);
+__decorateClass([
+  property({ reflect: false, attribute: "aspect-ratio" })
+], GdsCardPattern01.prototype, "ratio", 2);
+GdsCardPattern01 = __decorateClass([
+  gdsCustomElement("gds-card-pattern-01", {
+    dependsOn: [GdsCard, GdsCardLinked, GdsImg, GdsText, GdsFlex, IconChainLink]
+  })
+], GdsCardPattern01);
+export {
+  GdsCardPattern01
+};

package/patterns/card-pattern-01/card-pattern-01.d.ts

@@ -0,0 +1,2 @@
+import { GdsCardPattern01 } from './card-pattern-01.component';
+export { GdsCardPattern01 };

package/patterns/card-pattern-01/card-pattern-01.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { GdsCardPattern01 } from "./card-pattern-01.component.js";
+GdsCardPattern01.define();
+export {
+  GdsCardPattern01
+};

package/patterns/card-pattern-01/card-pattern-01.styles.d.ts

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

package/patterns/card-pattern-01/card-pattern-01.styles.js

@@ -0,0 +1,23 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    display: inline-block;
+    height: max-content;
+    text-align: left;
+  }
+
+  .card-media {
+    transition-timing-function: var(--gds-sys-motion-easing-linear);
+    transition-duration: var(--gds-sys-motion-duration-fast);
+    transition-property: opacity;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+`;
+var card_pattern_01_styles_default = style;
+export {
+  card_pattern_01_styles_default as default
+};

package/patterns/card-pattern-01/index.d.ts

@@ -0,0 +1 @@
+export * from './card-pattern-01';

package/patterns/card-pattern-01/index.js

@@ -0,0 +1 @@
+export * from "./card-pattern-01.js";

package/patterns/index.d.ts

@@ -0,0 +1 @@
+export * from './card-pattern-01/card-pattern-01';

package/patterns/index.js

@@ -0,0 +1 @@
+export * from "./card-pattern-01/card-pattern-01.js";

package/pure.d.ts

@@ -0,0 +1,50 @@
+export * from './primitives/listbox/option.component';
+export * from './primitives/menu/menu-heading.component';
+export * from './primitives/menu/menu-item.component';
+export * from './components/alert/alert.component';
+export * from './components/badge/badge.component';
+export * from './components/blur/blur.component';
+export * from './components/breadcrumbs/breadcrumbs.component';
+export * from './components/breadcrumbs/breadcrumb/breadcrumb.component';
+export * from './components/button/button.component';
+export * from './components/calendar/calendar.component';
+export * from './components/card/card.component';
+export * from './components/card-linked/card-linked.component';
+export * from './components/checkbox/checkbox-group/checkbox-group.component';
+export * from './components/checkbox/checkbox.component';
+export * from './components/coachmark/coachmark.component';
+export * from './components/context-menu/context-menu.component';
+export * from './components/datepicker/datepicker.component';
+export * from './components/dialog/dialog.component';
+export * from './components/div/div.component';
+export * from './components/divider/divider.component';
+export * from './components/dropdown/dropdown.component';
+export * from './components/fab/fab.component';
+export * from './components/filter-chips/filter-chips.component';
+export * from './components/flex/flex.component';
+export * from './components/form-summary/summary.component';
+export * from './components/grid/grid.component';
+export * from './components/grouped-list/grouped-list.component';
+export * from './components/icon/icon.component';
+export * from './components/icon/icons/pure';
+export * from './components/img/img.component';
+export * from './components/input/input.component';
+export * from './components/link/link.component';
+export * from './components/mask/mask.component';
+export * from './components/menu-button/menu-button.component';
+export * from './components/popover/popover.component';
+export * from './components/radio/radio-group/radio-group.component';
+export * from './components/radio/radio.component';
+export * from './components/rich-text/rich-text.component';
+export * from './components/segmented-control/segmented-control.component';
+export * from './components/sensitive/number/sensitive-number.component';
+export * from './components/sensitive/date/sensitive-date.component';
+export * from './components/sensitive/account/sensitive-account.component';
+export * from './components/select/select.component';
+export * from './components/signal/signal.component';
+export * from './components/spinner/spinner.component';
+export * from './components/text/text.component';
+export * from './components/textarea/textarea.component';
+export * from './components/theme/theme.component';
+export * from './components/video/video.component';
+export * from './patterns/card-pattern-01/card-pattern-01.component';

package/pure.js

@@ -0,0 +1,50 @@
+export * from "./primitives/listbox/option.component.js";
+export * from "./primitives/menu/menu-heading.component.js";
+export * from "./primitives/menu/menu-item.component.js";
+export * from "./components/alert/alert.component.js";
+export * from "./components/badge/badge.component.js";
+export * from "./components/blur/blur.component.js";
+export * from "./components/breadcrumbs/breadcrumbs.component.js";
+export * from "./components/breadcrumbs/breadcrumb/breadcrumb.component.js";
+export * from "./components/button/button.component.js";
+export * from "./components/calendar/calendar.component.js";
+export * from "./components/card/card.component.js";
+export * from "./components/card-linked/card-linked.component.js";
+export * from "./components/checkbox/checkbox-group/checkbox-group.component.js";
+export * from "./components/checkbox/checkbox.component.js";
+export * from "./components/coachmark/coachmark.component.js";
+export * from "./components/context-menu/context-menu.component.js";
+export * from "./components/datepicker/datepicker.component.js";
+export * from "./components/dialog/dialog.component.js";
+export * from "./components/div/div.component.js";
+export * from "./components/divider/divider.component.js";
+export * from "./components/dropdown/dropdown.component.js";
+export * from "./components/fab/fab.component.js";
+export * from "./components/filter-chips/filter-chips.component.js";
+export * from "./components/flex/flex.component.js";
+export * from "./components/form-summary/summary.component.js";
+export * from "./components/grid/grid.component.js";
+export * from "./components/grouped-list/grouped-list.component.js";
+export * from "./components/icon/icon.component.js";
+export * from "./components/icon/icons/pure.js";
+export * from "./components/img/img.component.js";
+export * from "./components/input/input.component.js";
+export * from "./components/link/link.component.js";
+export * from "./components/mask/mask.component.js";
+export * from "./components/menu-button/menu-button.component.js";
+export * from "./components/popover/popover.component.js";
+export * from "./components/radio/radio-group/radio-group.component.js";
+export * from "./components/radio/radio.component.js";
+export * from "./components/rich-text/rich-text.component.js";
+export * from "./components/segmented-control/segmented-control.component.js";
+export * from "./components/sensitive/number/sensitive-number.component.js";
+export * from "./components/sensitive/date/sensitive-date.component.js";
+export * from "./components/sensitive/account/sensitive-account.component.js";
+export * from "./components/select/select.component.js";
+export * from "./components/signal/signal.component.js";
+export * from "./components/spinner/spinner.component.js";
+export * from "./components/text/text.component.js";
+export * from "./components/textarea/textarea.component.js";
+export * from "./components/theme/theme.component.js";
+export * from "./components/video/video.component.js";
+export * from "./patterns/card-pattern-01/card-pattern-01.component.js";

package/tokens/variables.dark.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n\n  color-scheme: dark;\n  --gds-sys-color-l1-neutral-01: #0a0b0b;\n  --gds-sys-color-l1-neutral-02: #282a29;\n  --gds-sys-color-l1-brand-01: #003824;\n  --gds-sys-color-l1-inversed: #ffffff;\n  --gds-sys-color-l2-neutral-01: #191a1a;\n  --gds-sys-color-l2-neutral-02: #191a1a;\n  --gds-sys-color-l2-neutral-03: #3b3f3e;\n  --gds-sys-color-l2-brand-01: #003824;\n  --gds-sys-color-l2-brand-02: #231d10;\n  --gds-sys-color-l2-positive-01: #003d26;\n  --gds-sys-color-l2-negative-01: #451207;\n  --gds-sys-color-l2-warning-01: #482a05;\n  --gds-sys-color-l2-information-01: #1e201f;\n  --gds-sys-color-l2-notice-01: #00294d;\n  --gds-sys-color-l3-brand-01: #d5d7d7;\n  --gds-sys-color-l3-brand-02: #efe9dc;\n  --gds-sys-color-l3-brand-03: #e7ddcb;\n  --gds-sys-color-l3-neutral-01: #d5d7d7;\n  --gds-sys-color-l3-neutral-02: #282a29;\n  --gds-sys-color-l3-neutral-03: #3b3f3e;\n  --gds-sys-color-l3-neutral-04: #3b3f3e;\n  --gds-sys-color-l3-neutral-05: #003824;\n  --gds-sys-color-l3-positive-01: #026436;\n  --gds-sys-color-l3-positive-02: #015130;\n  --gds-sys-color-l3-positive-03: #003d26;\n  --gds-sys-color-l3-negative-01: #a22911;\n  --gds-sys-color-l3-negative-02: #731d0c;\n  --gds-sys-color-l3-negative-03: #5c170a;\n  --gds-sys-color-l3-notice-01: #005fb3;\n  --gds-sys-color-l3-notice-02: #004480;\n  --gds-sys-color-l3-notice-03: #003666;\n  --gds-sys-color-l3-warning-01: #f19e38;\n  --gds-sys-color-l3-warning-02: #774508;\n  --gds-sys-color-l3-warning-03: #5f3707;\n  --gds-sys-color-l3-information-01: #d5d7d7;\n  --gds-sys-color-l3-information-02: #313533;\n  --gds-sys-color-l3-information-03: #595f5d;\n  --gds-sys-color-l3-disabled-01: #595f5d;\n  --gds-sys-color-l3-disabled-02: #595f5d;\n  --gds-sys-color-l3-disabled-03: #818886;\n  --gds-sys-color-border-interactive: #a0a6a4;\n  --gds-sys-color-border-subtle-01: #595f5d;\n  --gds-sys-color-border-subtle-02: #777e7c;\n  --gds-sys-color-border-strong: #f7f8f7;\n  --gds-sys-color-border-inverse: #ffffff;\n  --gds-sys-color-border-information-01: #636967;\n  --gds-sys-color-border-positive-01: #8ae58d;\n  --gds-sys-color-border-negative-01: #f08975;\n  --gds-sys-color-border-warning-01: #f5b970;\n  --gds-sys-color-border-notice-01: #66b8ff;\n  --gds-sys-color-border-information-02: rgba(99, 105, 103, 0.4);\n  --gds-sys-color-border-positive-02: rgba(138, 229, 141, 0.4);\n  --gds-sys-color-border-negative-02: rgba(240, 137, 117, 0.4);\n  --gds-sys-color-border-warning-02: rgba(245, 185, 112, 0.4);\n  --gds-sys-color-border-notice-02: rgba(102, 184, 255, 0.4);\n  --gds-sys-color-content-neutral-01: #f7f8f7;\n  --gds-sys-color-content-neutral-02: #abb0ae;\n  --gds-sys-color-content-neutral-03: #0a0b0b;\n  --gds-sys-color-content-neutral-04: #595f5d;\n  --gds-sys-color-content-inversed: #f7f8f7;\n  --gds-sys-color-content-brand-01: #003824;\n  --gds-sys-color-content-brand-02: #d6c7a8;\n  --gds-sys-color-content-positive-01: #8ae58d;\n  --gds-sys-color-content-positive-02: #027839;\n  --gds-sys-color-content-positive-03: #8ae58d;\n  --gds-sys-color-content-negative-01: #f08975;\n  --gds-sys-color-content-negative-02: #f5b0a3;\n  --gds-sys-color-content-warning-01: #f5b970;\n  --gds-sys-color-content-warning-02: #fce8cf;\n  --gds-sys-color-content-notice-01: #66b8ff;\n  --gds-sys-color-content-notice-02: #99cfff;\n  --gds-sys-color-content-disabled-01: #cacecc;\n  --gds-sys-color-content-disabled-02: #cacecc;\n  --gds-sys-color-state-brand-01: #000000 20%;\n  --gds-sys-color-state-brand-02: #000000 30%;\n  --gds-sys-color-state-brand-03: #003824 30%;\n  --gds-sys-color-state-brand-04: #003824 70%;\n  --gds-sys-color-state-brand-05: #003824 50%;\n  --gds-sys-color-state-brand-06: #003824 90%;\n  --gds-sys-color-state-neutral-01: #000000 20%;\n  --gds-sys-color-state-neutral-02: #000000 35%;\n  --gds-sys-color-state-neutral-03: #ffffff 20%;\n  --gds-sys-color-state-neutral-04: #ffffff 30%;\n  --gds-sys-color-state-neutral-05: #ffffff 12%;\n  --gds-sys-color-state-neutral-06: #ffffff 25%;\n  --gds-sys-color-state-positive-01: #000000 12%;\n  --gds-sys-color-state-positive-02: #000000 23%;\n  --gds-sys-color-state-positive-03: #ffffff 8%;\n  --gds-sys-color-state-positive-04: #ffffff 14%;\n  --gds-sys-color-state-positive-05: #027839 30%;\n  --gds-sys-color-state-positive-06: #027839 50%;\n  --gds-sys-color-state-negative-01: #000000 15%;\n  --gds-sys-color-state-negative-02: #000000 30%;\n  --gds-sys-color-state-negative-03: #ffffff 8%;\n  --gds-sys-color-state-negative-04: #ffffff 14%;\n  --gds-sys-color-state-negative-05: #b92f13 30%;\n  --gds-sys-color-state-negative-06: #b92f13 45%;\n  --gds-sys-color-state-notice-01: #000000 12%;\n  --gds-sys-color-state-notice-02: #000000 20%;\n  --gds-sys-color-state-notice-03: #ffffff 6%;\n  --gds-sys-color-state-notice-04: #ffffff 10%;\n  --gds-sys-color-state-notice-05: #005fb3 40%;\n  --gds-sys-color-state-notice-06: #005fb3 60%;\n  --gds-sys-color-state-warning-01: #000000 6%;\n  --gds-sys-color-state-warning-02: #000000 14%;\n  --gds-sys-color-state-warning-03: #ffffff 8%;\n  --gds-sys-color-state-warning-04: #ffffff 14%;\n  --gds-sys-color-state-warning-05: #f19e38 12%;\n  --gds-sys-color-state-warning-06: #f19e38 20%;";
+const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n\n  color-scheme: dark;\n  --gds-sys-color-l1-neutral-01: #0a0b0b;\n  --gds-sys-color-l1-neutral-02: #0a0b0b;\n  --gds-sys-color-l1-brand-01: #003824;\n  --gds-sys-color-l1-inversed: #ffffff;\n  --gds-sys-color-l2-neutral-01: #191a1a;\n  --gds-sys-color-l2-neutral-02: #191a1a;\n  --gds-sys-color-l2-neutral-03: #3b3f3e;\n  --gds-sys-color-l2-brand-01: #003824;\n  --gds-sys-color-l2-brand-02: #231d10;\n  --gds-sys-color-l2-positive-01: #003d26;\n  --gds-sys-color-l2-negative-01: #451207;\n  --gds-sys-color-l2-warning-01: #482a05;\n  --gds-sys-color-l2-information-01: #1e201f;\n  --gds-sys-color-l2-notice-01: #00294d;\n  --gds-sys-color-l3-brand-01: #d5d7d7;\n  --gds-sys-color-l3-brand-02: #efe9dc;\n  --gds-sys-color-l3-brand-03: #e7ddcb;\n  --gds-sys-color-l3-neutral-01: #d5d7d7;\n  --gds-sys-color-l3-neutral-02: #282a29;\n  --gds-sys-color-l3-neutral-03: #3b3f3e;\n  --gds-sys-color-l3-neutral-04: #3b3f3e;\n  --gds-sys-color-l3-neutral-05: #003824;\n  --gds-sys-color-l3-positive-01: #026436;\n  --gds-sys-color-l3-positive-02: #015130;\n  --gds-sys-color-l3-positive-03: #003d26;\n  --gds-sys-color-l3-negative-01: #a22911;\n  --gds-sys-color-l3-negative-02: #731d0c;\n  --gds-sys-color-l3-negative-03: #5c170a;\n  --gds-sys-color-l3-notice-01: #005fb3;\n  --gds-sys-color-l3-notice-02: #004480;\n  --gds-sys-color-l3-notice-03: #003666;\n  --gds-sys-color-l3-warning-01: #f19e38;\n  --gds-sys-color-l3-warning-02: #774508;\n  --gds-sys-color-l3-warning-03: #5f3707;\n  --gds-sys-color-l3-information-01: #d5d7d7;\n  --gds-sys-color-l3-information-02: #313533;\n  --gds-sys-color-l3-information-03: #595f5d;\n  --gds-sys-color-l3-disabled-01: #595f5d;\n  --gds-sys-color-l3-disabled-02: #595f5d;\n  --gds-sys-color-l3-disabled-03: #818886;\n  --gds-sys-color-border-interactive: #a0a6a4;\n  --gds-sys-color-border-subtle-01: #595f5d;\n  --gds-sys-color-border-subtle-02: #777e7c;\n  --gds-sys-color-border-strong: #f7f8f7;\n  --gds-sys-color-border-inverse: #ffffff;\n  --gds-sys-color-border-information-01: #636967;\n  --gds-sys-color-border-positive-01: #8ae58d;\n  --gds-sys-color-border-negative-01: #f08975;\n  --gds-sys-color-border-warning-01: #f5b970;\n  --gds-sys-color-border-notice-01: #66b8ff;\n  --gds-sys-color-border-information-02: rgba(99, 105, 103, 0.4);\n  --gds-sys-color-border-positive-02: rgba(138, 229, 141, 0.4);\n  --gds-sys-color-border-negative-02: rgba(240, 137, 117, 0.4);\n  --gds-sys-color-border-warning-02: rgba(245, 185, 112, 0.4);\n  --gds-sys-color-border-notice-02: rgba(102, 184, 255, 0.4);\n  --gds-sys-color-content-neutral-01: #f7f8f7;\n  --gds-sys-color-content-neutral-02: #abb0ae;\n  --gds-sys-color-content-neutral-03: #0a0b0b;\n  --gds-sys-color-content-neutral-04: #595f5d;\n  --gds-sys-color-content-inversed: #f7f8f7;\n  --gds-sys-color-content-brand-01: #003824;\n  --gds-sys-color-content-brand-02: #d6c7a8;\n  --gds-sys-color-content-positive-01: #8ae58d;\n  --gds-sys-color-content-positive-02: #027839;\n  --gds-sys-color-content-positive-03: #8ae58d;\n  --gds-sys-color-content-negative-01: #f08975;\n  --gds-sys-color-content-negative-02: #f5b0a3;\n  --gds-sys-color-content-warning-01: #f5b970;\n  --gds-sys-color-content-warning-02: #fce8cf;\n  --gds-sys-color-content-notice-01: #66b8ff;\n  --gds-sys-color-content-notice-02: #99cfff;\n  --gds-sys-color-content-disabled-01: #cacecc;\n  --gds-sys-color-content-disabled-02: #cacecc;\n  --gds-sys-color-state-brand-01: #000000 20%;\n  --gds-sys-color-state-brand-02: #000000 30%;\n  --gds-sys-color-state-brand-03: #003824 30%;\n  --gds-sys-color-state-brand-04: #003824 70%;\n  --gds-sys-color-state-brand-05: #003824 50%;\n  --gds-sys-color-state-brand-06: #003824 90%;\n  --gds-sys-color-state-neutral-01: #000000 20%;\n  --gds-sys-color-state-neutral-02: #000000 35%;\n  --gds-sys-color-state-neutral-03: #ffffff 20%;\n  --gds-sys-color-state-neutral-04: #ffffff 30%;\n  --gds-sys-color-state-neutral-05: #ffffff 12%;\n  --gds-sys-color-state-neutral-06: #ffffff 25%;\n  --gds-sys-color-state-positive-01: #000000 12%;\n  --gds-sys-color-state-positive-02: #000000 23%;\n  --gds-sys-color-state-positive-03: #ffffff 8%;\n  --gds-sys-color-state-positive-04: #ffffff 14%;\n  --gds-sys-color-state-positive-05: #027839 30%;\n  --gds-sys-color-state-positive-06: #027839 50%;\n  --gds-sys-color-state-negative-01: #000000 15%;\n  --gds-sys-color-state-negative-02: #000000 30%;\n  --gds-sys-color-state-negative-03: #ffffff 8%;\n  --gds-sys-color-state-negative-04: #ffffff 14%;\n  --gds-sys-color-state-negative-05: #b92f13 30%;\n  --gds-sys-color-state-negative-06: #b92f13 45%;\n  --gds-sys-color-state-notice-01: #000000 12%;\n  --gds-sys-color-state-notice-02: #000000 20%;\n  --gds-sys-color-state-notice-03: #ffffff 6%;\n  --gds-sys-color-state-notice-04: #ffffff 10%;\n  --gds-sys-color-state-notice-05: #005fb3 40%;\n  --gds-sys-color-state-notice-06: #005fb3 60%;\n  --gds-sys-color-state-warning-01: #000000 6%;\n  --gds-sys-color-state-warning-02: #000000 14%;\n  --gds-sys-color-state-warning-03: #ffffff 8%;\n  --gds-sys-color-state-warning-04: #ffffff 14%;\n  --gds-sys-color-state-warning-05: #f19e38 12%;\n  --gds-sys-color-state-warning-06: #f19e38 20%;";
 export default styles;

package/tokens/variables.light.css.js

@@ -1,2 +1,2 @@
-const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n\n  color-scheme: light;\n  --gds-sys-color-l1-neutral-01: #ffffff;\n  --gds-sys-color-l1-neutral-02: #eaebeb;\n  --gds-sys-color-l1-brand-01: #003824;\n  --gds-sys-color-l1-inversed: #0a0b0b;\n  --gds-sys-color-l2-neutral-01: #f7f8f7;\n  --gds-sys-color-l2-neutral-02: #ffffff;\n  --gds-sys-color-l2-neutral-03: #0a0b0b;\n  --gds-sys-color-l2-brand-01: #003824;\n  --gds-sys-color-l2-brand-02: #f8f6f1;\n  --gds-sys-color-l2-positive-01: #f1f9f1;\n  --gds-sys-color-l2-negative-01: #fef7f6;\n  --gds-sys-color-l2-warning-01: #fef8f1;\n  --gds-sys-color-l2-information-01: #f7f8f7;\n  --gds-sys-color-l2-notice-01: #f5faff;\n  --gds-sys-color-l3-brand-01: #003824;\n  --gds-sys-color-l3-brand-02: #efe9dc;\n  --gds-sys-color-l3-brand-03: #e7ddcb;\n  --gds-sys-color-l3-neutral-01: #0a0b0b;\n  --gds-sys-color-l3-neutral-02: #eaebeb;\n  --gds-sys-color-l3-neutral-03: #d5d7d7;\n  --gds-sys-color-l3-neutral-04: #ffffff;\n  --gds-sys-color-l3-neutral-05: #ffffff;\n  --gds-sys-color-l3-positive-01: #027839;\n  --gds-sys-color-l3-positive-02: #dcefdc;\n  --gds-sys-color-l3-positive-03: #cceacc;\n  --gds-sys-color-l3-negative-01: #b92f13;\n  --gds-sys-color-l3-negative-02: #fdebe8;\n  --gds-sys-color-l3-negative-03: #fad8d1;\n  --gds-sys-color-l3-notice-01: #005fb3;\n  --gds-sys-color-l3-notice-02: #e6f3ff;\n  --gds-sys-color-l3-notice-03: #cce7ff;\n  --gds-sys-color-l3-warning-01: #8f530a;\n  --gds-sys-color-l3-warning-02: #fce8cf;\n  --gds-sys-color-l3-warning-03: #fadcb7;\n  --gds-sys-color-l3-information-01: #0a0b0b;\n  --gds-sys-color-l3-information-02: #eaebeb;\n  --gds-sys-color-l3-information-03: #dfe1e1;\n  --gds-sys-color-l3-disabled-01: #eff0f0;\n  --gds-sys-color-l3-disabled-02: #a0a6a4;\n  --gds-sys-color-l3-disabled-03: #eff0f0;\n  --gds-sys-color-border-interactive: #777e7c;\n  --gds-sys-color-border-subtle-01: #dfe1e1;\n  --gds-sys-color-border-subtle-02: #eff0f0;\n  --gds-sys-color-border-strong: #0a0b0b;\n  --gds-sys-color-border-inverse: #ffffff;\n  --gds-sys-color-border-information-01: #0a0b0b;\n  --gds-sys-color-border-positive-01: #027839;\n  --gds-sys-color-border-negative-01: #b92f13;\n  --gds-sys-color-border-warning-01: #8f530a;\n  --gds-sys-color-border-notice-01: #005fb3;\n  --gds-sys-color-border-information-02: rgba(10, 11, 11, 0.4);\n  --gds-sys-color-border-positive-02: rgba(2, 120, 57, 0.4);\n  --gds-sys-color-border-negative-02: rgba(185, 47, 19, 0.4);\n  --gds-sys-color-border-warning-02: rgba(143, 83, 10, 0.4);\n  --gds-sys-color-border-notice-02: rgba(0, 95, 179, 0.4);\n  --gds-sys-color-content-neutral-01: #0a0b0b;\n  --gds-sys-color-content-neutral-02: #636967;\n  --gds-sys-color-content-neutral-03: #ffffff;\n  --gds-sys-color-content-neutral-04: #a0a6a4;\n  --gds-sys-color-content-inversed: #ffffff;\n  --gds-sys-color-content-brand-01: #003824;\n  --gds-sys-color-content-brand-02: #685631;\n  --gds-sys-color-content-positive-01: #027839;\n  --gds-sys-color-content-positive-02: #eaf6ea;\n  --gds-sys-color-content-positive-03: #026436;\n  --gds-sys-color-content-negative-01: #b92f13;\n  --gds-sys-color-content-negative-02: #fdebe8;\n  --gds-sys-color-content-warning-01: #8f530a;\n  --gds-sys-color-content-warning-02: #fce8cf;\n  --gds-sys-color-content-notice-01: #005fb3;\n  --gds-sys-color-content-notice-02: #e6f3ff;\n  --gds-sys-color-content-disabled-01: #a0a6a4;\n  --gds-sys-color-content-disabled-02: #f7f8f7;\n  --gds-sys-color-state-brand-01: #ffffff 20%;\n  --gds-sys-color-state-brand-02: #ffffff 35%;\n  --gds-sys-color-state-brand-03: #003824 6%;\n  --gds-sys-color-state-brand-04: #003824 14%;\n  --gds-sys-color-state-brand-05: #003824 6%;\n  --gds-sys-color-state-brand-06: #003824 14%;\n  --gds-sys-color-state-neutral-01: #ffffff 20%;\n  --gds-sys-color-state-neutral-02: #ffffff 35%;\n  --gds-sys-color-state-neutral-03: #000000 6%;\n  --gds-sys-color-state-neutral-04: #000000 14%;\n  --gds-sys-color-state-neutral-05: #000000 6%;\n  --gds-sys-color-state-neutral-06: #000000 14%;\n  --gds-sys-color-state-positive-01: #ffffff 12%;\n  --gds-sys-color-state-positive-02: #ffffff 23%;\n  --gds-sys-color-state-positive-03: #027839 8%;\n  --gds-sys-color-state-positive-04: #027839 16%;\n  --gds-sys-color-state-positive-05: #027839 8%;\n  --gds-sys-color-state-positive-06: #027839 16%;\n  --gds-sys-color-state-negative-01: #ffffff 8%;\n  --gds-sys-color-state-negative-02: #ffffff 16%;\n  --gds-sys-color-state-negative-03: #b92f13 8%;\n  --gds-sys-color-state-negative-04: #b92f13 16%;\n  --gds-sys-color-state-negative-05: #b92f13 8%;\n  --gds-sys-color-state-negative-06: #b92f13 16%;\n  --gds-sys-color-state-notice-01: #ffffff 20%;\n  --gds-sys-color-state-notice-02: #ffffff 35%;\n  --gds-sys-color-state-notice-03: #005fb3 8%;\n  --gds-sys-color-state-notice-04: #005fb3 16%;\n  --gds-sys-color-state-notice-05: #005fb3 8%;\n  --gds-sys-color-state-notice-06: #005fb3 16%;\n  --gds-sys-color-state-warning-01: #ffffff 20%;\n  --gds-sys-color-state-warning-02: #ffffff 35%;\n  --gds-sys-color-state-warning-03: #8f530a 8%;\n  --gds-sys-color-state-warning-04: #8f530a 16%;\n  --gds-sys-color-state-warning-05: #8f530a 8%;\n  --gds-sys-color-state-warning-06: #8f530a 16%;";
+const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n\n  color-scheme: light;\n  --gds-sys-color-l1-neutral-01: #ffffff;\n  --gds-sys-color-l1-neutral-02: #f4f5f5;\n  --gds-sys-color-l1-brand-01: #003824;\n  --gds-sys-color-l1-inversed: #0a0b0b;\n  --gds-sys-color-l2-neutral-01: #f7f8f7;\n  --gds-sys-color-l2-neutral-02: #ffffff;\n  --gds-sys-color-l2-neutral-03: #0a0b0b;\n  --gds-sys-color-l2-brand-01: #003824;\n  --gds-sys-color-l2-brand-02: #f8f6f1;\n  --gds-sys-color-l2-positive-01: #f1f9f1;\n  --gds-sys-color-l2-negative-01: #fef7f6;\n  --gds-sys-color-l2-warning-01: #fef8f1;\n  --gds-sys-color-l2-information-01: #f7f8f7;\n  --gds-sys-color-l2-notice-01: #f5faff;\n  --gds-sys-color-l3-brand-01: #003824;\n  --gds-sys-color-l3-brand-02: #efe9dc;\n  --gds-sys-color-l3-brand-03: #e7ddcb;\n  --gds-sys-color-l3-neutral-01: #0a0b0b;\n  --gds-sys-color-l3-neutral-02: #eaebeb;\n  --gds-sys-color-l3-neutral-03: #d5d7d7;\n  --gds-sys-color-l3-neutral-04: #ffffff;\n  --gds-sys-color-l3-neutral-05: #ffffff;\n  --gds-sys-color-l3-positive-01: #027839;\n  --gds-sys-color-l3-positive-02: #dcefdc;\n  --gds-sys-color-l3-positive-03: #cceacc;\n  --gds-sys-color-l3-negative-01: #b92f13;\n  --gds-sys-color-l3-negative-02: #fdebe8;\n  --gds-sys-color-l3-negative-03: #fad8d1;\n  --gds-sys-color-l3-notice-01: #005fb3;\n  --gds-sys-color-l3-notice-02: #e6f3ff;\n  --gds-sys-color-l3-notice-03: #cce7ff;\n  --gds-sys-color-l3-warning-01: #8f530a;\n  --gds-sys-color-l3-warning-02: #fce8cf;\n  --gds-sys-color-l3-warning-03: #fadcb7;\n  --gds-sys-color-l3-information-01: #0a0b0b;\n  --gds-sys-color-l3-information-02: #eaebeb;\n  --gds-sys-color-l3-information-03: #dfe1e1;\n  --gds-sys-color-l3-disabled-01: #eff0f0;\n  --gds-sys-color-l3-disabled-02: #a0a6a4;\n  --gds-sys-color-l3-disabled-03: #eff0f0;\n  --gds-sys-color-border-interactive: #777e7c;\n  --gds-sys-color-border-subtle-01: #dfe1e1;\n  --gds-sys-color-border-subtle-02: #eff0f0;\n  --gds-sys-color-border-strong: #0a0b0b;\n  --gds-sys-color-border-inverse: #ffffff;\n  --gds-sys-color-border-information-01: #0a0b0b;\n  --gds-sys-color-border-positive-01: #027839;\n  --gds-sys-color-border-negative-01: #b92f13;\n  --gds-sys-color-border-warning-01: #8f530a;\n  --gds-sys-color-border-notice-01: #005fb3;\n  --gds-sys-color-border-information-02: rgba(10, 11, 11, 0.4);\n  --gds-sys-color-border-positive-02: rgba(2, 120, 57, 0.4);\n  --gds-sys-color-border-negative-02: rgba(185, 47, 19, 0.4);\n  --gds-sys-color-border-warning-02: rgba(143, 83, 10, 0.4);\n  --gds-sys-color-border-notice-02: rgba(0, 95, 179, 0.4);\n  --gds-sys-color-content-neutral-01: #0a0b0b;\n  --gds-sys-color-content-neutral-02: #636967;\n  --gds-sys-color-content-neutral-03: #ffffff;\n  --gds-sys-color-content-neutral-04: #a0a6a4;\n  --gds-sys-color-content-inversed: #ffffff;\n  --gds-sys-color-content-brand-01: #003824;\n  --gds-sys-color-content-brand-02: #685631;\n  --gds-sys-color-content-positive-01: #027839;\n  --gds-sys-color-content-positive-02: #eaf6ea;\n  --gds-sys-color-content-positive-03: #026436;\n  --gds-sys-color-content-negative-01: #b92f13;\n  --gds-sys-color-content-negative-02: #fdebe8;\n  --gds-sys-color-content-warning-01: #8f530a;\n  --gds-sys-color-content-warning-02: #fce8cf;\n  --gds-sys-color-content-notice-01: #005fb3;\n  --gds-sys-color-content-notice-02: #e6f3ff;\n  --gds-sys-color-content-disabled-01: #a0a6a4;\n  --gds-sys-color-content-disabled-02: #f7f8f7;\n  --gds-sys-color-state-brand-01: #ffffff 20%;\n  --gds-sys-color-state-brand-02: #ffffff 35%;\n  --gds-sys-color-state-brand-03: #003824 6%;\n  --gds-sys-color-state-brand-04: #003824 14%;\n  --gds-sys-color-state-brand-05: #003824 6%;\n  --gds-sys-color-state-brand-06: #003824 14%;\n  --gds-sys-color-state-neutral-01: #ffffff 20%;\n  --gds-sys-color-state-neutral-02: #ffffff 35%;\n  --gds-sys-color-state-neutral-03: #000000 6%;\n  --gds-sys-color-state-neutral-04: #000000 14%;\n  --gds-sys-color-state-neutral-05: #000000 6%;\n  --gds-sys-color-state-neutral-06: #000000 14%;\n  --gds-sys-color-state-positive-01: #ffffff 12%;\n  --gds-sys-color-state-positive-02: #ffffff 23%;\n  --gds-sys-color-state-positive-03: #027839 8%;\n  --gds-sys-color-state-positive-04: #027839 16%;\n  --gds-sys-color-state-positive-05: #027839 8%;\n  --gds-sys-color-state-positive-06: #027839 16%;\n  --gds-sys-color-state-negative-01: #ffffff 8%;\n  --gds-sys-color-state-negative-02: #ffffff 16%;\n  --gds-sys-color-state-negative-03: #b92f13 8%;\n  --gds-sys-color-state-negative-04: #b92f13 16%;\n  --gds-sys-color-state-negative-05: #b92f13 8%;\n  --gds-sys-color-state-negative-06: #b92f13 16%;\n  --gds-sys-color-state-notice-01: #ffffff 20%;\n  --gds-sys-color-state-notice-02: #ffffff 35%;\n  --gds-sys-color-state-notice-03: #005fb3 8%;\n  --gds-sys-color-state-notice-04: #005fb3 16%;\n  --gds-sys-color-state-notice-05: #005fb3 8%;\n  --gds-sys-color-state-notice-06: #005fb3 16%;\n  --gds-sys-color-state-warning-01: #ffffff 20%;\n  --gds-sys-color-state-warning-02: #ffffff 35%;\n  --gds-sys-color-state-warning-03: #8f530a 8%;\n  --gds-sys-color-state-warning-04: #8f530a 16%;\n  --gds-sys-color-state-warning-05: #8f530a 8%;\n  --gds-sys-color-state-warning-06: #8f530a 16%;";
 export default styles;

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

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

package/utils/mixins/props-image.d.ts

@@ -0,0 +1,17 @@
+import { GdsElement } from '../../gds-element';
+type Constructor<T = GdsElement> = new (...args: any[]) => T;
+export interface ImageProps {
+    src?: string;
+    srcset?: string;
+    sizes?: string;
+    alt?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'auto' | 'sync' | 'async';
+}
+/**
+ * Mixin that adds image-related properties to a component.
+ * Use this for any component that needs to display images with responsive
+ * and accessibility support.
+ */
+export declare function withImageProps<T extends Constructor<GdsElement>>(base: T): Constructor<ImageProps> & T;
+export {};

package/utils/mixins/props-image.js

@@ -0,0 +1,35 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QU3DSPNU.js";
+import { property } from "lit/decorators.js";
+function withImageProps(base) {
+  class ImagePropsMixin extends base {
+    constructor() {
+      super(...arguments);
+      this.loading = "lazy";
+      this.decoding = "auto";
+    }
+  }
+  __decorateClass([
+    property({ reflect: false })
+  ], ImagePropsMixin.prototype, "src", 2);
+  __decorateClass([
+    property({ reflect: false })
+  ], ImagePropsMixin.prototype, "srcset", 2);
+  __decorateClass([
+    property({ reflect: false })
+  ], ImagePropsMixin.prototype, "sizes", 2);
+  __decorateClass([
+    property({ reflect: false })
+  ], ImagePropsMixin.prototype, "alt", 2);
+  __decorateClass([
+    property({ reflect: false })
+  ], ImagePropsMixin.prototype, "loading", 2);
+  __decorateClass([
+    property({ reflect: false })
+  ], ImagePropsMixin.prototype, "decoding", 2);
+  return ImagePropsMixin;
+}
+export {
+  withImageProps
+};

package/utils/mixins/props-link.d.ts

@@ -0,0 +1,17 @@
+import { GdsElement } from '../../gds-element';
+type Constructor<T = GdsElement> = new (...args: any[]) => T;
+/**
+ * Interface defining the properties available for link functionality
+ */
+export interface LinkProps {
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+    download?: string | boolean;
+}
+/**
+ * Mixin that adds link-related properties to a component.
+ * Provides standard anchor/link functionality with built-in security features.
+ */
+export declare function withLinkProps<T extends Constructor<GdsElement>>(base: T): Constructor<LinkProps> & T;
+export {};