srcdev-nuxt-components 9.5.7 → 9.6.1

package/app/components/01.atoms/navigation/breadcrumb/Breadcrumb.vue

@@ -1,12 +1,12 @@
 <template>
-  <nav class="breadcrumb" :class="[elementClasses]" :aria-label="ariaLabel">
+  <nav v-if="visibleItems.length" class="breadcrumb" :class="[elementClasses]" :aria-label="ariaLabel">
     <ol class="breadcrumb__list">
-      <li v-for="(item, index) in items" :key="`${item.label}-${index}`" class="breadcrumb__item">
+      <li v-for="(item, index) in visibleItems" :key="`${item.label}-${index}`" class="breadcrumb__item">
         <NuxtLink v-if="item.to" :to="item.to" class="breadcrumb__link">{{ item.label }}</NuxtLink>
-        <span v-else class="breadcrumb__label" :aria-current="index === items.length - 1 ? 'page' : undefined">{{
+        <span v-else class="breadcrumb__label" :aria-current="index === visibleItems.length - 1 ? 'page' : undefined">{{
           item.label
         }}</span>
-        <span v-if="index < items.length - 1" class="breadcrumb__separator" aria-hidden="true">{{ separator }}</span>
+        <span v-if="separator && index < visibleItems.length - 1" class="breadcrumb__separator" aria-hidden="true">{{ separator }}</span>
       </li>
     </ol>
   </nav>
@@ -29,6 +29,9 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+// Blank labels would render an empty crumb with a dangling separator.
+const visibleItems = computed(() => props.items.filter((item) => item.label?.trim()));
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -63,11 +66,19 @@ watch(
       display: flex;
       align-items: center;
       gap: var(--_gap);
+      min-inline-size: 0;
     }
 
     .breadcrumb__link,
     .breadcrumb__label {
       color: var(--_colour);
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: var(--breadcrumb-item-line-clamp, none);
+      line-clamp: var(--breadcrumb-item-line-clamp, none);
     }
 
     .breadcrumb__label[aria-current="page"] {
@@ -84,6 +95,7 @@ watch(
     }
 
     .breadcrumb__separator {
+      flex-shrink: 0;
       color: var(--_colour);
       opacity: 0.6;
     }

package/app/components/01.atoms/navigation/breadcrumb/CONSUMER-STYLING.md

@@ -9,8 +9,11 @@
 | `--breadcrumb-text-transform` | `uppercase` | Text transform of the whole trail |
 | `--breadcrumb-letter-spacing` | `0.05em` | Letter spacing of the whole trail |
 | `--breadcrumb-colour` | `currentColor` | Colour of links, separators, and non-current labels |
-| `--breadcrumb-colour-current` | `currentColor` | Colour of the current-page item (the one without a `to`) |
+| `--breadcrumb-colour-current` | `currentColor` | Colour of the current-page item (the last item, when it has no `to`) |
 | `--breadcrumb-link-decoration-hover` | `underline` | `text-decoration` on link hover/focus |
+| `--breadcrumb-item-line-clamp` | `none` | Max lines of each item's label, with an ellipsis on the last. `1` is single-line ellipsis, `none` shows everything |
+
+> Added 2026-10-06: `--breadcrumb-item-line-clamp`; long unbroken labels now wrap inside the trail.
 
 ```css
 .breadcrumb {
@@ -21,9 +24,21 @@
 
 ---
 
+## State hooks
+
+| Hook | When |
+|---|---|
+| `.breadcrumb__label[aria-current="page"]` | The last item, when it has no `to` (styled by `--breadcrumb-colour-current`) |
+
+Inner classes: `.breadcrumb__list`, `.breadcrumb__item`, `.breadcrumb__link`, `.breadcrumb__label`,
+`.breadcrumb__separator`.
+
+---
+
 ## Text content — props, not CSS
 
-`items` and `separator` are props. There is no hardcoded copy to override in CSS.
+`items`, `separator` and `ariaLabel` (the nav landmark's label) are props. There is no hardcoded copy to
+override in CSS.
 
 ---
 
@@ -37,11 +52,19 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ---
 
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `nav.breadcrumb`. Reactive after mount.
+
+---
+
 ## Notes
 
-- An item renders as a `NuxtLink` when it has a `to`, otherwise as `<span aria-current="page">` —
-  omit `to` on whichever item represents the current page (usually the last one).
-- The separator (`aria-hidden="true"`) is only rendered between items, never after the last one.
+- An item renders as a `NuxtLink` when it has a `to`, otherwise as a plain `<span>`. The last item gets
+  `aria-current="page"` when it has no `to`, so omit `to` on the current page's item.
+- The separator (`aria-hidden="true"`) is only rendered between items, never after the last one, and
+  not at all when `separator` is `""`.
+- Items with a blank `label` are skipped, and no `<nav>` is rendered when none are left (added 2026-10-06).
 - `--breadcrumb-colour` is what `ServiceDetail` overrides internally (to `white` by default) so
   the breadcrumb reads over its hero image — see `ServiceDetail`'s `CONSUMER-STYLING.md`.
 

package/app/components/01.atoms/navigation/breadcrumb/stories/Breadcrumb.stories.ts

@@ -1,6 +1,9 @@
+import { computed, ref } from "vue";
 import Breadcrumb from "../Breadcrumb.vue";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof Breadcrumb> = {
   title: "Atoms/Navigation/Breadcrumb",
@@ -14,6 +17,10 @@ const meta: Meta<typeof Breadcrumb> = {
       control: "text",
       description: "Character or short string rendered between items",
     },
+    ariaLabel: {
+      control: "text",
+      description: "aria-label on the nav landmark; override for localisation",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -21,6 +28,7 @@ const meta: Meta<typeof Breadcrumb> = {
   },
   args: {
     separator: "/",
+    ariaLabel: "Breadcrumb",
     styleClassPassthrough: [],
   },
   parameters: {
@@ -85,3 +93,89 @@ export const CustomSeparator: Story = {
     template: `<Breadcrumb v-bind="args" />`,
   }),
 };
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+type LineClamp = "none" | "1" | "2" | "3";
+
+// Story-only arg: drives a CSS token, not a Breadcrumb prop. See the argTypes entry.
+type StressArgs = InstanceType<typeof Breadcrumb>["$props"] & { itemLineClamp: LineClamp };
+
+const longGerman = "Haarverlängerungsbehandlungsberatungsterminvereinbarung";
+
+const stressItems: BreadcrumbItem[] = [
+  { label: "Startseite", to: "/" },
+  { label: `Kategorie ${longGerman}`, to: "/kategorie" },
+  { label: "" },
+  { label: "   " },
+  { label: "😀 Emoji first", to: "/emoji" },
+  { label: "<b>not bold</b>", to: "/html" },
+  { label: "تسريحات شعر جديدة لموسم الخريف", to: "/rtl" },
+  { label: "https://example.com/a/very/long/url/that/never/breaks/because/it/has/no/spaces", to: "/url" },
+  { label: "A", to: "/a" },
+  { label: `${longGerman} und ${longGerman}` },
+];
+
+export const StressTest: StoryObj<StressArgs> = {
+  name: "Stress Test (Worst-Case Data)",
+  argTypes: {
+    itemLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--breadcrumb-item-line-clamp` CSS token on a wrapper so you can try it here. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.page-header { --breadcrumb-item-line-clamp: 1; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
+  },
+  args: {
+    items: stressItems,
+    separator: "→→",
+    ariaLabel: "Navigationspfad",
+    itemLineClamp: "none",
+  },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      const componentArgs = computed(() => {
+        const { itemLineClamp: _itemLineClamp, ...rest } = args;
+        return rest;
+      });
+      const tokenStyles = computed(() => ({ "--breadcrumb-item-line-clamp": args.itemLineClamp }));
+      return { componentArgs, tokenStyles };
+    },
+    template: `<div :style="tokenStyles"><Breadcrumb v-bind="componentArgs" /></div>`,
+  }),
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: ten items including a long German compound word, an unbroken URL, " +
+          "emoji, HTML-like text (must render as text), right-to-left Arabic, a single character, and two blank labels " +
+          "(skipped, with no dangling separator), plus a two-character separator and a German nav label. Check at every " +
+          "canvas width: labels wrap inside the trail, separators keep their size, and the last item is the current page. " +
+          "Try the Item line clamp control too: it\x27s a CSS token set by the story, not a prop.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/navigation/breadcrumb/tests/Breadcrumb.spec.ts

