@splendidlabz/styles 4.11.0 → 4.13.0

package/README.md

@@ -0,0 +1,86 @@
+# @splendidlabz/styles
+
+Splendid Labz styles for Tailwind CSS v4.
+
+## Install
+
+```bash
+npm install @splendidlabz/styles
+```
+
+## The quickest way — everything
+
+```css
+@import 'tailwindcss';
+@import '@splendidlabz/styles';
+```
+
+That's the whole system: reset, theme, styled HTML, utilities, and the CSS components (`prose`, `card`, `table`, and friends). Tailwind tree-shakes whatever you don't use, so most projects want this and nothing else.
+
+## Keep your own reset — just the classes
+
+Already have your own reset and base styles? Take Splendid's utilities and components without letting it touch your HTML:
+
+```css
+@import 'tailwindcss';
+@import '@splendidlabz/styles/utilities';
+@import '@splendidlabz/styles/components/css';
+```
+
+`utilities` is the same utility classes as above with no reset and no element styling. `components/css` adds the opt-in component classes. Nothing renders differently until you reach for a class.
+
+## Using Splendid's Astro or Svelte components
+
+If you're pulling in components from `@splendidlabz/astro` or `@splendidlabz/svelte`, there are two extra things to wire up:
+
+```css
+/* 1. Point Tailwind at the packages so it scans their class names —
+      they live in node_modules, which Tailwind skips by default. */
+@source "../node_modules/@splendidlabz/astro";
+@source "../node_modules/@splendidlabz/svelte";
+
+@import 'tailwindcss';
+
+/* 2. A base + the framework component styles. */
+@import '@splendidlabz/styles/base';
+@import '@splendidlabz/styles/components/astro'; /* or /components/svelte */
+```
+
+Use `base`, not the full `@splendidlabz/styles`. The full import already carries the CSS components, and `/components/astro` brings them along too — so pairing them gives you two copies. `base` is the reset and styling *without* the components, and the framework layer fills them in once.
+
+## Without Tailwind's preflight
+
+Splendid ships its own reset, so you can drop Tailwind's. Import Tailwind's theme and utilities on their own instead of the whole thing, and set the layer order so Splendid's reset lands first:
+
+```css
+@layer reset, theme, base, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+@import '@splendidlabz/styles';
+```
+
+Everything else works the same — this just replaces `@import 'tailwindcss'`.
+
+## Two things that'll bite you
+
+- **One base at a time.** `@splendidlabz/styles`, `base`, and `utilities` all overlap. Import two of them and you get two copies of the shared parts — Tailwind v4 doesn't merge repeated imports. Pick one.
+- **Component layers need a base under them.** `components/css`, `components/astro`, and `components/svelte` can't stand alone — on their own they have nothing to resolve against and the build fails. Any of the three bases covers them; import order doesn't matter.
+
+## Every entry point
+
+| Import                 | What you get                                                |
+| ---------------------- | ---------------------------------------------------------- |
+| `@splendidlabz/styles` | Everything — reset, styled HTML, utilities, CSS components  |
+| `…/base`               | Reset, styled HTML, utilities — no components               |
+| `…/utilities`          | Utilities only — leaves your HTML alone                     |
+| `…/components/css`     | CSS component classes (`prose`, `card`, …)                  |
+| `…/components/astro`   | Astro component styles (includes CSS components)            |
+| `…/components/svelte`  | Svelte component styles (includes CSS components)           |
+| `…/components`         | All component styles — css, astro, svelte                  |
+| `…/layouts`            | Layout utilities (already in every base)                   |
+| `…/effects`            | Effects, animation, transitions (already in every base)    |
+| `…/tools`              | The `@apply` / `@variant` helpers                          |
+| `…/theming`            | `@theme` tokens plus color/pigment                         |
+| `…/variables`          | `@theme` tokens on their own                               |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.11.0",
+  "version": "4.13.0",
   "description": "",
   "type": "module",
   "homepage": "https://splendidlabz.com/docs/styles",
