sherick-ui 2.0.0 → 2.1.0

package/dist/theme.css

@@ -7,6 +7,7 @@
   --sui-surface: 0.985 0.006 255;
   --sui-surface-high: 0.925 0.014 255;
   --sui-surface-float: 0.992 0.006 255;
+  --sui-media: 0.205 0.012 260;
   --sui-ink: 0.245 0.018 260;
   --sui-ink-muted: 0.480 0.018 260;
   --sui-detail: 0.600 0.016 258;
@@ -32,12 +33,13 @@
   --sui-elevation-floating: 0 16px 40px oklch(var(--sui-light-bottom) / 0.20), inset 0 1px 0 oklch(var(--sui-light-top) / 0.70);
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.19), inset 0 1px 0 oklch(var(--sui-light-top) / 0.55);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.22), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
+  --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.21);
   --sui-elevation-well: inset 0 3px 4px oklch(var(--sui-light-bottom) / 0.62), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
-  --sui-glass-fill: 0.86;
+  --sui-glass-fill: 0.98;
   --sui-glass-blur: 28px;
   --sui-glass-saturation: 1.06;
   --sui-glass-brightness: 1.012;
-  --sui-glass-dense-fill: 0.90;
+  --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 22px;
   --sui-glass-dense-saturation: 1.05;
   --sui-glass-dense-brightness: 1.008;
@@ -48,7 +50,7 @@
   --sui-glass-hero-brightness: 1.0;
   --sui-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0.12) 14%, rgb(255 255 255 / 0) 46%, rgb(38 46 62 / 0.05) 100%);
   --sui-surface-overlay: 0.993 0.005 258;
-  --sui-overlay-fill: 0.9;
+  --sui-overlay-fill: 0.99;
   --sui-scrim-blur: 6px;
   --sui-code-text: oklch(0.30 0.018 260);
   --sui-code-comment: oklch(0.54 0.015 255);
@@ -65,6 +67,7 @@
   --sui-surface: 0.245 0.014 260;
   --sui-surface-high: 0.295 0.016 260;
   --sui-surface-float: 0.27 0.018 260;
+  --sui-media: 0.205 0.012 260;
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
@@ -90,12 +93,13 @@
   --sui-elevation-floating: 0 18px 44px oklch(var(--sui-light-bottom) / 0.38), inset 0 1px 0 oklch(var(--sui-light-top) / 0.05);
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
+  --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.36);
   --sui-elevation-well: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -2px 3px oklch(var(--sui-light-top) / 0.40);
-  --sui-glass-fill: 0.90;
+  --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
   --sui-glass-brightness: 1.01;
-  --sui-glass-dense-fill: 0.96;
+  --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 26px;
   --sui-glass-dense-saturation: 1.08;
   --sui-glass-dense-brightness: 1.01;
@@ -106,7 +110,7 @@
   --sui-glass-hero-brightness: 1.0;
   --sui-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.028) 0%, rgb(255 255 255 / 0.009) 12%, rgb(255 255 255 / 0) 44%, rgb(0 0 0 / 0.16) 100%);
   --sui-surface-overlay: 0.236 0.012 260;
-  --sui-overlay-fill: 0.965;
+  --sui-overlay-fill: 0.99;
   --sui-scrim-blur: 6px;
   --sui-code-text: #e2e8f0;
   --sui-code-comment: #7a8aa3;
@@ -124,6 +128,7 @@
   --sui-surface: 0.245 0.014 260;
   --sui-surface-high: 0.295 0.016 260;
   --sui-surface-float: 0.27 0.018 260;
+  --sui-media: 0.205 0.012 260;
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
@@ -149,12 +154,13 @@
   --sui-elevation-floating: 0 18px 44px oklch(var(--sui-light-bottom) / 0.38), inset 0 1px 0 oklch(var(--sui-light-top) / 0.05);
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
+  --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.36);
   --sui-elevation-well: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -2px 3px oklch(var(--sui-light-top) / 0.40);
-  --sui-glass-fill: 0.90;
+  --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
   --sui-glass-brightness: 1.01;
-  --sui-glass-dense-fill: 0.96;
+  --sui-glass-dense-fill: 0.99;
   --sui-glass-dense-blur: 26px;
   --sui-glass-dense-saturation: 1.08;
   --sui-glass-dense-brightness: 1.01;
@@ -165,7 +171,7 @@
   --sui-glass-hero-brightness: 1.0;
   --sui-glass-hero-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.028) 0%, rgb(255 255 255 / 0.009) 12%, rgb(255 255 255 / 0) 44%, rgb(0 0 0 / 0.16) 100%);
   --sui-surface-overlay: 0.236 0.012 260;
-  --sui-overlay-fill: 0.965;
+  --sui-overlay-fill: 0.99;
   --sui-scrim-blur: 6px;
   --sui-code-text: #e2e8f0;
   --sui-code-comment: #7a8aa3;

package/dist/types/dev.d.cts

