ui-style-kit-css 2.2.0 → 2.4.0

package/styles/components.css

@@ -6,7 +6,7 @@
 ========================================================= */
 
 @layer ui-style-kit.components {
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   h1,
   h2,
   h3,
@@ -23,6 +23,9 @@
   label,
   legend,
   summary,
+  strong,
+  small,
+  em,
   code,
   kbd,
   samp,
@@ -32,10 +35,11 @@
 ) {
   max-inline-size: 100%;
   min-inline-size: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   [class~="saas-surface"],
   [class~="saas-surface-sm"],
   [class~="saas-surface-lg"],
@@ -160,10 +164,9 @@
 ) {
   max-inline-size: 100%;
   min-inline-size: 0;
-  overflow-wrap: anywhere;
 }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   [class~="saas-button"],
   [class~="saas-icon-button"],
   [class~="saas-badge"],
@@ -211,10 +214,12 @@
 ) {
   max-inline-size: 100%;
   min-inline-size: 0;
+  overflow-wrap: break-word;
+  word-break: normal;
   white-space: normal;
 }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   .saas-button,
   .saas-icon-button,
   .saas-button-pill,
@@ -260,7 +265,7 @@
   vertical-align: middle;
 }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   .saas-button-pill,
   .bento-button-pill,
   .max-button-pill,
@@ -283,7 +288,8 @@
   font-weight: 850;
   text-align: center;
   text-decoration: none;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
+  word-break: normal;
   white-space: normal;
   cursor: pointer;
   transition:
@@ -317,7 +323,7 @@
 .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
 .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   .saas-button-pill:active,
   .saas-button-pill[aria-pressed="true"],
   .bento-button-pill:active,
@@ -356,7 +362,7 @@
 .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
 .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   .saas-button-pill:disabled,
   .saas-button-pill[aria-disabled="true"],
   .bento-button-pill:disabled,
@@ -386,7 +392,7 @@
   transform: none;
 }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   .saas-tooltip,
   .saas-tooltip-top,
   .saas-tooltip-right,
