@sebgroup/green-core 3.24.1 → 3.24.2

package/components/icon/icons/volume-off.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconVolumeOff = class extends GdsIcon {

package/components/icon/icons/volume-off.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconVolumeOff } from "./volume-off.component.js";
 IconVolumeOff.define();
 export {

package/components/icon/icons/wallet.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconWallet = class extends GdsIcon {

package/components/icon/icons/wallet.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconWallet } from "./wallet.component.js";
 IconWallet.define();
 export {

package/components/icon/icons/warning-sign.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconWarningSign = class extends GdsIcon {

package/components/icon/icons/warning-sign.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconWarningSign } from "./warning-sign.component.js";
 IconWarningSign.define();
 export {

package/components/icon/icons/wifi-full.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconWifiFull = class extends GdsIcon {

package/components/icon/icons/wifi-full.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconWifiFull } from "./wifi-full.component.js";
 IconWifiFull.define();
 export {

package/components/icon/icons/youtube.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconYoutube = class extends GdsIcon {

package/components/icon/icons/youtube.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconYoutube } from "./youtube.component.js";
 IconYoutube.define();
 export {

package/components/icon/icons/zap.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconZap = class extends GdsIcon {

package/components/icon/icons/zap.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconZap } from "./zap.component.js";
 IconZap.define();
 export {

package/components/icon/icons/zoom-in.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconZoomIn = class extends GdsIcon {

package/components/icon/icons/zoom-in.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconZoomIn } from "./zoom-in.component.js";
 IconZoomIn.define();
 export {

package/components/icon/icons/zoom-out.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../../scoping.js";
 import { GdsIcon } from "../icon.js";
 let IconZoomOut = class extends GdsIcon {

package/components/icon/icons/zoom-out.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { IconZoomOut } from "./zoom-out.component.js";
 IconZoomOut.define();
 export {

package/components/img/img.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../chunks/chunk.CAV4X6PU.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { GdsElement } from "../../gds-element.js";
 import { tokens } from "../../tokens.style.js";

package/components/img/img.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsImg } from "./img.component.js";
 GdsImg.define();
 export {

package/components/img/img.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   :host {

package/components/input/input.component.js

@@ -4,8 +4,8 @@ import {
   __privateGet,
   __privateMethod,
   __privateSet
-} from "../../chunks/chunk.CAV4X6PU.js";
-var _charCounterComputed, _isOpeningFilePicker, _shouldShowFooter, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnKeyDown, _handleFieldClick, _openFilePickerOnce, openFilePickerOnce_fn, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _renderNativeInput, renderNativeInput_fn, _renderClearButton, renderClearButton_fn;
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _charCounterComputed, _isOpeningFilePicker, _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnKeyDown, _handleFieldClick, openFilePickerOnce_fn, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn;
 import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -34,13 +34,7 @@ import InputStyles from "./input.styles.js";
 let Input = class extends GdsFormControlElement {
   constructor() {
     super();
-    __privateAdd(this, _shouldShowFooter);
-    __privateAdd(this, _openFilePickerOnce);
-    __privateAdd(this, _renderFieldContents);
-    __privateAdd(this, _renderSlotLead);
-    __privateAdd(this, _renderSlotTrail);
-    __privateAdd(this, _renderNativeInput);
-    __privateAdd(this, _renderClearButton);
+    __privateAdd(this, _Input_instances);
     this.supportingText = "";
     this.showExtendedSupportingText = false;
     this.clearable = false;
@@ -69,27 +63,20 @@ let Input = class extends GdsFormControlElement {
       });
     });
     __privateAdd(this, _handleOnKeyDown, (e) => {
-      if (e.key !== "Enter")
-        return;
-      if (this.disabled)
-        return;
-      if (e.isComposing)
-        return;
-      if (e.repeat)
-        return;
+      if (e.key !== "Enter") return;
+      if (this.disabled) return;
+      if (e.isComposing) return;
+      if (e.repeat) return;
       if (this.type === "file") {
         e.preventDefault();
-        __privateMethod(this, _openFilePickerOnce, openFilePickerOnce_fn).call(this);
+        __privateMethod(this, _Input_instances, openFilePickerOnce_fn).call(this);
         return;
       }
       const form = this.form ?? this.closest("form");
-      if (!form)
-        return;
+      if (!form) return;
       queueMicrotask(() => {
-        if (e.defaultPrevented)
-          return;
-        if (this.disabled)
-          return;
+        if (e.defaultPrevented) return;
+        if (this.disabled) return;
         form.requestSubmit();
       });
     });
@@ -97,7 +84,7 @@ let Input = class extends GdsFormControlElement {
       if (this.type === "file") {
         const clickedNativeInput = e.composedPath().includes(this.elInput);
         if (!clickedNativeInput) {
-          __privateMethod(this, _openFilePickerOnce, openFilePickerOnce_fn).call(this);
+          __privateMethod(this, _Input_instances, openFilePickerOnce_fn).call(this);
         }
         return;
       }
@@ -232,10 +219,10 @@ let Input = class extends GdsFormControlElement {
         @click=${__privateGet(this, _handleFieldClick)}
         id="field"
       >
-        ${__privateMethod(this, _renderFieldContents, renderFieldContents_fn).call(this)}
+        ${__privateMethod(this, _Input_instances, renderFieldContents_fn).call(this)}
       </gds-field-base>
       ${when(
-      __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
+      __privateMethod(this, _Input_instances, shouldShowFooter_fn).call(this),
       () => html` <gds-form-control-footer
             id="message"
             class="size-${this.size}"
@@ -254,7 +241,7 @@ let Input = class extends GdsFormControlElement {
 };
 _charCounterComputed = new WeakMap();
 _isOpeningFilePicker = new WeakMap();
-_shouldShowFooter = new WeakSet();
+_Input_instances = new WeakSet();
 shouldShowFooter_fn = function() {
   return !this.plain;
 };
@@ -262,10 +249,8 @@ _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();
 _handleOnKeyDown = new WeakMap();
 _handleFieldClick = new WeakMap();
-_openFilePickerOnce = new WeakSet();
 openFilePickerOnce_fn = function() {
-  if (__privateGet(this, _isOpeningFilePicker))
-    return;
+  if (__privateGet(this, _isOpeningFilePicker)) return;
   __privateSet(this, _isOpeningFilePicker, true);
   this.elInput.click();
   queueMicrotask(() => {
@@ -273,25 +258,21 @@ openFilePickerOnce_fn = function() {
   });
 };
 _handleClearBtnClick = new WeakMap();
-_renderFieldContents = new WeakSet();
 renderFieldContents_fn = function() {
   const elements = [
-    __privateMethod(this, _renderSlotLead, renderSlotLead_fn).call(this),
-    __privateMethod(this, _renderNativeInput, renderNativeInput_fn).call(this),
-    __privateMethod(this, _renderClearButton, renderClearButton_fn).call(this),
-    __privateMethod(this, _renderSlotTrail, renderSlotTrail_fn).call(this)
+    __privateMethod(this, _Input_instances, renderSlotLead_fn).call(this),
+    __privateMethod(this, _Input_instances, renderNativeInput_fn).call(this),
+    __privateMethod(this, _Input_instances, renderClearButton_fn).call(this),
+    __privateMethod(this, _Input_instances, renderSlotTrail_fn).call(this)
   ];
   return elements.map((element) => html`${element}`);
 };
-_renderSlotLead = new WeakSet();
 renderSlotLead_fn = function() {
   return html` <slot slot="lead" name="lead"></slot> `;
 };
-_renderSlotTrail = new WeakSet();
 renderSlotTrail_fn = function() {
   return html`<slot slot="trail" name="trail"></slot>`;
 };
-_renderNativeInput = new WeakSet();
 renderNativeInput_fn = function() {
   return html`
       <input
@@ -324,7 +305,6 @@ renderNativeInput_fn = function() {
       />
     `;
 };
-_renderClearButton = new WeakSet();
 renderClearButton_fn = function() {
   if (this.clearable && (this.value?.length || 0) > 0)
     return html`<gds-button
@@ -339,8 +319,7 @@ renderClearButton_fn = function() {
       >
         <gds-icon-cross-small></gds-icon-cross-small>
       </gds-button>`;
-  else
-    return nothing;
+  else return nothing;
 };
 Input.styles = [tokens, formControlHostStyles, InputStyles];
 __decorateClass([

package/components/input/input.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsInput } from "./input.component.js";
 GdsInput.define();
 export {

package/components/input/input.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   input::-webkit-outer-spin-button,

package/components/input/input.trans.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import * as FieldBase from "../../primitives/field-base/field-base.trans.styles.js";
 import * as Button from "../button/button.trans.styles.js";
 function register() {

package/components/link/link.component.js

@@ -2,8 +2,8 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet
-} from "../../chunks/chunk.CAV4X6PU.js";
-var _defaultRel, defaultRel_get;
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _GdsLink_instances, defaultRel_get;
 import { nothing, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -25,7 +25,7 @@ let GdsLink = class extends withMarginProps(
 ) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _defaultRel);
+    __privateAdd(this, _GdsLink_instances);
     this.label = "";
   }
   connectedCallback() {
@@ -37,7 +37,7 @@ let GdsLink = class extends withMarginProps(
       <a
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
-        rel=${ifDefined(this.rel || __privateGet(this, _defaultRel, defaultRel_get))}
+        rel=${ifDefined(this.rel || __privateGet(this, _GdsLink_instances, defaultRel_get))}
         download=${ifDefined(this.download)}
         ping=${ifDefined(this.ping)}
         aria-label=${this.label || nothing}
@@ -49,7 +49,7 @@ let GdsLink = class extends withMarginProps(
     `;
   }
 };
-_defaultRel = new WeakSet();
+_GdsLink_instances = new WeakSet();
 defaultRel_get = function() {
   return this.target === "_blank" ? "noreferrer noopener" : void 0;
 };

package/components/link/link.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsLink } from "./link.component.js";
 GdsLink.define();
 export {

package/components/link/link.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   @layer core, link;
@@ -34,18 +34,18 @@ const style = css`
       transition-property: text-underline-offset;
       transition-duration: var(--gds-sys-motion-duration-fastest);
       transition-timing-function: var(--gds-sys-motion-easing-ease-in-out);
+    }
 
       @media (pointer: fine) {
-        &:hover {
+        a:hover {
           text-decoration: underline;
           text-underline-offset: 0.16lh;
+        }
 
-          &:active {
+          a:hover:active {
             text-underline-offset: 0.08lh;
           }
-        }
       }
-    }
 
     ::slotted(*) {
       display: inline-block;

package/components/list/list-item/list-item.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../../chunks/chunk.CAV4X6PU.js";
+} from "../../../chunks/chunk.QU3DSPNU.js";
 import { GdsElement } from "../../../gds-element.js";
 import { gdsCustomElement, html } from "../../../scoping.js";
 import { tokens } from "../../../tokens.style.js";

package/components/list/list-item/list-item.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.CAV4X6PU.js";
+import "../../../chunks/chunk.QU3DSPNU.js";
 import { GdsListItem } from "./list-item.component.js";
 GdsListItem.define();
 export {

package/components/list/list.component.js

@@ -2,7 +2,7 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet
-} from "../../chunks/chunk.CAV4X6PU.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 var _handleHover;
 import { property } from "lit/decorators.js";
 import { gdsCustomElement, html } from "../../scoping.js";
@@ -14,11 +14,9 @@ let GdsList = class extends GdsFlex {
     super(...arguments);
     this.dividers = false;
     __privateAdd(this, _handleHover, (e) => {
-      if (!this.dividers)
-        return;
+      if (!this.dividers) return;
       const item = e.target.closest?.("[href]:not([selectable])");
-      if (item?.parentElement !== this)
-        return;
+      if (item?.parentElement !== this) return;
       item.previousElementSibling?.toggleAttribute(
         "hide-prev-border",
         e.type === "pointerover"

package/components/list/list.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsList } from "./list.component.js";
 GdsList.define();
 export {

package/components/list/list.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   :host {

package/components/mask/mask.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../chunks/chunk.CAV4X6PU.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 import { html } from "lit/static-html.js";
 import { tokens } from "../../tokens.style.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";

package/components/mask/mask.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsMask } from "./mask.component.js";
 GdsMask.define();
 export {

package/components/mask/mask.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   :host {

package/components/menu-button/menu-button.component.js

@@ -2,8 +2,8 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet
-} from "../../chunks/chunk.CAV4X6PU.js";
-var _isLink, isLink_get, _defaultRel, defaultRel_get;
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _GdsMenuButton_instances, isLink_get, defaultRel_get;
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -22,8 +22,7 @@ let GdsMenuButton = class extends withSizeXProps(
 ) {
   constructor() {
     super();
-    __privateAdd(this, _isLink);
-    __privateAdd(this, _defaultRel);
+    __privateAdd(this, _GdsMenuButton_instances);
     this.disabled = false;
     this.label = "";
     this.href = "";
@@ -36,16 +35,16 @@ let GdsMenuButton = class extends withSizeXProps(
       selected: this.selected,
       compact: this.compact
     };
-    const tag = __privateGet(this, _isLink, isLink_get) ? literal`a` : literal`button`;
+    const tag = __privateGet(this, _GdsMenuButton_instances, isLink_get) ? literal`a` : literal`button`;
     return staticHtml`
       <${tag}
         class="${classMap(classes)}"
         ?disabled="${this.disabled}"
         aria-label="${this.label}"
-        href=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.href : void 0)}
-        target=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.target : void 0)}
-        rel=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.rel || __privateGet(this, _defaultRel, defaultRel_get) : void 0)}
-        download=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.download : void 0)}
+        href=${ifDefined(__privateGet(this, _GdsMenuButton_instances, isLink_get) ? this.href : void 0)}
+        target=${ifDefined(__privateGet(this, _GdsMenuButton_instances, isLink_get) ? this.target : void 0)}
+        rel=${ifDefined(__privateGet(this, _GdsMenuButton_instances, isLink_get) ? this.rel || __privateGet(this, _GdsMenuButton_instances, defaultRel_get) : void 0)}
+        download=${ifDefined(__privateGet(this, _GdsMenuButton_instances, isLink_get) ? this.download : void 0)}
       >
         <slot name="lead"></slot>
         <slot part="main-slot"></slot>
@@ -54,11 +53,10 @@ let GdsMenuButton = class extends withSizeXProps(
     `;
   }
 };
-_isLink = new WeakSet();
+_GdsMenuButton_instances = new WeakSet();
 isLink_get = function() {
   return this.href.length > 0;
 };
-_defaultRel = new WeakSet();
 defaultRel_get = function() {
   return this.target === "_blank" ? "noreferrer noopener" : void 0;
 };

package/components/menu-button/menu-button.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsMenuButton } from "./menu-button.component.js";
 GdsMenuButton.define();
 export {

package/components/menu-button/menu-button.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.CAV4X6PU.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   @layer tokens, core, a11y, disabled, variants, sizes, sets;
@@ -56,17 +56,16 @@ const style = css`
       position: relative;
       transition-property: color, border-color;
       transition: all var(--gds-sys-motion-duration-fastest);
+    }
 
-      &:focus-visible {
+      .button:focus-visible {
         border-color: transparent;
         border-radius: 6px;
         outline-color: currentColor;
         overflow: visible;
       }
 
-      &:hover,
-      &.selected:hover,
-      &:active {
+      .button:hover,.button.selected:hover,.button:active {
         background-color: color-mix(
           in srgb,
           transparent,
@@ -75,7 +74,7 @@ const style = css`
         --_color-border: var(--gds-sys-color-border-neutral-01);
       }
 
-      &.selected {
+      .button.selected {
         background-color: color-mix(
           in srgb,
           transparent,
@@ -84,13 +83,12 @@ const style = css`
         --_color-border: var(--gds-sys-color-border-neutral-04);
       }
 
-      slot:not([name]) {
+      .button slot:not([name]) {
         display: inline-block;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-    }
     .compact {
       display: flex;
       flex-direction: column;
@@ -98,19 +96,21 @@ const style = css`
       --_gap: 1px;
       font-size: 0.875rem;
       justify-content: center;
+    }
 
-      & > slot[name] {
+      .compact > slot[name] {
         order: 0;
       }
-      & > slot:not([name]) {
+      .compact > slot:not([name]) {
         order: 1;
       }
 
       @media (max-width: 576px) {
+    .compact {
         font: var(--gds-sys-text-detail-xs-book);
         --_padding-inline: var(--gds-sys-space-xs);
-      }
     }
+      }
 
     a {
       text-decoration: none;