srcdev-nuxt-components 9.4.3 → 9.4.4

package/.claude/skills/components/hero-text.md

@@ -104,7 +104,11 @@ Key CSS custom properties:
 | -------- | ------- | -------- |
 | `--colour-text-accent` | — | Colour of `.accent` spans and the icon |
 | `--hero-text-{scale}` | — | Font size per `fontSize` prop value |
+| `--hero-text-font-family` | `"Playfair Display"` | Font family of the whole component |
+| `--hero-text-margin` | `0` | Margin on the root element |
+| `--hero-text-horizontal-gap` | `0.5ch` | Gap between segments in `axis="horizontal"` mode |
 | `--hero-text-vertical-gap` | `0.4em` | Gap between segments in `axis="vertical"` mode |
+| `--hero-text-accent-offset` | `0.2em` | Underline-clearance offset on `.accent` spans (`padding-bottom` and the matching negative `margin-bottom`) |
 
 **`--hero-text-vertical-gap`** controls `gap` on the flex column in vertical axis. Override at theme or page level:
 

package/.vscode/srcdev-component-hero-text.code-snippets

@@ -0,0 +1,16 @@
+{
+  "SRCDEV HeroText": {
+    "description": "HeroText — mixed normal/accent heading with configurable size and axis",
+    "scope": "vue,html",
+    "body": [
+      "<HeroText",
+      "  tag=\"$1h1\"",
+      "  fontSize=\"$2title\"",
+      "  :textContent=\"[",
+      "    { text: '$3Designing', styleClass: 'normal' },",
+      "    { text: '$4Artistry', styleClass: 'accent' },",
+      "  ]\"",
+      "/>"
+    ]
+  }
+}

package/.vscode/srcdev-component-toggle-switch-core.code-snippets

@@ -0,0 +1,13 @@
+{
+  "SRCDEV ToggleSwitchCore": {
+    "description": "ToggleSwitchCore — bare toggle switch (no label, use ToggleSwitchWithLabel for that)",
+    "scope": "vue,html",
+    "body": [
+      "<ToggleSwitchCore",
+      "  v-model=\"$1modelValue\"",
+      "  id=\"$2toggle-id\"",
+      "  name=\"$3toggleName\"",
+      "/>"
+    ]
+  }
+}

package/app/components/01.atoms/text-blocks/hero-text/HeroText.vue

