@sebgroup/green-core 1.70.1 → 1.71.1

package/components/index.js

@@ -1,36 +1,36 @@
-export * from "../primitives/listbox/option";
-export * from "../primitives/menu/menu-heading";
-export * from "../primitives/menu/menu-item";
-export * from "./button";
-export * from "./badge";
-export * from "./menu-button";
-export * from "./context-menu";
-export * from "./coachmark";
-export * from "./datepicker";
-export * from "./dialog";
-export * from "./dropdown";
-export * from "./grid/grid";
-export * from "./card/card";
-export * from "./flex/flex";
-export * from "./mask";
-export * from "./container";
-export * from "./div";
-export * from "./img";
-export * from "./video";
-export * from "./text";
-export * from "./link";
-export * from "./divider";
-export * from "./spacer";
-export * from "./signal";
-export * from "./popover";
-export * from "./grouped-list";
-export * from "./icon/icons";
-export * from "./segmented-control";
-export * from "./theme";
-export * from "./filter-chips";
-export * from "./form";
-export * from "./input";
-export * from "./select";
-export * from "./spinner";
-export * from "./textarea";
-export * from "./radio";
+export * from "../primitives/listbox/option.js";
+export * from "../primitives/menu/menu-heading.js";
+export * from "../primitives/menu/menu-item.js";
+export * from "./button/index.js";
+export * from "./badge/index.js";
+export * from "./menu-button/index.js";
+export * from "./context-menu/index.js";
+export * from "./coachmark/index.js";
+export * from "./datepicker/index.js";
+export * from "./dialog/index.js";
+export * from "./dropdown/index.js";
+export * from "./grid/grid.js";
+export * from "./card/card.js";
+export * from "./flex/flex.js";
+export * from "./mask/index.js";
+export * from "./container/index.js";
+export * from "./div/index.js";
+export * from "./img/index.js";
+export * from "./video/index.js";
+export * from "./text/index.js";
+export * from "./link/index.js";
+export * from "./divider/index.js";
+export * from "./spacer/index.js";
+export * from "./signal/index.js";
+export * from "./popover/index.js";
+export * from "./grouped-list/index.js";
+export * from "./icon/icons/index.js";
+export * from "./segmented-control/index.js";
+export * from "./theme/index.js";
+export * from "./filter-chips/index.js";
+export * from "./form/index.js";
+export * from "./input/index.js";
+export * from "./select/index.js";
+export * from "./spinner/index.js";
+export * from "./textarea/index.js";
+export * from "./radio/index.js";

package/components/input/index.js

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

package/components/input/input.component.js

@@ -9,22 +9,22 @@ import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { choose } from "lit/directives/choose.js";
 import { nothing } from "lit/html.js";
