@sebgroup/green-core 1.70.1 → 1.71.0

package/generated/react/list-item/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsListItem as GdsListItemClass } from "../../../components/grouped-list/list-item.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsListItem as GdsListItemClass } from "../../../components/grouped-list/list-item.component.js";
 import { createElement } from "react";
 const GdsListItem = (props) => {
   GdsListItemClass.define();

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

@@ -27,6 +27,7 @@ export declare const GdsMask: (props: React.ComponentProps<ReturnType<typeof get
     'text-align'?: string | undefined;
     'text-wrap'?: string | undefined;
     'overflow-wrap'?: string | undefined;
+    'white-space'?: string | undefined;
     gap?: string | undefined;
     'align-items'?: string | undefined;
     'align-content'?: string | undefined;

package/generated/react/mask/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsMask as GdsMaskClass } from "../../../components/mask/mask.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsMask as GdsMaskClass } from "../../../components/mask/mask.component.js";
 import { createElement } from "react";
 const GdsMask = (props) => {
   GdsMaskClass.define();

package/generated/react/menu-button/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsMenuButton as GdsMenuButtonClass } from "../../../components/menu-button/menu-button.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsMenuButton as GdsMenuButtonClass } from "../../../components/menu-button/menu-button.component.js";
 import { createElement } from "react";
 const GdsMenuButton = (props) => {
   GdsMenuButtonClass.define();

package/generated/react/menu-item/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsMenuItem as GdsMenuItemClass } from "../../../primitives/menu/menu-item.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsMenuItem as GdsMenuItemClass } from "../../../primitives/menu/menu-item.component.js";
 import { createElement } from "react";
 const GdsMenuItem = (props) => {
   GdsMenuItemClass.define();

package/generated/react/option/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsOption as GdsOptionClass } from "../../../primitives/listbox/option.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsOption as GdsOptionClass } from "../../../primitives/listbox/option.component.js";
 import { createElement } from "react";
 const GdsOption = (props) => {
   GdsOptionClass.define();

package/generated/react/popover/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsPopover as GdsPopoverClass } from "../../../components/popover/popover.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsPopover as GdsPopoverClass } from "../../../components/popover/popover.component.js";
 import { createElement } from "react";
 const GdsPopover = (props) => {
   GdsPopoverClass.define();

package/generated/react/radio/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsRadio as GdsRadioClass } from "../../../components/radio/radio.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsRadio as GdsRadioClass } from "../../../components/radio/radio.component.js";
 import { createElement } from "react";
 const GdsRadio = (props) => {
   GdsRadioClass.define();

package/generated/react/radio-group/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsRadioGroup as GdsRadioGroupClass } from "../../../components/radio/radio-group/radio-group.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsRadioGroup as GdsRadioGroupClass } from "../../../components/radio/radio-group/radio-group.component.js";
 import { createElement } from "react";
 const GdsRadioGroup = (props) => {
   GdsRadioGroupClass.define();

package/generated/react/rich-text/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsRichText as GdsRichTextClass } from "../../../components/rich-text/rich-text.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsRichText as GdsRichTextClass } from "../../../components/rich-text/rich-text.component.js";
 import { createElement } from "react";
 const GdsRichText = (props) => {
   GdsRichTextClass.define();

package/generated/react/segment/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsSegment as GdsSegmentClass } from "../../../components/segmented-control/segment/segment.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsSegment as GdsSegmentClass } from "../../../components/segmented-control/segment/segment.component.js";
 import { createElement } from "react";
 const GdsSegment = (props) => {
   GdsSegmentClass.define();

package/generated/react/segmented-control/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsSegmentedControl as GdsSegmentedControlClass } from "../../../components/segmented-control/segmented-control.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsSegmentedControl as GdsSegmentedControlClass } from "../../../components/segmented-control/segmented-control.component.js";
 import { createElement } from "react";
 const GdsSegmentedControl = (props) => {
   GdsSegmentedControlClass.define();

package/generated/react/select/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsSelect as GdsSelectClass } from "../../../components/select/select.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsSelect as GdsSelectClass } from "../../../components/select/select.component.js";
 import { createElement } from "react";
 const GdsSelect = (props) => {
   GdsSelectClass.define();

package/generated/react/signal/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsSignal as GdsSignalClass } from "../../../components/signal/signal.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsSignal as GdsSignalClass } from "../../../components/signal/signal.component.js";
 import { createElement } from "react";
 const GdsSignal = (props) => {
   GdsSignalClass.define();

package/generated/react/spacer/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsSpacer as GdsSpacerClass } from "../../../components/spacer/spacer.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsSpacer as GdsSpacerClass } from "../../../components/spacer/spacer.component.js";
 import { createElement } from "react";
 const GdsSpacer = (props) => {
   GdsSpacerClass.define();

package/generated/react/spinner/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsSpinner as GdsSpinnerClass } from "../../../components/spinner/spinner.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsSpinner as GdsSpinnerClass } from "../../../components/spinner/spinner.component.js";
 import { createElement } from "react";
 const GdsSpinner = (props) => {
   GdsSpinnerClass.define();

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

@@ -25,6 +25,7 @@ export declare const GdsText: (props: React.ComponentProps<ReturnType<typeof get
     'text-align'?: string | undefined;
     'text-wrap'?: string | undefined;
     'overflow-wrap'?: string | undefined;
+    'white-space'?: string | undefined;
     gap?: string | undefined;
     'align-items'?: string | undefined;
     'align-content'?: string | undefined;

package/generated/react/text/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsText as GdsTextClass } from "../../../components/text/text.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsText as GdsTextClass } from "../../../components/text/text.component.js";
 import { createElement } from "react";
 const GdsText = (props) => {
   GdsTextClass.define();

package/generated/react/textarea/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsTextarea as GdsTextareaClass } from "../../../components/textarea/textarea.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsTextarea as GdsTextareaClass } from "../../../components/textarea/textarea.component.js";
 import { createElement } from "react";
 const GdsTextarea = (props) => {
   GdsTextareaClass.define();

package/generated/react/theme/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsTheme as GdsThemeClass } from "../../../components/theme/theme.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsTheme as GdsThemeClass } from "../../../components/theme/theme.component.js";
 import { createElement } from "react";
 const GdsTheme = (props) => {
   GdsThemeClass.define();

package/generated/react/video/index.js

@@ -1,6 +1,6 @@
 import "../../../chunks/chunk.QTSIPXV3.js";
-import { getReactComponent } from "../../../utils/react";
-import { GdsVideo as GdsVideoClass } from "../../../components/video/video.component";
+import { getReactComponent } from "../../../utils/react.js";
+import { GdsVideo as GdsVideoClass } from "../../../components/video/video.component.js";
 import { createElement } from "react";
 const GdsVideo = (props) => {
   GdsVideoClass.define();

package/index.js

@@ -1,2 +1,2 @@
-export * from "./components";
-export * from "./utils/helpers/custom-element-scoping";
+export * from "./components/index.js";
+export * from "./utils/helpers/custom-element-scoping.js";

package/localization.js

@@ -1 +1 @@
-export * from "./utils/localization/localization";
+export * from "./utils/localization/localization.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.70.1",
+  "version": "1.71.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/field-base/field-base.component.js

@@ -9,9 +9,9 @@ import { localized } from "@lit/localize";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { map } from "lit/directives/map.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
-import { TransitionalStyles } from "../../transitional-styles";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch } from "../../utils/decorators/watch.js";
 import { styles } from "./field-base.styles";
 let GdsFieldBase = class extends GdsElement {

package/primitives/field-base/field-base.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsFieldBase } from "./field-base.component";
+import { GdsFieldBase } from "./field-base.component.js";
 GdsFieldBase.define();
 export {
   GdsFieldBase

package/primitives/field-base/field-base.trans.styles.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { TransitionalStyles } from "../../transitional-styles";
+import { TransitionalStyles } from "../../transitional-styles.js";
 import styles from "./field-base.trans.styles.scss.js";
 function register() {
   TransitionalStyles.instance.register("gds-field-base", styles.toString());

package/primitives/field-base/field-base.trans.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .field {\n    border-radius: var(--sg-border-radius);\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--sg-border-color);\n    align-items: stretch;\n    gap: var(--gds-space-xs);\n    background-color: var(--sg-form-control-bg);\n    box-sizing: border-box;\n    color: var(--sg-text-primary);\n    cursor: text;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-xs) calc(var(--gds-space-xs) - 1px) var(--gds-space-m);\n    min-block-size: 44px;\n  }\n  .field:focus:not(:focus-visible) {\n    box-shadow: none;\n    outline: 0;\n  }\n  .field:focus, .field:focus-within {\n    outline-color: var(--gds-sys-color-focus-outline);\n    outline-style: solid;\n    outline-width: 0.125rem;\n    outline-offset: 0.125rem;\n  }\n  .field:hover {\n    background-color: var(--grey-200);\n  }\n  .field.small {\n    font-size: 0.875rem;\n    min-height: 2rem;\n  }\n  .field.multiline {\n    align-items: flex-start;\n    padding: calc(var(--gds-space-s) - 1px) var(--gds-space-s) calc(var(--gds-space-s) - 1px) var(--gds-space-m);\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .field.action-slot-occupied:not(.trail-slot-occupied) {\n    padding-right: var(--gds-space-xs);\n  }\n  .field.lead-slot-occupied {\n    padding-left: var(--gds-space-xs);\n  }\n  .field.trail-slot-occupied {\n    padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-m);\n  }\n  .field slot[name=action]::slotted(*) {\n    margin: -3px 0 -3px -3px;\n  }\n  .field:focus-within {\n    outline-color: currentColor;\n  }\n  .field.invalid {\n    border-color: var(--gds-color-l3-border-negative);\n    color: var(--gds-color-l3-content-negative);\n    border-bottom-width: 2px;\n  }\n  .field.disabled {\n    background: var(--gds-color-l3-background-disabled);\n    color: var(--gds-color-l3-content-disabled);\n    border-color: transparent;\n    pointer-events: none;\n  }\n  .main-slot-wrap {\n    display: flex;\n    flex: 1;\n  }\n  slot:not([name])::slotted(*) {\n    color: currentColor;\n  }\n  slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    min-width: var(--gds-space-l);\n  }\n}";
-            export default styles;
-          
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .field {\n    border-radius: var(--sg-border-radius);\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--sg-border-color);\n    align-items: stretch;\n    gap: var(--gds-space-xs);\n    background-color: var(--sg-form-control-bg);\n    box-sizing: border-box;\n    color: var(--sg-text-primary);\n    cursor: text;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-xs) calc(var(--gds-space-xs) - 1px) var(--gds-space-m);\n    min-block-size: 44px;\n  }\n  .field:focus:not(:focus-visible) {\n    box-shadow: none;\n    outline: 0;\n  }\n  .field:focus, .field:focus-within {\n    outline-color: var(--gds-sys-color-focus-outline);\n    outline-style: solid;\n    outline-width: 0.125rem;\n    outline-offset: 0.125rem;\n  }\n  .field:hover {\n    background-color: var(--grey-200);\n  }\n  .field.small {\n    font-size: 0.875rem;\n    min-height: 2rem;\n  }\n  .field.multiline {\n    align-items: flex-start;\n    padding: calc(var(--gds-space-s) - 1px) var(--gds-space-s) calc(var(--gds-space-s) - 1px) var(--gds-space-m);\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .field.action-slot-occupied:not(.trail-slot-occupied) {\n    padding-right: var(--gds-space-xs);\n  }\n  .field.lead-slot-occupied {\n    padding-left: var(--gds-space-xs);\n  }\n  .field.trail-slot-occupied {\n    padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-m);\n  }\n  .field slot[name=action]::slotted(*) {\n    margin: -3px 0 -3px -3px;\n  }\n  .field:focus-within {\n    outline-color: currentColor;\n  }\n  .field.invalid {\n    border-color: var(--gds-color-l3-border-negative);\n    color: var(--gds-color-l3-content-negative);\n    border-bottom-width: 2px;\n  }\n  .field.disabled {\n    background: var(--gds-color-l3-background-disabled);\n    color: var(--gds-color-l3-content-disabled);\n    border-color: transparent;\n    pointer-events: none;\n  }\n  .main-slot-wrap {\n    display: flex;\n    flex: 1;\n  }\n  slot:not([name])::slotted(*) {\n    color: currentColor;\n  }\n  slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    min-width: var(--gds-space-l);\n  }\n}";
+export default styles;