@@ -84,4 +84,31 @@ describe("Breadcrumb", () => {
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  // ─── Worst-case data ───────────────────────────────────────────────────
+
+  it("skips blank labels without leaving a dangling separator", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, {
+      props: { items: [{ label: "Services", to: "/services" }, { label: "  " }, { label: "Balayage" }, { label: "" }] },
+    });
+    expect(wrapper.findAll(".breadcrumb__item")).toHaveLength(2);
+    expect(wrapper.findAll(".breadcrumb__separator")).toHaveLength(1);
+    expect(wrapper.find(".breadcrumb__label").attributes("aria-current")).toBe("page");
+  });
+
+  it("renders no nav landmark when there is nothing to show", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items: [{ label: "" }] } });
+    expect(wrapper.find("nav").exists()).toBe(false);
+  });
+
+  it("renders no separator element when separator is empty", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items, separator: "" } });
+    expect(wrapper.find(".breadcrumb__separator").exists()).toBe(false);
+  });
+
+  it("renders HTML-like labels as text", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items: [{ label: "<b>bold</b>" }] } });
+    expect(wrapper.find(".breadcrumb__label").text()).toBe("<b>bold</b>");
+    expect(wrapper.find(".breadcrumb__label b").exists()).toBe(false);
+  });
 });