@@ -2,8 +2,10 @@ import { ClassValue } from 'clsx';
 
 declare const focusRing = "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
 declare const focusRingInset = "focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus";
+declare const parentFocusRingInset = "[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus";
 declare const focusRingHeld = "focus:outline-none focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]";
 declare const focusRingWithin = "has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-sherick-focus has-[:focus-visible]:outline-offset-[3px]";
+declare const focusRingDrag = "data-[dragging]:outline data-[dragging]:outline-2 data-[dragging]:outline-sherick-focus data-[dragging]:outline-offset-[3px]";
 declare const groupFocusRing = "group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-sherick-focus group-focus-visible:outline-offset-[3px]";
 declare const elevation: {
     readonly flat: "shadow-sherick-flat";
@@ -13,6 +15,7 @@ declare const elevation: {
     readonly recessed: "shadow-sherick-recessed";
     readonly well: "shadow-sherick-well";
 };
+declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
     readonly control: "rounded-[1.25rem]";
     readonly mark: "rounded-[0.625rem]";
@@ -48,7 +51,7 @@ declare const state: {
     readonly field: {
         readonly hover: "hover:bg-sherick-surface-high/[0.82]";
         readonly focus: "focus:bg-sherick-surface-high/[0.9]";
-        readonly focusWithin: "focus-within:bg-sherick-surface-high/[0.9]";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]";
         readonly engaged: "bg-sherick-surface-high/[0.9]";
         readonly errorHover: "hover:bg-sherick-danger/[0.10]";
         readonly errorFocus: "focus:bg-sherick-danger/[0.13]";
@@ -56,7 +59,7 @@ declare const state: {
         readonly invalid: "data-[invalid]:bg-sherick-danger/[0.075]";
         readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]";
         readonly invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]";
-        readonly invalidFocusWithin: "data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
     };
 };
 declare const stateLayer: {
@@ -79,6 +82,8 @@ declare const material: {
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
     readonly acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-hero-blur)] backdrop-saturate-[var(--sui-glass-hero-saturation)] backdrop-brightness-[var(--sui-glass-hero-brightness)]";
 };
+declare const mediaCanvas = "bg-sherick-media";
+declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
 declare const density: {
     readonly compact: "min-h-10 text-sm";
     readonly normal: "min-h-12 text-[0.95rem]";
@@ -304,5 +309,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, recipeAlphas, selectable, shape, stacking, state, stateLayer, text, tone };
+export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, shape, stacking, state, stateLayer, text, tone };
 export type { MotionIntent };

package/dist/types/dev.d.ts

@@ -2,8 +2,10 @@ import { ClassValue } from 'clsx';
 
 declare const focusRing = "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
 declare const focusRingInset = "focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus";
+declare const parentFocusRingInset = "[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus";
 declare const focusRingHeld = "focus:outline-none focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]";
 declare const focusRingWithin = "has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-sherick-focus has-[:focus-visible]:outline-offset-[3px]";
+declare const focusRingDrag = "data-[dragging]:outline data-[dragging]:outline-2 data-[dragging]:outline-sherick-focus data-[dragging]:outline-offset-[3px]";
 declare const groupFocusRing = "group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-sherick-focus group-focus-visible:outline-offset-[3px]";
 declare const elevation: {
     readonly flat: "shadow-sherick-flat";
@@ -13,6 +15,7 @@ declare const elevation: {
     readonly recessed: "shadow-sherick-recessed";
     readonly well: "shadow-sherick-well";
 };
+declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
     readonly control: "rounded-[1.25rem]";
     readonly mark: "rounded-[0.625rem]";
@@ -48,7 +51,7 @@ declare const state: {
     readonly field: {
         readonly hover: "hover:bg-sherick-surface-high/[0.82]";
         readonly focus: "focus:bg-sherick-surface-high/[0.9]";
-        readonly focusWithin: "focus-within:bg-sherick-surface-high/[0.9]";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]";
         readonly engaged: "bg-sherick-surface-high/[0.9]";
         readonly errorHover: "hover:bg-sherick-danger/[0.10]";
         readonly errorFocus: "focus:bg-sherick-danger/[0.13]";
@@ -56,7 +59,7 @@ declare const state: {
         readonly invalid: "data-[invalid]:bg-sherick-danger/[0.075]";
         readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]";
         readonly invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]";
-        readonly invalidFocusWithin: "data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
     };
 };
 declare const stateLayer: {
@@ -79,6 +82,8 @@ declare const material: {
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
     readonly acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-hero-blur)] backdrop-saturate-[var(--sui-glass-hero-saturation)] backdrop-brightness-[var(--sui-glass-hero-brightness)]";
 };
+declare const mediaCanvas = "bg-sherick-media";
+declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
 declare const density: {
     readonly compact: "min-h-10 text-sm";
     readonly normal: "min-h-12 text-[0.95rem]";
@@ -304,5 +309,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, recipeAlphas, selectable, shape, stacking, state, stateLayer, text, tone };
+export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, shape, stacking, state, stateLayer, text, tone };
 export type { MotionIntent };