package/primitives/field-base/index.js

@@ -1 +1 @@
-export * from "./field-base";
+export * from "./field-base.js";

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

@@ -6,13 +6,13 @@ import {
 var _renderRemainingCharsBadge, renderRemainingCharsBadge_fn;
 import { property } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
-import { GdsBadge } from "../../components/badge/badge.component";
-import { IconTriangleExclamation } from "../../components/icon/icons/triangle-exclamation.component";
-import { GdsElement } from "../../gds-element";
+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 {
   gdsCustomElement,
   html
-} from "../../utils/helpers/custom-element-scoping";
+} from "../../utils/helpers/custom-element-scoping.js";
 import { styles } from "./form-control-footer.styles";
 let GdsFormControlFooter = class extends GdsElement {
   constructor() {

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

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsFormControlFooter } from "./form-control-footer.component";
+import { GdsFormControlFooter } from "./form-control-footer.component.js";
 GdsFormControlFooter.define();
 export {
   GdsFormControlFooter

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

@@ -1 +1 @@
-export * from "./form-control-footer";
+export * from "./form-control-footer.js";

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

@@ -8,14 +8,14 @@ var _handleExtSupTxtSlotChange, handleExtSupTxtSlotChange_fn, _renderExtSupTxtBu
 import { localized, msg } from "@lit/localize";
 import { property, query, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
-import { GdsButton } from "../../components/button/button.component";
-import { GdsCard } from "../../components/card/card.component";
-import { IconCircleInfo } from "../../components/icon/icons/circle-info.component";
-import { GdsElement } from "../../gds-element";
+import { GdsButton } from "../../components/button/button.component.js";
+import { GdsCard } from "../../components/card/card.component.js";
+import { IconCircleInfo } from "../../components/icon/icons/circle-info.component.js";
+import { GdsElement } from "../../gds-element.js";
 import {
   gdsCustomElement,
   html
-} from "../../utils/helpers/custom-element-scoping";
+} from "../../utils/helpers/custom-element-scoping.js";
 import { styles } from "./form-control-header.styles";
 let GdsFormControlHeader = class extends GdsElement {
   constructor() {

package/primitives/form-control-header/form-control-header.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsFormControlHeader } from "./form-control-header.component";
+import { GdsFormControlHeader } from "./form-control-header.component.js";
 GdsFormControlHeader.define();
 export {
   GdsFormControlHeader

package/primitives/form-control-header/index.js

@@ -1 +1 @@
-export * from "./form-control-header";
+export * from "./form-control-header.js";

package/primitives/listbox/index.js

@@ -1 +1 @@
-export * from "./listbox";
+export * from "./listbox.js";

package/primitives/listbox/listbox.component.js

@@ -6,16 +6,16 @@ import {
 var _slotRef, _handleSelect;
 import { property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
-import { TransitionalStyles } from "../../transitional-styles";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { TransitionalStyles } from "../../transitional-styles.js";
 import {
   ListboxKbNavController
-} from "../../utils/controllers/listbox-kb-nav-controller";
-import { watch } from "../../utils/decorators/watch";
-import { unwrap } from "../../utils/helpers/unwrap-slots";
+} from "../../utils/controllers/listbox-kb-nav-controller.js";
+import { watch } from "../../utils/decorators/watch.js";
+import { unwrap } from "../../utils/helpers/unwrap-slots.js";
 import style from "./listbox.styles";
-import { GdsOption } from "./option.component";
+import { GdsOption } from "./option.component.js";
 let GdsListbox = class extends GdsElement {
   constructor() {
     super();

package/primitives/listbox/listbox.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsListbox } from "./listbox.component";
+import { GdsListbox } from "./listbox.component.js";
 GdsListbox.define();
 export {
   GdsListbox

package/primitives/listbox/listbox.trans.styles.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles";
+import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles.js";
 import menuHeadingStyles from "../menu/menu-heading.trans.styles.scss.js";
 import listboxStyles from "./listbox.trans.styles.scss.js";
 import optionStyles from "./option.trans.styles.scss.js";

package/primitives/listbox/listbox.trans.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0;\n    margin-bottom: 0;\n    margin-top: 0;\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n    overflow-y: auto;\n  }\n  :host > li {\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem;\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n}";
-            export default styles;
-          
+const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0;\n    margin-bottom: 0;\n    margin-top: 0;\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n    overflow-y: auto;\n  }\n  :host > li {\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem;\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n}";
+export default styles;

package/primitives/listbox/option.component.js

@@ -9,13 +9,13 @@ var _hidden, _emitSelect, emitSelect_fn;
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
-import { IconCheckmark } from "../../components/icon/icons/checkmark.component";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
+import { IconCheckmark } from "../../components/icon/icons/checkmark.component.js";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style";
-import { TransitionalStyles } from "../../transitional-styles";
-import { watch } from "../../utils/decorators";
-import { Focusable } from "../../utils/mixins/focusable";
+import { TransitionalStyles } from "../../transitional-styles.js";
+import { watch } from "../../utils/decorators/index.js";
+import { Focusable } from "../../utils/mixins/focusable.js";
 import style from "./option.styles";
 let GdsOption = class extends Focusable(GdsElement) {
   constructor() {

package/primitives/listbox/option.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsOption } from "./option.component";
+import { GdsOption } from "./option.component.js";
 GdsOption.define();
 export {
   GdsOption

package/primitives/listbox/option.trans.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host div {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host div:hover, :host div:focus-visible {\n    background-color: var(--grey-400);\n  }\n  :host div:active {\n    background-color: var(--grey-400);\n  }\n  :host div:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host div.active.sg-highlighted, :host div[aria-selected=true] {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--grey-400);\n  }\n  :host(:active) div {\n    background-color: var(--grey-500);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) div {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  .checkbox {\n    background-color: var(--gds-comp-checkbox-container-color);\n    border-radius: var(--gds-comp-checkbox-border-radius);\n    box-shadow: inset 0 0 0 1px var(--gds-comp-checkbox-border-color);\n    flex: 0 0 auto;\n    flex-shrink: 0;\n    height: var(--gds-comp-checkbox-container-width);\n    margin-top: 0.15rem;\n    position: relative;\n    width: var(--gds-comp-checkbox-container-width);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .checkbox [gds-element=gds-icon-checkmark]::part(icon) {\n    width: 10px;\n    height: 10px;\n  }\n  .checkbox.checked {\n    background-color: var(--gds-comp-checkbox-container-color-selected);\n  }\n  .checkbox.checked [gds-element=gds-icon-checkmark]::part(icon) {\n    color: var(--gds-comp-checkbox-border-color-selected, #fff);\n  }\n}";
-            export default styles;
-          
+const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host div {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host div:hover, :host div:focus-visible {\n    background-color: var(--grey-400);\n  }\n  :host div:active {\n    background-color: var(--grey-400);\n  }\n  :host div:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host div.active.sg-highlighted, :host div[aria-selected=true] {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--grey-400);\n  }\n  :host(:active) div {\n    background-color: var(--grey-500);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) div {\n    background: var(--grey-1000);\n    color: #fff;\n  }\n  .checkbox {\n    background-color: var(--gds-comp-checkbox-container-color);\n    border-radius: var(--gds-comp-checkbox-border-radius);\n    box-shadow: inset 0 0 0 1px var(--gds-comp-checkbox-border-color);\n    flex: 0 0 auto;\n    flex-shrink: 0;\n    height: var(--gds-comp-checkbox-container-width);\n    margin-top: 0.15rem;\n    position: relative;\n    width: var(--gds-comp-checkbox-container-width);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .checkbox [gds-element=gds-icon-checkmark]::part(icon) {\n    width: 10px;\n    height: 10px;\n  }\n  .checkbox.checked {\n    background-color: var(--gds-comp-checkbox-container-color-selected);\n  }\n  .checkbox.checked [gds-element=gds-icon-checkmark]::part(icon) {\n    color: var(--gds-comp-checkbox-border-color-selected, #fff);\n  }\n}";
+export default styles;

package/primitives/menu/index.js

@@ -1 +1 @@
-export * from "./menu";
+export * from "./menu.js";

package/primitives/menu/menu-heading.component.js

@@ -2,9 +2,9 @@ import {
   __decorateClass
 } from "../../chunks/chunk.QTSIPXV3.js";
 import { html } from "lit";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement } from "../../scoping";
-import { TransitionalStyles } from "../../transitional-styles";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement } from "../../scoping.js";
+import { TransitionalStyles } from "../../transitional-styles.js";
 import style from "./menu-heading.styles";
 let GdsMenuHeading = class extends GdsElement {
   connectedCallback() {

package/primitives/menu/menu-heading.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsMenuHeading } from "./menu-heading.component";
+import { GdsMenuHeading } from "./menu-heading.component.js";
 GdsMenuHeading.define();
 export {
   GdsMenuHeading

package/primitives/menu/menu-heading.trans.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    background-color: var(--gds-ref-pallet-base300);\n    color: var(--gds-ref-pallet-base800);\n    display: flex;\n    font-size: 0.875rem;\n    font-weight: 500;\n    padding: 0.75rem 1rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host([aria-hidden=true]) {\n    display: none;\n  }\n}";
-            export default styles;
-          
+const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    background-color: var(--gds-ref-pallet-base300);\n    color: var(--gds-ref-pallet-base800);\n    display: flex;\n    font-size: 0.875rem;\n    font-weight: 500;\n    padding: 0.75rem 1rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host([aria-hidden=true]) {\n    display: none;\n  }\n}";
+export default styles;

package/primitives/menu/menu-item.component.js

@@ -4,10 +4,10 @@ import {
   __privateGet
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _handleOnClick;
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
-import { TransitionalStyles } from "../../transitional-styles";
-import { Focusable } from "../../utils/mixins/focusable";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { TransitionalStyles } from "../../transitional-styles.js";
+import { Focusable } from "../../utils/mixins/focusable.js";
 import styles from "../listbox/option.styles";
 let GdsMenuItem = class extends Focusable(GdsElement) {
   constructor() {

package/primitives/menu/menu-item.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsMenuItem } from "./menu-item.component";
+import { GdsMenuItem } from "./menu-item.component.js";
 GdsMenuItem.define();
 export {
   GdsMenuItem

package/primitives/menu/menu.component.js

@@ -5,14 +5,14 @@ import {
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _slotRef;
 import { createRef, ref } from "lit/directives/ref.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
-import { TransitionalStyles } from "../../transitional-styles";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { TransitionalStyles } from "../../transitional-styles.js";
 import {
   ListboxKbNavController
-} from "../../utils/controllers/listbox-kb-nav-controller";
-import { unwrap } from "../../utils/helpers/unwrap-slots";
-import { GdsMenuItem } from "./menu-item.component";
+} from "../../utils/controllers/listbox-kb-nav-controller.js";
+import { unwrap } from "../../utils/helpers/unwrap-slots.js";
+import { GdsMenuItem } from "./menu-item.component.js";
 let GdsMenu = class extends GdsElement {
   constructor() {
     super();

package/primitives/menu/menu.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsMenu } from "./menu.component";
+import { GdsMenu } from "./menu.component.js";
 GdsMenu.define();
 export {
   GdsMenu

package/primitives/ripple/index.js

@@ -1 +1 @@
-export * from "./ripple";
+export * from "./ripple.js";

package/primitives/ripple/ripple.component.js

@@ -3,8 +3,8 @@ import {
 } from "../../chunks/chunk.QTSIPXV3.js";
 import { html, unsafeCSS } from "lit";
 import { query } from "lit/decorators.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement } from "../../scoping";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style";
 import styles from "./ripple.styles.scss.js";
 let GdsRipple = class extends GdsElement {

package/primitives/ripple/ripple.js

@@ -1,5 +1,5 @@
 import "../../chunks/chunk.QTSIPXV3.js";
-import { GdsRipple } from "./ripple.component";
+import { GdsRipple } from "./ripple.component.js";
 GdsRipple.define();
 export {
   GdsRipple

package/primitives/ripple/ripple.styles.scss.js

@@ -1,4 +1,2 @@
-
-            const styles = ":host {\n  --gds-ripple-motion-name: ripple;\n  --gds-ripple-motion: var(--gds-ripple-motion-name) 1.25s\n    cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;\n  border-radius: var(--gds-space-max);\n  contain: strict;\n  display: grid;\n  place-content: center;\n  height: 100%;\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n}\n\ndiv {\n  background-color: currentColor;\n  border-radius: var(--gds-space-max);\n  display: flex;\n  height: 100%;\n  left: calc((-50% + var(--gds-ripple-left)) / 4);\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  will-change: transform;\n}\n\ndiv.gds-ripple-effect {\n  animation: var(--gds-ripple-motion);\n}\n\n@keyframes ripple {\n  from {\n    opacity: 0.2;\n    transform: scale(0.6, 1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(1.25);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --gds-ripple-motion-name: none !important;\n  }\n}";
-            export default styles;
-          
+const styles = ":host {\n  --gds-ripple-motion-name: ripple;\n  --gds-ripple-motion: var(--gds-ripple-motion-name) 1.25s\n    cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;\n  border-radius: var(--gds-space-max);\n  contain: strict;\n  display: grid;\n  place-content: center;\n  height: 100%;\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n}\n\ndiv {\n  background-color: currentColor;\n  border-radius: var(--gds-space-max);\n  display: flex;\n  height: 100%;\n  left: calc((-50% + var(--gds-ripple-left)) / 4);\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  will-change: transform;\n}\n\ndiv.gds-ripple-effect {\n  animation: var(--gds-ripple-motion);\n}\n\n@keyframes ripple {\n  from {\n    opacity: 0.2;\n    transform: scale(0.6, 1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(1.25);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --gds-ripple-motion-name: none !important;\n  }\n}";
+export default styles;

package/primitives/selection-controls/index.js

@@ -1 +1 @@
-export * from "./selection-field-label";
+export * from "./selection-field-label.js";