@@ -44,18 +44,18 @@ const normalisedContent = computed(() =>
 <style lang="css">
 @layer components {
   .hero-text {
-    font-family: "Playfair Display";
+    font-family: var(--hero-text-font-family, "Playfair Display");
     font-weight: 400;
     font-variation-settings:
       "wght" 400,
       "ital" 1;
     line-height: 1;
 
-    margin: 0;
+    margin: var(--hero-text-margin, 0);
 
     &.axis-horizontal {
       flex-direction: row;
-      gap: 0.5ch;
+      gap: var(--hero-text-horizontal-gap, 0.5ch);
     }
     &.axis-vertical {
       display: flex;
@@ -93,12 +93,14 @@ const normalisedContent = computed(() =>
     }
 
     .accent {
+      --_hero-text-accent-offset: var(--hero-text-accent-offset, 0.2em);
+
       background-clip: text;
       background-image: var(--hero-text-bg-img);
       font-style: italic;
       color: transparent;
-      padding-bottom: 0.2em;
-      margin-bottom: -0.2em;
+      padding-bottom: var(--_hero-text-accent-offset);
+      margin-bottom: calc(var(--_hero-text-accent-offset) * -1);
     }
   }
 }

package/app/components/05.forms/toggle-switch/CONSUMER-STYLING.md

@@ -23,6 +23,23 @@ token-rename pass, not a redesign.
 Geometry (`--input-toggle-*`, `--form-element-*`) is shared across every `05.forms` component and
 untouched by this — see `theming-form-geometry-tokens.md`.
 
+### Track width
+
+`--toggle-switch-track-width` overrides the track's width directly. Left unset, the track derives
+its width from the shared `--input-toggle-*`/`--form-element-*` geometry tokens so it always scales
+with `--input-toggle-symbol-size` — resize the thumb and the track resizes to match, no separate
+width to keep in sync:
+
+```css
+.my-compact-toggle {
+  --input-toggle-symbol-size: 2.2rem;
+  /* Track width now follows automatically — no --toggle-switch-track-width override needed. */
+}
+```
+
+Only set `--toggle-switch-track-width` if you need a width the formula doesn't produce (e.g. a
+fixed width independent of symbol size).
+
 > Five private locals (`--_icon-on-opacity`, `--_icon-off-opacity`, `--_symbol-background-color`,
 > `--_symbol-margin-inline-start`, `--_symbol-checked-offset`) were removed during this migration —
 > declared but never actually read by any property in the component, confirmed by grep. Not part

package/app/components/05.forms/toggle-switch/ToggleSwitchCore.vue

@@ -132,6 +132,23 @@ const toggleSwitchValue = () => {
 
     .symbol-wrapper {
       /* Geometry */
+
+      /* Track width has no direct public token — it's derived from the same geometry tokens
+         that size the thumb, so the track always scales with --input-toggle-symbol-size instead
+         of clipping/floating it. Breakdown at the default 0.1rem tokens (= 72px total):
+         2×symbol-size (6rem) + 2×form-element-border-width (0.2rem, wrapper border) +
+         2×wrapper-padding (0.2rem) + 3×symbol-outline-width (0.3rem) +
+         3×symbol-border-width (0.3rem) + 2×symbol-margin (0.2rem). Override
+         --toggle-switch-track-width directly if you need a value the formula doesn't produce. */
+      --_track-width: var(
+        --toggle-switch-track-width,
+        calc(
+          (2 * var(--input-toggle-symbol-size)) + (2 * var(--form-element-border-width)) +
+            (2 * var(--input-toggle-wrapper-padding)) + (3 * var(--input-toggle-symbol-outline-width)) +
+            (3 * var(--input-toggle-symbol-border-width)) + (2 * var(--input-toggle-symbol-margin))
+        )
+      );
+
       display: inline-flex;
       align-items: center;
       justify-content: start;
@@ -148,7 +165,7 @@ const toggleSwitchValue = () => {
       border: var(--form-element-border-width) solid var(--_border);
       outline: var(--form-element-outline-width) solid transparent;
       border-radius: 100vw;
-      width: 72px;
+      width: var(--_track-width);
       padding: calc(var(--input-toggle-wrapper-padding) + var(--input-toggle-symbol-outline-width));
 
       &:hover {

package/app/components/05.forms/toggle-switch/stories/ToggleSwitchCore.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../ToggleSwitchCore.vue";
 import type { FormUiTheme } from "~/types/forms/types.forms.d";
 
@@ -17,6 +17,7 @@ interface ToggleSwitchCoreStoryArgs {
   useCustomIcons: boolean;
   iconOnContent: string;
   iconOffContent: string;
+  symbolSize: string;
 }
 
 export default {
@@ -126,6 +127,15 @@ export default {
         category: "Icons",
       },
     },
+    symbolSize: {
+      control: { type: "select" },
+      options: ["2rem", "2.2rem", "2.4rem", "3rem", "3.6rem"],
+      description:
+        "`--input-toggle-symbol-size` — thumb size. Track width has no separate control: it's derived from this token (see ToggleSwitchCore's `--_track-width` comment), so it scales automatically.",
+      table: {
+        category: "Styling",
+      },
+    },
   },
 } as Meta<ToggleSwitchCoreStoryArgs>;
 
@@ -134,7 +144,10 @@ const Template: StoryFn<ToggleSwitchCoreStoryArgs> = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   setup() {
     const modelValue = ref(false);
-    return { args: _args, modelValue };
+    const cssTokenStyle = computed(() => ({
+      "--input-toggle-symbol-size": _args.symbolSize,
+    }));
+    return { args: _args, modelValue, cssTokenStyle };
   },
   template: `
     <StorybookComponent
@@ -149,6 +162,7 @@ const Template: StoryFn<ToggleSwitchCoreStoryArgs> = (_args, { argTypes }) => ({
       :theme="args.theme"
       :round="args.round"
       :aria-describedby="args.ariaDescribedby"
+      :style="cssTokenStyle"
     >
       <template v-if="args.useCustomIcons" #iconOn>
         <span v-html="args.iconOnContent"></span>
@@ -178,6 +192,7 @@ Default.args = {
   useCustomIcons: false,
   iconOnContent: "✓",
   iconOffContent: "✗",
+  symbolSize: "3rem",
 };
 
 export const WithCustomIcons = Template.bind({});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.3",
+  "version": "9.4.4",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",