@sebgroup/green-core 1.45.2 → 1.46.0

package/chunks/{chunk.TQCUATGL.js → chunk.TMQYOMEN.js}

@@ -14,8 +14,27 @@ import {
 // libs/core/src/utils/transitional-styles/transitional-styles.ts
 import { unsafeCSS } from "lit";
 
-// libs/core/src/components/dropdown/dropdown.trans.styles.scss?inline
-var dropdown_trans_styles_default = `/**
+// libs/core/src/primitives/menu/menu-heading.trans.styles.scss?inline
+var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host {
+    background-color: var(--gds-ref-pallet-base300);
+    color: var(--gds-ref-pallet-base800);
+    display: flex;
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.75rem 1rem;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+  :host([aria-hidden=true]) {
+    display: none;
+  }
+}`;
+
+// libs/core/src/primitives/listbox/listbox.trans.styles.scss?inline
+var listbox_trans_styles_default = `/**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
@@ -33,487 +52,264 @@ var dropdown_trans_styles_default = `/**
 * Use \`add-focus\` instead
 */
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-/* rules for groups of checkboxes and radio buttons*/
+/** 
+  * @deprecated in favor of Grouped list component
+  */
+/** 
+  * @deprecated in favor of Grouped list component
+  */
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
-  input:not([type]),
-  input[type=date],
-  input[type=datetime],
-  input[type=datetime-local],
-  input[type=email],
-  input[type=month],
-  input[type=number],
-  input[type=password],
-  input[type=search],
-  input[type=tel],
-  input[type=text],
-  input[type=time],
-  input[type=url],
-  input[type=week] {
+  :host {
+    padding-left: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    overflow-y: auto;
+  }
+  :host > li {
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+    border: 0;
+    display: block;
+    position: relative;
+  }
+  :host > li::before {
+    font-weight: 500;
+    display: inline-block;
+    left: 0;
+    position: absolute;
+    text-align: center;
+  }
+}`;
+
+// libs/core/src/primitives/listbox/option.trans.styles.scss?inline
+var option_trans_styles_default = `/**
+ * Calculate the luminance for a color.
+ * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ */
+/**
+ * Calculate the contrast ratio between two colors.
+ * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-enable max-nesting-depth */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/**
+* @deprecated
+* Use \`add-focus\` instead
+*/
+/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
+@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host div {
     padding-left: 1rem;
     padding-right: 1rem;
     padding-bottom: 0.75rem;
     padding-top: 0.75rem;
-    border-radius: var(--sg-border-radius);
-    border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--sg-border-color);
-    background-color: var(--sg-form-control-bg);
-    color: var(--sg-text-primary);
-    min-height: 2.75rem;
+    line-height: 1.25;
+    cursor: pointer;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    gap: 0.75rem;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
   }
-  input:not([type]):focus:not(:focus-visible),
-  input[type=date]:focus:not(:focus-visible),
-  input[type=datetime]:focus:not(:focus-visible),
-  input[type=datetime-local]:focus:not(:focus-visible),
-  input[type=email]:focus:not(:focus-visible),
-  input[type=month]:focus:not(:focus-visible),
-  input[type=number]:focus:not(:focus-visible),
-  input[type=password]:focus:not(:focus-visible),
-  input[type=search]:focus:not(:focus-visible),
-  input[type=tel]:focus:not(:focus-visible),
-  input[type=text]:focus:not(:focus-visible),
-  input[type=time]:focus:not(:focus-visible),
-  input[type=url]:focus:not(:focus-visible),
-  input[type=week]:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
+  :host div:hover, :host div:focus-visible {
+    background-color: var(--grey-400);
   }
