@sbb-esta/lyne-elements 2.7.0 → 2.8.0

package/breadcrumb/breadcrumb/breadcrumb.d.ts

@@ -9,8 +9,6 @@ declare const SbbBreadcrumbElement_base: import('../../core/mixins.js').Abstract
  */
 export declare class SbbBreadcrumbElement extends SbbBreadcrumbElement_base {
     static styles: CSSResultGroup;
-    private accessor _hasText;
-    private _handleSlotchange;
     protected renderTemplate(): TemplateResult;
 }
 declare global {

package/breadcrumb/breadcrumb/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/elements/breadcrumb/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAMjE;;;;;GAKG;AACH,qBAEM,oBAAqB,SAAQ,yBAAuD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAE7C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAE3C,OAAO,CAAC,iBAAiB;cAMN,cAAc,IAAI,cAAc;CAQpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/elements/breadcrumb/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAOjE;;;;;GAKG;AACH,qBAGM,oBAAqB,SAAQ,yBAAuD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,cAAc,IAAI,cAAc;CAQpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}

package/breadcrumb/breadcrumb/breadcrumb.js

@@ -1,52 +1,29 @@
-var u = (e) => {
-  throw TypeError(e);
-};
-var h = (e, t, r) => t.has(e) || u("Cannot " + r);
-var f = (e, t, r) => (h(e, t, "read from private field"), r ? r.call(e) : t.get(e)), x = (e, t, r) => t.has(e) ? u("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), _ = (e, t, r, s) => (h(e, t, "write to private field"), s ? s.call(e, r) : t.set(e, r), r);
-import { __esDecorate as v, __runInitializers as l } from "tslib";
-import { customElement as y, state as g } from "lit/decorators.js";
-import { html as T } from "lit/static-html.js";
-import { SbbLinkBaseElement as S } from "../../core/base-elements.js";
-import { SbbHydrationMixin as k } from "../../core/mixins.js";
-import { SbbIconNameMixin as w } from "../../icon.js";
-import { css as z } from "lit";
-const I = z`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite)}@media (any-hover: hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal)}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite)}.sbb-breadcrumb{--sbb-link-text-decoration: none;--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration, underline);text-decoration-color:var(--sbb-link-text-decoration-color);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media (forced-colors: active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:pointer;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media (forced-colors: active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb: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);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
-let C = (() => {
-  var b, a;
-  let e = [y("sbb-breadcrumb")], t, r = [], s, n = w(k(S)), c, d = [], m = [];
-  return a = class extends n {
-    constructor() {
-      super(...arguments);
-      x(this, b, l(this, d, !1));
-      l(this, m);
-    }
-    get _hasText() {
-      return f(this, b);
-    }
-    set _hasText(o) {
-      _(this, b, o);
-    }
-    _handleSlotchange() {
-      this._hasText = Array.from(this.childNodes ?? []).some((o) => {
-        var i;
-        return !o.slot && ((i = o.textContent) == null ? void 0 : i.trim());
-      });
-    }
+import { __esDecorate as i, __runInitializers as l } from "tslib";
+import { customElement as n } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { SbbLinkBaseElement as d } from "../../core/base-elements.js";
+import { slotState as m } from "../../core/decorators.js";
+import { SbbHydrationMixin as u } from "../../core/mixins.js";
+import { SbbIconNameMixin as f } from "../../icon.js";
+import { css as v } from "lit";
+const p = v`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite)}@media (any-hover: hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal)}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite)}.sbb-breadcrumb{--sbb-link-text-decoration: none;--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration, underline);text-decoration-color:var(--sbb-link-text-decoration-color);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media (forced-colors: active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:pointer;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media (forced-colors: active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb: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);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not([data-slot-names~=unnamed])) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
+let z = (() => {
+  var t;
+  let s = [n("sbb-breadcrumb"), m()], o, b = [], e, a = f(u(d));
+  return t = class extends a {
     renderTemplate() {
-      return T`
+      return c`
       ${this.renderIconSlot("sbb-breadcrumb__icon")}
-      <span class="sbb-breadcrumb__label" ?hidden=${!this._hasText}>
-        <slot @slotchange=${this._handleSlotchange}></slot>
+      <span class="sbb-breadcrumb__label">
+        <slot></slot>
       </span>
     `;
     }
-  }, b = new WeakMap(), s = a, (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    c = [g()], v(a, null, c, { kind: "accessor", name: "_hasText", static: !1, private: !1, access: { has: (i) => "_hasText" in i, get: (i) => i._hasText, set: (i, p) => {
-      i._hasText = p;
-    } }, metadata: o }, d, m), v(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: o }, null, r), s = t.value, o && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), a.styles = I, l(s, r), s;
+  }, e = t, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    i(null, o = { value: e }, s, { kind: "class", name: e.name, metadata: r }, null, b), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), t.styles = p, l(e, b), e;
 })();
 export {
-  C as SbbBreadcrumbElement
+  z as SbbBreadcrumbElement
 };

package/core/controllers/{id-observer-controller.d.ts → id-reference-controller.d.ts}

@@ -18,4 +18,4 @@ export declare class SbbIdReferenceController<T extends LitElement> implements R
      */
     find(): HTMLElement | null;
 }
-//# sourceMappingURL=id-observer-controller.d.ts.map
+//# sourceMappingURL=id-reference-controller.d.ts.map

package/core/controllers/id-reference-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-reference-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/id-reference-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAOzE;;GAEG;AACH,qBAAa,wBAAwB,CAAC,CAAC,SAAS,UAAU,CAAE,YAAW,kBAAkB;IAIrF,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,UAAU;IALpB,OAAO,CAAC,SAAS,CAAsC;gBAG7C,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,MAAM,CAAC,EACf,UAAU;kBAZR,gBAAgB;qBAAe,GAAG,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC;MAY7C;IAKzB,aAAa,IAAI,IAAI;IAgDrB,gBAAgB,IAAI,IAAI;IAoB/B;;OAEG;IACI,IAAI,IAAI,WAAW,GAAG,IAAI;CAQlC"}

package/core/controllers/slot-state-controller.d.ts

@@ -22,10 +22,12 @@ export declare class SbbSlotStateController implements ReactiveController {
     private _host;
     private _onChangeCallback;
     readonly slots: Set<string>;
+    private _textObserver;
     constructor(_host: ReactiveControllerHost & HTMLElement, _onChangeCallback?: (() => void) | null);
     hostConnected(): void;
     hostDisconnected(): void;
     private _slotchangeHandler;
     private _syncSlots;
+    private _updateSlotNameAttribute;
 }
 //# sourceMappingURL=slot-state-controller.d.ts.map

package/core/controllers/slot-state-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-state-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/slot-state-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,sBAAuB,YAAW,kBAAkB;IAI7D,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,iBAAiB;IAJ3B,SAAgB,KAAK,cAAqB;gBAGhC,KAAK,EAAE,sBAAsB,GAAG,WAAW,EAC3C,iBAAiB,GAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAW;IAKhD,aAAa,IAAI,IAAI;IAMrB,gBAAgB,IAAI,IAAI;IAM/B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,UAAU;CAuBnB"}
+{"version":3,"file":"slot-state-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/slot-state-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,sBAAuB,YAAW,kBAAkB;IAmB7D,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,iBAAiB;IAnB3B,SAAgB,KAAK,cAAqB;IAE1C,OAAO,CAAC,aAAa,CAahB;gBAGK,KAAK,EAAE,sBAAsB,GAAG,WAAW,EAC3C,iBAAiB,GAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAW;IAKhD,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;IAO/B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,wBAAwB;CAajC"}

package/core/controllers/slot-state-controller.js

@@ -1,30 +1,41 @@
-class r {
-  constructor(t, o = null) {
-    this._host = t, this._onChangeCallback = o, this.slots = /* @__PURE__ */ new Set(), this._slotchangeHandler = (s) => {
-      this._syncSlots(s.target);
+import { isServer as i } from "lit";
+class l {
+  constructor(e, s = null) {
+    this._host = e, this._onChangeCallback = s, this.slots = /* @__PURE__ */ new Set(), this._textObserver = !i && new MutationObserver(() => {
+      Array.from(this._host.childNodes).filter((o) => o.nodeType === o.TEXT_NODE).some((o) => {
+        var n;
+        return (n = o.textContent) == null ? void 0 : n.trim();
+      }) ? this.slots.add("unnamed") : Array.from(this._host.children).every((o) => o.slot) && this.slots.delete("unnamed"), this._updateSlotNameAttribute();
+    }), this._slotchangeHandler = (t) => {
+      this._syncSlots(t.target);
     }, this._host.addController(this);
   }
   hostConnected() {
-    var t;
-    this._syncSlots(...this._host.querySelectorAll("slot")), (t = this._host.shadowRoot) == null || t.addEventListener("slotchange", this._slotchangeHandler);
+    var e, s, t;
+    this._syncSlots(...((s = (e = this._host.shadowRoot) == null ? void 0 : e.querySelectorAll) == null ? void 0 : s.call(e, "slot")) ?? []), (t = this._host.shadowRoot) == null || t.addEventListener("slotchange", this._slotchangeHandler);
   }
   hostDisconnected() {
-    var t;
-    (t = this._host.shadowRoot) == null || t.removeEventListener("slotchange", this._slotchangeHandler);
-  }
-  _syncSlots(...t) {
     var e;
-    for (const n of t) {
-      const l = n.name || "unnamed";
-      n.assignedNodes().some((a) => {
-        var h;
-        return "tagName" in a || ((h = a.textContent) == null ? void 0 : h.trim());
-      }) ? this.slots.add(l) : this.slots.delete(l);
+    (e = this._host.shadowRoot) == null || e.removeEventListener("slotchange", this._slotchangeHandler), this._textObserver.disconnect();
+  }
+  _syncSlots(...e) {
+    var s;
+    this._textObserver.disconnect();
+    for (const t of e) {
+      const o = t.name || "unnamed";
+      t.assignedNodes().some((n) => {
+        var a;
+        return "tagName" in n || ((a = n.textContent) == null ? void 0 : a.trim());
+      }) ? this.slots.add(o) : this.slots.delete(o), this._updateSlotNameAttribute();
     }
-    const o = this._host.getAttribute("data-slot-names"), s = [...this.slots].sort().join(" ");
-    s ? this._host.getAttribute("data-slot-names") !== s && this._host.setAttribute("data-slot-names", s) : this._host.removeAttribute("data-slot-names"), s !== o && ((e = this._onChangeCallback) == null || e.call(this));
+    (s = e.find((t) => !t.name)) == null || s.assignedNodes().filter((t) => t.nodeType === t.TEXT_NODE).forEach((t) => this._textObserver.observe(t, { characterData: !0 }));
+  }
+  _updateSlotNameAttribute() {
+    var t;
+    const e = this._host.getAttribute("data-slot-names"), s = [...this.slots].sort().join(" ");
+    s ? this._host.getAttribute("data-slot-names") !== s && this._host.setAttribute("data-slot-names", s) : this._host.removeAttribute("data-slot-names"), s !== e && ((t = this._onChangeCallback) == null || t.call(this));
   }
 }
 export {
-  r as SbbSlotStateController
+  l as SbbSlotStateController
 };

package/core/controllers.d.ts

@@ -3,7 +3,7 @@
  */
 export * from './controllers/connected-abort-controller.js';
 export * from './controllers/escapable-overlay-controller.js';
-export * from './controllers/id-observer-controller.js';
+export * from './controllers/id-reference-controller.js';
 export * from './controllers/inert-controller.js';
 export * from './controllers/language-controller.js';
 export * from './controllers/media-matchers-controller.js';

package/core/controllers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,0CAA0C,CAAC;AACzD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC"}

package/core/controllers.js

@@ -1,6 +1,6 @@
 import { SbbConnectedAbortController as o } from "./controllers/connected-abort-controller.js";
 import { SbbEscapableOverlayController as t } from "./controllers/escapable-overlay-controller.js";
-import { SbbIdReferenceController as a } from "./controllers/id-observer-controller.js";
+import { SbbIdReferenceController as a } from "./controllers/id-reference-controller.js";
 import { SbbInertController as S } from "./controllers/inert-controller.js";
 import { SbbLanguageController as i } from "./controllers/language-controller.js";
 import { SbbMediaMatcherController as m, SbbMediaQueryBreakpointMediumAndAbove as C, SbbMediaQueryBreakpointMediumAndBelow as M, SbbMediaQueryBreakpointSmallAndBelow as u, SbbMediaQueryForcedColors as f, SbbMediaQueryHover as x, SbbMediaQueryPointerCoarse as y } from "./controllers/media-matchers-controller.js";

package/core/styles/core.scss

@@ -35,7 +35,7 @@
 
     // Infinity border radius, can be used to achieve rounded border on start and end
     // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-    --sbb-border-radius-infinity: 10000000em;
+    --sbb-border-radius-infinity: 100000em;
 
     &:has(sbb-header[size='s']) {
       --sbb-header-height: #{functions.px-to-rem-build(52)};
@@ -134,6 +134,20 @@ sbb-form-field {
     padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
   }
 
+  &[size='s'] :where(input, sbb-date-input) {
+    // We shrink the input's height to support all types of inputs (especially type=number).
+    // Factor 1.25 ensures, letters are not cut.
+    height: calc(var(--sbb-form-field-input-text-size) * 1.25);
+
+    // Avoids Safari bug, where text gets misaligned with type=number
+    line-height: 1 !important;
+
+    // We add the missing block spacing to fit the line-height
+    margin-block: calc(
+      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25))
+    );
+  }
+
   :where(textarea) {
     @include scrollbar.scrollbar;
 
@@ -481,3 +495,9 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
     top: 0;
   }
 }
+
+sbb-toggle:has(:focus-visible) {
+  @include a11y.focus-outline;
+
+  --sbb-focus-outline-offset: #{functions.px-to-rem-build(5)};
+}

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -342,6 +342,8 @@ $sbb-size-element-l-large: 4rem;
 $sbb-size-element-l-wide: 4rem;
 /// Original Value: 64px
 $sbb-size-element-l-ultra: 4rem;
+/// Original Value: 16px
+$sbb-size-icon-ui-extra-small: 1rem;
 /// Original Value: 24px
 $sbb-size-icon-ui-small: 1.5rem;
 /// Original Value: 36px

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 19 Mar 2025 15:25:09 GMT
+ * Generated on Thu, 17 Apr 2025 11:20:53 GMT
  */
 
 @mixin lyne-design-tokens-css-variables {
@@ -574,6 +574,10 @@
    * Original Value: 64px
    */
   --sbb-size-element-l-ultra: 4rem;
+  /**
+   * Original Value: 16px
+   */
+  --sbb-size-icon-ui-extra-small: 1rem;
   /**
    * Original Value: 24px
    */

package/core.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 19 Mar 2025 15:25:09 GMT
+ * Generated on Thu, 17 Apr 2025 11:20:53 GMT
  */
 *,
 ::before,
@@ -579,6 +579,10 @@
    * Original Value: 64px
    */
   --sbb-size-element-l-ultra: 4rem;
+  /**
+   * Original Value: 16px
+   */
+  --sbb-size-icon-ui-extra-small: 1rem;
   /**
    * Original Value: 24px
    */
@@ -1113,7 +1117,7 @@
   --sbb-time-input-max-width: 3.625rem;
   --sbb-time-input-s-max-width: 3.1875rem;
   --sbb-overlay-default-z-index: 1000;
-  --sbb-border-radius-infinity: 10000000em;
+  --sbb-border-radius-infinity: 100000em;
 }
 :root:has(sbb-header[size=s]) {
   --sbb-header-height: 3.25rem;
@@ -1217,6 +1221,11 @@ sbb-form-field :where(select) {
 sbb-form-field :where(select, sbb-select) {
   padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
 }
+sbb-form-field[size=s] :where(input, sbb-date-input) {
+  height: calc(var(--sbb-form-field-input-text-size) * 1.25);
+  line-height: 1 !important;
+  margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
+}
 sbb-form-field :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
@@ -1537,4 +1546,10 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
 }
 sbb-form-field .sbb-select-trigger {
   top: 0;
+}
+
+sbb-toggle:has(: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);
+  --sbb-focus-outline-offset: 0.3125rem;
 }