@@ -445,16 +451,17 @@
 ) {
   max-inline-size: min(18rem, calc(100vw - 2rem));
   text-align: start;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
 /* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
-[data-ui][data-theme][data-mode]:where([data-ui-tooltip-anchor]),
-[data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor]) {
+[data-ui][data-mode]:where([data-ui-tooltip-anchor]),
+[data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
   position: relative;
 }
 
-[data-ui][data-theme][data-mode] :where(
+[data-ui][data-mode] :where(
   [data-ui-tooltip-anchor] > .saas-tooltip-top,
   [data-ui-tooltip-anchor] > .saas-tooltip-right,
   [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -504,10 +511,10 @@
   z-index: 20;
 }
 
-[data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
-[data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
-[data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
-[data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
 
 .saas-pill { border-radius: var(--saas-radius-pill); }
 .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -596,6 +603,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  flex: 0 0 auto;
   inline-size: 2.75rem;
   block-size: 1.5rem;
   padding: .18rem;
@@ -627,20 +635,6 @@
   background: var(--usk-native-track-fill);
 }
 
-.saas-switch:has(input:checked) .saas-switch-thumb,
-.bento-switch:has(input:checked) .bento-switch-thumb,
-.max-switch:has(input:checked) .max-switch-thumb,
-.bau-switch:has(input:checked) .bau-switch-thumb,
-.tactile-switch:has(input:checked) .tactile-switch-thumb,
-.neo-switch:has(input:checked) .neo-switch-thumb,
-.retro-switch:has(input:checked) .retro-switch-thumb,
-.brutal-switch:has(input:checked) .brutal-switch-thumb,
-.cyber-switch:has(input:checked) .cyber-switch-thumb,
-.y2k-switch:has(input:checked) .y2k-switch-thumb,
-.rg-switch:has(input:checked) .rg-switch-thumb {
-  transform: translateX(1.25rem);
-}
-
 .saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
   position: absolute !important;
   inline-size: 1px !important;
@@ -669,3 +663,674 @@
   transform: translateY(0);
 }
 }
+
+/**
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
+ * The root attributes intentionally raise specificity within the preset layer
+ * so later style-specific defaults cannot collapse the number and caption.
+ */
+@layer ui-style-kit.presets {
+[data-ui][data-mode] :where(
+  .saas-badge-seal,
+  .bento-badge-seal,
+  .max-badge-seal,
+  .bau-badge-seal,
+  .tactile-badge-seal,
+  .neo-badge-seal,
+  .retro-badge-seal,
+  .brutal-badge-seal,
+  .cyber-badge-seal,
+  .y2k-badge-seal,
+  .rg-badge-seal,
+  .luxe-badge-seal,
+  .organic-badge-seal,
+  .utility-badge-seal,
+  .blueprint-badge-seal,
+  .deco-badge-seal,
+  .clay-badge-seal,
+  .terminal-badge-seal,
+  .paper-badge-seal,
+  .noir-badge-seal
+) > strong {
+  color: inherit;
+  font-size: 1.5rem;
+  line-height: .9;
+}
+
+[data-ui][data-mode] :where(
+  .saas-badge-seal,
+  .bento-badge-seal,
+  .max-badge-seal,
+  .bau-badge-seal,
+  .tactile-badge-seal,
+  .neo-badge-seal,
+  .retro-badge-seal,
+  .brutal-badge-seal,
+  .cyber-badge-seal,
+  .y2k-badge-seal,
+  .rg-badge-seal,
+  .luxe-badge-seal,
+  .organic-badge-seal,
+  .utility-badge-seal,
+  .blueprint-badge-seal,
+  .deco-badge-seal,
+  .clay-badge-seal,
+  .terminal-badge-seal,
+  .paper-badge-seal,
+  .noir-badge-seal
+) > small {
+  color: inherit;
+  font-size: .8125rem;
+  line-height: 1;
+}
+}
+
+/* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
+/* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
+@layer ui-style-kit.components {
+[data-ui][data-mode] :where(
+  .luxe-surface,
+  .luxe-surface-sm,
+  .luxe-surface-lg,
+  .luxe-card,
+  .luxe-card-service,
+  .luxe-card-feature,
+  .luxe-panel,
+  .luxe-toolbar,
+  .luxe-well,
+  .luxe-inset,
+  .luxe-field,
+  .luxe-alert,
+  .luxe-table-wrap,
+  .luxe-nav,
+  .luxe-feature-strip,
+  .luxe-feature-item,
+  .luxe-callout-bar,
+  .luxe-media-scrim,
+  .organic-surface,
+  .organic-surface-sm,
+  .organic-surface-lg,
+  .organic-card,
+  .organic-card-service,
+  .organic-card-feature,
+  .organic-panel,
+  .organic-toolbar,
+  .organic-well,
+  .organic-inset,
+  .organic-field,
+  .organic-alert,
+  .organic-table-wrap,
+  .organic-nav,
+  .organic-feature-strip,
+  .organic-feature-item,
+  .organic-callout-bar,
+  .organic-media-scrim,
+  .utility-surface,
+  .utility-surface-sm,
+  .utility-surface-lg,
+  .utility-card,
+  .utility-card-service,
+  .utility-card-feature,
+  .utility-panel,
+  .utility-toolbar,
+  .utility-well,
+  .utility-inset,
+  .utility-field,
+  .utility-alert,
+  .utility-table-wrap,
+  .utility-nav,
+  .utility-feature-strip,
+  .utility-feature-item,
+  .utility-callout-bar,
+  .utility-media-scrim,
+  .blueprint-surface,
+  .blueprint-surface-sm,
+  .blueprint-surface-lg,
+  .blueprint-card,
+  .blueprint-card-service,
+  .blueprint-card-feature,
+  .blueprint-panel,
+  .blueprint-toolbar,
+  .blueprint-well,
+  .blueprint-inset,
+  .blueprint-field,
+  .blueprint-alert,
+  .blueprint-table-wrap,
+  .blueprint-nav,
+  .blueprint-feature-strip,
+  .blueprint-feature-item,
+  .blueprint-callout-bar,
+  .blueprint-media-scrim,
+  .deco-surface,
+  .deco-surface-sm,
+  .deco-surface-lg,
+  .deco-card,
+  .deco-card-service,
+  .deco-card-feature,
+  .deco-panel,
+  .deco-toolbar,
+  .deco-well,
+  .deco-inset,
+  .deco-field,
+  .deco-alert,
+  .deco-table-wrap,
+  .deco-nav,
+  .deco-feature-strip,
+  .deco-feature-item,
+  .deco-callout-bar,
+  .deco-media-scrim,
+  .clay-surface,
+  .clay-surface-sm,
+  .clay-surface-lg,
+  .clay-card,
+  .clay-card-service,
+  .clay-card-feature,
+  .clay-panel,
+  .clay-toolbar,
+  .clay-well,
+  .clay-inset,
+  .clay-field,
+  .clay-alert,
+  .clay-table-wrap,
+  .clay-nav,
+  .clay-feature-strip,
+  .clay-feature-item,
+  .clay-callout-bar,
+  .clay-media-scrim,
+  .terminal-surface,
+  .terminal-surface-sm,
+  .terminal-surface-lg,
+  .terminal-card,
+  .terminal-card-service,
+  .terminal-card-feature,
+  .terminal-panel,
+  .terminal-toolbar,
+  .terminal-well,
+  .terminal-inset,
+  .terminal-field,
+  .terminal-alert,
+  .terminal-table-wrap,
+  .terminal-nav,
+  .terminal-feature-strip,
+  .terminal-feature-item,
+  .terminal-callout-bar,
+  .terminal-media-scrim,
+  .paper-surface,
+  .paper-surface-sm,
+  .paper-surface-lg,
+  .paper-card,
+  .paper-card-service,
+  .paper-card-feature,
+  .paper-panel,
+  .paper-toolbar,
+  .paper-well,
+  .paper-inset,
+  .paper-field,
+  .paper-alert,
+  .paper-table-wrap,
+  .paper-nav,
+  .paper-feature-strip,
+  .paper-feature-item,
+  .paper-callout-bar,
+  .paper-media-scrim,
+  .noir-surface,
+  .noir-surface-sm,
+  .noir-surface-lg,
+  .noir-card,
+  .noir-card-service,
+  .noir-card-feature,
+  .noir-panel,
+  .noir-toolbar,
+  .noir-well,
+  .noir-inset,
+  .noir-field,
+  .noir-alert,
+  .noir-table-wrap,
+  .noir-nav,
+  .noir-feature-strip,
+  .noir-feature-item,
+  .noir-callout-bar,
+  .noir-media-scrim
+) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+[data-ui][data-mode] :where(
+  .luxe-button,
+  .luxe-icon-button,
+  .luxe-button-cut,
+  .luxe-button-outline-heavy,
+  .luxe-badge,
+  .luxe-badge-seal,
+  .luxe-nav-link,
+  .luxe-icon-medallion,
+  .organic-button,
+  .organic-icon-button,
+  .organic-button-cut,
+  .organic-button-outline-heavy,
+  .organic-badge,
+  .organic-badge-seal,
+  .organic-nav-link,
+  .organic-icon-medallion,
+  .utility-button,
+  .utility-icon-button,
+  .utility-button-cut,
+  .utility-button-outline-heavy,
+  .utility-badge,
+  .utility-badge-seal,
+  .utility-nav-link,
+  .utility-icon-medallion,
+  .blueprint-button,
+  .blueprint-icon-button,
+  .blueprint-button-cut,
+  .blueprint-button-outline-heavy,
+  .blueprint-badge,
+  .blueprint-badge-seal,
+  .blueprint-nav-link,
+  .blueprint-icon-medallion,
+  .deco-button,
+  .deco-icon-button,
+  .deco-button-cut,
+  .deco-button-outline-heavy,
+  .deco-badge,
+  .deco-badge-seal,
+  .deco-nav-link,
+  .deco-icon-medallion,
+  .clay-button,
+  .clay-icon-button,
+  .clay-button-cut,
+  .clay-button-outline-heavy,
+  .clay-badge,
+  .clay-badge-seal,
+  .clay-nav-link,
+  .clay-icon-medallion,
+  .terminal-button,
+  .terminal-icon-button,
+  .terminal-button-cut,
+  .terminal-button-outline-heavy,
+  .terminal-badge,
+  .terminal-badge-seal,
+  .terminal-nav-link,
+  .terminal-icon-medallion,
+  .paper-button,
+  .paper-icon-button,
+  .paper-button-cut,
+  .paper-button-outline-heavy,
+  .paper-badge,
+  .paper-badge-seal,
+  .paper-nav-link,
+  .paper-icon-medallion,
+  .noir-button,
+  .noir-icon-button,
+  .noir-button-cut,
+  .noir-button-outline-heavy,
+  .noir-badge,
+  .noir-badge-seal,
+  .noir-nav-link,
+  .noir-icon-medallion
+) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: break-word;
+  word-break: normal;
+  white-space: normal;
+}
+
+[data-ui][data-mode] :where(
+  .luxe-button,
+  .luxe-icon-button,
+  .luxe-button-pill,
+  .organic-button,
+  .organic-icon-button,
+  .organic-button-pill,
+  .utility-button,
+  .utility-icon-button,
+  .utility-button-pill,
+  .blueprint-button,
+  .blueprint-icon-button,
+  .blueprint-button-pill,
+  .deco-button,
+  .deco-icon-button,
+  .deco-button-pill,
+  .clay-button,
+  .clay-icon-button,
+  .clay-button-pill,
+  .terminal-button,
+  .terminal-icon-button,
+  .terminal-button-pill,
+  .paper-button,
+  .paper-icon-button,
+  .paper-button-pill,
+  .noir-button,
+  .noir-icon-button,
+  .noir-button-pill
+) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .55rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  line-height: 1.15;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where(
+  .luxe-button-pill,
+  .organic-button-pill,
+  .utility-button-pill,
+  .blueprint-button-pill,
+  .deco-button-pill,
+  .clay-button-pill,
+  .terminal-button-pill,
+  .paper-button-pill,
+  .noir-button-pill
+) {
+  min-block-size: 44px;
+  padding-block: .65rem;
+  padding-inline: max(1rem, 1em);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 999px;
+  font: inherit;
+  font-weight: 850;
+  text-align: center;
+  text-decoration: none;
+  overflow-wrap: break-word;
+  word-break: normal;
+  white-space: normal;
+  cursor: pointer;
+  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
+}
+
+.luxe-button-pill { color: var(--luxe-on-primary); background: var(--luxe-primary); border-color: var(--luxe-primary); border-radius: var(--luxe-radius-pill); }
+.luxe-button-pill:hover { border-color: var(--luxe-primary-hover); filter: brightness(1.04); }
+.luxe-button-pill:focus-visible { outline: 3px solid var(--luxe-focus); outline-offset: 3px; box-shadow: var(--luxe-focus-ring); }
+.luxe-pill { border-radius: var(--luxe-radius-pill); }
+.luxe-rounded { border-radius: var(--luxe-radius-md); }
+.luxe-rounded-lg { border-radius: var(--luxe-radius-lg); }
+.luxe-rounded-xl { border-radius: var(--luxe-radius-xl); }
+.luxe-surface, .luxe-surface-sm, .luxe-surface-lg { color: var(--luxe-text); background: var(--luxe-card-bg); border: 1px solid var(--luxe-border); }
+
+.organic-button-pill { color: var(--organic-on-primary); background: var(--organic-primary); border-color: var(--organic-primary); border-radius: var(--organic-radius-pill); }
+.organic-button-pill:hover { border-color: var(--organic-primary-hover); filter: brightness(1.04); }
+.organic-button-pill:focus-visible { outline: 3px solid var(--organic-focus); outline-offset: 3px; box-shadow: var(--organic-focus-ring); }
+.organic-pill { border-radius: var(--organic-radius-pill); }
+.organic-rounded { border-radius: var(--organic-radius-md); }
+.organic-rounded-lg { border-radius: var(--organic-radius-lg); }
+.organic-rounded-xl { border-radius: var(--organic-radius-xl); }
+.organic-surface, .organic-surface-sm, .organic-surface-lg { color: var(--organic-text); background: var(--organic-card-bg); border: 1px solid var(--organic-border); }
+
+.utility-button-pill { color: var(--utility-on-primary); background: var(--utility-primary); border-color: var(--utility-primary); border-radius: var(--utility-radius-pill); }
+.utility-button-pill:hover { border-color: var(--utility-primary-hover); filter: brightness(1.04); }
+.utility-button-pill:focus-visible { outline: 3px solid var(--utility-focus); outline-offset: 3px; box-shadow: var(--utility-focus-ring); }
+.utility-pill { border-radius: var(--utility-radius-pill); }
+.utility-rounded { border-radius: var(--utility-radius-md); }
+.utility-rounded-lg { border-radius: var(--utility-radius-lg); }
+.utility-rounded-xl { border-radius: var(--utility-radius-xl); }
+.utility-surface, .utility-surface-sm, .utility-surface-lg { color: var(--utility-text); background: var(--utility-card-bg); border: 1px solid var(--utility-border); }
+
+.blueprint-button-pill { color: var(--blueprint-on-primary); background: var(--blueprint-primary); border-color: var(--blueprint-primary); border-radius: var(--blueprint-radius-pill); }
+.blueprint-button-pill:hover { border-color: var(--blueprint-primary-hover); filter: brightness(1.04); }
+.blueprint-button-pill:focus-visible { outline: 3px solid var(--blueprint-focus); outline-offset: 3px; box-shadow: var(--blueprint-focus-ring); }
+.blueprint-pill { border-radius: var(--blueprint-radius-pill); }
+.blueprint-rounded { border-radius: var(--blueprint-radius-md); }
+.blueprint-rounded-lg { border-radius: var(--blueprint-radius-lg); }
+.blueprint-rounded-xl { border-radius: var(--blueprint-radius-xl); }
+.blueprint-surface, .blueprint-surface-sm, .blueprint-surface-lg { color: var(--blueprint-text); background: var(--blueprint-card-bg); border: 1px solid var(--blueprint-border); }
+
+.deco-button-pill { color: var(--deco-on-primary); background: var(--deco-primary); border-color: var(--deco-primary); border-radius: var(--deco-radius-pill); }
+.deco-button-pill:hover { border-color: var(--deco-primary-hover); filter: brightness(1.04); }
+.deco-button-pill:focus-visible { outline: 3px solid var(--deco-focus); outline-offset: 3px; box-shadow: var(--deco-focus-ring); }
+.deco-pill { border-radius: var(--deco-radius-pill); }
+.deco-rounded { border-radius: var(--deco-radius-md); }
+.deco-rounded-lg { border-radius: var(--deco-radius-lg); }
+.deco-rounded-xl { border-radius: var(--deco-radius-xl); }
+.deco-surface, .deco-surface-sm, .deco-surface-lg { color: var(--deco-text); background: var(--deco-card-bg); border: 1px solid var(--deco-border); }
+
+.clay-button-pill { color: var(--clay-on-primary); background: var(--clay-primary); border-color: var(--clay-primary); border-radius: var(--clay-radius-pill); }
+.clay-button-pill:hover { border-color: var(--clay-primary-hover); filter: brightness(1.04); }
+.clay-button-pill:focus-visible { outline: 3px solid var(--clay-focus); outline-offset: 3px; box-shadow: var(--clay-focus-ring); }
+.clay-pill { border-radius: var(--clay-radius-pill); }
+.clay-rounded { border-radius: var(--clay-radius-md); }
+.clay-rounded-lg { border-radius: var(--clay-radius-lg); }
+.clay-rounded-xl { border-radius: var(--clay-radius-xl); }
+.clay-surface, .clay-surface-sm, .clay-surface-lg { color: var(--clay-text); background: var(--clay-card-bg); border: 1px solid var(--clay-border); }
+
+.terminal-button-pill { color: var(--terminal-on-primary); background: var(--terminal-primary); border-color: var(--terminal-primary); border-radius: var(--terminal-radius-pill); }
+.terminal-button-pill:hover { border-color: var(--terminal-primary-hover); filter: brightness(1.04); }
+.terminal-button-pill:focus-visible { outline: 3px solid var(--terminal-focus); outline-offset: 3px; box-shadow: var(--terminal-focus-ring); }
+.terminal-pill { border-radius: var(--terminal-radius-pill); }
+.terminal-rounded { border-radius: var(--terminal-radius-md); }
+.terminal-rounded-lg { border-radius: var(--terminal-radius-lg); }
+.terminal-rounded-xl { border-radius: var(--terminal-radius-xl); }
+.terminal-surface, .terminal-surface-sm, .terminal-surface-lg { color: var(--terminal-text); background: var(--terminal-card-bg); border: 1px solid var(--terminal-border); }
+
+.paper-button-pill { color: var(--paper-on-primary); background: var(--paper-primary); border-color: var(--paper-primary); border-radius: var(--paper-radius-pill); }
+.paper-button-pill:hover { border-color: var(--paper-primary-hover); filter: brightness(1.04); }
+.paper-button-pill:focus-visible { outline: 3px solid var(--paper-focus); outline-offset: 3px; box-shadow: var(--paper-focus-ring); }
+.paper-pill { border-radius: var(--paper-radius-pill); }
+.paper-rounded { border-radius: var(--paper-radius-md); }
+.paper-rounded-lg { border-radius: var(--paper-radius-lg); }
+.paper-rounded-xl { border-radius: var(--paper-radius-xl); }
+.paper-surface, .paper-surface-sm, .paper-surface-lg { color: var(--paper-text); background: var(--paper-card-bg); border: 1px solid var(--paper-border); }
+
+.noir-button-pill { color: var(--noir-on-primary); background: var(--noir-primary); border-color: var(--noir-primary); border-radius: var(--noir-radius-pill); }
+.noir-button-pill:hover { border-color: var(--noir-primary-hover); filter: brightness(1.04); }
+.noir-button-pill:focus-visible { outline: 3px solid var(--noir-focus); outline-offset: 3px; box-shadow: var(--noir-focus-ring); }
+.noir-pill { border-radius: var(--noir-radius-pill); }
+.noir-rounded { border-radius: var(--noir-radius-md); }
+.noir-rounded-lg { border-radius: var(--noir-radius-lg); }
+.noir-rounded-xl { border-radius: var(--noir-radius-xl); }
+.noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
+
+[data-ui][data-mode] :where(
+  .luxe-button-pill:active,
+  .luxe-button-pill[aria-pressed="true"],
+  .organic-button-pill:active,
+  .organic-button-pill[aria-pressed="true"],
+  .utility-button-pill:active,
+  .utility-button-pill[aria-pressed="true"],
+  .blueprint-button-pill:active,
+  .blueprint-button-pill[aria-pressed="true"],
+  .deco-button-pill:active,
+  .deco-button-pill[aria-pressed="true"],
+  .clay-button-pill:active,
+  .clay-button-pill[aria-pressed="true"],
+  .terminal-button-pill:active,
+  .terminal-button-pill[aria-pressed="true"],
+  .paper-button-pill:active,
+  .paper-button-pill[aria-pressed="true"],
+  .noir-button-pill:active,
+  .noir-button-pill[aria-pressed="true"]
+) { transform: translateY(1px); }
+
+[data-ui][data-mode] :where(
+  .luxe-button-pill:disabled,
+  .luxe-button-pill[aria-disabled="true"],
+  .organic-button-pill:disabled,
+  .organic-button-pill[aria-disabled="true"],
+  .utility-button-pill:disabled,
+  .utility-button-pill[aria-disabled="true"],
+  .blueprint-button-pill:disabled,
+  .blueprint-button-pill[aria-disabled="true"],
+  .deco-button-pill:disabled,
+  .deco-button-pill[aria-disabled="true"],
+  .clay-button-pill:disabled,
+  .clay-button-pill[aria-disabled="true"],
+  .terminal-button-pill:disabled,
+  .terminal-button-pill[aria-disabled="true"],
+  .paper-button-pill:disabled,
+  .paper-button-pill[aria-disabled="true"],
+  .noir-button-pill:disabled,
+  .noir-button-pill[aria-disabled="true"]
+) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
+
+[data-ui][data-mode] :where(
+  .luxe-tooltip,
+  .luxe-tooltip-top,
+  .luxe-tooltip-right,
+  .luxe-tooltip-bottom,
+  .luxe-tooltip-left,
+  .organic-tooltip,
+  .organic-tooltip-top,
+  .organic-tooltip-right,
+  .organic-tooltip-bottom,
+  .organic-tooltip-left,
+  .utility-tooltip,
+  .utility-tooltip-top,
+  .utility-tooltip-right,
+  .utility-tooltip-bottom,
+  .utility-tooltip-left,
+  .blueprint-tooltip,
+  .blueprint-tooltip-top,
+  .blueprint-tooltip-right,
+  .blueprint-tooltip-bottom,
+  .blueprint-tooltip-left,
+  .deco-tooltip,
+  .deco-tooltip-top,
+  .deco-tooltip-right,
+  .deco-tooltip-bottom,
+  .deco-tooltip-left,
+  .clay-tooltip,
+  .clay-tooltip-top,
+  .clay-tooltip-right,
+  .clay-tooltip-bottom,
+  .clay-tooltip-left,
+  .terminal-tooltip,
+  .terminal-tooltip-top,
+  .terminal-tooltip-right,
+  .terminal-tooltip-bottom,
+  .terminal-tooltip-left,
+  .paper-tooltip,
+  .paper-tooltip-top,
+  .paper-tooltip-right,
+  .paper-tooltip-bottom,
+  .paper-tooltip-left,
+  .noir-tooltip,
+  .noir-tooltip-top,
+  .noir-tooltip-right,
+  .noir-tooltip-bottom,
+  .noir-tooltip-left
+) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
+
+[data-ui][data-mode] :where(
+  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
+  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
+  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .luxe-tooltip-left,
+  [data-ui-tooltip-anchor] > .organic-tooltip-top,
+  [data-ui-tooltip-anchor] > .organic-tooltip-right,
+  [data-ui-tooltip-anchor] > .organic-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .organic-tooltip-left,
+  [data-ui-tooltip-anchor] > .utility-tooltip-top,
+  [data-ui-tooltip-anchor] > .utility-tooltip-right,
+  [data-ui-tooltip-anchor] > .utility-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .utility-tooltip-left,
+  [data-ui-tooltip-anchor] > .blueprint-tooltip-top,
+  [data-ui-tooltip-anchor] > .blueprint-tooltip-right,
+  [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .blueprint-tooltip-left,
+  [data-ui-tooltip-anchor] > .deco-tooltip-top,
+  [data-ui-tooltip-anchor] > .deco-tooltip-right,
+  [data-ui-tooltip-anchor] > .deco-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .deco-tooltip-left,
+  [data-ui-tooltip-anchor] > .clay-tooltip-top,
+  [data-ui-tooltip-anchor] > .clay-tooltip-right,
+  [data-ui-tooltip-anchor] > .clay-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .clay-tooltip-left,
+  [data-ui-tooltip-anchor] > .terminal-tooltip-top,
+  [data-ui-tooltip-anchor] > .terminal-tooltip-right,
+  [data-ui-tooltip-anchor] > .terminal-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .terminal-tooltip-left,
+  [data-ui-tooltip-anchor] > .paper-tooltip-top,
+  [data-ui-tooltip-anchor] > .paper-tooltip-right,
+  [data-ui-tooltip-anchor] > .paper-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .paper-tooltip-left,
+  [data-ui-tooltip-anchor] > .noir-tooltip-top,
+  [data-ui-tooltip-anchor] > .noir-tooltip-right,
+  [data-ui-tooltip-anchor] > .noir-tooltip-bottom,
+  [data-ui-tooltip-anchor] > .noir-tooltip-left
+) { position: absolute; z-index: 20; }
+
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+[data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
+
+:where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
+:where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
+:where(.luxe-border, .organic-border, .utility-border, .blueprint-border, .deco-border, .clay-border, .terminal-border, .paper-border, .noir-border) { border: var(--usk-native-border-width) solid var(--usk-native-border); }
+:where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
+:where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
+
+:where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
+
+:where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--usk-native-field-gap);
+  min-block-size: 24px;
+  color: var(--usk-native-text);
+}
+
+:where(.luxe-check-control, .luxe-radio-control, .organic-check-control, .organic-radio-control, .utility-check-control, .utility-radio-control, .blueprint-check-control, .blueprint-radio-control, .deco-check-control, .deco-radio-control, .clay-check-control, .clay-radio-control, .terminal-check-control, .terminal-radio-control, .paper-check-control, .paper-radio-control, .noir-check-control, .noir-radio-control) {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  accent-color: var(--usk-native-primary);
+}
+
+:where(.luxe-switch-track, .organic-switch-track, .utility-switch-track, .blueprint-switch-track, .deco-switch-track, .clay-switch-track, .terminal-switch-track, .paper-switch-track, .noir-switch-track) {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  inline-size: 2.75rem;
+  block-size: 1.5rem;
+  padding: .18rem;
+  background: var(--usk-native-track);
+  border: var(--usk-native-border-width) solid var(--usk-native-border);
+  border-radius: 999px;
+}
+
+:where(.luxe-switch-thumb, .organic-switch-thumb, .utility-switch-thumb, .blueprint-switch-thumb, .deco-switch-thumb, .clay-switch-thumb, .terminal-switch-thumb, .paper-switch-thumb, .noir-switch-thumb) {
+  inline-size: 1rem;
+  block-size: 1rem;
+  background: var(--usk-native-thumb);
+  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
+  border-radius: 999px;
+  transition: transform 160ms ease;
+}
+
+:where(.luxe-switch:has(input:checked) .luxe-switch-track, .organic-switch:has(input:checked) .organic-switch-track, .utility-switch:has(input:checked) .utility-switch-track, .blueprint-switch:has(input:checked) .blueprint-switch-track, .deco-switch:has(input:checked) .deco-switch-track, .clay-switch:has(input:checked) .clay-switch-track, .terminal-switch:has(input:checked) .terminal-switch-track, .paper-switch:has(input:checked) .paper-switch-track, .noir-switch:has(input:checked) .noir-switch-track) { background: var(--usk-native-track-fill); }
+
+:where(.luxe-sr-only, .luxe-visually-hidden, .organic-sr-only, .organic-visually-hidden, .utility-sr-only, .utility-visually-hidden, .blueprint-sr-only, .blueprint-visually-hidden, .deco-sr-only, .deco-visually-hidden, .clay-sr-only, .clay-visually-hidden, .terminal-sr-only, .terminal-visually-hidden, .paper-sr-only, .paper-visually-hidden, .noir-sr-only, .noir-visually-hidden) {
+  position: absolute !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+:where(.luxe-skip-link, .organic-skip-link, .utility-skip-link, .blueprint-skip-link, .deco-skip-link, .clay-skip-link, .terminal-skip-link, .paper-skip-link, .noir-skip-link) {
+  position: absolute;
+  inset-block-start: .75rem;
+  inset-inline-start: .75rem;
+  z-index: 1000;
+  padding: .75rem 1rem;
+  color: var(--usk-native-on-primary);
+  background: var(--usk-native-primary);
+  border-radius: var(--usk-native-radius);
+  transform: translateY(calc(-100% - 1rem));
+}
+
+:where(.luxe-skip-link:focus-visible, .organic-skip-link:focus-visible, .utility-skip-link:focus-visible, .blueprint-skip-link:focus-visible, .deco-skip-link:focus-visible, .clay-skip-link:focus-visible, .terminal-skip-link:focus-visible, .paper-skip-link:focus-visible, .noir-skip-link:focus-visible) { transform: translateY(0); }
+}
+/* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */