@pgcorp/ui-kit 0.13.0 → 0.15.0

package/docs/theming.md

@@ -27,10 +27,21 @@ prop `hitbox`; переопределяйте токены только как
 
 ### Интеграция шкалы слоёв host-приложения
 
-Floating surfaces (`STooltip`, menu, select, combobox и popover), modal и
-drawer телепортируются в `document.body`. `SToastContainer` также размещается
-в корневой области приложения. Их layer tokens разрешаются на `:root`, а не
-во вложенном theme-контейнере trigger.
+Unscoped floating surfaces (`STooltip`, menu, select, combobox и popover)
+телепортируются в `document.body`. Их layer tokens разрешаются на `:root`, а
+не во вложенном theme-контейнере trigger. Viewport modal/drawer — нативные
+modal dialogs в top layer. Их floating descendants используют собственный
+untransformed portal внутри dialog, вне visual-frame scroll/clipping.
+
+Global `SToastContainer` и application-root `SControlledToastViewport`
+сохраняют background-приоритет и native недоступность во время viewport modal.
+Modal-local `SControlledToastViewport` использует portal своего dialog;
+parent-local уведомление недоступно в дочернем modal. Notification records,
+действия и lifetime принадлежат своим явным owners, не глобальному переносу.
+Exact native portal задаёт локальный toast anchor как сумму backdrop owner
+и `--s-layer-toast`. Application-root anchor не изменяется. Зарегистрированные
+nested popup сохраняют собственный динамический step и могут находиться выше
+локального уведомления; toast не является новым modal или focus-stack owner.
 
 Шкала задаёт base anchors, а не статический total order:
 
@@ -63,6 +74,12 @@ drawer телепортируются в `document.body`. `SToastContainer` та
 интеграции проверьте tooltip/menu/select, toast, drag, modal/drawer и floating
 surface внутри modal. Не меняйте `z-index` внутренних элементов компонентов.
 
+Host offset согласует обычные stacking contexts. Native top-layer order
+определяется браузером: `z-index` не поднимает body portal или global toast над
+modal и не допускает взаимодействие с background. Modal-owned drag surface
+остаётся внутри actual dialog; background drag не начинается во время
+модальности. Вложенные native dialogs следуют lifecycle общего layer owner.
+
 Локальные floating-элементы не входят в root-level bridge. Autocomplete-tooltip
 `SCodeEditor` остаётся потомком `.cm-editor`, а overlay-вариант
 `SResizeHandle` — абсолютным потомком своего positioned owner. Они используют
@@ -99,10 +116,21 @@ the hitbox.
 
 ### Host application layer-scale integration
 
-Floating surfaces (`STooltip`, menus, selects, comboboxes, and popovers), modals,
-and drawers teleport to `document.body`. `SToastContainer` also belongs at the
-application root. Their layer tokens resolve on `:root`, not in the trigger's
-nested theme container.
+Unscoped floating surfaces (`STooltip`, menus, selects, comboboxes, and popovers)
+teleport to `document.body`. Their layer tokens resolve on `:root`, not in the
+trigger's nested theme container. Viewport modals/drawers are native modal
+dialogs in the top layer. Floating descendants use the dialog's untransformed
+portal outside visual-frame scrolling/clipping.
+
+Global `SToastContainer` and application-root `SControlledToastViewport` retain
+background priority and native inactivity during viewport modality. A modal-local
+`SControlledToastViewport` uses its own dialog's portal; parent-local
+notifications are inactive inside a child modal. Notification records, actions,
+and lifetimes retain their explicit owners without global relocation.
+The exact native portal derives its local toast anchor from its backdrop owner
+plus `--s-layer-toast`; the application-root anchor is unchanged. Registered
+nested popups keep their dynamic step and may paint above local notifications.
+The toast does not create a modal or a focus-stack owner.
 
 The scale defines base anchors, not a static total order:
 
@@ -134,6 +162,12 @@ sticky, affordance, and navigation anchors are not shifted.
 Verify tooltip/menu/select, toast, drag, modal/drawer, and a floating surface
 inside a modal. Do not override internal component `z-index` values.
 
