@threadlabs/looma 0.4.0 → 0.5.0

package/styles/ui-search-result-row.css

@@ -0,0 +1,92 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-search-result-row"]) to ([data-component], [data-slotted]) {
+:scope {
+      appearance: none;
+      inline-size: 100%;
+      min-block-size: var(--ui-search-result-row-min-height, 56px);
+      margin: 0;
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
+      background: var(--ui-search-result-row-bg, transparent);
+      border: none;
+      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+      color: inherit;
+      cursor: pointer;
+      text-align: left;
+      transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+    }
+
+    :scope:last-child {
+      border-block-end: none;
+    }
+
+    :scope:hover:enabled {
+      background: var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%));
+    }
+
+    :scope[data-ui-search-result-row-state~="selected"] {
+      background: var(
+        --ui-search-result-row-selected-bg,
+        var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))
+      );
+    }
+
+    :scope:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, #2563eb);
+      outline-offset: -2px;
+    }
+
+    :scope:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      align-items: flex-start;
+      flex-shrink: 0;
+    }
+
+    .content {
+      min-inline-size: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title,
+    .meta,
+    .excerpt {
+      display: block;
+      min-inline-size: 0;
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .meta:empty,
+    .excerpt:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-search-result-row"]) to ([data-component]) {
+/* An unused region takes no space. */
+
+    :where([data-slotted], [data-slotted] *):is([slot="title"]),
+    :where([data-slotted], [data-slotted] *):is([slot="meta"]),
+    :where([data-slotted], [data-slotted] *):is([slot="excerpt"]) {
+      display: block;
+      margin: 0;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-search-shell.css

@@ -0,0 +1,128 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-search-shell"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: contents;
+    }
+
+    dialog {
+      position: fixed;
+      inset: 0;
+      z-index: var(--ui-search-shell-z-index, 400);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: none;
+      block-size: 100%;
+      max-block-size: none;
+      margin: 0;
+      padding: var(--ui-search-shell-padding-top, 10vh) var(--ui-search-shell-viewport-gap, var(--ui-space-4))
+        var(--ui-search-shell-viewport-gap, var(--ui-space-4));
+      overflow: auto;
+      border: 0;
+      background: var(--ui-overlay-backdrop);
+      color: var(--ui-text-primary);
+    }
+
+    dialog::backdrop {
+      background: var(--ui-overlay-backdrop);
+    }
+
+    .panel {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      inline-size: min(100%, var(--ui-search-shell-max-width, 40rem));
+      max-block-size: var(--ui-search-shell-max-height, 80vh);
+      margin-inline: auto;
+      overflow: hidden;
+      background: var(--ui-search-shell-bg, var(--ui-surface-elevated));
+      border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
+      border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
+      box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+    }
+
+    .search {
+      padding: var(--ui-space-3);
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    .status,
+    .footer {
+      flex-shrink: 0;
+      padding: var(--ui-space-2) var(--ui-space-4);
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    .status {
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
+    .footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--ui-space-2);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
+    .status:empty,
+    .footer:empty {
+      display: none;
+    }
+
+    .body {
+      flex: 1;
+      min-block-size: 0;
+      overflow: auto;
+      padding: var(--ui-space-2);
+    }
+
+    @media (max-width: 47.9375rem) {
+      dialog {
+        padding: 0;
+      }
+
+      .panel {
+        inline-size: 100%;
+        min-block-size: 100dvh;
+        max-block-size: none;
+        border: 0;
+        border-radius: 0;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-search-shell"]) to ([data-component]) {
+:where([data-slotted], [data-slotted] *):is(input[slot="search"]) {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-block-size: var(--ui-control-min-block-size);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 1px solid var(--ui-control-border);
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-control-surface);
+      color: var(--ui-text-primary);
+      font: inherit;
+      box-shadow: var(--ui-shadow-xs);
+    }
+
+    :where([data-slotted], [data-slotted] *):is(input[slot="search"]:focus-visible) {
+      border-color: var(--ui-control-focus);
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
+
+    @media (max-width: 47.9375rem) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-select.css

@@ -0,0 +1,86 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-select"]) to ([data-component], [data-slotted]) {
+:scope {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md, 2.5rem);
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-select-radius, var(--ui-radius-2));
+      background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+      color: var(--ui-text-primary);
+      color-scheme: light dark;
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+     * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
+    :scope:not([multiple]) {
+      appearance: none;
+      padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
+      background-image: var(
+        --ui-select-chevron,
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+      );
+      background-repeat: no-repeat;
+      background-position: right var(--ui-space-3) center;
+      background-size: 1.125rem 1.125rem;
+    }
+
+    :scope:hover:not(:focus):not(:disabled) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+    }
+
+    :scope:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      outline: none;
+      box-shadow: var(--ui-select-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :scope[aria-invalid="true"],
+    :scope:is(:user-invalid, [data-user-invalid]) {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    :scope:disabled {
+      background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-text-muted);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    :scope[multiple],
+    :scope[size]:not([size="1"]) {
+      min-block-size: 7rem;
+      padding: var(--ui-space-2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-select"]) to ([data-component]) {
+/* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+     * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-separator.css

@@ -0,0 +1,16 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
+hr {
+      box-sizing: border-box;
+      align-self: stretch;
+      margin: 0;
+      border: 0;
+      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+    }
+
+    hr[aria-orientation="vertical"] {
+      block-size: auto;
+      border-block-start: 0;
+      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+    }
+}

package/styles/ui-sidebar.css

@@ -0,0 +1,166 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-sidebar"]) to ([data-component], [data-slotted]) {
+:scope {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      flex: none;
+      inline-size: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
+      max-inline-size: 100%;
+      min-block-size: 0;
+      background: var(--ui-sidebar-surface, var(--ui-surface-default));
+      border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+    }
+
+    :scope[data-ui-sidebar-state~="side=end"] {
+      border-inline-end: 0;
+      border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
+    }
+
+    .content {
+      flex: 1;
+      min-block-size: 0;
+      overflow: auto;
+    }
+
+    /* Collapsed while docked. */
+    :scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
+      display: none;
+    }
+
+    .resizer {
+      position: absolute;
+      z-index: 1;
+      inset-block: 0;
+      /* On the panel's inner edge: the end edge of a start sidebar. */
+      inset-inline-end: 0;
+      inline-size: 8px;
+      min-inline-size: 8px;
+      transform: translateX(50%);
+      cursor: col-resize;
+      touch-action: none;
+      outline: none;
+    }
+
+    .resizer[hidden] {
+      display: none;
+    }
+
+    :scope[data-ui-sidebar-state~="side=end"] .resizer {
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+      transform: translateX(-50%);
+    }
+
+    .resizer::after {
+      content: "";
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 3px;
+      inline-size: 2px;
+      background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transition:
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    }
+
+    .guide {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      inline-size: 6px;
+      block-size: 22px;
+      border: 1px solid var(--ui-border-strong, #c8c8c4);
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-surface-elevated, #fff);
+      opacity: 0;
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      pointer-events: none;
+    }
+
+    .resizer:is(:hover, :focus-visible)::after {
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
+      opacity: 1;
+    }
+
+    .resizer:is(:hover, :focus-visible) > .guide {
+      opacity: 1;
+    }
+
+    /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
+    :scope[popover] {
+      position: fixed;
+      inset-block: 0;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      margin: 0;
+      padding: 0;
+      inline-size: min(var(--_sidebar-width, var(--ui-sidebar-width, 280px)), 85vw);
+      max-block-size: none;
+      block-size: 100dvh;
+      border-block: 0;
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      transform: translateX(0);
+      transition:
+        transform var(--ui-motion-base, 0.2s) var(--ui-motion-ease-out, ease-out),
+        display var(--ui-motion-base, 0.2s) allow-discrete,
+        overlay var(--ui-motion-base, 0.2s) allow-discrete;
+    }
+
+    /* The author display above would otherwise override the UA rule that hides a closed popover. */
+    :scope[popover]:not(:popover-open) {
+      display: none;
+      transform: translateX(-100%);
+    }
+
+    :scope[data-ui-sidebar-state~="side=end"][popover] {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :scope[data-ui-sidebar-state~="side=end"][popover]:not(:popover-open) {
+      transform: translateX(100%);
+    }
+
+    @starting-style {
+      :scope[popover]:popover-open {
+        transform: translateX(-100%);
+      }
+      :scope[data-ui-sidebar-state~="side=end"][popover]:popover-open {
+        transform: translateX(100%);
+      }
+    }
+
+    :scope[popover]::backdrop {
+      background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope[popover] {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-sidebar"]) to ([data-component]) {
+/* Collapsed while docked. */
+
+    /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
+
+    /* The author display above would otherwise override the UA rule that hides a closed popover. */
+
+    @starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-stack.css

@@ -0,0 +1,55 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_layout-gap: var(--ui-space-4, 1rem);
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--ui-layout-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope[data-ui-stack-state~="gap=xs"] {
+      --_layout-gap: var(--ui-space-2, 0.5rem);
+    }
+    :scope[data-ui-stack-state~="gap=s"] {
+      --_layout-gap: var(--ui-space-3, 0.75rem);
+    }
+    :scope[data-ui-stack-state~="gap=m"] {
+      --_layout-gap: var(--ui-space-4, 1rem);
+    }
+    :scope[data-ui-stack-state~="gap=l"] {
+      --_layout-gap: var(--ui-space-5, 1.5rem);
+    }
+    :scope[data-ui-stack-state~="gap=xl"] {
+      --_layout-gap: var(--ui-space-6, 2rem);
+    }
+    :scope[data-ui-stack-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope[data-ui-stack-state~="align=center"] {
+      align-items: center;
+    }
+    :scope[data-ui-stack-state~="align=end"] {
+      align-items: flex-end;
+    }
+    :scope[data-ui-stack-state~="justify=center"] {
+      justify-content: center;
+    }
+    :scope[data-ui-stack-state~="justify=end"] {
+      justify-content: flex-end;
+    }
+    :scope[data-ui-stack-state~="justify=between"] {
+      justify-content: space-between;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-stack"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-switch.css

@@ -0,0 +1,88 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--ui-switch-gap, var(--ui-space-2));
+      max-inline-size: 100%;
+      color: var(--ui-text-primary);
+      cursor: pointer;
+    }
+
+    .label {
+      min-inline-size: 0;
+      line-height: var(--ui-line-height-md);
+    }
+
+    input {
+      appearance: none;
+      -webkit-appearance: none;
+      position: relative;
+      flex: 0 0 auto;
+      width: var(--ui-switch-track-width, 2.5rem);
+      height: var(--ui-switch-track-height, 1.5rem);
+      padding: 0;
+      border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+      border-radius: 999px;
+      background: var(--ui-control-surface, var(--ui-surface-default));
+      box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+      margin: 0;
+    }
+
+    input::after {
+      content: "";
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 999px;
+      background: var(--ui-text-secondary);
+      box-shadow: var(--ui-shadow-xs);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    input:checked {
+      background: var(--ui-accent-solid);
+      border-color: var(--ui-accent-solid);
+    }
+
+    input:checked::after {
+      transform: translateX(1rem);
+      background: var(--ui-text-on-accent);
+    }
+
+    input:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: 2px;
+    }
+
+    :scope[data-ui-switch-state~="disabled"] {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    :scope[data-ui-switch-state~="disabled"] input {
+      border-color: var(--ui-border-default);
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      cursor: not-allowed;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      input, input::after {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-switch"]) to ([data-component]) {
+@media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-switcher.css

@@ -0,0 +1,61 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_switcher-gap: var(--ui-space-4, 1rem);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ui-switcher-gap, var(--_switcher-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope[data-ui-switcher-state~="gap=xs"] {
+      --_switcher-gap: var(--ui-space-2, 0.5rem);
+    }
+    :scope[data-ui-switcher-state~="gap=s"] {
+      --_switcher-gap: var(--ui-space-3, 0.75rem);
+    }
+    :scope[data-ui-switcher-state~="gap=m"] {
+      --_switcher-gap: var(--ui-space-4, 1rem);
+    }
+    :scope[data-ui-switcher-state~="gap=l"] {
+      --_switcher-gap: var(--ui-space-5, 1.5rem);
+    }
+    :scope[data-ui-switcher-state~="gap=xl"] {
+      --_switcher-gap: var(--ui-space-6, 2rem);
+    }
+    :scope[data-ui-switcher-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope[data-ui-switcher-state~="align=center"] {
+      align-items: center;
+    }
+    :scope[data-ui-switcher-state~="align=end"] {
+      align-items: flex-end;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-switcher"]) to ([data-component]) {
+:scope > :where([data-slotted], [data-slotted] *):is(*) {
+      min-inline-size: 0;
+      flex-grow: 1;
+      /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
+      flex-basis: calc((var(--ui-switcher-threshold, 30rem) - 100%) * 999);
+    }
+    :scope[data-ui-switcher-state~="threshold=xs"] > :where([data-slotted], [data-slotted] *):is(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
+    }
+    :scope[data-ui-switcher-state~="threshold=md"] > :where([data-slotted], [data-slotted] *):is(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
+    }
+    :scope[data-ui-switcher-state~="threshold=lg"] > :where([data-slotted], [data-slotted] *):is(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}