@sbb-esta/lyne-elements-dev 5.10.0-dev.1791284739 → 5.10.0-dev.1791362600

package/calendar.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{MONDAY as c,SbbButtonLikeBaseElement as l,SbbDisabledMixin as u,SbbElement as ee,SbbFormAssociatedMixin as te,SbbLanguageController as d,SbbPropertyWatcherController as f,THURSDAY as ne,TUESDAY as re,WEDNESDAY as ie,buttonResetStyles as ae,defaultDateAdapter as p,forceType as m,getNextElementIndex as oe,handleDistinctChange as se,i18nCalendarDateSelection as h,i18nCalendarWeekNumber as g,i18nNextMonth as ce,i18nNextYear as le,i18nNextYearRange as ue,i18nPreviousMonth as de,i18nPreviousYear as fe,i18nPreviousYearRange as pe,i18nYearMonthSelection as me,isArrowKeyOrPageKeysPressed as _,plainDate as v,readConfig as y,screenReaderOnlyStyles as he}from"./core.js";import{SbbSecondaryButtonElement as ge}from"./button.pure.js";import{SbbIconElement as _e}from"./icon.pure.js";var b=`:host{--sbb-focus-outline-offset:.125rem;--sbb-calendar-cell-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));font-size:var(--sbb-calendar-cell-font-size);letter-spacing:var(--sbb-letter-spacing-text);cursor:var(--sbb-calendar-cell-cursor);color:var(--sbb-calendar-cell-color);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));margin:var(--sbb-calendar-cell-margin);padding:var(--sbb-calendar-cell-border-width);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);background-clip:content-box;transition-property:background-color;display:block}:host(:is(sbb-calendar-weekday,sbb-calendar-weeknumber)){--sbb-calendar-cell-font-size:var(--sbb-text-font-size-xs);--sbb-calendar-day-height:var(--sbb-calendar-day-size);color:var(--sbb-calendar-header-color);margin-inline:auto}:host(:is(sbb-calendar-day,sbb-calendar-weekday,sbb-calendar-weeknumber)){height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width)}:host(:is(:state(current),[state--current])){font-weight:700}:host(:is(:state(selected),[state--selected])){border:var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);padding:0}:host(:disabled){--sbb-calendar-cell-color:var(--sbb-calendar-cell-disabled-color);--sbb-calendar-cell-cursor:default}:host(:disabled:is(:state(crossed-out),[state--crossed-out])){--sbb-calendar-cell-color:var(--sbb-calendar-cell-disabled-crossed-out-color)}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (any-hover:hover){:host(:not(:disabled,:where(:is(:state(active),[state--active]),:active)):hover){background-color:var(--sbb-calendar-cell-background-color-hover)}}@media (any-hover:hover) and (forced-colors:active){:host(:not(:disabled):hover){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style:initial}}:host(:not(:disabled):where(:is(:state(active),[state--active]),:active)){background-color:var(--sbb-calendar-cell-background-color-active)}.sbb-action-base{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex}.sbb-calendar-year,.sbb-calendar-month{height:var(--sbb-calendar-cell-year-month-height);min-width:var(--sbb-calendar-cell-year-month-width);justify-content:center;width:100%}:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year,.sbb-calendar-month,.sbb-calendar-day__value):after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);background-color:var(--sbb-calendar-cell-disabled-crossed-out-color);position:absolute;top:50%;left:50%;translate:-50% -50%;rotate:-45deg}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{MONDAY as c,SbbButtonLikeBaseElement as l,SbbDisabledMixin as u,SbbElement as ee,SbbFormAssociatedMixin as te,SbbLanguageController as d,SbbPropertyWatcherController as f,THURSDAY as ne,TUESDAY as re,WEDNESDAY as ie,buttonResetStyles as ae,defaultDateAdapter as p,forceType as m,getNextElementIndex as oe,handleDistinctChange as se,i18nCalendarDateSelection as h,i18nCalendarWeekNumber as g,i18nNextMonth as ce,i18nNextYear as le,i18nNextYearRange as ue,i18nPreviousMonth as de,i18nPreviousYear as fe,i18nPreviousYearRange as pe,i18nYearMonthSelection as me,isArrowKeyOrPageKeysPressed as _,plainDate as v,readConfig as y,screenReaderOnlyStyles as he}from"./core.js";import{SbbSecondaryButtonElement as ge}from"./button.pure.js";import{SbbIconElement as _e}from"./icon.pure.js";var b=`:host{--sbb-focus-outline-offset:.125rem;--sbb-calendar-cell-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));font-size:var(--sbb-calendar-cell-font-size);letter-spacing:var(--sbb-letter-spacing-text);cursor:var(--sbb-calendar-cell-cursor);color:var(--sbb-calendar-cell-color);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));margin:var(--sbb-calendar-cell-margin);padding:var(--sbb-calendar-cell-border-width);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);background-clip:content-box;transition-property:background-color;display:block}:host(:is(sbb-calendar-weekday,sbb-calendar-weeknumber)){--sbb-calendar-cell-font-size:var(--sbb-text-font-size-xs);--sbb-calendar-day-height:var(--sbb-calendar-day-size);color:var(--sbb-calendar-header-color);margin-inline:auto}:host(:is(sbb-calendar-day,sbb-calendar-weekday,sbb-calendar-weeknumber)){height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width)}:host(:is(:state(current),[state--current])){font-weight:700}:host(:is(:state(selected),[state--selected])){border:var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);padding:0}:host(:disabled){--sbb-calendar-cell-color:var(--sbb-calendar-cell-disabled-color);--sbb-calendar-cell-cursor:var(--sbb-cursor-default)}:host(:disabled:is(:state(crossed-out),[state--crossed-out])){--sbb-calendar-cell-color:var(--sbb-calendar-cell-disabled-crossed-out-color)}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (any-hover:hover){:host(:not(:disabled,:where(:is(:state(active),[state--active]),:active)):hover){background-color:var(--sbb-calendar-cell-background-color-hover)}}@media (any-hover:hover) and (forced-colors:active){:host(:not(:disabled):hover){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style:initial}}:host(:not(:disabled):where(:is(:state(active),[state--active]),:active)){background-color:var(--sbb-calendar-cell-background-color-active)}.sbb-action-base{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex}.sbb-calendar-year,.sbb-calendar-month{height:var(--sbb-calendar-cell-year-month-height);min-width:var(--sbb-calendar-cell-year-month-width);justify-content:center;width:100%}:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year,.sbb-calendar-month,.sbb-calendar-day__value):after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);background-color:var(--sbb-calendar-cell-disabled-crossed-out-color);position:absolute;top:50%;left:50%;translate:-50% -50%;rotate:-45deg}
 `,x=class extends u(l){static{this.styles=[a(b)]}constructor(){super(),this.dateAdapter=y().datetime?.dateAdapter??p,this.addController(new f(this,()=>this.getParent(),{dateFilter:e=>this.setDisabledFilteredState(e),min:e=>this.setDisabledFilteredState(e),max:e=>this.setDisabledFilteredState(e),value:e=>this.setSelectedState(e)}))}getParent(){return this.getRootNode?.()?.host?.closest(`sbb-calendar`)}formResetCallback(){}formStateRestoreCallback(e,t){}},S=`.sbb-calendar-day{justify-content:var(--sbb-calendar-day-justify-content)}.sbb-calendar-day__value{height:var(--sbb-calendar-day-value-height);justify-content:center;align-items:center;display:flex;position:relative}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height)}::slotted(*){height:var(--sbb-calendar-day-extra-height)}
 `;let C=(()=>{let r=x,i=[],c,l;return class extends r{constructor(){super(...arguments),this._value=(t(this,i),null)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[o()],l=[s()],e(this,null,c,{kind:`setter`,name:`slot`,static:!1,private:!1,access:{has:e=>`slot`in e,set:(e,t)=>{e.slot=t}},metadata:t},null,i),e(this,null,l,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-day`}static{this.styles=[a(S)]}set slot(e){super.slot=e,this.value=this.dateAdapter.deserialize(e)}get slot(){return super.slot}set value(e){let t=this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));if(t){this._value=t;let e=this.dateAdapter.sameDate(t,this.dateAdapter.today());this.toggleState(`current`,e),this.internals.ariaCurrent=e?`date`:null,this.internals.ariaLabel=this.dateAdapter.getAccessibilityFormatDate(t);let n=this.getParent();n&&(this.setDisabledFilteredState(n),this.setSelectedState(n))}}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}getParent(){return this.closest?.(`sbb-calendar`)??this.getRootNode?.()?.host?.closest(`sbb-calendar`)}setSelectedState(e){let t=this.dateAdapter.isValid(this.value)&&(e.multiple?e.value.some(e=>this.dateAdapter.sameDate(this.value,e)):!!e.value&&this.dateAdapter.compareDate(this.value,e.value)===0);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveDate(e.dateFilter),n=!this._isDayInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveDate(e){return e&&this.dateAdapter.isValid(this.value)?e(this.value):!0}_isDayInRange(e,t){return!this.dateAdapter.isValid(this.value)||!e&&!t||this.dateAdapter.sameDate(this.value,this.dateAdapter.clampDate(this.value,e,t))}_handleSlotchange(e){this.internals.ariaDescribedByElements=e.target.assignedElements()}renderTemplate(){return n` <span class="sbb-calendar-day__value" aria-hidden="true">
         ${this.value?this.dateAdapter.getDate(this.value):``}

package/core/styles/features/form-field.scss

@@ -1,10 +1,11 @@
-@use '../mixins/functions';
 @use '../mixins/typo';
 
 .sbb-input {
+  --_sbb-input-border-width: var(--sbb-form-field-border-width);
+
   display: inline-block;
-  min-width: #{functions.px-to-rem-build(150)};
-  width: min(#{functions.px-to-rem-build(300)}, 100%);
+  min-width: var(--sbb-form-field-min-width);
+  width: min(var(--sbb-form-field-max-width), 100%);
   min-height: var(--sbb-form-field-min-height);
   max-height: var(--sbb-form-field-max-height);
   appearance: none;
@@ -19,10 +20,10 @@
   // Fill color needed for Safari
   -webkit-text-fill-color: var(--sbb-form-field-text-color);
   opacity: 1;
-  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
+  border: var(--_sbb-input-border-width) var(--sbb-form-field-border-style)
     var(--sbb-form-field-border-color);
   border-radius: var(--sbb-form-field-border-radius);
-  padding-inline: var(--sbb-form-field-padding-inline);
+  padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--_sbb-input-border-width));
 
   // Using `!important` keeps the utility consistent with the existing form-field
   // rules when normalize/reset styles are loaded by the consumer.
@@ -37,28 +38,22 @@
 
   &:read-only,
   &:disabled {
-    --sbb-form-field-background-color: var(--sbb-background-color-3);
-    --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
-
-    @media (forced-colors: active) {
-      --sbb-form-field-border-color: ButtonBorder;
-    }
+    background-color: var(--sbb-form-field-background-color-disabled);
   }
 
   &:disabled {
-    --sbb-form-field-border-style: dashed;
+    border-style: var(--sbb-form-field-border-style-disabled);
+    color: var(--sbb-form-field-text-color-disabled);
+    border-color: var(--sbb-form-field-border-color-disabled);
 
     &::placeholder {
-      color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-      -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+      color: var(--sbb-form-field-placeholder-color-disabled);
+      -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
     }
+  }
 
-    @media (forced-colors: active) {
-      --sbb-form-field-label-color: GrayText !important;
-      --sbb-form-field-prefix-color: GrayText !important;
-      --sbb-form-field-text-color: GrayText !important;
-      --sbb-form-field-border-color: GrayText !important;
-    }
+  &:read-only {
+    border-color: var(--sbb-form-field-border-color-readonly);
   }
 
   &:focus-visible {
@@ -68,22 +63,13 @@
   }
 
   &:focus {
-    --sbb-form-field-border-color: var(--sbb-border-color-3);
-    --sbb-form-field-border-width: var(--sbb-border-width-2x);
+    --_sbb-input-border-width: var(--sbb-form-field-border-width-focus);
 
-    @media (forced-colors: active) {
-      --sbb-form-field-border-color: Highlight;
-      --sbb-form-field-prefix-color: Highlight;
-    }
+    border-color: var(--sbb-form-field-border-color-focus);
   }
 
   &:user-invalid {
-    --sbb-form-field-border-color: var(--sbb-color-error);
-    --sbb-form-field-text-color: var(--sbb-color-error);
-
-    @media (forced-colors: active) {
-      --sbb-form-field-border-color: LinkText !important;
-      --sbb-form-field-text-color: LinkText !important;
-    }
+    border-color: var(--sbb-form-field-border-color-error);
+    color: var(--sbb-form-field-text-color-error);
   }
 }

package/development/calendar.pure.js

@@ -6,7 +6,7 @@ import { SbbSecondaryButtonElement } from "./button.pure.js";
 import { SbbIconElement } from "./icon.pure.js";
 
 //#region src/elements/calendar/common/calendar-cell-base-element.scss?inline
-var calendar_cell_base_element_default = ":host {\n  --sbb-focus-outline-offset: 0.125rem;\n  --sbb-calendar-cell-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  font-size: var(--sbb-calendar-cell-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  cursor: var(--sbb-calendar-cell-cursor);\n  color: var(--sbb-calendar-cell-color);\n  border-radius: calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));\n  margin: var(--sbb-calendar-cell-margin);\n  padding: var(--sbb-calendar-cell-border-width);\n  background-clip: content-box;\n  transition-duration: var(--sbb-calendar-cell-transition-duration);\n  transition-timing-function: var(--sbb-calendar-cell-transition-easing-function);\n  transition-property: background-color;\n}\n\n:host(:is(sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-xs);\n  --sbb-calendar-day-height: var(--sbb-calendar-day-size);\n  color: var(--sbb-calendar-header-color);\n  margin-inline: auto;\n}\n\n:host(:is(sbb-calendar-day, sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n  height: var(--sbb-calendar-day-height);\n  width: var(--sbb-calendar-day-width);\n}\n\n:host(:is(:state(current),[state--current])) {\n  font-weight: bold;\n}\n\n:host(:is(:state(selected),[state--selected])) {\n  border: var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);\n  padding: 0;\n}\n\n:host(:disabled) {\n  --sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);\n  --sbb-calendar-cell-cursor: default;\n}\n\n:host(:disabled:is(:state(crossed-out),[state--crossed-out])) {\n  --sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-crossed-out-color);\n}\n\n:host(:focus-visible) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n  :host(:not(:disabled, :where(:is(:state(active),[state--active]), :active)):hover) {\n    background-color: var(--sbb-calendar-cell-background-color-hover);\n  }\n}\n\n@media (any-hover: hover) and (forced-colors: active) {\n  :host(:not(:disabled):hover) {\n    outline-offset: var(--sbb-focus-outline-offset);\n    outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n    --sbb-focus-outline-style: initial;\n  }\n}\n\n:host(:not(:disabled):where(:is(:state(active),[state--active]), :active)) {\n  background-color: var(--sbb-calendar-cell-background-color-active);\n}\n\n.sbb-action-base {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.sbb-calendar-year,\n.sbb-calendar-month {\n  justify-content: center;\n  height: var(--sbb-calendar-cell-year-month-height);\n  min-width: var(--sbb-calendar-cell-year-month-width);\n  width: 100%;\n}\n\n:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year, .sbb-calendar-month, .sbb-calendar-day__value)::after {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  translate: -50% -50%;\n  content: \"\";\n  height: var(--sbb-calendar-cell-disabled-height);\n  width: var(--sbb-calendar-cell-disabled-width);\n  background-color: var(--sbb-calendar-cell-disabled-crossed-out-color);\n  rotate: -45deg;\n}\n";
+var calendar_cell_base_element_default = ":host {\n  --sbb-focus-outline-offset: 0.125rem;\n  --sbb-calendar-cell-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  font-size: var(--sbb-calendar-cell-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  cursor: var(--sbb-calendar-cell-cursor);\n  color: var(--sbb-calendar-cell-color);\n  border-radius: calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));\n  margin: var(--sbb-calendar-cell-margin);\n  padding: var(--sbb-calendar-cell-border-width);\n  background-clip: content-box;\n  transition-duration: var(--sbb-calendar-cell-transition-duration);\n  transition-timing-function: var(--sbb-calendar-cell-transition-easing-function);\n  transition-property: background-color;\n}\n\n:host(:is(sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-xs);\n  --sbb-calendar-day-height: var(--sbb-calendar-day-size);\n  color: var(--sbb-calendar-header-color);\n  margin-inline: auto;\n}\n\n:host(:is(sbb-calendar-day, sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n  height: var(--sbb-calendar-day-height);\n  width: var(--sbb-calendar-day-width);\n}\n\n:host(:is(:state(current),[state--current])) {\n  font-weight: bold;\n}\n\n:host(:is(:state(selected),[state--selected])) {\n  border: var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);\n  padding: 0;\n}\n\n:host(:disabled) {\n  --sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);\n  --sbb-calendar-cell-cursor: var(--sbb-cursor-default);\n}\n\n:host(:disabled:is(:state(crossed-out),[state--crossed-out])) {\n  --sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-crossed-out-color);\n}\n\n:host(:focus-visible) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n  :host(:not(:disabled, :where(:is(:state(active),[state--active]), :active)):hover) {\n    background-color: var(--sbb-calendar-cell-background-color-hover);\n  }\n}\n\n@media (any-hover: hover) and (forced-colors: active) {\n  :host(:not(:disabled):hover) {\n    outline-offset: var(--sbb-focus-outline-offset);\n    outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n    --sbb-focus-outline-style: initial;\n  }\n}\n\n:host(:not(:disabled):where(:is(:state(active),[state--active]), :active)) {\n  background-color: var(--sbb-calendar-cell-background-color-active);\n}\n\n.sbb-action-base {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.sbb-calendar-year,\n.sbb-calendar-month {\n  justify-content: center;\n  height: var(--sbb-calendar-cell-year-month-height);\n  min-width: var(--sbb-calendar-cell-year-month-width);\n  width: 100%;\n}\n\n:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year, .sbb-calendar-month, .sbb-calendar-day__value)::after {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  translate: -50% -50%;\n  content: \"\";\n  height: var(--sbb-calendar-cell-disabled-height);\n  width: var(--sbb-calendar-cell-disabled-width);\n  background-color: var(--sbb-calendar-cell-disabled-crossed-out-color);\n  rotate: -45deg;\n}\n";
 
 //#endregion
 //#region src/elements/calendar/common/calendar-cell-base-element.ts

package/development/form-field.pure.js

@@ -56,7 +56,7 @@ var SbbErrorElement = class extends SbbNegativeMixin(SbbElement) {
 
 //#endregion
 //#region src/elements/form-field/form-field/form-field.scss?inline
-var form_field_default = "@charset \"UTF-8\";\n:host {\n  --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n  --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n  --sbb-form-field-select-inline-padding-end: calc(\n    var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n  );\n  --sbb-form-field-label-size: calc(\n    var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-text-line-height: calc(\n    var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-margin-block-start: calc(\n    (\n        var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n            --sbb-form-field-text-line-height\n          ) +\n          var(--_sbb-form-field-label-to-input-overlapping)\n      ) /\n      2\n  );\n  --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n  --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  display: inline-block;\n  color: var(--sbb-form-field-color);\n  font-weight: normal;\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n  min-width: 9.375rem;\n  width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n  color: var(--sbb-color-3-negative);\n  --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n  --sbb-form-field-text-color: var(--sbb-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n  :host([negative]) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host([size=s]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-xs);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n  --_sbb-form-field-input-margin-block-end: -0.125rem;\n  --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n  --_sbb-form-field-floating-label-transform: 0.34375rem;\n  --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n  :host([size=s]) {\n    --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n    --_sbb-form-field-floating-label-transform: 0.3125rem;\n    --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n  }\n}\n\n:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) {\n  --_sbb-form-field-spacer-margin-block-end-textarea: var(--sbb-form-field-textarea-s-spacer);\n}\n\n:host([size=m]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-m);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-l);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n  --_sbb-form-field-input-margin-block-end: 0;\n  --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n  --_sbb-form-field-floating-label-transform: 0.53125rem;\n  --_sbb-form-field-spacer-margin-block-end: calc(\n    -1 * var(--_sbb-form-field-label-to-input-overlapping)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host(:is([size=m], [size=l])) {\n    --_sbb-form-field-floating-label-transform: 0.65625rem;\n  }\n}\n\n:host([error-space=reserve]) {\n  --sbb-form-field-hint-min-height: calc(\n    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n  );\n  --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3);\n  --sbb-form-field-border-color: var(--sbb-color-graphite);\n  --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n  --sbb-form-field-arrow-color: var(--sbb-color-granite);\n  --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n  --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-label-color: GrayText !important;\n    --sbb-form-field-prefix-color: GrayText !important;\n    --sbb-form-field-text-color: GrayText !important;\n    --sbb-form-field-border-color: GrayText !important;\n  }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-text-color: var(--sbb-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3);\n  --sbb-form-field-prefix-color: var(--sbb-color-3);\n  --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n  --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(focus),[state--focus])) {\n    --sbb-form-field-border-color: Highlight;\n    --sbb-form-field-prefix-color: Highlight;\n  }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n  --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n  --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n  :host([floating-label]) {\n    --sbb-select-placeholder-color: Canvas;\n  }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n  --sbb-form-field-label-size: 0rem;\n  --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n  --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-form-field__wrapper {\n  display: flex;\n  flex: 1;\n  gap: var(--sbb-form-field-gap);\n  padding-inline: var(--sbb-form-field-padding-inline);\n  border-radius: var(--sbb-form-field-border-radius);\n  min-height: var(--sbb-form-field-min-height);\n  max-height: var(--sbb-form-field-max-height);\n  background-color: var(--sbb-form-field-background-color);\n  position: relative;\n}\n.sbb-form-field__wrapper::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: 0;\n  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n  border-radius: var(--sbb-form-field-border-radius);\n  pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n  :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n    border-color: transparent;\n  }\n  .sbb-form-field__wrapper::after {\n    position: absolute;\n    border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n    inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n    inset-block-end: 0;\n    z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n  }\n  :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n    content: \"\";\n  }\n}\n\n::slotted(*[slot=prefix]) {\n  color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n  display: flex;\n  min-width: var(--sbb-icon-svg-width);\n  margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n  display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n  display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n  display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n  padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n  ::slotted(*[slot=suffix]) {\n    color: var(--sbb-form-field-prefix-color);\n  }\n}\n.sbb-form-field__select-input-icon {\n  position: absolute;\n  top: 50%;\n  translate: 0 -50%;\n  display: none;\n  position: absolute;\n  inset-inline-end: 0;\n  margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n  pointer-events: none;\n  color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n  display: inline-block;\n}\n\n.sbb-form-field__input-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  position: relative;\n  margin-block-start: var(--sbb-form-field-margin-block-start);\n  min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n  display: flex;\n  height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n  margin-block-end: calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea, 0px));\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  border: 0;\n  clip-path: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.sbb-form-field__label {\n  display: flex;\n  max-width: 100%;\n  cursor: var(--sbb-cursor-default);\n  position: absolute;\n  inset-block-start: 0;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-label-text-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n  transform-origin: 0 0;\n  pointer-events: none;\n  backface-visibility: hidden;\n  will-change: transform, font-size;\n  transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n  font-size: var(--sbb-form-field-input-text-size);\n  transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n    z-index: 1;\n  }\n}\n\n.sbb-form-field__label-ellipsis {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n  display: flex;\n  flex: 1;\n  align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n  margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n  display: flex;\n  min-height: var(--sbb-form-field-hint-min-height);\n  flex-direction: column;\n  margin-inline-start: var(--sbb-form-field-padding-inline);\n  margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
+var form_field_default = "@charset \"UTF-8\";\n:host {\n  --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n  --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n  --sbb-form-field-select-inline-padding-end: calc(\n    var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n  );\n  --sbb-form-field-label-size: calc(\n    var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-text-line-height: calc(\n    var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-margin-block-start: calc(\n    (\n        var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n            --sbb-form-field-text-line-height\n          ) +\n          var(--_sbb-form-field-label-to-input-overlapping)\n      ) /\n      2\n  );\n  --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n  --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  display: inline-block;\n  color: var(--sbb-form-field-color);\n  font-weight: normal;\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n  min-width: var(--sbb-form-field-min-width);\n  width: min(var(--sbb-form-field-max-width), 100%);\n}\n\n:host([negative]) {\n  color: var(--sbb-form-field-color-negative);\n  --sbb-form-field-background-color: var(--sbb-form-field-background-color-negative);\n  --sbb-form-field-border-color: var(--sbb-form-field-border-color-negative);\n  --sbb-form-field-label-color: var(--sbb-form-field-label-color-negative);\n  --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-negative);\n  --sbb-form-field-text-color: var(--sbb-form-field-text-color-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-negative);\n}\n\n:host([size=s]) {\n  --sbb-form-field-min-height: var(--sbb-form-field-min-height-s);\n  --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-s);\n  --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-s);\n  --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-s);\n  --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-s);\n  --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-s);\n  --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-s);\n  --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-s);\n}\n\n:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) {\n  --_sbb-form-field-spacer-margin-block-end-textarea: var(--sbb-form-field-textarea-s-spacer);\n}\n\n:host([size=m]) {\n  --sbb-form-field-min-height: var(--sbb-form-field-min-height-m);\n  --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-m);\n  --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-m);\n  --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-m);\n  --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-m);\n  --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-m);\n  --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-m);\n  --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-m);\n}\n\n:host([size=l]) {\n  --sbb-form-field-min-height: var(--sbb-form-field-min-height-l);\n  --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-l);\n  --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-l);\n  --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-l);\n  --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-l);\n  --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-l);\n  --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-l);\n  --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-l);\n}\n\n:host([error-space=reserve]) {\n  --sbb-form-field-hint-min-height: calc(\n    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n  );\n  --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-background-color: var(--sbb-form-field-background-color-disabled);\n  --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-disabled);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-background-color: var(--sbb-form-field-background-color-disabled-negative);\n  --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-disabled-negative);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-label-color: var(--sbb-form-field-label-color-disabled);\n  --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-disabled);\n  --sbb-form-field-text-color: var(--sbb-form-field-text-color-disabled);\n  --sbb-form-field-border-color: var(--sbb-form-field-border-color-disabled);\n  --sbb-form-field-border-style: var(--sbb-form-field-border-style-disabled);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-label-color: var(--sbb-form-field-label-color-disabled-negative);\n  --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-disabled-negative);\n  --sbb-form-field-text-color: var(--sbb-form-field-text-color-disabled-negative);\n  --sbb-form-field-border-color: var(--sbb-form-field-border-color-disabled-negative);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]))) {\n  --sbb-form-field-label-color: var(--sbb-form-field-label-color-readonly);\n  --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-readonly);\n  --sbb-form-field-border-color: var(--sbb-form-field-border-color-readonly);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]))[negative]) {\n  --sbb-form-field-label-color: var(--sbb-form-field-label-color-readonly-negative);\n  --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-readonly-negative);\n  --sbb-form-field-border-color: var(--sbb-form-field-border-color-readonly-negative);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n  --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-focus);\n  --sbb-form-field-border-color: var(--sbb-form-field-border-color-focus);\n  --sbb-form-field-border-width: var(--sbb-form-field-border-width-focus);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n  --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-focus-negative);\n  --sbb-form-field-border-color: var(--sbb-form-field-border-color-focus-negative);\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n  --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n  --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n  :host([floating-label]) {\n    --sbb-select-placeholder-color: Canvas;\n  }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n  --sbb-form-field-label-size: 0rem;\n  --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n  --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-form-field__wrapper {\n  display: flex;\n  flex: 1;\n  gap: var(--sbb-form-field-gap);\n  padding-inline: var(--sbb-form-field-padding-inline);\n  border-radius: var(--sbb-form-field-border-radius);\n  min-height: var(--sbb-form-field-min-height);\n  max-height: var(--sbb-form-field-max-height);\n  background-color: var(--sbb-form-field-background-color);\n  position: relative;\n}\n.sbb-form-field__wrapper::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: 0;\n  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n  border-radius: var(--sbb-form-field-border-radius);\n  pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n  :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n    border-color: transparent;\n  }\n  .sbb-form-field__wrapper::after {\n    position: absolute;\n    border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n    inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n    inset-block-end: 0;\n    z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n  }\n  :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n    content: \"\";\n  }\n}\n\n::slotted(*[slot=prefix]) {\n  color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n  display: flex;\n  min-width: var(--sbb-icon-svg-width);\n  margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n  display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n  display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n  display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n  padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n  ::slotted(*[slot=suffix]) {\n    color: var(--sbb-form-field-prefix-color);\n  }\n}\n.sbb-form-field__select-input-icon {\n  position: absolute;\n  top: 50%;\n  translate: 0 -50%;\n  display: none;\n  position: absolute;\n  inset-inline-end: 0;\n  margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n  pointer-events: none;\n  color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n  display: inline-block;\n}\n\n.sbb-form-field__input-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  position: relative;\n  margin-block-start: var(--sbb-form-field-margin-block-start);\n  min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n  display: flex;\n  height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n  margin-block-end: calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea, 0px));\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  border: 0;\n  clip-path: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.sbb-form-field__label {\n  display: flex;\n  max-width: 100%;\n  cursor: var(--sbb-cursor-default);\n  position: absolute;\n  inset-block-start: 0;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-label-text-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n  transform-origin: 0 0;\n  pointer-events: none;\n  backface-visibility: hidden;\n  will-change: transform, font-size;\n  transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n  font-size: var(--sbb-form-field-input-text-size);\n  transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n    z-index: 1;\n  }\n}\n\n.sbb-form-field__label-ellipsis {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n  display: flex;\n  flex: 1;\n  align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n  margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n  display: flex;\n  min-height: var(--sbb-form-field-hint-min-height);\n  flex-direction: column;\n  margin-inline-start: var(--sbb-form-field-padding-inline);\n  margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
 
 //#endregion
 //#region src/elements/form-field/form-field/form-field.component.ts
@@ -775,7 +775,7 @@ var SbbFormFieldClearElement = class extends SbbNegativeMixin(SbbButtonBaseEleme
 
 //#endregion
 //#region src/elements/form-field/hint/hint.scss?inline
-var hint_default = ":host {\n  --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n  display: inline-block;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-hint-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n  --sbb-form-field-label-color: var(--sbb-color-5);\n}\n";
+var hint_default = ":host {\n  --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n  display: inline-block;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-hint-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n  --sbb-form-field-label-color: var(--sbb-form-field-label-color-negative);\n}\n";
 
 //#endregion
 //#region src/elements/form-field/hint/hint.component.ts

package/form-field/_form-field.global.scss

@@ -7,71 +7,170 @@ $theme: 'standard' !default;
   --sbb-error-icon-size: #{sbb.px-to-rem-build(17)};
   --sbb-error-font-size: var(--sbb-text-font-size-xs);
   --sbb-form-field-background-color: var(--sbb-background-color-1);
+  --sbb-form-field-background-color-disabled: var(--sbb-background-color-3);
+  --sbb-form-field-background-color-negative: var(--sbb-background-color-1-negative);
+  --sbb-form-field-background-color-disabled-negative: var(--sbb-background-color-3-negative);
+  --sbb-form-field-background-color-required-highlight: light-dark(
+    color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
+    color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
+  );
+  --sbb-form-field-background-color-required-highlight-negative: color-mix(
+    in srgb,
+    var(--sbb-color-peach) 10%,
+    var(--sbb-background-color-1-negative)
+  );
   --sbb-form-field-border-color: var(--sbb-border-color-5);
+  --sbb-form-field-border-color-disabled: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-border-color-negative: var(--sbb-border-color-5);
+  --sbb-form-field-border-color-disabled-negative: var(--sbb-border-color-5);
+  --sbb-form-field-border-color-focus: var(--sbb-border-color-3);
+  --sbb-form-field-border-color-focus-negative: var(--sbb-border-color-3-negative);
+  --sbb-form-field-border-color-error: var(--sbb-color-error);
+  --sbb-form-field-border-color-error-negative: var(--sbb-color-red85);
+  --sbb-form-field-border-color-readonly: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-border-color-readonly-negative: var(--sbb-border-color-5);
+  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-label-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-label-color-negative: var(--sbb-color-5);
+  --sbb-form-field-label-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-label-color-readonly: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-label-color-readonly-negative: var(--sbb-color-5);
+  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-prefix-color-negative: var(--sbb-color-5);
+  --sbb-form-field-prefix-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-prefix-color-focus: var(--sbb-color-3);
+  --sbb-form-field-prefix-color-focus-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-prefix-color-readonly: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-prefix-color-readonly-negative: var(--sbb-color-5);
   --sbb-form-field-border-style: solid;
+  --sbb-form-field-border-style-disabled: dashed;
   --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
   --sbb-form-field-border-width: var(--sbb-border-width-1x);
+  --sbb-form-field-border-width-focus: var(--sbb-border-width-2x);
   --sbb-form-field-color: var(--sbb-color-3);
-  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
-  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-min-width: #{sbb.px-to-rem-build(150)};
+  --sbb-form-field-max-width: #{sbb.px-to-rem-build(300)};
   --sbb-form-field-text-color: var(--sbb-color-3);
+  --sbb-form-field-text-color-disabled: var(--sbb-color-3);
+  --sbb-form-field-text-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-text-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-text-color-error: var(--sbb-color-error);
+  --sbb-form-field-text-color-error-negative: var(--sbb-color-red85);
   --sbb-form-field-arrow-color: var(--sbb-color-3);
+  --sbb-form-field-arrow-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-arrow-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-arrow-color-disabled-negative: var(--sbb-border-color-5);
+  --sbb-form-field-placeholder-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
   --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
   --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
+  --sbb-form-field-min-height-s: var(--sbb-size-element-xs);
+  --sbb-form-field-min-height-m: var(--sbb-size-element-m);
+  --sbb-form-field-min-height-l: var(--sbb-size-element-l);
   --sbb-form-field-min-height: #{sbb.theme-pattern-select(
       (
-        'standard': var(--sbb-size-element-m),
-        'lean': var(--sbb-size-element-xs),
+        'standard': var(--sbb-form-field-min-height-m),
+        'lean': var(--sbb-form-field-min-height-s),
       ),
       $theme
     )};
+  --sbb-form-field-padding-inline-s: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-padding-inline-m: var(--sbb-spacing-fixed-3x);
+  --sbb-form-field-padding-inline-l: var(--sbb-spacing-responsive-xxxs);
   --sbb-form-field-padding-inline: #{sbb.theme-pattern-select(
       (
-        'standard': var(--sbb-spacing-fixed-3x),
-        'lean': var(--sbb-spacing-fixed-2x),
+        'standard': var(--sbb-form-field-padding-inline-m),
+        'lean': var(--sbb-form-field-padding-inline-s),
       ),
       $theme
     )};
+  --sbb-form-field-input-text-size-s: var(--sbb-text-font-size-s);
+  --sbb-form-field-input-text-size-m: var(--sbb-text-font-size-m);
+  --sbb-form-field-input-text-size-l: var(--sbb-text-font-size-m);
   --sbb-form-field-input-text-size: #{sbb.theme-pattern-select(
       (
-        'standard': var(--sbb-text-font-size-m),
-        'lean': var(--sbb-text-font-size-s),
+        'standard': var(--sbb-form-field-input-text-size-m),
+        'lean': var(--sbb-form-field-input-text-size-s),
       ),
       $theme
     )};
+  --sbb-form-field-label-text-size-s: var(--sbb-text-font-size-xxs);
+  --sbb-form-field-label-text-size-m: var(--sbb-text-font-size-xs);
+  --sbb-form-field-label-text-size-l: var(--sbb-text-font-size-xs);
   --sbb-form-field-label-text-size: #{sbb.theme-pattern-select(
       (
-        'standard': var(--sbb-text-font-size-xs),
-        'lean': var(--sbb-text-font-size-xxs),
+        'standard': var(--sbb-form-field-label-text-size-m),
+        'lean': var(--sbb-form-field-label-text-size-s),
       ),
       $theme
     )};
+  --_sbb-form-field-label-to-input-overlapping-s: #{sbb.px-to-rem-build(10)};
+  --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
+  --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
   --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
       (
-        'standard': var(--sbb-spacing-fixed-1x),
-        'lean': #{sbb.px-to-rem-build(10)},
+        'standard': var(--_sbb-form-field-label-to-input-overlapping-m),
+        'lean': var(--_sbb-form-field-label-to-input-overlapping-s),
       ),
       $theme
     )};
+  --_sbb-form-field-floating-label-transform-s: #{sbb.px-to-rem-build(5.5)};
+  --_sbb-form-field-floating-label-transform-m: #{sbb.px-to-rem-build(8.5)};
+  --_sbb-form-field-floating-label-transform-l: #{sbb.px-to-rem-build(8.5)};
   --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
       (
-        'standard': #{sbb.px-to-rem-build(8.5)},
-        'lean': #{sbb.px-to-rem-build(5.5)},
+        'standard': var(--_sbb-form-field-floating-label-transform-m),
+        'lean': var(--_sbb-form-field-floating-label-transform-s),
       ),
       $theme
     )};
+  --_sbb-form-field-spacer-margin-block-end-s: #{sbb.px-to-rem-build(-8.5)};
+  --_sbb-form-field-spacer-margin-block-end-m: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
+  );
+  --_sbb-form-field-spacer-margin-block-end-l: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
+  );
   --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
       (
-        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
-        'lean': #{sbb.px-to-rem-build(-8.5)},
+        'standard': var(--_sbb-form-field-spacer-margin-block-end-m),
+        'lean': var(--_sbb-form-field-spacer-margin-block-end-s),
       ),
       $theme
     )};
+  --_sbb-form-field-input-margin-block-end-s: #{sbb.px-to-rem-build(-2)};
+  --_sbb-form-field-input-margin-block-end-m: 0;
+  --_sbb-form-field-input-margin-block-end-l: 0;
   --_sbb-form-field-input-margin-block-end: #{sbb.theme-pattern-select(
       (
-        'standard': 0,
-        'lean': #{sbb.px-to-rem-build(-2)},
+        'standard': var(--_sbb-form-field-input-margin-block-end-m),
+        'lean': var(--_sbb-form-field-input-margin-block-end-s),
       ),
       $theme
     )};
@@ -79,27 +178,57 @@ $theme: 'standard' !default;
 
 @mixin forced-colors {
   --sbb-form-field-border-color: ButtonBorder;
+  --sbb-form-field-border-color-disabled: GrayText;
+  --sbb-form-field-border-color-disabled-negative: GrayText;
+  --sbb-form-field-border-color-negative: ButtonBorder;
+  --sbb-form-field-border-color-focus: Highlight;
+  --sbb-form-field-border-color-focus-negative: Highlight;
+  --sbb-form-field-border-color-error: LinkText;
+  --sbb-form-field-border-color-error-negative: LinkText;
+  --sbb-form-field-label-color-disabled: GrayText;
+  --sbb-form-field-label-color-disabled-negative: GrayText;
+  --sbb-form-field-prefix-color-disabled: GrayText;
+  --sbb-form-field-prefix-color-disabled-negative: GrayText;
+  --sbb-form-field-prefix-color-focus: Highlight;
+  --sbb-form-field-prefix-color-focus-negative: Highlight;
+  --sbb-form-field-text-color-disabled: GrayText;
+  --sbb-form-field-text-color-disabled-negative: GrayText;
+  --sbb-form-field-text-color-error: LinkText;
+  --sbb-form-field-text-color-error-negative: LinkText;
 }
 
 @mixin breakpoint-large {
+  --_sbb-form-field-label-to-input-overlapping-s: #{sbb.px-to-rem-build(11)};
+  --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
+  --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
   --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
       (
-        'standard': var(--sbb-spacing-fixed-1x),
-        'lean': #{sbb.px-to-rem-build(11)},
+        'standard': var(--_sbb-form-field-label-to-input-overlapping-m),
+        'lean': var(--_sbb-form-field-label-to-input-overlapping-s),
       ),
       $theme
     )};
+  --_sbb-form-field-floating-label-transform-s: #{sbb.px-to-rem-build(5)};
+  --_sbb-form-field-floating-label-transform-m: #{sbb.px-to-rem-build(10.5)};
+  --_sbb-form-field-floating-label-transform-l: #{sbb.px-to-rem-build(10.5)};
   --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
       (
-        'standard': #{sbb.px-to-rem-build(10.5)},
-        'lean': #{sbb.px-to-rem-build(5)},
+        'standard': var(--_sbb-form-field-floating-label-transform-m),
+        'lean': var(--_sbb-form-field-floating-label-transform-s),
       ),
       $theme
     )};
+  --_sbb-form-field-spacer-margin-block-end-s: #{sbb.px-to-rem-build(-8)};
+  --_sbb-form-field-spacer-margin-block-end-m: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
+  );
+  --_sbb-form-field-spacer-margin-block-end-l: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
+  );
   --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
       (
-        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
-        'lean': #{sbb.px-to-rem-build(-8)},
+        'standard': var(--_sbb-form-field-spacer-margin-block-end-m),
+        'lean': var(--_sbb-form-field-spacer-margin-block-end-s),
       ),
       $theme
     )};
@@ -157,8 +286,8 @@ $theme: 'standard' !default;
 
     // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
     &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-      color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-      -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+      color: var(--sbb-form-field-placeholder-color-disabled);
+      -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
     }
 
     // Fix positioning issue for select which occurs in Safari
@@ -228,17 +357,12 @@ $theme: 'standard' !default;
     ),
     :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)),
     &:state(interacted):state(invalid) {
-      --sbb-form-field-border-color: var(--sbb-color-error);
-      --sbb-form-field-text-color: var(--sbb-color-error);
+      --sbb-form-field-border-color: var(--sbb-form-field-border-color-error);
+      --sbb-form-field-text-color: var(--sbb-form-field-text-color-error);
 
       &[negative] {
-        --sbb-form-field-border-color: var(--sbb-color-red85);
-        --sbb-form-field-text-color: var(--sbb-color-red85);
-      }
-
-      @media (forced-colors: active) {
-        --sbb-form-field-border-color: LinkText !important;
-        --sbb-form-field-text-color: LinkText !important;
+        --sbb-form-field-border-color: var(--sbb-form-field-border-color-error-negative);
+        --sbb-form-field-text-color: var(--sbb-form-field-text-color-error-negative);
       }
     }
   }
@@ -250,16 +374,11 @@ $theme: 'standard' !default;
     :root.sbb-form-field-required-highlight
       &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
     &.sbb-form-field-required-highlight {
-      --sbb-form-field-background-color: light-dark(
-        color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
-        color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
-      );
+      --sbb-form-field-background-color: var(--sbb-form-field-background-color-required-highlight);
 
       &[negative] {
-        --sbb-form-field-background-color: color-mix(
-          in srgb,
-          var(--sbb-color-peach) 10%,
-          var(--sbb-background-color-1-negative)
+        --sbb-form-field-background-color: var(
+          --sbb-form-field-background-color-required-highlight-negative
         );
       }
     }