-import { GdsFieldBase } from "../../primitives/field-base/field-base.component";
-import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-control-footer.component";
-import { GdsFormControlHeader } from "../../primitives/form-control-header/form-control-header.component";
-import { gdsCustomElement, html } from "../../scoping";
-import { tokens } from "../../tokens.style";
-import { forwardAttributes } from "../../utils/directives";
+import { GdsFieldBase } from "../../primitives/field-base/field-base.component.js";
+import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-control-footer.component.js";
+import { GdsFormControlHeader } from "../../primitives/form-control-header/form-control-header.component.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { forwardAttributes } from "../../utils/directives/index.js";
 import {
   withLayoutChildProps,
   withMarginProps,
   withSizeXProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import { GdsButton } from "../button/button.component";
-import { GdsFlex } from "../flex/flex.component";
-import { GdsFormControlElement } from "../form/form-control";
-import { IconCrossLarge } from "../icon/icons/cross-large.component";
-import { styles } from "./input.styles";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { GdsButton } from "../button/button.component.js";
+import { GdsFlex } from "../flex/flex.component.js";
+import { GdsFormControlElement } from "../form/form-control.js";
+import { IconCrossLarge } from "../icon/icons/cross-large.component.js";
+import { styles } from "./input.styles.js";
 let Input = class extends GdsFormControlElement {
   constructor() {
     super();

package/components/input/input.js

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

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

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

package/components/link/index.js

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

package/components/link/link.component.js

@@ -8,16 +8,16 @@ import { unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { html as staticHtml } from "lit/static-html.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement } from "../../scoping";
-import { tokens } from "../../tokens.style";
-import { styleExpressionProperty } from "../../utils/decorators/style-expression-property";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import {
   withLayoutChildProps,
   withMarginProps,
   withSizeXProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import style from "./link.styles";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import style from "./link.styles.js";
 let GdsLink = class extends withMarginProps(
   withSizeXProps(withLayoutChildProps(GdsElement))
 ) {

package/components/link/link.js

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

package/components/link/link.styles.js

@@ -6,6 +6,7 @@ const style = css`
   @layer core {
     :host {
       display: inline-block;
+      white-space: normal;
     }
   }
 

package/components/mask/index.js

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

package/components/mask/mask.component.js

@@ -2,11 +2,11 @@ import {
   __decorateClass
 } from "../../chunks/chunk.QTSIPXV3.js";
 import { html } from "lit/static-html.js";
-import { tokens } from "../../tokens.style";
-import { styleExpressionProperty } from "../../utils/decorators/style-expression-property";
-import { gdsCustomElement } from "../../utils/helpers/custom-element-scoping";
-import { GdsFlex } from "../flex/flex.component";
-import MaskCSS from "./mask.style";
+import { tokens } from "../../tokens.style.js";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
+import { gdsCustomElement } from "../../utils/helpers/custom-element-scoping.js";
+import { GdsFlex } from "../flex/flex.component.js";
+import MaskCSS from "./mask.style.js";
 let GdsMask = class extends GdsFlex {
   constructor() {
     super();

package/components/mask/mask.js

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

package/components/menu-button/index.js

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

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

@@ -9,14 +9,14 @@ import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { literal, html as staticHtml } from "lit/static-html.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement } from "../../scoping";
-import { tokens } from "../../tokens.style";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
 import {
   withLayoutChildProps,
   withSizeXProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import MenuButtonCSS from "./menu-button.styles";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import MenuButtonCSS from "./menu-button.styles.js";
 let GdsMenuButton = class extends withSizeXProps(
   withLayoutChildProps(GdsElement)
 ) {

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

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

package/components/popover/backdrop.component.js

@@ -3,8 +3,8 @@ import {
 } from "../../chunks/chunk.QTSIPXV3.js";
 import { css } from "lit";
 import { property } from "lit/decorators.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
 let GdsBackdrop = class extends GdsElement {
   constructor() {
     super(...arguments);

package/components/popover/backdrop.js

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

package/components/popover/index.js

@@ -1,2 +1,2 @@
-export * from "./popover";
-export * from "./backdrop";
+export * from "./popover.js";
+export * from "./backdrop.js";

package/components/popover/popover.component.js

@@ -16,12 +16,12 @@ import {
   offset,
   shift
 } from "@floating-ui/dom";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement, html } from "../../scoping";
-import { TransitionalStyles } from "../../transitional-styles";
-import { watch, watchMediaQuery } from "../../utils/decorators";
-import { IconCrossSmall } from "../icon/icons/cross-small.component";
-import styles from "./popover.styles";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { TransitionalStyles } from "../../transitional-styles.js";
+import { watch, watchMediaQuery } from "../../utils/decorators/index.js";
+import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
+import styles from "./popover.styles.js";
 let GdsPopover = class extends GdsElement {
   constructor() {
     super(...arguments);

package/components/popover/popover.js

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

package/components/popover/popover.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 styles from "./popover.trans.styles.scss.js";
 function register() {
   TransitionalStyles.instance.register("gds-popover", styles.toString());

package/components/popover/popover.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  :host {\n    display: contents;\n  }\n  :host([open]) dialog {\n    box-sizing: border-box;\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n    visibility: visible;\n  }\n  :host > div:not([hidden]) {\n    display: contents;\n  }\n  header {\n    display: flex;\n  }\n  header .close::part(_button) {\n    border-radius: 100%;\n    color: var(--text-primary-color);\n    border: 1px solid transparent;\n  }\n  header .close::part(_button):hover {\n    background-color: var(--grey-500);\n  }\n  header h2 {\n    flex-grow: 1;\n    font-weight: 400;\n    line-height: 1.5;\n    margin: 0.25rem 0 0 0.75rem;\n  }\n  dialog {\n    --z-index: var(--sg-z-index-popover);\n    background-color: var(--sg-popover-background);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    opacity: 0;\n    visibility: hidden;\n    position: fixed;\n    inset: auto;\n    z-index: var(--z-index);\n    box-shadow: var(--sg-popover-box-shadow);\n    color: var(--text-primary-color);\n    overflow: hidden;\n    padding: 0;\n    padding-bottom: 0;\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--text-primary-color);\n    --sg-border-color: var(--text-primary-color);\n    border-radius: var(--sg-border-radius);\n  }\n  @media (max-width: 35.98em) {\n    dialog.use-modal-in-mobile {\n      border-top: solid var(--sg-border-width) var(--sg-border-color);\n      --border-color: var(--sg-border-color);\n      padding-bottom: 0.5rem;\n      border-radius: 1rem 1rem 0 0;\n      bottom: 0;\n      left: 0;\n      transition: all 300ms ease-in-out;\n      width: 100%;\n      border: 1px solid var(--border-color);\n      border-radius: 0.25rem;\n      max-height: 80svh;\n      padding-bottom: 0;\n      inset: 0;\n    }\n    dialog.use-modal-in-mobile.v-kb-visible {\n      inset-block-end: auto;\n      max-height: 50svh;\n      top: 1rem;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile header {\n      display: none;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {\n      opacity: 0;\n    }\n  }\n  dialog::backdrop {\n    background-color: rgba(0, 0, 0, 0.2);\n    display: block;\n    position: fixed;\n  }\n  dialog:not(.use-modal-in-mobile) header {\n    display: none;\n  }\n  dialog:not(.use-modal-in-mobile)::backdrop {\n    opacity: 0;\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  :host {\n    display: contents;\n  }\n  :host([open]) dialog {\n    box-sizing: border-box;\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n    visibility: visible;\n  }\n  :host > div:not([hidden]) {\n    display: contents;\n  }\n  header {\n    display: flex;\n  }\n  header .close::part(_button) {\n    border-radius: 100%;\n    color: var(--text-primary-color);\n    border: 1px solid transparent;\n  }\n  header .close::part(_button):hover {\n    background-color: var(--grey-500);\n  }\n  header h2 {\n    flex-grow: 1;\n    font-weight: 400;\n    line-height: 1.5;\n    margin: 0.25rem 0 0 0.75rem;\n  }\n  dialog {\n    --z-index: var(--sg-z-index-popover);\n    background-color: var(--sg-popover-background);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    opacity: 0;\n    visibility: hidden;\n    position: fixed;\n    inset: auto;\n    z-index: var(--z-index);\n    box-shadow: var(--sg-popover-box-shadow);\n    color: var(--text-primary-color);\n    overflow: hidden;\n    padding: 0;\n    padding-bottom: 0;\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--text-primary-color);\n    --sg-border-color: var(--text-primary-color);\n    border-radius: var(--sg-border-radius);\n  }\n  @media (max-width: 35.98em) {\n    dialog.use-modal-in-mobile {\n      border-top: solid var(--sg-border-width) var(--sg-border-color);\n      --border-color: var(--sg-border-color);\n      padding-bottom: 0.5rem;\n      border-radius: 1rem 1rem 0 0;\n      bottom: 0;\n      left: 0;\n      transition: all 300ms ease-in-out;\n      width: 100%;\n      border: 1px solid var(--border-color);\n      border-radius: 0.25rem;\n      max-height: 80svh;\n      padding-bottom: 0;\n      inset: 0;\n    }\n    dialog.use-modal-in-mobile.v-kb-visible {\n      inset-block-end: auto;\n      max-height: 50svh;\n      top: 1rem;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile header {\n      display: none;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {\n      opacity: 0;\n    }\n  }\n  dialog::backdrop {\n    background-color: rgba(0, 0, 0, 0.2);\n    display: block;\n    position: fixed;\n  }\n  dialog:not(.use-modal-in-mobile) header {\n    display: none;\n  }\n  dialog:not(.use-modal-in-mobile)::backdrop {\n    opacity: 0;\n  }\n}";
+export default styles;

package/components/pure.js

@@ -1,37 +1,37 @@
-export * from "../primitives/listbox/option.component";
-export * from "../primitives/menu/menu-heading.component";
-export * from "../primitives/menu/menu-item.component";
-export * from "./button/button.component";
-export * from "./badge/badge.component";
-export * from "./menu-button/menu-button.component";
-export * from "./context-menu/context-menu.component";
-export * from "./coachmark/coachmark.component";
-export * from "./datepicker/datepicker.component";
-export * from "./dropdown/dropdown.component";
-export * from "./dialog/dialog.component";
-export * from "./grid/grid.component";
-export * from "./card/card.component";
-export * from "./flex/flex.component";
-export * from "./mask/mask.component";
-export * from "./container/container.component";
-export * from "./div/div.component";
-export * from "./img/img.component";
-export * from "./video/video.component";
-export * from "./text/text.component";
-export * from "./link/link.component";
-export * from "./popover/popover.component";
-export * from "./divider/divider.component";
-export * from "./spacer/spacer.component";
-export * from "./signal/signal.component";
-export * from "./grouped-list/grouped-list.component";
-export * from "./icon/icons/pure";
-export * from "./segmented-control/segmented-control.component";
-export * from "./theme/theme.component";
-export * from "./filter-chips/filter-chips.component";
-export * from "./form/summary/summary.component";
-export * from "./input/input.component";
-export * from "./select/select.component";
-export * from "./spinner/spinner.component";
-export * from "./textarea/textarea.component";
-export * from "./radio/radio-group/radio-group.component";
-export * from "./radio/radio.component";
+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 "./button/button.component.js";
+export * from "./badge/badge.component.js";
+export * from "./menu-button/menu-button.component.js";
+export * from "./context-menu/context-menu.component.js";
+export * from "./coachmark/coachmark.component.js";
+export * from "./datepicker/datepicker.component.js";
+export * from "./dropdown/dropdown.component.js";
+export * from "./dialog/dialog.component.js";
+export * from "./grid/grid.component.js";
+export * from "./card/card.component.js";
+export * from "./flex/flex.component.js";
+export * from "./mask/mask.component.js";
+export * from "./container/container.component.js";
+export * from "./div/div.component.js";
+export * from "./img/img.component.js";
+export * from "./video/video.component.js";
+export * from "./text/text.component.js";
+export * from "./link/link.component.js";
+export * from "./popover/popover.component.js";
+export * from "./divider/divider.component.js";
+export * from "./spacer/spacer.component.js";
+export * from "./signal/signal.component.js";
+export * from "./grouped-list/grouped-list.component.js";
+export * from "./icon/icons/pure.js";
+export * from "./segmented-control/segmented-control.component.js";
+export * from "./theme/theme.component.js";
+export * from "./filter-chips/filter-chips.component.js";
+export * from "./form/summary/summary.component.js";
+export * from "./input/input.component.js";
+export * from "./select/select.component.js";
+export * from "./spinner/spinner.component.js";
+export * from "./textarea/textarea.component.js";
+export * from "./radio/radio-group/radio-group.component.js";
+export * from "./radio/radio.component.js";

package/components/radio/index.js

@@ -1,2 +1,2 @@
-export * from "./radio";
-export * from "./radio-group/radio-group";
+export * from "./radio.js";
+export * from "./radio-group/radio-group.js";

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

@@ -7,18 +7,18 @@ var _initializeFocusable, initializeFocusable_fn, _handleFocus, handleFocus_fn,
 import { localized } from "@lit/localize";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { GdsFormControlFooter } from "../../../primitives/form-control-footer/form-control-footer.component";
-import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component";
-import { gdsCustomElement, html } from "../../../scoping";
-import { tokens } from "../../../tokens.style";
-import { watch } from "../../../utils/decorators/watch";
+import { GdsFormControlFooter } from "../../../primitives/form-control-footer/form-control-footer.component.js";
+import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component.js";
+import { gdsCustomElement, html } from "../../../scoping.js";
+import { tokens } from "../../../tokens.style.js";
+import { watch } from "../../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
   withMarginProps,
   withSizeXProps
-} from "../../../utils/mixins/declarative-layout-mixins";
-import { GdsFormControlElement } from "../../form/form-control";
-import { styles } from "./radio-group.styles";
+} from "../../../utils/mixins/declarative-layout-mixins.js";
+import { GdsFormControlElement } from "../../form/form-control.js";
+import { styles } from "./radio-group.styles.js";
 let RadioGroup = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);

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

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

package/components/radio/radio.component.js

@@ -5,11 +5,11 @@ import {
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _handleClick, _handleKeyDown;
 import { property, state } from "lit/decorators.js";
-import { GdsElement } from "../../gds-element";
-import { GdsSelectionFieldLabel } from "../../primitives/selection-controls/selection-field-label.component";
-import { gdsCustomElement, html } from "../../scoping";
-import { watch } from "../../utils/decorators/watch";
-import { styles } from "./radio.styles";
+import { GdsElement } from "../../gds-element.js";
+import { GdsSelectionFieldLabel } from "../../primitives/selection-controls/selection-field-label.component.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { watch } from "../../utils/decorators/watch.js";
+import { styles } from "./radio.styles.js";
 let GdsRadio = class extends GdsElement {
   constructor() {
     super();

package/components/radio/radio.js

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

package/components/rich-text/index.js

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

package/components/rich-text/rich-text.component.js

@@ -2,16 +2,16 @@ import {
   __decorateClass
 } from "../../chunks/chunk.QTSIPXV3.js";
 import { property } from "lit/decorators.js";
-import { GdsElement } from "../../gds-element";
-import { gdsCustomElement } from "../../scoping";
-import { tokens } from "../../tokens.style";
-import { observeLightDOM } from "../../utils/decorators";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { observeLightDOM } from "../../utils/decorators/index.js";
 import {
   withLayoutChildProps,
   withMarginProps
-} from "../../utils/mixins/declarative-layout-mixins";
-import { defaultStyles } from "../text/default-typography.styles";
-import { styles } from "./rich-text.styles";
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { defaultStyles } from "../text/default-typography.styles.js";
+import { styles } from "./rich-text.styles.js";
 let GdsRichText = class extends withLayoutChildProps(
   withMarginProps(GdsElement)
 ) {

package/components/rich-text/rich-text.js

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

package/components/segmented-control/index.js

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

package/components/segmented-control/segment/index.js

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

package/components/segmented-control/segment/segment.component.js

@@ -3,11 +3,11 @@ import {
 } from "../../../chunks/chunk.QTSIPXV3.js";
 import { unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
-import { GdsElement } from "../../../gds-element";
-import { gdsCustomElement, html } from "../../../scoping";
-import { tokens } from "../../../tokens.style";
-import { TransitionalStyles } from "../../../transitional-styles";
-import { withSizeXProps } from "../../../utils/mixins/declarative-layout-mixins";
+import { GdsElement } from "../../../gds-element.js";
+import { gdsCustomElement, html } from "../../../scoping.js";
+import { tokens } from "../../../tokens.style.js";
+import { TransitionalStyles } from "../../../transitional-styles.js";
+import { withSizeXProps } from "../../../utils/mixins/declarative-layout-mixins.js";
 import style from "./segment.style.css.js";
 let GdsSegment = class extends withSizeXProps(GdsElement) {
   constructor() {

package/components/segmented-control/segment/segment.js

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

package/components/segmented-control/segment/segment.style.css.js

@@ -1,4 +1,2 @@
-
-            const styles = "@layer base {\n  :host {\n    display: flex;\n    z-index: 1;\n  }\n\n  button {\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    background: transparent;\n    border-radius: var(--gds-space-max);\n    border-width: 0;\n    color: var(--gds-color-l3-content-tertiary);\n    cursor: pointer;\n    flex-grow: 1;\n    flex-shrink: 0;\n    font-family: inherit;\n    font-size: inherit;\n    overflow: hidden;\n    padding: 0 1rem;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n    transition:\n      background-color 0.2s,\n      border-color 0.2s,\n      color 0.2s,\n      outline-color 422ms;\n\n    outline-width: var(--gds-size-3xs);\n    outline-style: solid;\n    outline-offset: -2px;\n    outline-color: transparent;\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  }\n\n  @media (pointer: fine) {\n    :host(:not([selected])) button:hover {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-states-light-hover),\n        transparent\n      );\n\n      &:disabled {\n        background-color: transparent;\n      }\n    }\n  }\n\n  button:focus-visible {\n    outline-color: color-mix(\n      in srgb,\n      transparent,\n      var(--gds-color-l3-content-tertiary) 100%\n    );\n  }\n}\n";
-            export default styles;
-          
+const styles = "@layer base {\n  :host {\n    display: flex;\n    z-index: 1;\n  }\n\n  button {\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    background: transparent;\n    border-radius: var(--gds-space-max);\n    border-width: 0;\n    color: var(--gds-color-l3-content-tertiary);\n    cursor: pointer;\n    flex-grow: 1;\n    flex-shrink: 0;\n    font-family: inherit;\n    font-size: inherit;\n    overflow: hidden;\n    padding: 0 1rem;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n    transition:\n      background-color 0.2s,\n      border-color 0.2s,\n      color 0.2s,\n      outline-color 422ms;\n\n    outline-width: var(--gds-size-3xs);\n    outline-style: solid;\n    outline-offset: -2px;\n    outline-color: transparent;\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  }\n\n  @media (pointer: fine) {\n    :host(:not([selected])) button:hover {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-states-light-hover),\n        transparent\n      );\n\n      &:disabled {\n        background-color: transparent;\n      }\n    }\n  }\n\n  button:focus-visible {\n    outline-color: color-mix(\n      in srgb,\n      transparent,\n      var(--gds-color-l3-content-tertiary) 100%\n    );\n  }\n}\n";
+export default styles;

package/components/segmented-control/segment/segment.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 styles from "./segment.trans.styles.scss.js";
 function register() {
   TransitionalStyles.instance.register("gds-segmented", styles.toString());

package/components/segmented-control/segment/segment.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  @layer _base;\n  @layer _base {\n    :host {\n      border-right: 1px solid #333;\n      box-sizing: border-box;\n      display: flex;\n      transition: 0.2s;\n      z-index: 1;\n    }\n    :host(:last-child) {\n      border-right: 0;\n    }\n    button {\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      background: transparent;\n      border-width: 0;\n      color: var(--text-primary-color);\n      cursor: pointer;\n      flex-grow: 1;\n      flex-shrink: 0;\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      min-width: 6.625rem;\n      overflow: hidden;\n      padding: 0 1rem;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      width: 100%;\n      border-radius: 0;\n    }\n    @media (pointer: fine) {\n      button:hover {\n        background-color: var(--grey-400);\n      }\n    }\n    button[aria-current=true] {\n      background-color: #333;\n      color: #fff;\n    }\n    button:focus-visible {\n      outline: 2px solid #000;\n      outline-offset: -2px;\n    }\n    button:disabled,\n    button[aria-disabled=true],\n    button.disabled {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    button:disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder, button.disabled::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    button:disabled::placeholder,\n    button[aria-disabled=true]::placeholder,\n    button.disabled::placeholder {\n      color: var(--text-disabled-color);\n    }\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  @layer _base;\n  @layer _base {\n    :host {\n      border-right: 1px solid #333;\n      box-sizing: border-box;\n      display: flex;\n      transition: 0.2s;\n      z-index: 1;\n    }\n    :host(:last-child) {\n      border-right: 0;\n    }\n    button {\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      background: transparent;\n      border-width: 0;\n      color: var(--text-primary-color);\n      cursor: pointer;\n      flex-grow: 1;\n      flex-shrink: 0;\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      min-width: 6.625rem;\n      overflow: hidden;\n      padding: 0 1rem;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      width: 100%;\n      border-radius: 0;\n    }\n    @media (pointer: fine) {\n      button:hover {\n        background-color: var(--grey-400);\n      }\n    }\n    button[aria-current=true] {\n      background-color: #333;\n      color: #fff;\n    }\n    button:focus-visible {\n      outline: 2px solid #000;\n      outline-offset: -2px;\n    }\n    button:disabled,\n    button[aria-disabled=true],\n    button.disabled {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    button:disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder, button.disabled::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    button:disabled::placeholder,\n    button[aria-disabled=true]::placeholder,\n    button.disabled::placeholder {\n      color: var(--text-disabled-color);\n    }\n  }\n}";
+export default styles;