@stacksjs/components 0.2.112 → 0.2.113

package/dist/{Sidebar-bg47fqmq.stx → Sidebar-gbd5ctkp.stx}

@@ -31,7 +31,6 @@ export const sidebarUid = $props.id || `stx-sidebar-${Math.random().toString(36)
 const themeStyle = resolveSidebarTheme(theme)
 export const selectionModel = themeStyle.selection
 export const hasShimmerRim = themeStyle.layers.shimmerRim === true
-export const isFrosted = themeStyle.layers.frosted === true
 export const tintClasses = themeStyle.layers.tint || ''
 export const scrollAreaClasses = themeStyle.scrollArea
 
@@ -343,7 +342,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   data-stx-sidebar
   data-sidebar-theme="{{ theme }}"
   data-sidebar-selection="{{ selectionModel }}"
-  @if(isFrosted)data-sidebar-frosted@endif
   data-window-key="true"
   data-active-class="{{ activeClasses }}"
   class="{{ paneClasses }}"
@@ -454,20 +452,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   .stx-sidebar-rim::after { animation: none; }
 }
 
-/* Frosted sidebar material. Hand-written CSS on purpose: as the utilities
-   `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the arbitrary values
-   did not survive class extraction in the stx dev server, leaving the pane
-   with `backdrop-filter: none`; an earlier `backdrop-saturate-[1.7]` lost
-   its brackets on the way to the generator, was read as a percentage, and
-   compiled to `saturate(0.017)`, which drained the colour out of the whole
-   backdrop. In a Craft window with webSidebarMaterial the native
-   NSVisualEffectView supplies the real vibrancy; this approximates it
-   everywhere else. */
-[data-sidebar-frosted] {
-  -webkit-backdrop-filter: saturate(180%) blur(50px);
-  backdrop-filter: saturate(180%) blur(50px);
-}
-
 /* ---------------------------------------------------------------------------
  * Selection, `accent` model (macOS and its derivatives).
  *

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-ph5rIj/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-5MMjxD/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {
@@ -1132,7 +1132,7 @@ var RadioGroupOption_default = "./RadioGroupOption-s1d6r221.stx";
 // src/ui/select/Select.stx
 var Select_default = "./Select-1vnd0brz.stx";
 // src/ui/sidebar/Sidebar.stx
-var Sidebar_default = "./Sidebar-bg47fqmq.stx";
+var Sidebar_default = "./Sidebar-gbd5ctkp.stx";
 // src/ui/sidebar/SidebarFooter.stx
 var SidebarFooter_default = "./SidebarFooter-0aegr99p.stx";
 // src/ui/sidebar/SidebarHeader.stx
@@ -1159,13 +1159,13 @@ var macosColors = {
 var macos = {
   pane: [
     "bg-[#f2f2f4]/90 dark:bg-[#1c1c1e]/88",
+    "backdrop-blur-[50px] backdrop-saturate-[180%]",
     "text-black dark:text-white",
     "select-none"
   ].join(" "),
   selection: "accent",
   layers: {
-    shimmerRim: true,
-    frosted: true
+    shimmerRim: true
   },
   scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-[10px] pb-[10px]",
   sectionHeader: [

package/dist/ui/sidebar/themes.d.ts

@@ -60,7 +60,6 @@ export declare interface SidebarTheme {
   selection: SidebarSelectionModel
   layers: {
     shimmerRim?: boolean
-    frosted?: boolean
     tint?: string
   }
   scrollArea: string

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.112",
+  "version": "0.2.113",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -62,9 +62,9 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@cwcss/crosswind": "^0.2.6",
-    "@stacksjs/stx": "0.2.112",
-    "bun-plugin-stx": "0.2.112",
+    "@cwcss/crosswind": "^0.2.12",
+    "@stacksjs/stx": "0.2.113",
+    "bun-plugin-stx": "0.2.113",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/ui/sidebar/Sidebar.stx

@@ -31,7 +31,6 @@ export const sidebarUid = $props.id || `stx-sidebar-${Math.random().toString(36)
 const themeStyle = resolveSidebarTheme(theme)
 export const selectionModel = themeStyle.selection
 export const hasShimmerRim = themeStyle.layers.shimmerRim === true
-export const isFrosted = themeStyle.layers.frosted === true
 export const tintClasses = themeStyle.layers.tint || ''
 export const scrollAreaClasses = themeStyle.scrollArea
 
@@ -343,7 +342,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   data-stx-sidebar
   data-sidebar-theme="{{ theme }}"
   data-sidebar-selection="{{ selectionModel }}"
-  @if(isFrosted)data-sidebar-frosted@endif
   data-window-key="true"
   data-active-class="{{ activeClasses }}"
   class="{{ paneClasses }}"
@@ -454,20 +452,6 @@ defineExpose({ collapsed, toggle: toggleCollapse })
   .stx-sidebar-rim::after { animation: none; }
 }
 
-/* Frosted sidebar material. Hand-written CSS on purpose: as the utilities
-   `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the arbitrary values
-   did not survive class extraction in the stx dev server, leaving the pane
-   with `backdrop-filter: none`; an earlier `backdrop-saturate-[1.7]` lost
-   its brackets on the way to the generator, was read as a percentage, and
-   compiled to `saturate(0.017)`, which drained the colour out of the whole
-   backdrop. In a Craft window with webSidebarMaterial the native
-   NSVisualEffectView supplies the real vibrancy; this approximates it
-   everywhere else. */
-[data-sidebar-frosted] {
-  -webkit-backdrop-filter: saturate(180%) blur(50px);
-  backdrop-filter: saturate(180%) blur(50px);
-}
-
 /* ---------------------------------------------------------------------------
  * Selection, `accent` model (macOS and its derivatives).
  *

package/src/ui/sidebar/themes.ts

@@ -67,8 +67,6 @@ export interface SidebarTheme {
   layers: {
     /** Liquid Glass edge highlight — a bright rim that subtly shimmers. */
     shimmerRim?: boolean
-    /** Frosted material behind the pane (a real `backdrop-filter`). */
-    frosted?: boolean
     /** Soft tint gradient blended over the material. */
     tint?: string
   }
@@ -116,22 +114,13 @@ const macos: SidebarTheme = {
     // hint of the backdrop through. A half-transparent pane reads as a web
     // imitation, and over a dark page it inverts into a dark bar entirely.
     'bg-[#f2f2f4]/90 dark:bg-[#1c1c1e]/88',
+    'backdrop-blur-[50px] backdrop-saturate-[180%]',
     'text-black dark:text-white',
     'select-none',
   ].join(' '),
   selection: 'accent',
   layers: {
     shimmerRim: true,
-    // The blur itself is real CSS in Sidebar.stx rather than a utility.
-    // Expressed as `backdrop-blur-[50px]` / `backdrop-saturate-[180%]` the
-    // arbitrary values did not survive the stx dev server's class
-    // extraction: the pane computed `backdrop-filter: none`, and an earlier
-    // `backdrop-saturate-[1.7]` reached the generator with its brackets
-    // stripped, so it was read as a percentage and compiled to
-    // `saturate(0.017)` — draining the colour out of the whole backdrop.
-    // Crosswind parses and generates both correctly on its own, so the
-    // material is written as plain CSS to stay out of that path entirely.
-    frosted: true,
   },
   scrollArea: 'flex-1 overflow-y-auto overflow-x-hidden px-[10px] pb-[10px]',
   sectionHeader: [