+The host offset integrates ordinary stacking contexts. The browser determines
+native top-layer order: `z-index` cannot lift body portals or global toasts over
+a modal or enable background interaction. A modal-owned drag surface stays
+inside the actual dialog; background dragging cannot start during modality.
+Nested native dialogs follow the shared layer owner's lifecycle.
+
 Local floating elements are outside the root-level bridge. The `SCodeEditor`
 autocomplete tooltip remains a descendant of `.cm-editor`, and the overlay
 `SResizeHandle` remains an absolutely positioned child of its positioned owner.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -176,6 +176,9 @@
       "shared/containers/SModal.vue": [
         "dist/src/components/shared/containers/SModal.vue.d.ts"
       ],
+      "shared/containers/SOverlayHost.vue": [
+        "dist/src/components/shared/containers/SOverlayHost.vue.d.ts"
+      ],
       "shared/containers/SPageHeader.vue": [
         "dist/src/components/shared/containers/SPageHeader.vue.d.ts"
       ],
@@ -582,7 +585,7 @@
       "import": "./dist/src/components/layout/types.js",
       "default": "./dist/src/components/layout/types.js"
     },
-    "./reference.css": "./src/styles/reference.css",
+    "./reference.css": "./dist/reference.css",
     "./shared/codeLanguages": {
       "types": "./dist/src/components/shared/codeLanguages.d.ts",
       "import": "./dist/src/components/shared/codeLanguages.js",
@@ -673,6 +676,11 @@
       "import": "./dist/src/components/shared/containers/SModal.vue.js",
       "default": "./dist/src/components/shared/containers/SModal.vue.js"
     },
+    "./shared/containers/SOverlayHost.vue": {
+      "types": "./dist/src/components/shared/containers/SOverlayHost.vue.d.ts",
+      "import": "./dist/src/components/shared/containers/SOverlayHost.vue.js",
+      "default": "./dist/src/components/shared/containers/SOverlayHost.vue.js"
+    },
     "./shared/containers/SPageHeader.vue": {
       "types": "./dist/src/components/shared/containers/SPageHeader.vue.d.ts",
       "import": "./dist/src/components/shared/containers/SPageHeader.vue.js",
@@ -1159,7 +1167,7 @@
       "default": "./dist/src/stores/useNotifierStore.js"
     },
     "./style.css": "./src/styles/style.css",
