@sebgroup/green-core 1.60.1 → 1.62.0

package/chunks/{chunk.2RPIXTTF.js → chunk.3M24Q4NP.js}

@@ -1,3 +1,6 @@
+import {
+  tokens
+} from "./chunk.4RMUKKUH.js";
 import {
   VER_SUFFIX
 } from "./chunk.MLXMQIEV.js";
@@ -144,7 +147,7 @@ var option_trans_styles_default = `/**
     outline-color: #000;
     outline-offset: -0.25rem;
   }
-  :host([aria-hidden=true]) div {
+  :host([aria-hidden=true]) {
     display: none;
   }
   :host([highlighted]) div {
@@ -217,6 +220,9 @@ var popover_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     transform: translate3d(0, 0, 0);
     visibility: visible;
   }
+  :host > div:not([hidden]) {
+    display: contents;
+  }
   header {
     display: flex;
   }
@@ -702,8 +708,10 @@ function register4() {
 }
 var calendar_trans_styles_default2 = register4;
 
-// libs/core/src/components/dropdown/dropdown.trans.styles.scss?inline
-var dropdown_trans_styles_default = `/**
+// libs/core/src/primitives/field-base/field-base.trans.styles.scss?inline
+var field_base_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
  */
@@ -711,8 +719,6 @@ var dropdown_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 */
@@ -721,493 +727,98 @@ 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*/
 @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] {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
+  .field {
     border-radius: var(--sg-border-radius);
     border: solid var(--sg-border-width) var(--sg-border-color);
     --border-color: var(--sg-border-color);
+    align-items: stretch;
+    gap: var(--gds-space-xs);
     background-color: var(--sg-form-control-bg);
+    box-sizing: border-box;
     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: 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;
-  }
-  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;
+    cursor: text;
     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;
+    padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-xs) calc(var(--gds-space-xs) - 1px) var(--gds-space-m);
+    min-block-size: 44px;
   }