package/app/components/01.atoms/tabbed-content/CONSUMER-STYLING.md

@@ -0,0 +1,201 @@
+# TabbedContent — Consumer Styling Guide
+
+> **Renamed 2026-10-07**: `TabsCore` → `TabbedContent`. Root class `.tabs-core` → `.tabbed-content`,
+> and every inner class moved under the component prefix (see State hooks). Token names are
+> unchanged (`--tabs-*`).
+
+## Public token API
+
+Colour defaults come from the `--theme-*` slots, so the component follows the site theme out of the
+box.
+
+> **Changed 2026-10-07**: colour defaults moved from fixed `--slate-*` steps to `--theme-*` slots.
+> The content panel used to default to a dark `--slate-09` background with no text colour, so
+> consumer text rendered dark on dark; it's now a light `--theme-surface-subtle` panel with
+> `--theme-text`. The active highlight is `--theme-surface` (bold) with `--theme-on-surface` text,
+> the underline is `--theme-accent`. To keep the old look, set the tokens below to the previous
+> `--slate-*` values.
+
+### Tab row
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tabs-nav-border` | `0.1rem solid color-mix(in oklch, var(--theme-text) 20%, transparent)` | Border between the tab row and the panels (bottom on `axis="x"`, left on `axis="y"`) |
+| `--tabs-axis-y-gap` | `2em` | Gap between the tab column and the panels on `axis="y"` |
+| `--tabs-axis-y-list-max-inline-size` | `50%` | Widest the tab column may get on `axis="y"`; long labels wrap inside it |
+
+### Tab triggers
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tabs-list-item-colour` | `var(--theme-text)` | Text colour of an inactive trigger |
+| `--tabs-list-item-opacity` | `0.7` | Opacity of an inactive trigger |
+| `--tabs-list-item-colour-selected` | falls back to `--tabs-active-indicator-text-colour` | Text colour of the active trigger |
+| `--tabs-list-item-text-transform` | `uppercase` | `text-transform` of trigger labels |
+| `--tabs-list-item-font-weight` | `500` | Font weight of trigger labels |
+| `--tabs-list-item-padding-block` | `1em` | Vertical padding of a trigger |
+| `--tabs-list-item-padding-inline` | `2em` | Horizontal padding of a trigger |
+| `--tabs-list-item-max-inline-size` | `24rem` | Widest a trigger may get on `axis="x"`; longer labels wrap inside it |
+| `--tabs-list-item-colour-transition-duration` | `100ms` | Transition of the trigger text colour |
+| `--tabs-list-item-focus-outline-offset` | `-0.2rem` | Focus outline offset on a trigger |
+| `--tabs-focus-ring-width` | `0.2rem` | Focus outline width on triggers and panels |
+| `--tabs-focus-ring-colour` | `var(--theme-border-focus)` | Focus outline colour on triggers and panels |
+
+> **Changed 2026-10-07**: the focus outline used `--theme-ring`, the lightest theme step, which
+> was close to invisible on a light page. It now defaults to `--theme-border-focus` behind the new
+> `--tabs-focus-ring-colour` token. `--tabs-list-item-focus-outline-width` is replaced by
+> `--tabs-focus-ring-width`.
+
+### Moving indicators
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tabs-hover-indicator-colour` | `var(--theme-surface-subtle)` | Background of the hover highlight (`trackHover`) |
+| `--tabs-hover-indicator-text-colour` | `var(--theme-text)` | Text colour of a hovered trigger; keep it in contrast with the hover background |
+| `--tabs-active-indicator-colour` | `var(--theme-surface)` | Background of the active highlight (`trackActive`) |
+| `--tabs-active-indicator-text-colour` | `var(--theme-on-surface)` | Text colour of the active trigger; keep it in contrast with the active background |
+| `--tabs-underline-indicator-colour` | `var(--theme-accent)` | Colour of the underline/sideline (`trackIndicator`) |
+| `--tabs-underline-indicator-height` | `0.4rem` | Thickness of the underline (`axis="x"`), also its width on `axis="y"` |
+| `--tabs-hover-underline-indicator-colour` | `--tabs-underline-indicator-colour` | Colour of the thin underline/sideline that follows the hovered tab (`trackHover` and `trackIndicator`) |
+| `--tabs-hover-underline-indicator-height` | `0.1rem` | Its thickness; `0` hides it. Sits under the active underline where they overlap |
+
+### More menu (`overflowMode="menu"`, `axis="x"`)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tabs-more-margin-inline-start` | `auto` | Pushes the More button to the end of the tab row; `0` keeps it straight after the last visible tab |
+| `--tabs-more-trigger-padding-inline` | `1.2em` | Horizontal padding of the More button (vertical padding follows `--tabs-list-item-padding-block`); its colours follow the trigger tokens |
+| `--tabs-more-icon-size` | `1.25em` | More button icon size (the `⋯` state) |
+| `--tabs-more-chevron-size` | `1em` | Chevron after the active tab's label on the More button (flips while the menu is open) |
+| `--tabs-more-popover-surface` | `var(--page-bg, var(--theme-surface-subtle))` | Menu background |
+| `--tabs-more-popover-text-colour` | `var(--theme-text)` | Menu text colour |
+| `--tabs-more-popover-border` | `0.1rem solid color-mix(in oklch, var(--theme-text) 20%, transparent)` | Menu border (shorthand) |
+| `--tabs-more-popover-border-radius` | `0.6rem` | Menu corner radius |
+| `--tabs-more-popover-shadow` | `0 0.4rem 1.6rem rgb(0 0 0 / 12%)` | Menu shadow |
+| `--tabs-more-popover-min-inline-size` | `16rem` | Narrowest the menu gets (widest is `--tabs-list-item-max-inline-size`, capped to the viewport) |
+| `--tabs-more-popover-max-block-size` | `70vh` | Tallest the menu gets before it scrolls |
+| `--tabs-more-popover-distance` | `0.4rem` | Gap between the More button and the menu |
+| `--tabs-more-popover-transition-duration` | `200ms` | Menu fade |
+| `--tabs-more-popover-z-index` | `999999` | Stacking where the menu can't use the top layer (Safari 16) |
+| `--tabs-more-item-padding-block` / `-inline` | `0.8em` / `1.2em` | Menu row padding |
+| `--tabs-more-item-surface-hover` | `color-mix(in oklch, var(--theme-text) 8%, transparent)` | Menu row background on hover/focus |
+| `--tabs-more-item-colour-selected` | `var(--theme-accent)` | Text colour of the menu row for the active tab |
+
+### Panels
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tabs-content-background-colour` | `var(--theme-surface-subtle)` | Panel background |
+| `--tabs-content-text-colour` | `var(--theme-text)` | Panel text colour |
+| `--tabs-content-border-width` | `0.1rem` | Panel border width |
+| `--tabs-content-border-colour` | `color-mix(in oklch, var(--theme-text) 20%, transparent)` | Panel border colour |
+| `--tabs-content-border-radius` | `0` | Panel corner radius |
+
+### Private tokens
+
+`--_focus-ring` (composed from the two focus tokens), and the runtime values `useTabs` writes from
+measured layout, per indicator (`active` / `hovered`): `--_{kind}-start` / `--_{kind}-end` (edge
+insets from the bar's start and end along the axis), `--_{kind}-duration`,
+`--_{kind}-start-delay` / `--_{kind}-end-delay`; each indicator reads them through its own
+`--_start` / `--_end` / `--_duration` / `--_start-delay` / `--_end-delay`. Not public API; use the
+`transitionDuration` prop for indicator speed (one edge moves for that long, then the other).
+
+> **Changed 2026-10-08**: indicators were a bar-wide box moved with `translate` and sized with
+> `scale` (`--_x-*`, `--_width-*`, `--_y-*`, a shared `--_transition-duration`), with a timer
+> to "settle" after a stretch. Rightward moves changed both properties at once and could visibly
+> step backwards. Each edge is now its own `left`/`right` (`top`/`bottom` on `axis="y"`) inset:
+> the edge in the direction of travel moves first and the trailing edge follows after one
+> duration, so the movement is the same both ways, with no timer.
+
+---
+
+## State hooks
+
+| Hook | Where | Meaning |
+|---|---|---|
+| `.axis-x` / `.axis-y` | root `.tabbed-content` | The `axis` prop |
+| `.overflow-menu` / `.overflow-scroll` | root | The `overflowMode` prop |
+| `.tabbed-content-bar` | wraps the tablist, the More menu and the indicators | Carries `--tabs-nav-border`; scrolls sideways with `overflowMode="scroll"` |
+| `.tabbed-content-list` | `role="tablist"` | The tab row/column |
+| `.tabbed-content-trigger[hidden]` | trigger | Collapsed into the More menu |
+| `.tabbed-content-more` / `.is-idle` | More menu wrapper | Idle (measured but invisible) while every tab fits |
+| `.tabbed-content-more-trigger` / `.is-active` | More button | `.is-active` while the active tab is one of the collapsed ones: the button shows that tab's label (`.tabbed-content-more-label`) and a chevron instead of `⋯`, takes the normal tab padding, and the indicators sit on it |
+| `.tabbed-content-more-popover` | menu popover | Open: `:popover-open`, or `.tabbed-content-more-popover-open` without the Popover API (style the two in separate rules) |
+| `.tabbed-content-more-item[aria-checked="true"]` | menu row | The active tab's row |
+| `.tabbed-content-trigger` | each `role="tab"` button | A tab trigger |
+| `.tabbed-content-trigger[aria-selected="true"]` | trigger | The active tab |
+| `.tracks-active` | root | `trackActive` is on: label colour follows `[data-under-active]` instead of `aria-selected` |
+| `[data-under-active]` | trigger, More button | The active highlight covers at least half of it right now (updated every frame while it slides) |
+| `.tabbed-content-indicator-hover` / `-active` / `-underline` / `-underline-hover` | inside `.tabbed-content-bar` | The moving indicators, rendered only when their `track*` prop is on (`-underline-hover` needs both `trackHover` and `trackIndicator`) |
+| `.tabbed-content-panels` | panel wrapper | Background, border and text colour live here |
+| `.tabbed-content-panel` / `[hidden]` | each `role="tabpanel"` | A panel; inactive ones carry `hidden` |
+
+> **Changed 2026-10-07**: `.tabs-list` → `.tabbed-content-list` (now a `<div>`, was a `<ul>` with
+> `<li>`s), `.tabs-list-item` → `.tabbed-content-trigger`, `.nav__hovered` / `.nav__active` /
+> `.nav__active-indicator` → `.tabbed-content-indicator-hover` / `-active` / `-underline`,
+> `.tab-content-wrapper` → `.tabbed-content-panels`, `.tab-content` → `.tabbed-content-panel`.
+> Inactive panels use the `hidden` attribute instead of inline `display: none` and `aria-hidden`.
+
+---
+
+## Tab-label text colour tracks the indicator behind it
+
+Hover and active can have different backgrounds, so the trigger label has a text-colour token per
+state. If you override either indicator background, override its matching text-colour token too:
+
+```css
+.my-page {
+  --tabs-hover-indicator-colour: gold;
+  --tabs-hover-indicator-text-colour: black;
+  --tabs-active-indicator-colour: navy;
+  --tabs-active-indicator-text-colour: white;
+}
+```
+
+With `trackActive` on, label colour follows what's actually behind each tab while the active
+highlight slides: a tab it covers by at least half (`[data-under-active]`) takes the active text
+colour, and the newly selected tab keeps its resting colour until the highlight reaches it. So a
+jump from tab 1 to tab 5 never puts dark text on the dark highlight, or light text on the light
+row. With `trackActive` off there's no moving highlight, and `aria-selected` sets the colour as
+before.
+
+> **Changed 2026-10-08**: passed-over labels used to keep their resting colour while the active
+> highlight slid under them (dark on dark), and the selected tab turned light before the
+> highlight arrived (light on light).
+
+---
+
+## Indicator visibility is prop-driven
+
+Whether each indicator renders is set by `trackHover` / `trackActive` / `trackIndicator`, not
+tokens. They can change after mount.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` classes land on the root `.tabbed-content`, so tokens set on that class
+reach every part of the component.
+
+> **Changed 2026-10-07**: passthrough classes used to land on the tab list, not the root, so tokens
+> set on them never reached the panels.
+
+---
+
+## Notes
+
+- **Dark mode**: defaults are light-only, like the rest of the library. Override the `--theme-*`
+  slots (or these tokens) in your own dark scheme; `light-dark()` in your own override values is
+  fine, it's only kept out of the library's defaults.
+- **Right-to-left**: indicators are positioned from measured `offsetLeft`, so they line up in RTL,
+  but arrow keys aren't mirrored (ArrowRight always moves to the next tab in DOM order).