-  input:not([type]):focus, input:not([type]):focus-visible,
-  input[type=date]:focus,
-  input[type=date]:focus-visible,
-  input[type=datetime]:focus,
-  input[type=datetime]:focus-visible,
-  input[type=datetime-local]:focus,
-  input[type=datetime-local]:focus-visible,
-  input[type=email]:focus,
-  input[type=email]:focus-visible,
-  input[type=month]:focus,
-  input[type=month]:focus-visible,
-  input[type=number]:focus,
-  input[type=number]:focus-visible,
-  input[type=password]:focus,
-  input[type=password]:focus-visible,
-  input[type=search]:focus,
-  input[type=search]:focus-visible,
-  input[type=tel]:focus,
-  input[type=tel]:focus-visible,
-  input[type=text]:focus,
-  input[type=text]:focus-visible,
-  input[type=time]:focus,
-  input[type=time]:focus-visible,
-  input[type=url]:focus,
-  input[type=url]:focus-visible,
-  input[type=week]:focus,
-  input[type=week]:focus-visible {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
+  :host div:active {
+    background-color: var(--grey-400);
   }
-  input:not([type]).small,
-  input[type=date].small,
-  input[type=datetime].small,
-  input[type=datetime-local].small,
-  input[type=email].small,
-  input[type=month].small,
-  input[type=number].small,
-  input[type=password].small,
-  input[type=search].small,
-  input[type=tel].small,
-  input[type=text].small,
-  input[type=time].small,
-  input[type=url].small,
-  input[type=week].small {
-    min-height: 2rem;
-    padding: 0.25rem 0.75rem;
-    line-height: 1rem;
+  :host div:focus {
+    outline-color: #000;
+    outline-offset: -0.25rem;
   }
-  @media screen and (-ms-high-contrast: active) {
-    input:not([type]),
-    input[type=date],
-    input[type=datetime],
-    input[type=datetime-local],
-    input[type=email],
-    input[type=month],
-    input[type=number],
-    input[type=password],
-    input[type=search],
-    input[type=tel],
-    input[type=text],
-    input[type=time],
-    input[type=url],
-    input[type=week] {
-      border: 2px solid currentcolor;
-    }
+  :host div.active.sg-highlighted, :host div[aria-selected=true] {
+    background: var(--grey-1000);
+    color: #fff;
   }
-  input:not([type]):disabled, input:not([type]).disabled, input:not([type])[aria-disabled=true],
-  input[type=date]:disabled,
-  input[type=date].disabled,
-  input[type=date][aria-disabled=true],
-  input[type=datetime]:disabled,
-  input[type=datetime].disabled,
-  input[type=datetime][aria-disabled=true],
-  input[type=datetime-local]:disabled,
-  input[type=datetime-local].disabled,
-  input[type=datetime-local][aria-disabled=true],
-  input[type=email]:disabled,
-  input[type=email].disabled,
-  input[type=email][aria-disabled=true],
-  input[type=month]:disabled,
-  input[type=month].disabled,
-  input[type=month][aria-disabled=true],
-  input[type=number]:disabled,
-  input[type=number].disabled,
-  input[type=number][aria-disabled=true],
-  input[type=password]:disabled,
-  input[type=password].disabled,
-  input[type=password][aria-disabled=true],
-  input[type=search]:disabled,
-  input[type=search].disabled,
-  input[type=search][aria-disabled=true],
-  input[type=tel]:disabled,
-  input[type=tel].disabled,
-  input[type=tel][aria-disabled=true],
-  input[type=text]:disabled,
-  input[type=text].disabled,
-  input[type=text][aria-disabled=true],
-  input[type=time]:disabled,
-  input[type=time].disabled,
-  input[type=time][aria-disabled=true],
-  input[type=url]:disabled,
-  input[type=url].disabled,
-  input[type=url][aria-disabled=true],
-  input[type=week]:disabled,
-  input[type=week].disabled,
-  input[type=week][aria-disabled=true] {
-    background: var(--sg-form-control-bg-disabled) !important;
-    color: var(--text-disabled-color) !important;
-    border-color: var(--border-disabled-color) !important;
-    cursor: not-allowed;
+  :host(:hover) div,
+  :host(:focus-visible) div {
+    background-color: var(--grey-400);
   }
-  input:not([type]):disabled::-moz-placeholder, input:not([type]).disabled::-moz-placeholder, input:not([type])[aria-disabled=true]::-moz-placeholder, input[type=date]:disabled::-moz-placeholder, input[type=date].disabled::-moz-placeholder, input[type=date][aria-disabled=true]::-moz-placeholder, input[type=datetime]:disabled::-moz-placeholder, input[type=datetime].disabled::-moz-placeholder, input[type=datetime][aria-disabled=true]::-moz-placeholder, input[type=datetime-local]:disabled::-moz-placeholder, input[type=datetime-local].disabled::-moz-placeholder, input[type=datetime-local][aria-disabled=true]::-moz-placeholder, input[type=email]:disabled::-moz-placeholder, input[type=email].disabled::-moz-placeholder, input[type=email][aria-disabled=true]::-moz-placeholder, input[type=month]:disabled::-moz-placeholder, input[type=month].disabled::-moz-placeholder, input[type=month][aria-disabled=true]::-moz-placeholder, input[type=number]:disabled::-moz-placeholder, input[type=number].disabled::-moz-placeholder, input[type=number][aria-disabled=true]::-moz-placeholder, input[type=password]:disabled::-moz-placeholder, input[type=password].disabled::-moz-placeholder, input[type=password][aria-disabled=true]::-moz-placeholder, input[type=search]:disabled::-moz-placeholder, input[type=search].disabled::-moz-placeholder, input[type=search][aria-disabled=true]::-moz-placeholder, input[type=tel]:disabled::-moz-placeholder, input[type=tel].disabled::-moz-placeholder, input[type=tel][aria-disabled=true]::-moz-placeholder, input[type=text]:disabled::-moz-placeholder, input[type=text].disabled::-moz-placeholder, input[type=text][aria-disabled=true]::-moz-placeholder, input[type=time]:disabled::-moz-placeholder, input[type=time].disabled::-moz-placeholder, input[type=time][aria-disabled=true]::-moz-placeholder, input[type=url]:disabled::-moz-placeholder, input[type=url].disabled::-moz-placeholder, input[type=url][aria-disabled=true]::-moz-placeholder, input[type=week]:disabled::-moz-placeholder, input[type=week].disabled::-moz-placeholder, input[type=week][aria-disabled=true]::-moz-placeholder {
-    color: var(--text-disabled-color);
+  :host(:active) div {
+    background-color: var(--grey-500);
   }
-  input:not([type]):disabled::placeholder, input:not([type]).disabled::placeholder, input:not([type])[aria-disabled=true]::placeholder,
-  input[type=date]:disabled::placeholder,
-  input[type=date].disabled::placeholder,
-  input[type=date][aria-disabled=true]::placeholder,
-  input[type=datetime]:disabled::placeholder,
-  input[type=datetime].disabled::placeholder,
-  input[type=datetime][aria-disabled=true]::placeholder,
-  input[type=datetime-local]:disabled::placeholder,
-  input[type=datetime-local].disabled::placeholder,
-  input[type=datetime-local][aria-disabled=true]::placeholder,
-  input[type=email]:disabled::placeholder,
-  input[type=email].disabled::placeholder,
-  input[type=email][aria-disabled=true]::placeholder,
-  input[type=month]:disabled::placeholder,
-  input[type=month].disabled::placeholder,
-  input[type=month][aria-disabled=true]::placeholder,
-  input[type=number]:disabled::placeholder,
-  input[type=number].disabled::placeholder,
-  input[type=number][aria-disabled=true]::placeholder,
-  input[type=password]:disabled::placeholder,
-  input[type=password].disabled::placeholder,
-  input[type=password][aria-disabled=true]::placeholder,
-  input[type=search]:disabled::placeholder,
-  input[type=search].disabled::placeholder,
-  input[type=search][aria-disabled=true]::placeholder,
-  input[type=tel]:disabled::placeholder,
-  input[type=tel].disabled::placeholder,
-  input[type=tel][aria-disabled=true]::placeholder,
-  input[type=text]:disabled::placeholder,
-  input[type=text].disabled::placeholder,
-  input[type=text][aria-disabled=true]::placeholder,
-  input[type=time]:disabled::placeholder,
-  input[type=time].disabled::placeholder,
-  input[type=time][aria-disabled=true]::placeholder,
-  input[type=url]:disabled::placeholder,
-  input[type=url].disabled::placeholder,
-  input[type=url][aria-disabled=true]::placeholder,
-  input[type=week]:disabled::placeholder,
-  input[type=week].disabled::placeholder,
-  input[type=week][aria-disabled=true]::placeholder {
-    color: var(--text-disabled-color);
+  :host(:focus-visible) {
+    outline-color: #000;
+    outline-offset: -0.25rem;
   }
-  input:not([type]):hover,
-  input[type=date]:hover,
-  input[type=datetime]:hover,
-  input[type=datetime-local]:hover,
-  input[type=email]:hover,
-  input[type=month]:hover,
-  input[type=number]:hover,
-  input[type=password]:hover,
-  input[type=search]:hover,
-  input[type=tel]:hover,
-  input[type=text]:hover,
-  input[type=time]:hover,
-  input[type=url]:hover,
-  input[type=week]:hover {
-    background-color: var(--gds-ref-pallet-base100);
+  :host([aria-hidden=true]) div {
+    display: none;
   }
-  input[type=number] {
-    -moz-appearance: textfield;
+  :host([highlighted]) div {
+    background: var(--grey-1000);
+    color: #fff;
   }
-  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  .checkbox {
+    background-color: var(--gds-comp-checkbox-container-color);
+    border-radius: var(--gds-comp-checkbox-border-radius);
+    box-shadow: inset 0 0 0 1px var(--gds-comp-checkbox-border-color);
+    flex: 0 0 auto;
+    flex-shrink: 0;
+    height: var(--gds-comp-checkbox-container-width);
+    margin-top: 0.15rem;
+    position: relative;
+    width: var(--gds-comp-checkbox-container-width);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-  :host {
-    display: block;
-    font-family: inherit;
+  .checkbox [gds-element=gds-icon-checkmark]::part(icon) {
+    width: 10px;
+    height: 10px;
   }
-  :host(:invalid) [gds-element=gds-popover] + .form-info {
-    position: relative;
-    transition: all 200ms ease-in-out, outline-offset 0s, outline-width 0s;
-    color: var(--intent-danger-background);
-    opacity: 1;
+  .checkbox.checked {
+    background-color: var(--gds-comp-checkbox-container-color-selected);
   }
-  :host(:invalid) [gds-element=gds-popover] + .form-info::before {
-    background: transparent;
-    border-radius: 0 0 4px 4px;
-    clip-path: inset(4px 0 0 0);
-    content: "";
-    display: block;
-    height: 4px;
-    position: absolute;
-    transform: translate3d(0, -12px, 0);
-    transition: 300ms ease-in-out;
-    width: 100%;
+  .checkbox.checked [gds-element=gds-icon-checkmark]::part(icon) {
+    color: var(--gds-comp-checkbox-border-color-selected, #fff);
   }
-  :host(:invalid) [gds-element=gds-popover] + .form-info::before {
-    background: var(--intent-danger-background);
-    clip-path: inset(1px 0 0 0);
+}`;
+
+// libs/core/src/primitives/listbox/listbox.trans.styles.ts
+function register() {
+  TransitionalStyles.instance.register("gds-listbox", listbox_trans_styles_default.toString());
+  TransitionalStyles.instance.register("gds-option", option_trans_styles_default.toString());
+  TransitionalStyles.instance.register(
+    "gds-menu-heading",
+    menu_heading_trans_styles_default.toString()
+  );
+}
+
+// libs/core/src/components/popover/popover.trans.styles.scss?inline
+var popover_trans_styles_default = `/* stylelint-disable max-nesting-depth */
+/* stylelint-enable max-nesting-depth */
+/**
+ * Calculate the luminance for a color.
+ * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ */
+/**
+ * Calculate the contrast ratio between two colors.
+ * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/**
+* @deprecated
+* Use \`add-focus\` instead
+*/
+/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
+@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host {
+    display: contents;
   }
-  ::slotted([slot=trigger]) {
-    overflow: hidden;
+  :host([open]) dialog {
+    box-sizing: border-box;
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
   }
-  slot[name=trigger] > span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-wrap: nowrap;
-    white-space: nowrap;
+  header {
+    display: flex;
   }
-  .form-info {
+  header .close::part(_button) {
+    border-radius: 100%;
     color: var(--text-primary-color);
-    display: block;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    width: 100%;
+    border: 1px solid transparent;
   }
-  input[type=text] {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    font-size: 1rem;
-    line-height: 1;
-    margin: -1px;
-    min-height: auto;
-    padding: 0.75rem;
+  header .close::part(_button):hover {
+    background-color: var(--grey-500);
   }
-  input[type=text]:focus {
-    outline-offset: -0.25rem;
+  header h2 {
+    flex-grow: 1;
+    font-weight: 400;
+    line-height: 1.5;
+    margin: 0.25rem 0 0 0.75rem;
   }
-  button {
-    background-color: transparent;
-    border: 0;
-    cursor: pointer;
-    font-family: inherit;
+  dialog {
+    --z-index: var(--sg-z-index-popover);
+    background-color: var(--sg-popover-background);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    inset: auto;
+    z-index: var(--z-index);
+    box-shadow: var(--sg-popover-box-shadow);
+    color: var(--text-primary-color);
+    overflow: hidden;
     padding: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-    border-radius: var(--sg-border-radius);
+    padding-bottom: 0;
     border: solid var(--sg-border-width) var(--sg-border-color);
-    font-weight: 500;
-    min-height: 2.75rem;
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-    background: transparent;
-    border-color: rgb(0, 122, 199);
-    color: rgb(0, 122, 199);
-    --color: rgb(0, 122, 199);
-    background-color: transparent;
-    border: 0;
-    cursor: pointer;
-    font-family: inherit;
-    padding: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
+    --border-color: var(--text-primary-color);
+    --sg-border-color: var(--text-primary-color);
     border-radius: var(--sg-border-radius);
-    border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--grey-800);
-    --sg-border-color: var(--grey-800);
-    background: var(--sg-form-control-bg);
-    color: var(--text-primary-color);
-    min-height: 2.75rem;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    font-size: inherit;
-    font-weight: normal;
-    line-height: 1.125;
-    gap: 1ch;
-    width: 100%;
-    margin-bottom: 0.5rem;
-    margin-top: 0.5rem;
-  }
-  button:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
-  }
-  button:focus, button:focus-visible {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
   }
   @media (max-width: 35.98em) {
-    button {
-      min-width: 100%;
+    dialog.use-modal-in-mobile {
+      border-top: solid var(--sg-border-width) var(--sg-border-color);
+      --border-color: var(--sg-border-color);
+      padding-bottom: 0.5rem;
+      border-radius: 1rem 1rem 0 0;
+      bottom: 0;
+      left: 0;
+      transition: all 300ms ease-in-out;
+      width: 100%;
+      border: 1px solid var(--border-color);
+      border-radius: 0.25rem;
+      max-height: 80svh;
+      padding-bottom: 0;
+      inset: 0;
     }
-  }
-  @media screen and (-ms-high-contrast: active) {
-    button {
-      border: 2px solid currentcolor;
+    dialog.use-modal-in-mobile.v-kb-visible {
+      inset-block-end: auto;
+      max-height: 50svh;
+      top: 1rem;
     }
   }
-  button.small {
-    min-height: 2rem;
-    padding: 0.4375rem 0.75rem;
-    line-height: 1rem;
-  }
-  button.large {
-    min-height: 4rem;
-    padding: 1rem 1.5rem;
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-  button:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
-  }
-  button:focus, button:focus-visible {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
-  }
-  button:not(:disabled, .disabled, [aria-disabled]):hover {
-    background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-    color: rgb(255, 255, 255);
-    --background: rgb(25.4035777564, 154.8940067842, 227.221994169);
-    --color: rgb(255, 255, 255);
-    border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
-  }
-  button[aria-selected=true], button:active, button.active, button.active:hover, button:active:hover {
-    background-color: rgb(0, 122, 199);
-    color: rgb(255, 255, 255);
-    --background: rgb(0, 122, 199);
-    --color: rgb(255, 255, 255);
-    border-color: rgb(0, 122, 199);
-  }
-  button:disabled, button.disabled, button[aria-disabled=true] {
-    background: var(--sg-form-control-bg-disabled) !important;
-    color: var(--text-disabled-color) !important;
-    border-color: var(--border-disabled-color) !important;
-    cursor: not-allowed;
-  }
-  button:disabled::-moz-placeholder, button.disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder {
-    color: var(--text-disabled-color);
-  }
-  button:disabled::placeholder, button.disabled::placeholder, button[aria-disabled=true]::placeholder {
-    color: var(--text-disabled-color);
-  }
-  button:focus, button:focus {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
-  }
-  @media (max-width: 35.98em) {
-    button {
-      min-width: 100%;
+  @media (min-width: 36em) {
+    dialog.use-modal-in-mobile header {
+      display: none;
     }
   }
-  button:not(:disabled, .disabled, [aria-disabled]):hover {
-    --background: var(--grey-400);
-    --color: var(--grey-1000);
-    background-color: var(--grey-400);
-    color: var(--grey-1000);
-    border-color: var(--grey-1000);
-  }
-  button > span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  @media (min-width: 36em) {
+    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {
+      opacity: 0;
+    }
   }
-  button::after {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-    border-bottom: solid 2px var(--text-primary-color);
-    border-left: solid 2px var(--text-primary-color);
-    content: "";
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.2);
     display: block;
-    height: 0.5rem;
-    width: 0.5rem;
-    position: relative;
-    top: -0.15rem;
-    transform: translate(75%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, -1);
-    transition: transform 300ms ease-in;
-    flex-shrink: 0;
-  }
-  button[aria-expanded=true]::after {
-    transform: translate(75%, 6px) rotate3d(0, 0, 1, -45deg) scale3d(-1, -1, 1);
-  }
-  button:hover::after {
-    border-color: currentColor;
-  }
-  button.small {
-    font-size: 0.875rem;
-  }
-  button:hover {
-    background: var(--grey-400);
+    position: fixed;
   }
-  button::after {
+  dialog:not(.use-modal-in-mobile) header {
     display: none;
   }
-  button .icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    max-height: 24px;
-    max-width: 24px;
-  }
-  button[aria-expanded=true] ::part(icon) {
-    transform: scaleY(-1);
-  }
-  label {
-    display: block;
-    font-weight: 500;
-    line-height: 1.25rem;
-    margin-bottom: 0.5rem;
-    width: 100%;
+  dialog:not(.use-modal-in-mobile)::backdrop {
+    opacity: 0;
   }
 }`;
 
-// libs/core/src/primitives/listbox/listbox.trans.styles.scss?inline
-var listbox_trans_styles_default = `/**
+// libs/core/src/components/popover/popover.trans.styles.ts
+function register2() {
+  TransitionalStyles.instance.register("gds-popover", popover_trans_styles_default.toString());
+}
+var popover_trans_styles_default2 = register2;
+
+// libs/core/src/components/context-menu/context-menu.trans.styles.scss?inline
+var context_menu_trans_styles_default = `/* stylelint-disable max-nesting-depth */
+/* stylelint-enable max-nesting-depth */
+/**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
@@ -521,8 +317,6 @@ var listbox_trans_styles_default = `/**
  * Calculate the contrast ratio between two colors.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
-/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
 /* stylelint-disable */
 /* stylelint-enable */
 /* stylelint-disable */
@@ -531,162 +325,189 @@ var listbox_trans_styles_default = `/**
 * Use \`add-focus\` instead
 */
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-/** 
-  * @deprecated in favor of Grouped list component
-  */
-/** 
-  * @deprecated in favor of Grouped list component
-  */
+i.sg-icon {
+  font-size: 0;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+}
+i.sg-icon::before {
+  content: "";
+  display: inline-block;
+  background: var(--color);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+i.sg-icon.sg-icon-calendar::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
+}
+i.sg-icon.sg-icon-calendar-range::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
+}
+i.sg-icon.sg-icon-ellipsis::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
+}
+i.sg-icon.sg-icon-grip-vertical::before {
+  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+}
+i.sg-icon.sg-icon-next::before {
+  background: none;
+  border-bottom: 2px solid;
+  border-left: 2px solid;
+  content: "";
+  display: block;
+  height: 12px;
+  margin-left: -10px;
+  margin-top: 2px;
+  transform: translate(75%) rotate(-135deg) scaleZ(-1);
+  transition: transform 0.3s ease-in;
+  width: 12px;
+}
+i.sg-icon.sg-icon-previous::before {
+  background: none;
+  border-bottom: 2px solid;
+  border-left: 2px solid;
+  content: "";
+  display: block;
+  height: 12px;
+  margin-left: -4px;
+  margin-top: 2px;
+  transform: translate(75%) rotate(45deg) scaleZ(-1);
+  transition: transform 0.3s ease-in;
+  width: 12px;
+}
+i.sg-icon.sg-icon-ellipsis::before {
+  margin-right: -2px;
+}
+
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
+  @layer _base, _overrides;
   :host {
-    padding-left: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    overflow-y: auto;
-  }
-  :host > li {
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
-    border: 0;
-    display: block;
-    position: relative;
-  }
-  :host > li::before {
-    font-weight: 500;
     display: inline-block;
-    left: 0;
-    position: absolute;
-    text-align: center;
   }
-}`;
-
-// libs/core/src/primitives/listbox/option.trans.styles.scss?inline
-var option_trans_styles_default = `/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  :host div {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-    line-height: 1.25;
-    cursor: pointer;
-    display: flex;
-    gap: 0.75rem;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-  :host div:hover, :host div:focus-visible {
-    background-color: var(--grey-400);
-  }
-  :host div:active {
-    background-color: var(--grey-400);
-  }
-  :host div:focus {
-    outline-color: #000;
-    outline-offset: -0.25rem;
-  }
-  :host div.active.sg-highlighted, :host div[aria-selected=true] {
-    background: var(--grey-1000);
-    color: #fff;
-  }
-  :host(:hover) div,
-  :host(:focus-visible) div {
-    background-color: var(--grey-400);
-  }
-  :host(:active) div {
-    background-color: var(--grey-500);
-  }
-  :host(:focus-visible) {
-    outline-color: #000;
-    outline-offset: -0.25rem;
-  }
-  :host([aria-hidden=true]) div {
-    display: none;
-  }
-  :host([highlighted]) div {
-    background: var(--grey-1000);
-    color: #fff;
-  }
-  .checkbox {
-    background-color: var(--gds-comp-checkbox-container-color);
-    border-radius: var(--gds-comp-checkbox-border-radius);
-    box-shadow: inset 0 0 0 1px var(--gds-comp-checkbox-border-color);
-    flex: 0 0 auto;
-    flex-shrink: 0;
-    height: var(--gds-comp-checkbox-container-width);
-    margin-top: 0.15rem;
-    position: relative;
-    width: var(--gds-comp-checkbox-container-width);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .checkbox [gds-element=gds-icon-checkmark]::part(icon) {
-    width: 10px;
-    height: 10px;
-  }
-  .checkbox.checked {
-    background-color: var(--gds-comp-checkbox-container-color-selected);
-  }
-  .checkbox.checked [gds-element=gds-icon-checkmark]::part(icon) {
-    color: var(--gds-comp-checkbox-border-color-selected, #fff);
-  }
-}`;
-
-// libs/core/src/primitives/menu/menu-heading.trans.styles.scss?inline
-var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  :host {
-    background-color: var(--gds-ref-pallet-base300);
-    color: var(--gds-ref-pallet-base800);
-    display: flex;
-    font-size: 0.875rem;
-    font-weight: 500;
-    padding: 0.75rem 1rem;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
+  @layer _base {
+    button {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      font-family: inherit;
+      padding: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-bottom: 0.75rem;
+      padding-top: 0.75rem;
+      border-radius: var(--sg-border-radius);
+      border: solid var(--sg-border-width) var(--sg-border-color);
+      font-weight: 500;
+      min-height: 2.75rem;
+      align-items: center;
+      display: inline-flex;
+      justify-content: center;
+      background-color: transparent;
+      border: 0.0625rem solid transparent;
+      padding: 0.625rem;
+      height: 2.75rem;
+      width: 2.75rem;
+      min-width: auto;
+      --color: var(--gds-ref-pallet-base800);
+    }
+    button:focus:not(:focus-visible) {
+      box-shadow: none;
+      outline: 0;
+    }
+    button:focus, button:focus-visible {
+      outline-color: var(--gds-sys-color-focus-outline);
+      outline-style: solid;
+      outline-width: 0.125rem;
+      outline-offset: 0.125rem;
+    }
+    @media (max-width: 35.98em) {
+      button {
+        min-width: 100%;
+      }
+    }
+    @media screen and (-ms-high-contrast: active) {
+      button {
+        border: 2px solid currentcolor;
+      }
+    }
+    button.small {
+      min-height: 2rem;
+      padding: 0.4375rem 0.75rem;
+      line-height: 1rem;
+    }
+    button.large {
+      min-height: 4rem;
+      padding: 1rem 1.5rem;
+      font-size: 1.5rem;
+      line-height: 2rem;
+    }
+    .form-group button {
+      margin-top: -0.625rem;
+    }
+    button.small {
+      height: 2rem;
+      width: 2rem;
+      padding: 0.4375rem;
+      line-height: 1.125rem;
+    }
+    button svg {
+      height: 1rem;
+      width: 1rem;
+    }
+    button path,
+    button line,
+    button circle,
+    button rect,
+    button ellipse,
+    button polyline,
+    button text {
+      fill: var(--gds-ref-pallet-base800);
+      stroke: var(--gds-ref-pallet-base800);
+      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    }
+    button:hover, button.highlighted {
+      background-color: rgba(0, 0, 0, 0.1);
+      border-color: transparent;
+    }
+    button:active, button.highlighted:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+      border-color: transparent;
+    }
   }
-  :host([aria-hidden=true]) {
-    display: none;
+  @layer _overrides {
+    button {
+      border-color: transparent;
+      color: var(--gds-ref-pallet-base800);
+      display: flex;
+      gap: 0.5rem;
+      line-height: 0.75;
+      padding-inline: 0.4375rem;
+      width: auto;
+    }
+    button.highlighted {
+      background-color: var(--gds-ref-pallet-base300);
+    }
   }
 }`;
 
-// libs/core/src/primitives/listbox/listbox.trans.styles.ts
-function register() {
-  TransitionalStyles.instance.register("gds-listbox", listbox_trans_styles_default.toString());
-  TransitionalStyles.instance.register("gds-option", option_trans_styles_default.toString());
-  TransitionalStyles.instance.register(
-    "gds-menu-heading",
-    menu_heading_trans_styles_default.toString()
-  );
+// libs/core/src/components/context-menu/context-menu.trans.styles.ts
+function register3() {
+  TransitionalStyles.instance.register("gds-context-menu", context_menu_trans_styles_default.toString());
+  register2();
+  register();
 }
+var context_menu_trans_styles_default2 = register3;
 
-// libs/core/src/components/popover/popover.trans.styles.scss?inline
-var popover_trans_styles_default = `/* stylelint-disable max-nesting-depth */
+// libs/core/src/components/calendar/calendar.trans.styles.scss?inline
+var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
 /* stylelint-enable max-nesting-depth */
 /**
  * Calculate the luminance for a color.
@@ -704,119 +525,185 @@ var popover_trans_styles_default = `/* stylelint-disable max-nesting-depth */
 * Use \`add-focus\` instead
 */
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
+/* medium */
+/* regular */
+/* regular */
+/* regular */
+/* hover */
+/* focus */
+/* selected */
+/* highlighted */
+/* active */
+/* disabled */
+/* today */
+/* weekend */
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
-  :host {
-    display: contents;
-  }
-  :host([open]) dialog {
-    box-sizing: border-box;
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-  header {
-    display: flex;
-  }
-  header .close::part(_button) {
-    border-radius: 100%;
-    color: var(--text-primary-color);
-    border: 1px solid transparent;
-  }
-  header .close::part(_button):hover {
-    background-color: var(--grey-500);
-  }
-  header h2 {
-    flex-grow: 1;
-    font-weight: 400;
-    line-height: 1.5;
-    margin: 0.25rem 0 0 0.75rem;
-  }
-  dialog {
-    --z-index: var(--sg-z-index-popover);
-    background-color: var(--sg-popover-background);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    opacity: 0;
-    visibility: hidden;
-    position: fixed;
-    inset: auto;
-    z-index: var(--z-index);
-    box-shadow: var(--sg-popover-box-shadow);
-    color: var(--text-primary-color);
-    overflow: hidden;
-    padding: 0;
-    padding-bottom: 0;
-    border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--text-primary-color);
-    --sg-border-color: var(--text-primary-color);
-    border-radius: var(--sg-border-radius);
-  }
-  @media (max-width: 35.98em) {
-    dialog.use-modal-in-mobile {
-      border-top: solid var(--sg-border-width) var(--sg-border-color);
-      --border-color: var(--sg-border-color);
-      padding-bottom: 0.5rem;
-      border-radius: 1rem 1rem 0 0;
-      bottom: 0;
-      left: 0;
-      transition: all 300ms ease-in-out;
-      width: 100%;
-      border: 1px solid var(--border-color);
-      border-radius: 0.25rem;
-      max-height: 80svh;
-      padding-bottom: 0;
-      inset: 0;
+  @layer _base {
+    :host {
+      display: flex;
+      justify-content: center;
     }
-    dialog.use-modal-in-mobile.v-kb-visible {
-      inset-block-end: auto;
-      max-height: 50svh;
-      top: 1rem;
+    @media (max-width: 35.98em) {
+      :host {
+        flex-wrap: wrap;
+        overflow-y: auto;
+      }
     }
-  }
-  @media (min-width: 36em) {
-    dialog.use-modal-in-mobile header {
-      display: none;
+    :host table {
+      border-spacing: 0;
     }
-  }
-  @media (min-width: 36em) {
-    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {
-      opacity: 0;
+    :host th,
+    :host td {
+      box-sizing: border-box;
+      height: 2.75rem;
+      text-align: center;
+      width: 2.75rem;
+    }
+    :host thead {
+      /* days */
+    }
+    :host thead th {
+      background: var(--sg-bg-level-2);
+      border-bottom: solid 1px var(--sg-grey-300);
+      font-weight: 400;
+      top: 0;
+    }
+    @media (max-width: 35.98em) {
+      :host thead th {
+        position: sticky;
+      }
+    }
+    :host tbody {
+      /* week numbers */
+      /* dates */
+    }
+    :host tbody th {
+      font-weight: 400;
+    }
+    :host tbody td {
+      border: solid 1px transparent;
+      font-weight: 500;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
+      /* weekend */
+      /* today */
+      /* hover */
+      /* focus */
+      /* selected */
+      /* highlighted */
+      /* active (pressed) */
+      /* disabled */
+    }
+    :host tbody td.sg-date-holiday:not(.disabled) {
+      background: var(--sg-bg-level-2);
+      color: hsl(var(--sg-hsl-red-2));
+    }
+    :host tbody td.today {
+      background: transparent;
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 2px var(--grey-1000);
+      color: var(--grey-1000);
+    }
+    :host tbody td:hover:not(.disabled) {
+      background: var(--grey-500);
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
+      color: var(--gds-sys-color-font);
+      cursor: pointer;
+    }
+    :host tbody td:focus-visible:focus:not(:focus-visible) {
+      box-shadow: none;
+      outline: 0;
+    }
+    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {
+      outline-color: var(--gds-sys-color-focus-outline);
+      outline-style: solid;
+      outline-width: 0.125rem;
+      outline-offset: 0.125rem;
+    }
+    :host tbody td:focus-visible:not(.disabled) {
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
+      cursor: pointer;
+      position: relative;
+      z-index: 0;
+    }
+    :host tbody td[aria-selected=true] {
+      background: var(--grey-1000);
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
+      color: hsl(var(--sg-hsl-white));
+    }
+    :host tbody td[tabindex="0"] {
+      border-radius: 4px;
+    }
+    :host tbody td:hover:active:not(.disabled) {
+      background: var(--grey-1000);
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
+      color: hsl(var(--sg-hsl-white));
+    }
+    :host tbody td.disabled {
+      background: hsl(var(--sg-hsl-disabled-background));
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
+      color: hsl(var(--sg-hsl-disabled-color));
+      cursor: not-allowed;
+      font-weight: 400;
+    }
+    :host tbody td.disabled.sg-date-holiday {
+      color: hsla(var(--sg-hsl-red-2), 0.25);
+    }
+    :host tbody td.disabled .number,
+    :host tbody td.disabled .indicator-dot {
+      --_color: hsl(var(--sg-hsl-disabled-color)) !important;
+    }
+    :host tbody td.custom-date {
+      position: relative;
+    }
+    :host tbody .number {
+      color: var(--_color, "currentColor");
+    }
+    :host tbody .indicator-dot {
+      display: block;
+      width: 0.375rem;
+      height: 0.375rem;
+      top: 1.5rem;
+      border-radius: 50%;
+      margin: auto;
+      position: absolute;
+      inset-block-end: 0.125rem;
+      inset-inline: 0;
+      background-color: var(--_color);
+    }
+    :host table {
+      flex-grow: 1;
+      width: 100%;
+    }
+    :host table td {
+      width: 3rem;
+      height: 3rem;
     }
   }
-  dialog::backdrop {
-    background-color: rgba(0, 0, 0, 0.2);
-    display: block;
-    position: fixed;
-  }
-  dialog:not(.use-modal-in-mobile) header {
-    display: none;
-  }
-  dialog:not(.use-modal-in-mobile)::backdrop {
-    opacity: 0;
+  @layer _modifiers {
+    .week-number {
+      border-right: solid 1px var(--gds-ref-pallet-base300);
+      font-weight: 400;
+      pointer-events: none;
+    }
   }
 }`;
 
-// libs/core/src/components/popover/popover.trans.styles.ts
-function register2() {
-  TransitionalStyles.instance.register("gds-popover", popover_trans_styles_default.toString());
-}
-var popover_trans_styles_default2 = register2;
-
-// libs/core/src/components/dropdown/dropdown.trans.styles.ts
+// libs/core/src/components/calendar/calendar.trans.styles.ts
 function register4() {
-  register();
-  register2();
-  register3();
-  TransitionalStyles.instance.register("gds-dropdown", dropdown_trans_styles_default.toString());
+  TransitionalStyles.instance.register("gds-calendar", calendar_trans_styles_default.toString());
 }
-var dropdown_trans_styles_default2 = register4;
+var calendar_trans_styles_default2 = register4;
 
-// libs/core/src/components/context-menu/context-menu.trans.styles.scss?inline
-var context_menu_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
+// libs/core/src/components/dropdown/dropdown.trans.styles.scss?inline
+var dropdown_trans_styles_default = `/**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
@@ -824,6 +711,8 @@ var context_menu_trans_styles_default = `/* stylelint-disable max-nesting-depth
  * Calculate the contrast ratio between two colors.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-enable max-nesting-depth */
 /* stylelint-disable */
 /* stylelint-enable */
 /* stylelint-disable */
@@ -832,186 +721,493 @@ var context_menu_trans_styles_default = `/* stylelint-disable max-nesting-depth
 * Use \`add-focus\` instead
 */
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-i.sg-icon {
-  font-size: 0;
-  width: 1rem;
-  height: 1rem;
-  display: inline-block;
-}
-i.sg-icon::before {
-  content: "";
-  display: inline-block;
-  background: var(--color);
-  width: 100%;
-  height: 100%;
-  -webkit-mask-repeat: no-repeat;
-          mask-repeat: no-repeat;
-}
-i.sg-icon.sg-icon-calendar::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-calendar-range::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-ellipsis::before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-grip-vertical::before {
-  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
-          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
-}
-i.sg-icon.sg-icon-next::before {
-  background: none;
-  border-bottom: 2px solid;
-  border-left: 2px solid;
-  content: "";
-  display: block;
-  height: 12px;
-  margin-left: -10px;
-  margin-top: 2px;
-  transform: translate(75%) rotate(-135deg) scaleZ(-1);
-  transition: transform 0.3s ease-in;
-  width: 12px;
-}
-i.sg-icon.sg-icon-previous::before {
-  background: none;
-  border-bottom: 2px solid;
-  border-left: 2px solid;
-  content: "";
-  display: block;
-  height: 12px;
-  margin-left: -4px;
-  margin-top: 2px;
-  transform: translate(75%) rotate(45deg) scaleZ(-1);
-  transition: transform 0.3s ease-in;
-  width: 12px;
-}
-i.sg-icon.sg-icon-ellipsis::before {
-  margin-right: -2px;
-}
-
+/* rules for groups of checkboxes and radio buttons*/
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
-  @layer _base, _overrides;
+  input:not([type]),
+  input[type=date],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=email],
+  input[type=month],
+  input[type=number],
+  input[type=password],
+  input[type=search],
+  input[type=tel],
+  input[type=text],
+  input[type=time],
+  input[type=url],
+  input[type=week] {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 0.75rem;
+    padding-top: 0.75rem;
+    border-radius: var(--sg-border-radius);
+    border: solid var(--sg-border-width) var(--sg-border-color);
+    --border-color: var(--sg-border-color);
+    background-color: var(--sg-form-control-bg);
+    color: var(--sg-text-primary);
+    min-height: 2.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  input:not([type]):focus:not(:focus-visible),
+  input[type=date]:focus:not(:focus-visible),
+  input[type=datetime]:focus:not(:focus-visible),
+  input[type=datetime-local]:focus:not(:focus-visible),
+  input[type=email]:focus:not(:focus-visible),
+  input[type=month]:focus:not(:focus-visible),
+  input[type=number]:focus:not(:focus-visible),
+  input[type=password]:focus:not(:focus-visible),
+  input[type=search]:focus:not(:focus-visible),
+  input[type=tel]:focus:not(:focus-visible),
+  input[type=text]:focus:not(:focus-visible),
+  input[type=time]:focus:not(:focus-visible),
+  input[type=url]:focus:not(:focus-visible),
+  input[type=week]:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  input:not([type]):focus, input:not([type]):focus-visible,
+  input[type=date]:focus,
+  input[type=date]:focus-visible,
+  input[type=datetime]:focus,
+  input[type=datetime]:focus-visible,
+  input[type=datetime-local]:focus,
+  input[type=datetime-local]:focus-visible,
+  input[type=email]:focus,
+  input[type=email]:focus-visible,
+  input[type=month]:focus,
+  input[type=month]:focus-visible,
+  input[type=number]:focus,
+  input[type=number]:focus-visible,
+  input[type=password]:focus,
+  input[type=password]:focus-visible,
+  input[type=search]:focus,
+  input[type=search]:focus-visible,
+  input[type=tel]:focus,
+  input[type=tel]:focus-visible,
+  input[type=text]:focus,
+  input[type=text]:focus-visible,
+  input[type=time]:focus,
+  input[type=time]:focus-visible,
+  input[type=url]:focus,
+  input[type=url]:focus-visible,
+  input[type=week]:focus,
+  input[type=week]:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  input:not([type]).small,
+  input[type=date].small,
+  input[type=datetime].small,
+  input[type=datetime-local].small,
+  input[type=email].small,
+  input[type=month].small,
+  input[type=number].small,
+  input[type=password].small,
+  input[type=search].small,
+  input[type=tel].small,
+  input[type=text].small,
+  input[type=time].small,
+  input[type=url].small,
+  input[type=week].small {
+    min-height: 2rem;
+    padding: 0.25rem 0.75rem;
+    line-height: 1rem;
+  }
+  @media screen and (-ms-high-contrast: active) {
+    input:not([type]),
+    input[type=date],
+    input[type=datetime],
+    input[type=datetime-local],
+    input[type=email],
+    input[type=month],
+    input[type=number],
+    input[type=password],
+    input[type=search],
+    input[type=tel],
+    input[type=text],
+    input[type=time],
+    input[type=url],
+    input[type=week] {
+      border: 2px solid currentcolor;
+    }
+  }
+  input:not([type]):disabled, input:not([type]).disabled, input:not([type])[aria-disabled=true],
+  input[type=date]:disabled,
+  input[type=date].disabled,
+  input[type=date][aria-disabled=true],
+  input[type=datetime]:disabled,
+  input[type=datetime].disabled,
+  input[type=datetime][aria-disabled=true],
+  input[type=datetime-local]:disabled,
+  input[type=datetime-local].disabled,
+  input[type=datetime-local][aria-disabled=true],
+  input[type=email]:disabled,
+  input[type=email].disabled,
+  input[type=email][aria-disabled=true],
+  input[type=month]:disabled,
+  input[type=month].disabled,
+  input[type=month][aria-disabled=true],
+  input[type=number]:disabled,
+  input[type=number].disabled,
+  input[type=number][aria-disabled=true],
+  input[type=password]:disabled,
+  input[type=password].disabled,
+  input[type=password][aria-disabled=true],
+  input[type=search]:disabled,
+  input[type=search].disabled,
+  input[type=search][aria-disabled=true],
+  input[type=tel]:disabled,
+  input[type=tel].disabled,
+  input[type=tel][aria-disabled=true],
+  input[type=text]:disabled,
+  input[type=text].disabled,
+  input[type=text][aria-disabled=true],
+  input[type=time]:disabled,
+  input[type=time].disabled,
+  input[type=time][aria-disabled=true],
+  input[type=url]:disabled,
+  input[type=url].disabled,
+  input[type=url][aria-disabled=true],
+  input[type=week]:disabled,
+  input[type=week].disabled,
+  input[type=week][aria-disabled=true] {
+    background: var(--sg-form-control-bg-disabled) !important;
+    color: var(--text-disabled-color) !important;
+    border-color: var(--border-disabled-color) !important;
+    cursor: not-allowed;
+  }
+  input:not([type]):disabled::-moz-placeholder, input:not([type]).disabled::-moz-placeholder, input:not([type])[aria-disabled=true]::-moz-placeholder, input[type=date]:disabled::-moz-placeholder, input[type=date].disabled::-moz-placeholder, input[type=date][aria-disabled=true]::-moz-placeholder, input[type=datetime]:disabled::-moz-placeholder, input[type=datetime].disabled::-moz-placeholder, input[type=datetime][aria-disabled=true]::-moz-placeholder, input[type=datetime-local]:disabled::-moz-placeholder, input[type=datetime-local].disabled::-moz-placeholder, input[type=datetime-local][aria-disabled=true]::-moz-placeholder, input[type=email]:disabled::-moz-placeholder, input[type=email].disabled::-moz-placeholder, input[type=email][aria-disabled=true]::-moz-placeholder, input[type=month]:disabled::-moz-placeholder, input[type=month].disabled::-moz-placeholder, input[type=month][aria-disabled=true]::-moz-placeholder, input[type=number]:disabled::-moz-placeholder, input[type=number].disabled::-moz-placeholder, input[type=number][aria-disabled=true]::-moz-placeholder, input[type=password]:disabled::-moz-placeholder, input[type=password].disabled::-moz-placeholder, input[type=password][aria-disabled=true]::-moz-placeholder, input[type=search]:disabled::-moz-placeholder, input[type=search].disabled::-moz-placeholder, input[type=search][aria-disabled=true]::-moz-placeholder, input[type=tel]:disabled::-moz-placeholder, input[type=tel].disabled::-moz-placeholder, input[type=tel][aria-disabled=true]::-moz-placeholder, input[type=text]:disabled::-moz-placeholder, input[type=text].disabled::-moz-placeholder, input[type=text][aria-disabled=true]::-moz-placeholder, input[type=time]:disabled::-moz-placeholder, input[type=time].disabled::-moz-placeholder, input[type=time][aria-disabled=true]::-moz-placeholder, input[type=url]:disabled::-moz-placeholder, input[type=url].disabled::-moz-placeholder, input[type=url][aria-disabled=true]::-moz-placeholder, input[type=week]:disabled::-moz-placeholder, input[type=week].disabled::-moz-placeholder, input[type=week][aria-disabled=true]::-moz-placeholder {
+    color: var(--text-disabled-color);
+  }
+  input:not([type]):disabled::placeholder, input:not([type]).disabled::placeholder, input:not([type])[aria-disabled=true]::placeholder,
+  input[type=date]:disabled::placeholder,
+  input[type=date].disabled::placeholder,
+  input[type=date][aria-disabled=true]::placeholder,
+  input[type=datetime]:disabled::placeholder,
+  input[type=datetime].disabled::placeholder,
+  input[type=datetime][aria-disabled=true]::placeholder,
+  input[type=datetime-local]:disabled::placeholder,
+  input[type=datetime-local].disabled::placeholder,
+  input[type=datetime-local][aria-disabled=true]::placeholder,
+  input[type=email]:disabled::placeholder,
+  input[type=email].disabled::placeholder,
+  input[type=email][aria-disabled=true]::placeholder,
+  input[type=month]:disabled::placeholder,
+  input[type=month].disabled::placeholder,
+  input[type=month][aria-disabled=true]::placeholder,
+  input[type=number]:disabled::placeholder,
+  input[type=number].disabled::placeholder,
+  input[type=number][aria-disabled=true]::placeholder,
+  input[type=password]:disabled::placeholder,
+  input[type=password].disabled::placeholder,
+  input[type=password][aria-disabled=true]::placeholder,
+  input[type=search]:disabled::placeholder,
+  input[type=search].disabled::placeholder,
+  input[type=search][aria-disabled=true]::placeholder,
+  input[type=tel]:disabled::placeholder,
+  input[type=tel].disabled::placeholder,
+  input[type=tel][aria-disabled=true]::placeholder,
+  input[type=text]:disabled::placeholder,
+  input[type=text].disabled::placeholder,
+  input[type=text][aria-disabled=true]::placeholder,
+  input[type=time]:disabled::placeholder,
+  input[type=time].disabled::placeholder,
+  input[type=time][aria-disabled=true]::placeholder,
+  input[type=url]:disabled::placeholder,
+  input[type=url].disabled::placeholder,
+  input[type=url][aria-disabled=true]::placeholder,
+  input[type=week]:disabled::placeholder,
+  input[type=week].disabled::placeholder,
+  input[type=week][aria-disabled=true]::placeholder {
+    color: var(--text-disabled-color);
+  }
+  input:not([type]):hover,
+  input[type=date]:hover,
+  input[type=datetime]:hover,
+  input[type=datetime-local]:hover,
+  input[type=email]:hover,
+  input[type=month]:hover,
+  input[type=number]:hover,
+  input[type=password]:hover,
+  input[type=search]:hover,
+  input[type=tel]:hover,
+  input[type=text]:hover,
+  input[type=time]:hover,
+  input[type=url]:hover,
+  input[type=week]:hover {
+    background-color: var(--gds-ref-pallet-base100);
+  }
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
   :host {
-    display: inline-block;
+    display: block;
+    font-family: inherit;
+  }
+  :host(:invalid) [gds-element=gds-popover] + .form-info {
+    position: relative;
+    transition: all 200ms ease-in-out, outline-offset 0s, outline-width 0s;
+    color: var(--intent-danger-background);
+    opacity: 1;
+  }
+  :host(:invalid) [gds-element=gds-popover] + .form-info::before {
+    background: transparent;
+    border-radius: 0 0 4px 4px;
+    clip-path: inset(4px 0 0 0);
+    content: "";
+    display: block;
+    height: 4px;
+    position: absolute;
+    transform: translate3d(0, -12px, 0);
+    transition: 300ms ease-in-out;
+    width: 100%;
+  }
+  :host(:invalid) [gds-element=gds-popover] + .form-info::before {
+    background: var(--intent-danger-background);
+    clip-path: inset(1px 0 0 0);
+  }
+  ::slotted([slot=trigger]) {
+    overflow: hidden;
+  }
+  slot[name=trigger] > span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    white-space: nowrap;
+  }
+  .form-info {
+    color: var(--text-primary-color);
+    display: block;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    width: 100%;
+  }
+  input[type=text] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    font-size: 1rem;
+    line-height: 1;
+    margin: -1px;
+    min-height: auto;
+    padding: 0.75rem;
   }
-  @layer _base {
+  input[type=text]:focus {
+    outline-offset: -0.25rem;
+  }
+  button {
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    font-family: inherit;
+    padding: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 0.75rem;
+    padding-top: 0.75rem;
+    border-radius: var(--sg-border-radius);
+    border: solid var(--sg-border-width) var(--sg-border-color);
+    font-weight: 500;
+    min-height: 2.75rem;
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
+    background: transparent;
+    border-color: rgb(0, 122, 199);
+    color: rgb(0, 122, 199);
+    --color: rgb(0, 122, 199);
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    font-family: inherit;
+    padding: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 0.75rem;
+    padding-top: 0.75rem;
+    border-radius: var(--sg-border-radius);
+    border: solid var(--sg-border-width) var(--sg-border-color);
+    --border-color: var(--grey-800);
+    --sg-border-color: var(--grey-800);
+    background: var(--sg-form-control-bg);
+    color: var(--text-primary-color);
+    min-height: 2.75rem;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    font-size: inherit;
+    font-weight: normal;
+    line-height: 1.125;
+    gap: 1ch;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+  button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  button:focus, button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  @media (max-width: 35.98em) {
     button {
-      background-color: transparent;
-      border: 0;
-      cursor: pointer;
-      font-family: inherit;
-      padding: 0;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      padding-bottom: 0.75rem;
-      padding-top: 0.75rem;
-      border-radius: var(--sg-border-radius);
-      border: solid var(--sg-border-width) var(--sg-border-color);
-      font-weight: 500;
-      min-height: 2.75rem;
-      align-items: center;
-      display: inline-flex;
-      justify-content: center;
-      background-color: transparent;
-      border: 0.0625rem solid transparent;
-      padding: 0.625rem;
-      height: 2.75rem;
-      width: 2.75rem;
-      min-width: auto;
-      --color: var(--gds-ref-pallet-base800);
-    }
-    button:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    button:focus, button:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    @media (max-width: 35.98em) {
-      button {
-        min-width: 100%;
-      }
-    }
-    @media screen and (-ms-high-contrast: active) {
-      button {
-        border: 2px solid currentcolor;
-      }
-    }
-    button.small {
-      min-height: 2rem;
-      padding: 0.4375rem 0.75rem;
-      line-height: 1rem;
-    }
-    button.large {
-      min-height: 4rem;
-      padding: 1rem 1.5rem;
-      font-size: 1.5rem;
-      line-height: 2rem;
-    }
-    .form-group button {
-      margin-top: -0.625rem;
-    }
-    button.small {
-      height: 2rem;
-      width: 2rem;
-      padding: 0.4375rem;
-      line-height: 1.125rem;
-    }
-    button svg {
-      height: 1rem;
-      width: 1rem;
-    }
-    button path,
-    button line,
-    button circle,
-    button rect,
-    button ellipse,
-    button polyline,
-    button text {
-      fill: var(--gds-ref-pallet-base800);
-      stroke: var(--gds-ref-pallet-base800);
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+      min-width: 100%;
     }
-    button:hover, button.highlighted {
-      background-color: rgba(0, 0, 0, 0.1);
-      border-color: transparent;
+  }
+  @media screen and (-ms-high-contrast: active) {
+    button {
+      border: 2px solid currentcolor;
     }
-    button:active, button.highlighted:hover {
-      background-color: rgba(0, 0, 0, 0.2);
-      border-color: transparent;
+  }
+  button.small {
+    min-height: 2rem;
+    padding: 0.4375rem 0.75rem;
+    line-height: 1rem;
+  }
+  button.large {
+    min-height: 4rem;
+    padding: 1rem 1.5rem;
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  button:focus, button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  button:not(:disabled, .disabled, [aria-disabled]):hover {
+    background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
+    color: rgb(255, 255, 255);
+    --background: rgb(25.4035777564, 154.8940067842, 227.221994169);
+    --color: rgb(255, 255, 255);
+    border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);
+  }
+  button[aria-selected=true], button:active, button.active, button.active:hover, button:active:hover {
+    background-color: rgb(0, 122, 199);
+    color: rgb(255, 255, 255);
+    --background: rgb(0, 122, 199);
+    --color: rgb(255, 255, 255);
+    border-color: rgb(0, 122, 199);
+  }
+  button:disabled, button.disabled, button[aria-disabled=true] {
+    background: var(--sg-form-control-bg-disabled) !important;
+    color: var(--text-disabled-color) !important;
+    border-color: var(--border-disabled-color) !important;
+    cursor: not-allowed;
+  }
+  button:disabled::-moz-placeholder, button.disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder {
+    color: var(--text-disabled-color);
+  }
+  button:disabled::placeholder, button.disabled::placeholder, button[aria-disabled=true]::placeholder {
+    color: var(--text-disabled-color);
+  }
+  button:focus, button:focus {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  @media (max-width: 35.98em) {
+    button {
+      min-width: 100%;
     }
   }
-  @layer _overrides {
-    button {
-      border-color: transparent;
-      color: var(--gds-ref-pallet-base800);
-      display: flex;
-      gap: 0.5rem;
-      line-height: 0.75;
-      padding-inline: 0.4375rem;
-      width: auto;
-    }
-    button.highlighted {
-      background-color: var(--gds-ref-pallet-base300);
-    }
+  button:not(:disabled, .disabled, [aria-disabled]):hover {
+    --background: var(--grey-400);
+    --color: var(--grey-1000);
+    background-color: var(--grey-400);
+    color: var(--grey-1000);
+    border-color: var(--grey-1000);
+  }
+  button > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  button::after {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    border-bottom: solid 2px var(--text-primary-color);
+    border-left: solid 2px var(--text-primary-color);
+    content: "";
+    display: block;
+    height: 0.5rem;
+    width: 0.5rem;
+    position: relative;
+    top: -0.15rem;
+    transform: translate(75%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, -1);
+    transition: transform 300ms ease-in;
+    flex-shrink: 0;
+  }
+  button[aria-expanded=true]::after {
+    transform: translate(75%, 6px) rotate3d(0, 0, 1, -45deg) scale3d(-1, -1, 1);
+  }
+  button:hover::after {
+    border-color: currentColor;
+  }
+  button.small {
+    font-size: 0.875rem;
+  }
+  button:hover {
+    background: var(--grey-400);
+  }
+  button::after {
+    display: none;
+  }
+  button .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    max-height: 24px;
+    max-width: 24px;
+  }
+  button[aria-expanded=true] ::part(icon) {
+    transform: scaleY(-1);
+  }
+  label {
+    display: block;
+    font-weight: 500;
+    line-height: 1.25rem;
+    margin-bottom: 0.5rem;
+    width: 100%;
   }
 }`;
 
-// libs/core/src/components/context-menu/context-menu.trans.styles.ts
-function register5() {
-  TransitionalStyles.instance.register("gds-context-menu", context_menu_trans_styles_default.toString());
-  register2();
+// libs/core/src/components/dropdown/dropdown.trans.styles.ts
+function register6() {
   register();
+  register2();
+  register5();
+  TransitionalStyles.instance.register("gds-dropdown", dropdown_trans_styles_default.toString());
 }
-var context_menu_trans_styles_default2 = register5;
+var dropdown_trans_styles_default2 = register6;
 
 // libs/core/src/components/datepicker/datepicker.trans.styles.scss?inline
 var datepicker_trans_styles_default = `/* stylelint-disable max-nesting-depth */
@@ -1228,210 +1424,50 @@ var datepicker_trans_styles_default = `/* stylelint-disable max-nesting-depth */
   }
 }`;
 
-// libs/core/src/components/calendar/calendar.trans.styles.scss?inline
-var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-/* medium */
-/* regular */
-/* regular */
-/* regular */
-/* hover */
-/* focus */
-/* selected */
-/* highlighted */
-/* active */
-/* disabled */
-/* today */
-/* weekend */
-@layer base, reset, transitional-styles;
+// libs/core/src/components/datepicker/datepicker.trans.styles.ts
+function register7() {
+  TransitionalStyles.instance.register("gds-datepicker", datepicker_trans_styles_default.toString());
+  register6();
+  register2();
+  register4();
+}
+var datepicker_trans_styles_default2 = register7;
+
+// libs/core/src/components/filter-chips/filter-chip/filter-chip.trans.styles.scss?inline
+var filter_chip_trans_styles_default = `@layer base, reset, transitional-styles;
 @layer transitional-styles {
+  @layer _base, _overrides;
   @layer _base {
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    @media (max-width: 35.98em) {
-      :host {
-        flex-wrap: wrap;
-        overflow-y: auto;
-      }
-    }
-    :host table {
-      border-spacing: 0;
-    }
-    :host th,
-    :host td {
-      box-sizing: border-box;
-      height: 2.75rem;
-      text-align: center;
-      width: 2.75rem;
-    }
-    :host thead {
-      /* days */
-    }
-    :host thead th {
-      background: var(--sg-bg-level-2);
-      border-bottom: solid 1px var(--sg-grey-300);
-      font-weight: 400;
-      top: 0;
-    }
-    @media (max-width: 35.98em) {
-      :host thead th {
-        position: sticky;
-      }
-    }
-    :host tbody {
-      /* week numbers */
-      /* dates */
-    }
-    :host tbody th {
-      font-weight: 400;
-    }
-    :host tbody td {
-      border: solid 1px transparent;
-      font-weight: 500;
-      -webkit-user-select: none;
-         -moz-user-select: none;
-              user-select: none;
-      /* weekend */
-      /* today */
-      /* hover */
-      /* focus */
-      /* selected */
-      /* highlighted */
-      /* active (pressed) */
-      /* disabled */
-    }
-    :host tbody td.sg-date-holiday:not(.disabled) {
-      background: var(--sg-bg-level-2);
-      color: hsl(var(--sg-hsl-red-2));
-    }
-    :host tbody td.today {
-      background: transparent;
-      border-radius: 4px;
-      box-shadow: inset 0 0 0 2px var(--grey-1000);
-      color: var(--grey-1000);
-    }
-    :host tbody td:hover:not(.disabled) {
-      background: var(--grey-500);
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: var(--gds-sys-color-font);
-      cursor: pointer;
-    }
-    :host tbody td:focus-visible:focus:not(:focus-visible) {
-      box-shadow: none;
-      outline: 0;
-    }
-    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {
-      outline-color: var(--gds-sys-color-focus-outline);
-      outline-style: solid;
-      outline-width: 0.125rem;
-      outline-offset: 0.125rem;
-    }
-    :host tbody td:focus-visible:not(.disabled) {
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      cursor: pointer;
-      position: relative;
-      z-index: 0;
-    }
-    :host tbody td[aria-selected=true] {
-      background: var(--grey-1000);
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
-    }
-    :host tbody td[tabindex="0"] {
-      border-radius: 4px;
-    }
-    :host tbody td:hover:active:not(.disabled) {
-      background: var(--grey-1000);
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
-    }
-    :host tbody td.disabled {
-      background: hsl(var(--sg-hsl-disabled-background));
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      color: hsl(var(--sg-hsl-disabled-color));
-      cursor: not-allowed;
-      font-weight: 400;
-    }
-    :host tbody td.disabled.sg-date-holiday {
-      color: hsla(var(--sg-hsl-red-2), 0.25);
-    }
-    :host tbody td.disabled .number,
-    :host tbody td.disabled .indicator-dot {
-      --_color: hsl(var(--sg-hsl-disabled-color)) !important;
-    }
-    :host tbody td.custom-date {
-      position: relative;
-    }
-    :host tbody .number {
-      color: var(--_color, "currentColor");
-    }
-    :host tbody .indicator-dot {
-      display: block;
-      width: 0.375rem;
-      height: 0.375rem;
-      top: 1.5rem;
-      border-radius: 50%;
-      margin: auto;
-      position: absolute;
-      inset-block-end: 0.125rem;
-      inset-inline: 0;
-      background-color: var(--_color);
-    }
-    :host table {
-      flex-grow: 1;
-      width: 100%;
-    }
-    :host table td {
-      width: 3rem;
-      height: 3rem;
+    .btn-p {
+      padding: 0 0.75rem;
     }
-  }
-  @layer _modifiers {
-    .week-number {
-      border-right: solid 1px var(--gds-ref-pallet-base300);
-      font-weight: 400;
-      pointer-events: none;
+    .icon {
+      width: 1rem;
     }
   }
 }`;
 
-// libs/core/src/components/calendar/calendar.trans.styles.ts
-function register6() {
-  TransitionalStyles.instance.register("gds-calendar", calendar_trans_styles_default.toString());
+// libs/core/src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts
+function register8() {
+  TransitionalStyles.instance.register("gds-filter-chip", filter_chip_trans_styles_default.toString());
+  register5();
 }
-var calendar_trans_styles_default2 = register6;
+var filter_chip_trans_styles_default2 = register8;
+
+// libs/core/src/components/filter-chips/filter-chips.trans.styles.scss?inline
+var filter_chips_trans_styles_default = `@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  @layer _base, _overrides;
+  @layer _base {}
+  @layer _overrides {}
+}`;
 
-// libs/core/src/components/datepicker/datepicker.trans.styles.ts
-function register7() {
-  TransitionalStyles.instance.register("gds-datepicker", datepicker_trans_styles_default.toString());
-  register4();
-  register2();
-  register6();
+// libs/core/src/components/filter-chips/filter-chips.trans.styles.ts
+function register9() {
+  TransitionalStyles.instance.register("gds-filter-chips", filter_chips_trans_styles_default.toString());
+  register8();
 }
-var datepicker_trans_styles_default2 = register7;
+var filter_chips_trans_styles_default2 = register9;
 
 // libs/core/src/components/grouped-list/grouped-list.trans.styles.scss?inline
 var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles;
@@ -1460,10 +1496,101 @@ var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles
 }`;
 
 // libs/core/src/components/grouped-list/grouped-list.trans.styles.ts
-function register8() {
+function register10() {
   TransitionalStyles.instance.register("gds-grouped-list", grouped_list_trans_styles_default.toString());
 }
-var grouped_list_trans_styles_default2 = register8;
+var grouped_list_trans_styles_default2 = register10;
+
+// libs/core/src/components/segmented-control/segment/segment.trans.styles.scss?inline
+var segment_trans_styles_default = `/* stylelint-disable max-nesting-depth */
+/* stylelint-enable max-nesting-depth */
+/**
+ * Calculate the luminance for a color.
+ * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ */
+/**
+ * Calculate the contrast ratio between two colors.
+ * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/**
+* @deprecated
+* Use \`add-focus\` instead
+*/
+/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
+@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  @layer _base;
+  @layer _base {
+    :host {
+      border-right: 1px solid #333;
+      box-sizing: border-box;
+      display: flex;
+      transition: 0.2s;
+      z-index: 1;
+    }
+    :host(:last-child) {
+      border-right: 0;
+    }
+    button {
+      -webkit-appearance: none;
+         -moz-appearance: none;
+              appearance: none;
+      background: transparent;
+      border-width: 0;
+      color: var(--gds-sys-color-content-content);
+      cursor: pointer;
+      flex-grow: 1;
+      flex-shrink: 0;
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: 500;
+      min-width: 6.625rem;
+      overflow: hidden;
+      padding: 0 1rem;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+    @media (pointer: fine) {
+      button:hover {
+        background-color: var(--grey-400);
+      }
+    }
+    button[aria-current=true] {
+      background-color: #333;
+      color: #fff;
+    }
+    button:focus-visible {
+      outline: 2px solid #000;
+      outline-offset: -2px;
+    }
+    button:disabled,
+    button[aria-disabled=true],
+    button.disabled {
+      color: var(--text-disabled-color) !important;
+      border-color: var(--border-disabled-color) !important;
+      cursor: not-allowed;
+    }
+    button:disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder, button.disabled::-moz-placeholder {
+      color: var(--text-disabled-color);
+    }
+    button:disabled::placeholder,
+    button[aria-disabled=true]::placeholder,
+    button.disabled::placeholder {
+      color: var(--text-disabled-color);
+    }
+  }
+}`;
+
+// libs/core/src/components/segmented-control/segment/segment.trans.styles.ts
+function register11() {
+  TransitionalStyles.instance.register("gds-segmented", segment_trans_styles_default.toString());
+}
+var segment_trans_styles_default2 = register11;
 
 // libs/core/src/components/segmented-control/segmented-control.trans.styles.css?inline
 var segmented_control_trans_styles_default = `@layer base, reset, transitional-styles;
@@ -1572,142 +1699,15 @@ var segmented_control_trans_styles_default = `@layer base, reset, transitional-s
 }
 `;
 
-// libs/core/src/components/segmented-control/segment/segment.trans.styles.scss?inline
-var segment_trans_styles_default = `/* stylelint-disable max-nesting-depth */
-/* stylelint-enable max-nesting-depth */
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/**
-* @deprecated
-* Use \`add-focus\` instead
-*/
-/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
-@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base;
-  @layer _base {
-    :host {
-      border-right: 1px solid #333;
-      box-sizing: border-box;
-      display: flex;
-      transition: 0.2s;
-      z-index: 1;
-    }
-    :host(:last-child) {
-      border-right: 0;
-    }
-    button {
-      -webkit-appearance: none;
-         -moz-appearance: none;
-              appearance: none;
-      background: transparent;
-      border-width: 0;
-      color: var(--gds-sys-color-content-content);
-      cursor: pointer;
-      flex-grow: 1;
-      flex-shrink: 0;
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: 500;
-      min-width: 6.625rem;
-      overflow: hidden;
-      padding: 0 1rem;
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
-    }
-    @media (pointer: fine) {
-      button:hover {
-        background-color: var(--grey-400);
-      }
-    }
-    button[aria-current=true] {
-      background-color: #333;
-      color: #fff;
-    }
-    button:focus-visible {
-      outline: 2px solid #000;
-      outline-offset: -2px;
-    }
-    button:disabled,
-    button[aria-disabled=true],
-    button.disabled {
-      color: var(--text-disabled-color) !important;
-      border-color: var(--border-disabled-color) !important;
-      cursor: not-allowed;
-    }
-    button:disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder, button.disabled::-moz-placeholder {
-      color: var(--text-disabled-color);
-    }
-    button:disabled::placeholder,
-    button[aria-disabled=true]::placeholder,
-    button.disabled::placeholder {
-      color: var(--text-disabled-color);
-    }
-  }
-}`;
-
-// libs/core/src/components/segmented-control/segment/segment.trans.styles.ts
-function register9() {
-  TransitionalStyles.instance.register("gds-segmented", segment_trans_styles_default.toString());
-}
-var segment_trans_styles_default2 = register9;
-
 // libs/core/src/components/segmented-control/segmented-control.trans.styles.ts
-function register10() {
+function register12() {
   TransitionalStyles.instance.register(
     "gds-segmented-control",
     segmented_control_trans_styles_default.toString()
   );
-  register9();
-}
-var segmented_control_trans_styles_default2 = register10;
-
-// libs/core/src/components/filter-chips/filter-chips.trans.styles.scss?inline
-var filter_chips_trans_styles_default = `@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base, _overrides;
-  @layer _base {}
-  @layer _overrides {}
-}`;
-
-// libs/core/src/components/filter-chips/filter-chip/filter-chip.trans.styles.scss?inline
-var filter_chip_trans_styles_default = `@layer base, reset, transitional-styles;
-@layer transitional-styles {
-  @layer _base, _overrides;
-  @layer _base {
-    .btn-p {
-      padding: 0 0.75rem;
-    }
-    .icon {
-      width: 1rem;
-    }
-  }
-}`;
-
-// libs/core/src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts
-function register11() {
-  TransitionalStyles.instance.register("gds-filter-chip", filter_chip_trans_styles_default.toString());
-  register3();
-}
-var filter_chip_trans_styles_default2 = register11;
-
-// libs/core/src/components/filter-chips/filter-chips.trans.styles.ts
-function register12() {
-  TransitionalStyles.instance.register("gds-filter-chips", filter_chips_trans_styles_default.toString());
   register11();
 }
-var filter_chips_trans_styles_default2 = register12;
+var segmented_control_trans_styles_default2 = register12;
 
 // libs/core/src/components/theme/chlorophyll-tokens.scss?inline
 var chlorophyll_tokens_default = `/**
@@ -2305,13 +2305,13 @@ var theme_trans_styles_default = register13;
 // libs/core/src/utils/transitional-styles/transitional-styles.ts
 var registerTransitionalStyles = () => {
   register13();
-  register4();
-  register5();
+  register6();
+  register3();
   register7();
-  register8();
   register10();
   register12();
-  register3();
+  register9();
+  register5();
 };
 var _styles, _elements, _useLegacyStylesheets;
 var _TransitionalStyles = class _TransitionalStyles {
@@ -2812,34 +2812,34 @@ i.sg-icon.sg-icon-ellipsis::before {
 }`;
 
 // libs/core/src/components/button/button.trans.styles.ts
-function register3() {
+function register5() {
   TransitionalStyles.instance.register("gds-button", button_trans_styles_default.toString());
 }
-var button_trans_styles_default2 = register3;
+var button_trans_styles_default2 = register5;
 
 export {
-  register3 as register,
+  register5 as register,
   button_trans_styles_default2 as button_trans_styles_default,
   register2,
   popover_trans_styles_default2 as popover_trans_styles_default,
-  register4 as register3,
-  dropdown_trans_styles_default2 as dropdown_trans_styles_default,
-  register5 as register4,
+  register3,
   context_menu_trans_styles_default2 as context_menu_trans_styles_default,
-  register6 as register5,
+  register4,
   calendar_trans_styles_default2 as calendar_trans_styles_default,
+  register6 as register5,
+  dropdown_trans_styles_default2 as dropdown_trans_styles_default,
   register7 as register6,
   datepicker_trans_styles_default2 as datepicker_trans_styles_default,
   register8 as register7,
-  grouped_list_trans_styles_default2 as grouped_list_trans_styles_default,
+  filter_chip_trans_styles_default2 as filter_chip_trans_styles_default,
   register9 as register8,
-  segment_trans_styles_default2 as segment_trans_styles_default,
+  filter_chips_trans_styles_default2 as filter_chips_trans_styles_default,
   register10 as register9,
-  segmented_control_trans_styles_default2 as segmented_control_trans_styles_default,
+  grouped_list_trans_styles_default2 as grouped_list_trans_styles_default,
   register11 as register10,
-  filter_chip_trans_styles_default2 as filter_chip_trans_styles_default,
+  segment_trans_styles_default2 as segment_trans_styles_default,
   register12 as register11,
-  filter_chips_trans_styles_default2 as filter_chips_trans_styles_default,
+  segmented_control_trans_styles_default2 as segmented_control_trans_styles_default,
   register13 as register12,
   theme_trans_styles_default,
   registerTransitionalStyles,