-  button:focus:not(:focus-visible) {
+  .field:focus:not(:focus-visible) {
     box-shadow: none;
     outline: 0;
   }
-  button:focus, button:focus-visible {
+  .field:focus, .field:focus-within {
     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;
-    }
+  .field:hover {
+    background-color: var(--grey-200);
   }
-  button.small {
+  .field.small {
+    font-size: 0.875rem;
     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;
+  .field.multiline {
+    align-items: flex-start;
+    padding: calc(var(--gds-space-s) - 1px) var(--gds-space-s) calc(var(--gds-space-s) - 1px) var(--gds-space-m);
+    height: -moz-max-content;
+    height: max-content;
   }
-  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;
+  .field.action-slot-occupied:not(.trail-slot-occupied) {
+    padding-right: var(--gds-space-xs);
   }
-  @media (max-width: 35.98em) {
-    button {
-      min-width: 100%;
-    }
+  .field.lead-slot-occupied {
+    padding-left: var(--gds-space-xs);
   }
-  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);
+  .field slot[name=action]::slotted(*) {
+    margin: -3px 0 -3px -3px;
   }
-  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;
+  .field:focus-within {
+    outline-color: currentColor;
   }
-  button[aria-expanded=true]::after {
-    transform: translate(75%, 6px) rotate3d(0, 0, 1, -45deg) scale3d(-1, -1, 1);
+  .field.invalid {
+    border-color: var(--gds-color-l3-border-negative);
+    color: var(--gds-color-l3-content-negative);
+    border-bottom-width: 3px;
   }
-  button:hover::after {
-    border-color: currentColor;
+  .field.disabled {
+    background: var(--gds-color-l3-background-disabled);
+    color: var(--gds-color-l3-content-disabled);
+    border-color: transparent;
+    pointer-events: none;
   }
-  button.small {
-    font-size: 0.875rem;
-  }
-  button:hover {
-    background: var(--grey-400);
+  .main-slot-wrap {
+    display: flex;
+    flex: 1;
   }
-  button::after {
-    display: none;
+  slot:not([name])::slotted(*) {
+    color: currentColor;
   }
-  button .icon {
-    display: flex;
+  slot[name=lead]::slotted([gds-element^=gds-icon-]) {
     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%;
+    display: flex;
+    min-width: var(--gds-space-l);
   }
 }`;
 
+// libs/core/src/primitives/field-base/field-base.trans.styles.ts
+function register5() {
+  TransitionalStyles.instance.register("gds-field-base", field_base_trans_styles_default.toString());
+}
+
 // libs/core/src/components/dropdown/dropdown.trans.styles.ts
-function register6() {
+function register7() {
   register();
   register2();
+  register6();
   register5();
-  TransitionalStyles.instance.register("gds-dropdown", dropdown_trans_styles_default.toString());
 }
-var dropdown_trans_styles_default2 = register6;
+var dropdown_trans_styles_default = register7;
 
 // libs/core/src/components/datepicker/datepicker.trans.styles.scss?inline
 var datepicker_trans_styles_default = `/* stylelint-disable max-nesting-depth */
@@ -1228,211 +839,43 @@ var datepicker_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 */
-/* rules for groups of checkboxes and radio buttons*/
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
   :host {
-    display: block;
-  }
-  label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-    line-height: 1.25rem;
-  }
-  label + .field {
-    margin-top: 0.5rem;
-  }
-  .form-info {
-    color: var(--text-primary-color);
-    display: block;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    width: 100%;
-  }
-  .field {
-    border-radius: var(--sg-border-radius);
-    border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--sg-border-color);
-    align-items: stretch;
-    background-color: var(--sg-form-control-bg);
-    box-sizing: border-box;
-    color: var(--sg-text-primary);
-    cursor: text;
     display: flex;
-    justify-content: space-between;
-    margin: 0.5rem 0;
-    min-height: 2.75rem;
-  }
-  .field:hover {
-    background-color: var(--grey-200);
-  }
-  .field .input {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    border-radius: var(--sg-border-radius);
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-  }
-  .field .input:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
-  }
-  .field .input:focus, .field .input:focus-within {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
-  }
-  .field .input::-moz-selection, .field .input span::-moz-selection {
-    background: transparent;
-  }
-  .field .input::selection,
-  .field .input span::selection {
-    background: transparent;
-  }
-  .field ::part(_button) {
-    outline-offset: -4px;
-    background-color: transparent;
-    color: #000;
-    border: none;
-  }
-  .field ::part(_button):hover {
-    border-color: var(--grey-400);
-  }
-  .field .input.is-placeholder {
-    opacity: 0;
-  }
-  .field .input.is-placeholder:hover, .field .input.is-placeholder:focus, .field .input.is-placeholder:has(:focus) {
-    opacity: 0.7;
+    flex-direction: column;
+    width: 100%;
+    contain: layout;
+    isolation: isolate;
+    gap: var(--gds-space-xs);
   }
-  .field [role=spinbutton] {
+  [role=spinbutton] {
     display: inline-block;
   }
-  .field [role=spinbutton]:focus {
+  [role=spinbutton]:focus {
     background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
     outline: none;
   }
-  .field [role=spinbutton]::-moz-selection {
-    background: transparent;
-  }
-  .field [role=spinbutton]::selection {
+  [role=spinbutton]::-moz-selection {
     background: transparent;
   }
-  .field button {
-    border-radius: var(--sg-border-radius);
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    background: transparent;
-    border: 0;
-    box-sizing: border-box;
-    color: var(--text-primary-color);
-    cursor: pointer;
-    width: 2.75rem;
-    font-size: 1rem;
-  }
-  .field button:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
-  }
-  .field button:focus, .field button:focus-visible {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
-  }
-  .field button:hover {
-    background: var(--grey-500);
-  }
-  .field.small {
-    font-size: 0.875rem;
-    min-height: 2rem;
-  }
-  :host(:invalid) .field + .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) .field + .form-info::before {
+  [role=spinbutton]::selection {
     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) .field + .form-info::before {
-    background: var(--intent-danger-background);
-    clip-path: inset(1px 0 0 0);
-  }
-  .header {
-    padding-top: 0.5rem;
-    display: flex;
-    justify-content: space-between;
-    padding-inline: 5px;
-  }
-  @media (max-width: 35.98em) {
-    .header {
-      padding-top: 0;
-    }
-  }
-  .header > * {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
-    min-width: auto;
-  }
-  .header > *.link {
-    flex: 1 1;
-  }
-  .header ::part(_button) {
-    border-radius: var(--sg-border-radius);
-    background-color: transparent;
-    border: 0;
-    color: var(--text-primary-color);
-    cursor: pointer;
-    font-size: 1rem;
-    padding: 0.5rem 0.75rem;
-  }
-  .header ::part(_button):focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
-  }
-  .header ::part(_button):focus, .header ::part(_button):focus-visible {
-    outline-color: var(--gds-sys-color-focus-outline);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    outline-offset: 0.125rem;
-  }
-  .header ::part(_button):hover {
-    background: var(--grey-500);
-  }
-  .footer {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: solid var(--sg-border-width) var(--sg-border-color);
-    border-color: #ddd;
-    display: flex;
-    justify-content: space-between;
   }
 }`;
 
 // libs/core/src/components/datepicker/datepicker.trans.styles.ts
-function register7() {
-  TransitionalStyles.instance.register("gds-datepicker", datepicker_trans_styles_default.toString());
-  register6();
+function register8() {
+  const tokensAndStyles = datepicker_trans_styles_default.toString() + tokens.reduce((acc, token) => acc + token.cssText, "");
+  TransitionalStyles.instance.register(
+    "gds-datepicker",
+    tokensAndStyles.toString()
+  );
+  register7();
   register2();
   register4();
 }
-var datepicker_trans_styles_default2 = register7;
+var datepicker_trans_styles_default2 = register8;
 
 // 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;
@@ -1449,11 +892,11 @@ var filter_chip_trans_styles_default = `@layer base, reset, transitional-styles;
 }`;
 
 // libs/core/src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts
-function register8() {
+function register9() {
   TransitionalStyles.instance.register("gds-filter-chip", filter_chip_trans_styles_default.toString());
-  register5();
+  register6();
 }
-var filter_chip_trans_styles_default2 = register8;
+var filter_chip_trans_styles_default2 = register9;
 
 // libs/core/src/components/filter-chips/filter-chips.trans.styles.scss?inline
 var filter_chips_trans_styles_default = `@layer base, reset, transitional-styles;
@@ -1464,11 +907,11 @@ var filter_chips_trans_styles_default = `@layer base, reset, transitional-styles
 }`;
 
 // libs/core/src/components/filter-chips/filter-chips.trans.styles.ts
-function register9() {
+function register10() {
   TransitionalStyles.instance.register("gds-filter-chips", filter_chips_trans_styles_default.toString());
-  register8();
+  register9();
 }
-var filter_chips_trans_styles_default2 = register9;
+var filter_chips_trans_styles_default2 = register10;
 
 // libs/core/src/components/grouped-list/grouped-list.trans.styles.scss?inline
 var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles;
@@ -1497,10 +940,17 @@ var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles
 }`;
 
 // libs/core/src/components/grouped-list/grouped-list.trans.styles.ts
-function register10() {
+function register11() {
   TransitionalStyles.instance.register("gds-grouped-list", grouped_list_trans_styles_default.toString());
 }
-var grouped_list_trans_styles_default2 = register10;
+var grouped_list_trans_styles_default2 = register11;
+
+// libs/core/src/components/input/input.trans.styles.ts
+function register12() {
+  register6();
+  register5();
+}
+var input_trans_styles_default = register12;
 
 // libs/core/src/components/segmented-control/segment/segment.trans.styles.scss?inline
 var segment_trans_styles_default = `/* stylelint-disable max-nesting-depth */
@@ -1541,7 +991,7 @@ var segment_trans_styles_default = `/* stylelint-disable max-nesting-depth */
               appearance: none;
       background: transparent;
       border-width: 0;
-      color: var(--gds-sys-color-content-content);
+      color: var(--text-primary-color);
       cursor: pointer;
       flex-grow: 1;
       flex-shrink: 0;
@@ -1589,10 +1039,10 @@ var segment_trans_styles_default = `/* stylelint-disable max-nesting-depth */
 }`;
 
 // libs/core/src/components/segmented-control/segment/segment.trans.styles.ts
-function register11() {
+function register13() {
   TransitionalStyles.instance.register("gds-segmented", segment_trans_styles_default.toString());
 }
-var segment_trans_styles_default2 = register11;
+var segment_trans_styles_default2 = register13;
 
 // libs/core/src/components/segmented-control/segmented-control.trans.styles.css?inline
 var segmented_control_trans_styles_default = `@layer base, reset, transitional-styles;
@@ -1702,14 +1152,14 @@ var segmented_control_trans_styles_default = `@layer base, reset, transitional-s
 `;
 
 // libs/core/src/components/segmented-control/segmented-control.trans.styles.ts
-function register12() {
+function register14() {
   TransitionalStyles.instance.register(
     "gds-segmented-control",
     segmented_control_trans_styles_default.toString()
   );
-  register11();
+  register13();
 }
-var segmented_control_trans_styles_default2 = register12;
+var segmented_control_trans_styles_default2 = register14;
 
 // libs/core/src/components/theme/chlorophyll-tokens.scss?inline
 var chlorophyll_tokens_default = `/**
@@ -2296,24 +1746,25 @@ Values for light mode are used by default.
 }`;
 
 // libs/core/src/components/theme/theme.trans.styles.ts
-function register13() {
+function register15() {
   TransitionalStyles.instance.register(
     "gds-theme",
     chlorophyll_tokens_default.toString()
   );
 }
-var theme_trans_styles_default = register13;
+var theme_trans_styles_default = register15;
 
 // libs/core/src/utils/transitional-styles/transitional-styles.ts
 var registerTransitionalStyles = () => {
-  register13();
-  register6();
-  register3();
+  register15();
   register7();
+  register3();
+  register8();
+  register11();
+  register14();
   register10();
+  register6();
   register12();
-  register9();
-  register5();
 };
 var _styles, _elements, _useLegacyStylesheets;
 var _TransitionalStyles = class _TransitionalStyles {
@@ -2591,18 +2042,6 @@ i.sg-icon.sg-icon-ellipsis::before {
     :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {
       color: var(--text-disabled-color);
     }
-    .button.icon {
-      padding: 0.75rem;
-    }
-    .button.icon slot {
-      display: contents;
-    }
-    .button.icon.small {
-      padding: 0.5rem;
-    }
-    .button.icon.large {
-      padding: 1.25rem;
-    }
     :host([rank*=secondary]) .button {
       transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
       background: transparent;
@@ -2847,17 +2286,42 @@ i.sg-icon.sg-icon-ellipsis::before {
       color: var(--text-disabled-color);
     }
   }
-  @layer _overrides {}
+  @layer _overrides {
+    :host .button.icon {
+      padding: 0.75rem;
+      background: transparent;
+      border-width: 0px;
+      color: currentColor;
+    }
+    :host .button.icon:hover {
+      color: currentColor;
+      background: var(--grey-500);
+    }
+    :host .button.icon slot {
+      display: contents;
+    }
+    .button.icon.xs {
+      min-height: 1.5rem;
+      line-height: 0.75rem;
+      padding: 0.25rem;
+    }
+    .button.icon.small {
+      padding: 0.5rem;
+    }
+    .button.icon.large {
+      padding: 1rem;
+    }
+  }
 }`;
 
 // libs/core/src/components/button/button.trans.styles.ts
-function register5() {
+function register6() {
   TransitionalStyles.instance.register("gds-button", button_trans_styles_default.toString());
 }
-var button_trans_styles_default2 = register5;
+var button_trans_styles_default2 = register6;
 
 export {
-  register5 as register,
+  register6 as register,
   button_trans_styles_default2 as button_trans_styles_default,
   register2,
   popover_trans_styles_default2 as popover_trans_styles_default,
@@ -2865,21 +2329,23 @@ export {
   context_menu_trans_styles_default2 as context_menu_trans_styles_default,
   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,
+  register7 as register5,
+  dropdown_trans_styles_default,
+  register8 as register6,
   datepicker_trans_styles_default2 as datepicker_trans_styles_default,
-  register8 as register7,
+  register9 as register7,
   filter_chip_trans_styles_default2 as filter_chip_trans_styles_default,
-  register9 as register8,
+  register10 as register8,
   filter_chips_trans_styles_default2 as filter_chips_trans_styles_default,
-  register10 as register9,
+  register11 as register9,
   grouped_list_trans_styles_default2 as grouped_list_trans_styles_default,
-  register11 as register10,
+  register12 as register10,
+  input_trans_styles_default,
+  register13 as register11,
   segment_trans_styles_default2 as segment_trans_styles_default,
-  register12 as register11,
+  register14 as register12,
   segmented_control_trans_styles_default2 as segmented_control_trans_styles_default,
-  register13 as register12,
+  register15 as register13,
   theme_trans_styles_default,
   registerTransitionalStyles,
   TransitionalStyles