@@ -12,18 +12,24 @@
   ],
   "exports": {
     ".": "./src/styles.css",
+    "./base": "./src/base.css",
+    "./utilities": "./src/utilities.css",
+    "./tools": "./src/tools/index.css",
+    "./layouts": "./src/layouts/bundle.css",
+    "./effects": "./src/effects/bundle.css",
+    "./variables": "./src/variables/index.css",
+    "./theming": "./src/theming.css",
     "./components": "./src/components/index.css",
-    "./layouts": "./src/layouts/direct.css",
+    "./components/css": "./src/components/css/index.css",
+    "./components/astro": "./src/components/bundle-astro.css",
+    "./components/svelte": "./src/components/bundle-svelte.css",
     "./pigment": "./src/tools/pigment.css",
     "./scripts": "./scripts/index.js",
     "./scripts/*": "./scripts/*.js"
   },
   "scripts": {
     "lint": "stylelint '**/*.{css,scss}' --fix",
-    "lightning": "lightningcss --bundle --targets \">= 0.25%\" ./src/styles.css -o dist/styles.css",
-    "build-styles": "npx @tailwindcss/cli -i ./no-tailwind/index.css -o ./dist/no-tw/styles.css",
-    "build-layouts": "npx @tailwindcss/cli -i ./no-tailwind/layouts.css -o ./dist/no-tw/layouts.css",
-    "build": "npm run build-styles & npm run build-layouts"
+    "lightning": "lightningcss --bundle --targets \">= 0.25%\" ./src/styles.css -o dist/styles.css"
   },
   "dependencies": {
     "@splendidlabz/utils": "*"

package/src/base.css

@@ -0,0 +1,15 @@
+/* Opinionated foundation: everything except the CSS/framework components.
+   Restyles bare HTML (reset + generic) and registers every utility group
+   (tools, layouts, effects), all tree-shaken. This is the foundation that
+   powers `base + components/*`. Use base OR utilities, never both. */
+
+@import './tools/index.css';
+/* button is a @utility (foundation-level): generic @applies it to bare
+   <button>, and framework components @apply button-icon. */
+@import './components/css/button.css';
+@import './reset.css' layer(reset);
+@import './layout-reset.css' layer(reset);
+@import './variables/index.css';
+@import './generic/index.css';
+@import './layouts/index.css';
+@import './effects/index.css';

package/src/components/astro/fancylist.css

@@ -1,33 +1,31 @@
 @utility fancylist {
-  & {
-    --svg-width: 1em;
-    --svg-height: 1lh;
-    display: grid;
+  --svg-width: 1em;
+  --svg-height: 1lh;
+  display: grid;
 
-    /* grid-template-columns: auto 1fr; */
-    column-gap: 0.5em;
+  /* grid-template-columns: auto 1fr; */
+  column-gap: 0.5em;
 
-    :where(li) {
-      grid-column: 1 / -1;
-      display: grid;
+  :where(li) {
+    grid-column: 1 / -1;
+    display: grid;
 
-      /* grid-template-columns: subgrid; */
-      grid-template-columns: auto 1fr;
-      column-gap: inherit;
+    /* grid-template-columns: subgrid; */
+    grid-template-columns: auto 1fr;
+    column-gap: inherit;
 
-      /* Positions the Emoji */
-      /* This is kind of brute-forced at the moment. */
-      :where(.emoji),
-      > :where(astro-slot, astro-island) > :where(.emoji) {
-        font-size: 0.75em;
-        line-height: 1lh;
-      }
+    /* Positions the Emoji */
+    /* This is kind of brute-forced at the moment. */
+    :where(.emoji),
+    > :where(astro-slot, astro-island) > :where(.emoji) {
+      font-size: 0.75em;
+      line-height: 1lh;
+    }
 
-      :where(ul) {
-        grid-column: 2;
-        display: grid;
-        column-gap: inherit;
-      }
+    :where(ul) {
+      grid-column: 2;
+      display: grid;
+      column-gap: inherit;
     }
   }
 }

package/src/components/bundle-astro.css

@@ -0,0 +1,7 @@
+/* Astro component styles + the CSS components they @apply (prose, etc.).
+   Pure layer — no tools/layouts/button. Import a foundation first
+   (base or utilities), or these @applies won't resolve. Astro class names may
+   clash with common component names — opt in deliberately. */
+
+@import './css/index.css';
+@import './astro/index.css';

package/src/components/bundle-svelte.css

@@ -0,0 +1,7 @@
+/* Svelte component styles + the CSS components they @apply (prose, button-icon).
+   Pure layer — no tools/layouts/button. Import a foundation first
+   (base or utilities), or these @applies won't resolve. Svelte class names may
+   clash with common component names — opt in deliberately. */
+
+@import './css/index.css';
+@import './svelte/index.css';

package/src/components/css/button.css

@@ -0,0 +1,40 @@
+@utility button {
+  & {
+    @apply pigment-with-svg;
+    flex-shrink: 0; /* Prevents button from shrinking when used in flex elements */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+    max-width: 100%;
+    padding: 0.125lh 0.75lh;
+    font: inherit;
+    text-decoration-line: none !important;
+
+    &[disabled] {
+      cursor: default;
+    }
+
+    * {
+      pointer-events: none;
+    }
+
+    svg path {
+      @apply transition-scaffold;
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+  }
+}
+
+@utility button-icon {
+  & {
+    padding: 0.5em;
+  }
+}
+
+@utility button-round {
+  & {
+    border-radius: 50%;
+  }
+}

package/src/components/css/card.css

@@ -43,10 +43,17 @@
   @apply divider-between-y;
 
   > * {
+    flex-grow: 1;
     border-width: 0;
     border-radius: 0;
   }
 
+  /* Opt-in equal columns. :where() keeps single-class specificity so a
+     responsive flip to card-divided-vertical resets flex-basis cleanly. */
+  &:where(.equal) > * {
+    flex-basis: 0;
+  }
+
   > :where(:not(:first-child)) {
     border-left-width: var(--border-width);
     border-color: var(--_bc, var(--border-color));
@@ -70,6 +77,8 @@
   @apply divider-between-x;
 
   > * {
+    flex-grow: 0;
+    flex-basis: auto;
     border-width: 0;
     border-radius: 0;
   }

package/src/{form → components/css/forms}/index.css

@@ -1,4 +1,3 @@
 @import './input.css';
-@import './textarea.css';
 @import './select.css';
 @import './checkbox-and-radio.css';

package/src/components/css/index.css

@@ -9,3 +9,5 @@
 @import './table.css';
 @import './writing-mode.css';
 @import './strikethrough.css';
+@import './forms/index.css';
+@import './typography/index.css';

package/src/components/svelte/tabs.css

@@ -58,50 +58,136 @@
 @utility tablist-underline {
   gap: 0;
 
-  .tab {
+  /* Structural pseudos wrapped in :where() so static and responsive placement
+     compose by source order (see tablist-card-divided for the full rationale). */
+  :where(.tab) {
     border-width: 0;
     border-radius: 0;
   }
 
-  &.tablist-top .tab {
+  &:where(.tablist-top) :where(.tab) {
     border-bottom-width: var(--border-width);
   }
 
-  &.tablist-left .tab {
+  &:where(.tablist-left) :where(.tab) {
     border-right-width: var(--border-width);
   }
 
-  &.tablist-right .tab {
+  &:where(.tablist-right) :where(.tab) {
     border-left-width: var(--border-width);
   }
+
+  /* Responsive placement. The class rules above are the static/old-browser
+     fallback; these react to the live --placement so a tablist that flips
+     placement at a breakpoint moves its underline to the new edge. Each block
+     zeroes the other two edges so no stale underline from the static rule
+     survives the flip. */
+  @container style(--placement: top) {
+    :where(.tab) {
+      border-bottom-width: var(--border-width);
+      border-right-width: 0;
+      border-left-width: 0;
+    }
+  }
+
+  @container style(--placement: left) {
+    :where(.tab) {
+      border-right-width: var(--border-width);
+      border-bottom-width: 0;
+      border-left-width: 0;
+    }
+  }
+
+  @container style(--placement: right) {
+    :where(.tab) {
+      border-left-width: var(--border-width);
+      border-bottom-width: 0;
+      border-right-width: 0;
+    }
+  }
 }
 
 @utility tablist-tab {
-  .tab {
+  :where(.tab) {
     position: relative;
     z-index: 1;
   }
 
-  &.tablist-top :where(.tab) {
+  /* Static/old-browser fallback. Structural selectors wrapped in :where() so
+     the container queries below compose by source order. Edge removal uses the
+     -width longhand (not the `border-*: 0` shorthand) so it leaves border-style
+     intact — otherwise a responsive flip could restore an edge's width while
+     its style stayed `none` and nothing would render. */
+  &:where(.tablist-top) :where(.tab) {
     top: var(--border-width);
-    border-bottom: 0;
+    border-bottom-width: 0;
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }
 
-  &.tablist-left :where(.tab) {
+  &:where(.tablist-left) :where(.tab) {
     right: var(--border-width);
-    border-right: 0;
+    border-right-width: 0;
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
-  &.tablist-right :where(.tab) {
+  &:where(.tablist-right) :where(.tab) {
     left: var(--border-width);
-    border-left: 0;
+    border-left-width: 0;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
+
+  /* Responsive placement. Each block fully restates the tab treatment for its
+     placement: the active offset (other two reset to 0), the removed edge (other
+     removable edges restored to --border-width), and the two flattened corners
+     (the rest restored to --radius). This makes a breakpoint flip land cleanly
+     with no stale offset, missing edge, or squared corner from the static rule. */
+  @container style(--placement: top) {
+    :where(.tab) {
+      top: var(--border-width);
+      right: 0;
+      left: 0;
+      border-bottom-width: 0;
+      border-right-width: var(--border-width);
+      border-left-width: var(--border-width);
+      border-start-start-radius: var(--radius);
+      border-start-end-radius: var(--radius);
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+
+  @container style(--placement: left) {
+    :where(.tab) {
+      right: var(--border-width);
+      top: 0;
+      left: 0;
+      border-right-width: 0;
+      border-bottom-width: var(--border-width);
+      border-left-width: var(--border-width);
+      border-start-start-radius: var(--radius);
+      border-end-start-radius: var(--radius);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+
+  @container style(--placement: right) {
+    :where(.tab) {
+      left: var(--border-width);
+      top: 0;
+      right: 0;
+      border-left-width: 0;
+      border-bottom-width: var(--border-width);
+      border-right-width: var(--border-width);
+      border-start-end-radius: var(--radius);
+      border-end-end-radius: var(--radius);
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
 }
 
 @utility tablist-card-divided {
@@ -110,50 +196,105 @@
   gap: 0;
   padding: 0;
 
+  /* Structural pseudos are wrapped in :where() so every rule stays at the
+     specificity of a single class. Placement treatments then compose purely by
+     source order: when a tablist both carries a static placement class and
+     flips --placement responsively, the last matching block's resets win
+     cleanly with no leftover corners or doubled dividers. */
+
   &:where(.tablist-top) {
     :where(.tab) {
       border-width: 0;
       border-radius: 0;
 
-      &:not(:first-child) {
+      &:where(:not(:first-child)) {
         border-left-width: var(--border-width);
         border-color: var(--_bc, var(--border-color));
       }
 
-      &:first-child {
-        border-radius: 0;
+      &:where(:first-child) {
         border-top-left-radius: calc(var(--radius) - var(--border-width));
         border-bottom-left-radius: calc(var(--radius) - var(--border-width));
       }
 
-      &:last-child {
-        border-radius: 0;
+      &:where(:last-child) {
         border-top-right-radius: calc(var(--radius) - var(--border-width));
         border-bottom-right-radius: calc(var(--radius) - var(--border-width));
       }
     }
   }
 
-  &.tablist-left,
-  &.tablist-right {
+  &:where(.tablist-left),
+  &:where(.tablist-right) {
     :where(.tab) {
       border-width: 0;
       border-radius: 0;
-    }
 
-    &:not(:first-child) {
-      border-top-width: var(--border-width);
-      border-style: var(--border-style);
+      &:where(:not(:first-child)) {
+        border-top-width: var(--border-width);
+        border-color: var(--_bc, var(--border-color));
+      }
+
+      &:where(:first-child) {
+        border-top-left-radius: calc(var(--radius) - var(--border-width));
+        border-top-right-radius: calc(var(--radius) - var(--border-width));
+      }
+
+      &:where(:last-child) {
+        border-bottom-left-radius: calc(var(--radius) - var(--border-width));
+        border-bottom-right-radius: calc(var(--radius) - var(--border-width));
+      }
     }
+  }
 
-    &:first-child {
-      border-top-left-radius: calc(var(--radius) - var(--border-width));
-      border-top-right-radius: calc(var(--radius) - var(--border-width));
+  /* Responsive placement.
+     The class rules above cover static placement in every browser. These
+     container style queries react to the live --placement value, so a tablist
+     that flips placement at a breakpoint (tablist-top max-bp:tablist-left)
+     also flips its divided-border treatment. They win over the class rules by
+     source order in supporting browsers; older browsers ignore them and keep
+     the static treatment. */
+  @container style(--placement: top) {
+    :where(.tab) {
+      border-width: 0;
+      border-radius: 0;
+
+      &:where(:not(:first-child)) {
+        border-left-width: var(--border-width);
+        border-color: var(--_bc, var(--border-color));
+      }
+
+      &:where(:first-child) {
+        border-top-left-radius: calc(var(--radius) - var(--border-width));
+        border-bottom-left-radius: calc(var(--radius) - var(--border-width));
+      }
+
+      &:where(:last-child) {
+        border-top-right-radius: calc(var(--radius) - var(--border-width));
+        border-bottom-right-radius: calc(var(--radius) - var(--border-width));
+      }
     }
+  }
 
-    &:last-child {
-      border-bottom-left-radius: calc(var(--radius) - var(--border-width));
-      border-bottom-right-radius: calc(var(--radius) - var(--border-width));
+  @container style(--placement: left) or style(--placement: right) {
+    :where(.tab) {
+      border-width: 0;
+      border-radius: 0;
+
+      &:where(:not(:first-child)) {
+        border-top-width: var(--border-width);
+        border-color: var(--_bc, var(--border-color));
+      }
+
+      &:where(:first-child) {
+        border-top-left-radius: calc(var(--radius) - var(--border-width));
+        border-top-right-radius: calc(var(--radius) - var(--border-width));
+      }
+
+      &:where(:last-child) {
+        border-bottom-left-radius: calc(var(--radius) - var(--border-width));
+        border-bottom-right-radius: calc(var(--radius) - var(--border-width));
+      }
     }
   }
 }

package/src/effects/bundle.css

@@ -0,0 +1,5 @@
+/* Standalone effects: tools (effects @apply border-scaffold, transition-scaffold)
+   + the effect utilities (incl. animation + transitions). Self-contained. */
+
+@import '../tools/index.css';
+@import './index.css';

package/src/effects/index.css

@@ -1,3 +1,5 @@
+@import './animation/index.css';
+@import './transitions/index.css';
 @import './elevation.css';
 @import './gradients.css';
 @import './fancybox.css';

package/src/generic/anchors-and-buttons.css

@@ -1,43 +1,6 @@
-@utility button {
-  & {
-    @apply pigment-with-svg;
-    flex-shrink: 0; /* Prevents button from shrinking when used in flex elements */
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5em;
-    max-width: 100%;
-    padding: 0.125lh 0.75lh;
-    font: inherit;
-    text-decoration-line: none !important;
-
-    &[disabled] {
-      cursor: default;
-    }
-
-    * {
-      pointer-events: none;
-    }
-
-    svg path {
-      @apply transition-scaffold;
-      transition: var(--transition-values);
-      transition-property: var(--transition-props);
-    }
-  }
-}
-
-@utility button-icon {
-  & {
-    padding: 0.5em;
-  }
-}
-
-@utility button-round {
-  & {
-    border-radius: 50%;
-  }
-}
+/* button / button-icon / button-round utilities live in components/css/button.css.
+   The base layer below `@apply`s `button`; whichever bundle includes this file
+   must also register button.css (styles.css via components/css, base.css directly). */
 
 @layer base {
   a {

package/src/generic/form.css

@@ -1,8 +1,19 @@
+@theme {
+  --textarea-height: 6lh;
+}
+
 @layer base {
   fieldset {
     border: none;
   }
 
+  textarea {
+    min-height: var(--textarea-height);
+    resize: vertical;
+    /* stylelint-disable-next-line */
+    field-sizing: normal; /* Allows textarea to auto */
+  }
+
   /* Text inputs */
   input:where(
     [type='text'],

package/src/layouts/bundle.css

@@ -0,0 +1,5 @@
+/* Standalone layouts: tools (for @variant interact-within etc.) + layout reset
+   + the layout utilities. Self-contained; imports tools once. */
+
+@import '../tools/index.css';
+@import './direct.css';

package/src/layouts/index.css

@@ -1,4 +1,4 @@
-/* Micro needs to come first 
+/* Micro needs to come first
 because it contains vertical that macro uses */
 @import './micro/index.css';
 @import './shell/index.css';