-    "./tailwind.css": "./src/styles/tailwind.css",
+    "./tailwind.css": "./dist/tailwind.css",
     "./theme": {
       "types": "./dist/src/theme.d.ts",
       "import": "./dist/src/theme.js",
@@ -1194,7 +1202,6 @@
     "highlight.js": "^11.12.0",
     "katex": "0.18.7",
     "@lucide/vue": "^1.47.0",
-    "@tailwindcss/typography": "^0.5.20",
     "marked": "^18.0.13",
     "sigma": "^3.0.3",
     "tailwindcss": "^4.3.3",
@@ -1204,6 +1211,7 @@
   "devDependencies": {
     "@storybook/vue3-vite": "10.6.0",
     "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/typography": "0.5.20",
     "@types/node": "^22.20.4",
     "@vitejs/plugin-vue": "^6.0.9",
     "@vitest/coverage-v8": "^5.0.1",

package/src/components/shared/_internal/SDialogSurface.css

@@ -1,86 +1,165 @@
 @reference "../../../styles/reference.css";
 
 .s-dialog-surface {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  max-width: none;
+  max-height: none;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+}
+
+dialog.s-dialog-surface {
+  position: fixed;
+  display: block;
+}
+
+dialog.s-dialog-surface::backdrop {
+  background: transparent;
+  pointer-events: none;
+}
+
+.s-dialog-surface__portal {
+  display: contents;
+}
+
+.s-dialog-surface__frame {
   box-shadow: var(--s-elevation-overlay);
 }
 
 .s-dialog-surface:focus-visible {
+  outline: none;
+}
+
+.s-dialog-surface:focus-visible .s-dialog-surface__frame {
   outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
   outline-offset: var(--s-focus-ring-inset-offset);
 }
 
-.s-dialog-surface[data-presentation='modal'] {
-  @apply w-full transform overflow-hidden rounded-2xl p-6 text-left align-middle transition-all;
+.s-modal-backdrop,
+.s-drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--s-overlay-backdrop-surface);
+  -webkit-backdrop-filter: blur(var(--s-overlay-backdrop-blur));
+  backdrop-filter: blur(var(--s-overlay-backdrop-blur));
+}
+
+.s-modal-container,
+.s-drawer-shell {
+  position: absolute;
+  inset: 0;
+}
+
+.s-modal-container {
+  overflow-y: auto;
+}
+
+.s-drawer-backdrop[data-scope='contained'],
+.s-drawer-shell[data-scope='contained'] {
+  pointer-events: auto;
+}
+
+.s-modal-panel-container {
+  @apply flex min-h-full items-center justify-center p-4 text-center;
+}
+
+.s-modal-panel-container--fullscreen {
+  @apply items-stretch justify-stretch p-0 text-left;
+}
+
+.s-drawer-positioner {
+  @apply absolute inset-0 flex items-stretch;
+  justify-content: right;
+}
+
+.s-drawer-positioner[data-placement='left'] {
+  justify-content: left;
+}
+
+.s-drawer-positioner[data-placement='bottom'] {
+  @apply items-end justify-stretch;
+}
+
+.s-dialog-surface__frame[data-presentation='modal'] {
+  @apply w-full transform overflow-hidden rounded-2xl p-6 text-left align-middle;
   @apply bg-surface-0 dark:bg-surface-800;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-surface='subtle'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-surface='subtle'] {
   @apply bg-surface-50 dark:bg-surface-900;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-scroll='body'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-scroll='body'] {
   @apply flex max-h-[calc(100dvh-2rem)] flex-col;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-scroll='body'] .s-dialog-surface__body {
+.s-dialog-surface__frame[data-presentation='modal'][data-scroll='body'] .s-dialog-surface__body {
   @apply min-h-0 flex-1 overflow-y-auto;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-layout='fullscreen'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-layout='fullscreen'] {
   @apply min-h-screen rounded-none;
   max-width: 100%;
   height: 100%;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='sm'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='sm'] {
   max-width: 24rem;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='md'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='md'] {
   max-width: 28rem;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='lg'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='lg'] {
   max-width: 32rem;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='xl'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='xl'] {
   max-width: 36rem;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='2xl'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='2xl'] {
   max-width: 42rem;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='3xl'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='3xl'] {
   max-width: 48rem;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='4xl'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='4xl'] {
   max-width: 56rem;
 }
 
-.s-dialog-surface[data-presentation='modal'][data-size='wide'] {
+.s-dialog-surface__frame[data-presentation='modal'][data-size='wide'] {
   max-width: 72rem;
 }
 
-.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__header {
+.s-dialog-surface__frame[data-presentation='modal'] .s-dialog-surface__header {
   @apply flex items-start justify-between border-b border-surface-200 pb-4 dark:border-surface-700;
 }
 
-.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__title {
+.s-dialog-surface__frame[data-presentation='modal'] .s-dialog-surface__title {
   @apply text-lg font-medium leading-6 text-surface-900 dark:text-surface-100;
 }
 
-.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__body {
+.s-dialog-surface__frame[data-presentation='modal'] .s-dialog-surface__body {
   @apply mt-4 text-sm text-surface-600 dark:text-surface-300;
 }
 
-.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__footer {
+.s-dialog-surface__frame[data-presentation='modal'] .s-dialog-surface__footer {
   @apply mt-6 flex justify-end gap-3 border-t border-surface-200 pt-4 dark:border-surface-700;
 }
 
-.s-dialog-surface[data-presentation='modal'] .s-dialog-surface__footer[data-layout='split'] {
+.s-dialog-surface__frame[data-presentation='modal'] .s-dialog-surface__footer[data-layout='split'] {
   @apply flex-wrap items-center justify-start gap-x-3 gap-y-2;
 }
 
@@ -97,58 +176,156 @@
   @apply ml-auto justify-end;
 }
 
-.s-dialog-surface[data-presentation='drawer'] {
+.s-dialog-surface__frame[data-presentation='drawer'] {
   @apply relative flex h-full w-full flex-col overflow-hidden border-l border-surface-200 bg-surface-0 text-surface-900 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-size='sm'] {
+.s-dialog-surface__frame[data-presentation='drawer'][data-placement='left'] {
+  @apply border-l-0 border-r;
+}
+
+.s-dialog-surface__frame[data-presentation='drawer'][data-size='sm'] {
   max-width: 30rem;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-size='md'] {
+.s-dialog-surface__frame[data-presentation='drawer'][data-size='md'] {
   max-width: 36rem;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-size='lg'] {
+.s-dialog-surface__frame[data-presentation='drawer'][data-size='lg'] {
   max-width: 44rem;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'] {
+.s-dialog-surface__frame[data-presentation='drawer'][data-placement='bottom'] {
   @apply max-w-none rounded-t-2xl border-l-0 border-t border-surface-200 dark:border-surface-700;
   width: 100%;
+}
+
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'] {
   max-height: calc(100dvh - 1rem);
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='sm'] {
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'][data-size='sm'] {
   height: 50dvh;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='md'] {
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'][data-size='md'] {
   height: 70dvh;
 }
 
-.s-dialog-surface[data-presentation='drawer'][data-placement='bottom'][data-size='lg'] {
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='viewport'][data-placement='bottom'][data-size='lg'] {
   height: 90dvh;
 }
 
-.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__header {
-  @apply flex items-start gap-3 border-b border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='contained'] {
+  max-inline-size: none;
+  max-block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
 }
 
-.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__title {
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='contained'][data-placement='bottom'] {
+  block-size: var(--s-drawer-extent);
+}
+
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='contained'][data-placement='left'],
+.s-dialog-surface__frame[data-presentation='drawer'][data-scope='contained'][data-placement='right'] {
+  inline-size: var(--s-drawer-extent);
+}
+
+.s-dialog-surface__frame[data-presentation='drawer'] .s-dialog-surface__header {
+  @apply flex shrink-0 items-start gap-3 border-b border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
+}
+
+.s-dialog-surface__frame[data-presentation='drawer'] .s-dialog-surface__title {
   @apply min-w-0 flex-1 text-lg font-semibold leading-6 text-surface-950 dark:text-surface-0;
 }
 
-.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__body {
-  @apply flex-1 overflow-y-auto p-5 md:p-6;
+.s-dialog-surface__frame[data-presentation='drawer'] .s-dialog-surface__body {
+  @apply min-h-0 min-w-0 flex-1 overflow-y-auto p-5 md:p-6;
+  overscroll-behavior: contain;
+}
+
+.s-dialog-surface__frame[data-presentation='drawer'][data-scroll='content'] .s-dialog-surface__body {
+  @apply flex flex-col overflow-hidden p-0;
 }
 
-.s-dialog-surface[data-presentation='drawer'] .s-dialog-surface__footer {
-  @apply flex flex-wrap justify-end gap-3 border-t border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
+.s-dialog-surface__frame[data-presentation='drawer'] .s-dialog-surface__footer {
+  @apply flex shrink-0 flex-wrap justify-end gap-3 border-t border-surface-200 px-5 py-4 dark:border-surface-700 md:px-6;
 }
 
 @media (max-width: 767px) {
-  .s-dialog-surface[data-presentation='drawer'][data-layout='mobile-fullscreen'] {
-    @apply max-w-full border-l-0;
+  .s-dialog-surface__frame[data-presentation='drawer'][data-layout='mobile-fullscreen'] {
+    @apply max-w-full border-l-0 border-r-0;
+  }
+}
+
+.s-dialog-surface[hidden] {
+  display: none;
+}
+
+.s-dialog-surface-motion-enter-active .s-dialog-surface__frame,
+.s-dialog-surface-motion-leave-active .s-dialog-surface__frame {
+  transition: transform var(--s-motion-standard) ease;
+}
+
+.s-dialog-surface-motion-enter-from[data-presentation='modal'] .s-dialog-surface__frame,
+.s-dialog-surface-motion-leave-to[data-presentation='modal'] .s-dialog-surface__frame {
+  transform: scale(0.96);
+}
+
+.s-dialog-surface-motion-enter-from[data-presentation='drawer'] .s-dialog-surface__frame,
+.s-dialog-surface-motion-leave-to[data-presentation='drawer'] .s-dialog-surface__frame {
+  transform: translateX(1.5rem);
+}
+
+.s-dialog-surface-motion-enter-from[data-placement='left'] .s-dialog-surface__frame,
+.s-dialog-surface-motion-leave-to[data-placement='left'] .s-dialog-surface__frame {
+  transform: translateX(-1.5rem);
+}
+
+.s-dialog-surface-motion-enter-from[data-placement='bottom'] .s-dialog-surface__frame,
+.s-dialog-surface-motion-leave-to[data-placement='bottom'] .s-dialog-surface__frame {
+  transform: translateY(1.5rem);
+}
+
+@media (max-width: 767px) {
+  .s-dialog-surface-motion-enter-from[data-placement='right'] .s-dialog-surface__frame,
+  .s-dialog-surface-motion-leave-to[data-placement='right'] .s-dialog-surface__frame {
+    transform: translateY(1.5rem);
+  }
+}
+
+.s-dialog-surface-motion-enter-active .s-modal-backdrop,
+.s-dialog-surface-motion-leave-active .s-modal-backdrop,
+.s-dialog-surface-motion-enter-active .s-drawer-backdrop,
+.s-dialog-surface-motion-leave-active .s-drawer-backdrop {
+  transition: opacity var(--s-motion-standard) ease;
+}
+
+.s-dialog-surface-motion-enter-from .s-modal-backdrop,
+.s-dialog-surface-motion-leave-to .s-modal-backdrop,
+.s-dialog-surface-motion-enter-from .s-drawer-backdrop,
+.s-dialog-surface-motion-leave-to .s-drawer-backdrop {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .s-dialog-surface-motion-enter-active .s-dialog-surface__frame,
+  .s-dialog-surface-motion-leave-active .s-dialog-surface__frame,
+  .s-dialog-surface-motion-enter-active .s-modal-backdrop,
+  .s-dialog-surface-motion-leave-active .s-modal-backdrop,
+  .s-dialog-surface-motion-enter-active .s-drawer-backdrop,
+  .s-dialog-surface-motion-leave-active .s-drawer-backdrop {
+    transition: none;
+  }
+
+  .s-dialog-surface-motion-enter-from[data-presentation='modal'] .s-dialog-surface__frame,
+  .s-dialog-surface-motion-leave-to[data-presentation='modal'] .s-dialog-surface__frame,
+  .s-dialog-surface-motion-enter-from[data-presentation='drawer'] .s-dialog-surface__frame,
+  .s-dialog-surface-motion-leave-to[data-presentation='drawer'] .s-dialog-surface__frame,
+  .s-dialog-surface-motion-enter-from[data-placement] .s-dialog-surface__frame,
+  .s-dialog-surface-motion-leave-to[data-placement] .s-dialog-surface__frame {
+    transform: none;
   }
 }

package/src/components/shared/_internal/SMenuLayer.css

@@ -2,6 +2,10 @@
   position: fixed;
 }
 
+.s-menu-layer[hidden] {
+  display: none;
+}
+
 .s-menu-layer--dropdown {
   --s-menu-surface-width: max-content;
   --s-menu-surface-min-width: 12rem;

package/src/components/shared/containers/SOverlayHost.css

@@ -0,0 +1,14 @@
+@reference "../../../styles/reference.css";
+
+.s-overlay-host {
+  @apply relative flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden;
+  isolation: isolate;
+}
+
+.s-overlay-host__content {
+  @apply flex min-h-0 min-w-0 flex-1 flex-col;
+}
+
+.s-overlay-host__portal {
+  @apply pointer-events-none absolute inset-0;
+}

package/src/components/shared/containers/SPopover.css

@@ -13,7 +13,7 @@
   background: var(--s-floating-surface);
   color: var(--s-floating-foreground);
   box-shadow: 0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);
-  display: inline-block;
+  display: block;
 }
 
 .s-popover-panel[data-width='sm'] {
@@ -28,8 +28,14 @@
   width: min(36rem, calc(100vw - 1rem));
 }
 
+.s-popover-panel[data-surface='transparent'] {
+  max-width: 90vw;
+}
+
 .s-popover-panel[data-surface='transparent'] .s-popover-content {
   @apply bg-transparent shadow-none dark:bg-transparent;
   box-shadow: none;
-  max-width: 90vw;
+}
+.s-popover-panel[hidden] {
+  display: none;
 }

package/src/components/shared/controls/SButton.css

@@ -10,6 +10,7 @@
   --s-button-outline: color-mix(in srgb, var(--s-button-accent) 45%, transparent);
   --s-button-soft-background: color-mix(in srgb, var(--s-button-accent) 12%, transparent);
   --s-button-hover-background: color-mix(in srgb, var(--s-button-accent) 10%, transparent);
+  --s-passive-content-foreground: var(--s-button-foreground);
 
   @apply relative inline-flex min-w-0 items-center justify-center font-semibold;
   border: 1px solid transparent;
@@ -20,10 +21,7 @@
   appearance: none;
   touch-action: manipulation;
   transition:
-    background-color var(--s-motion-standard) ease,
-    border-color var(--s-motion-standard) ease,
     box-shadow var(--s-motion-standard) ease,
-    color var(--s-motion-standard) ease,
     transform var(--s-motion-fast) ease;
 }
 
@@ -175,6 +173,7 @@
 }
 
 .s-button[data-appearance='solid'] {
+  --s-passive-content-foreground: var(--s-button-on-solid);
   border-color: var(--s-button-solid-background);
   background: var(--s-button-solid-background);
   box-shadow: var(--s-elevation-control);
@@ -256,6 +255,7 @@
 }
 
 .s-button:disabled {
+  --s-passive-content-foreground: var(--s-button-disabled-foreground);
   border-color: transparent;
   background: var(--s-button-disabled-background);
   box-shadow: none;
@@ -264,6 +264,7 @@
 }
 
 .s-button[aria-disabled='true'] {
+  --s-passive-content-foreground: var(--s-button-disabled-foreground);
   border-color: transparent;
   background: var(--s-button-disabled-background);
   box-shadow: none;

package/src/components/shared/controls/SCheckbox.css

@@ -4,19 +4,29 @@
 @reference "../../../styles/reference.css";
 
 .s-checkbox-control {
-  @apply relative inline-flex items-center;
+  @apply relative inline-flex shrink-0 items-center justify-center;
+  width: var(--s-control-hitbox-2xs);
+  height: var(--s-control-hitbox-2xs);
+}
+
+.s-checkbox-control[data-presentation='inline'] {
   width: var(--s-control-indicator-size);
   height: var(--s-control-indicator-size);
 }
 
 /* Hide the browser's default checkbox */
 .s-checkbox-input {
-  @apply absolute opacity-0 w-0 h-0;
+  @apply absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0;
+}
+
+.s-checkbox-input:disabled,
+.s-checkbox-input[aria-readonly='true'] {
+  @apply cursor-default;
 }
 
 /* The custom checkbox */
 .s-checkbox-box {
-  @apply relative shrink-0 rounded-md border;
+  @apply pointer-events-none relative shrink-0 rounded-md border;
   width: var(--s-control-indicator-size);
   height: var(--s-control-indicator-size);
   @apply border-surface-300 dark:border-surface-600;
@@ -27,12 +37,13 @@
 }
 
 /* Hover state */
-.s-checkbox-input:not(:disabled) + .s-checkbox-box {
-  @apply hover:border-primary-500 dark:hover:border-primary-400;
+.s-checkbox-input:not(:disabled):not([aria-readonly='true']):hover + .s-checkbox-box {
+  @apply border-primary-500 dark:border-primary-400;
 }
 
 /* Checked state */
-.s-checkbox-input:checked + .s-checkbox-box {
+.s-checkbox-input:checked + .s-checkbox-box,
+.s-checkbox-input:indeterminate + .s-checkbox-box {
   @apply border-primary-500 bg-primary-500;
   @apply dark:border-primary-400 dark:bg-primary-400;
 }
@@ -50,7 +61,8 @@
   height: var(--s-icon-size-xs);
 }
 
-.s-checkbox-input:checked + .s-checkbox-box > .s-checkbox-check {
+.s-checkbox-input:checked + .s-checkbox-box > .s-checkbox-check,
+.s-checkbox-input:indeterminate + .s-checkbox-box > .s-checkbox-check {
   @apply opacity-100;
 }
 

package/src/components/shared/controls/SField.css

@@ -13,6 +13,12 @@
   @apply h-full;
 }
 
+.s-field[data-content-flow='phrasing'] {
+  display: inline-grid;
+  width: auto;
+  vertical-align: middle;
+}
+
 .s-field--stacked[data-fill='container'] {
   grid-template-rows: auto minmax(0, 1fr) auto auto;
 }