srcdev-nuxt-components 9.3.0 → 9.3.2

package/app/components/03.organisms/site-header/SiteHeader.vue

@@ -0,0 +1,96 @@
+<template>
+  <PageRow tag="div" :variant="pageRowVariant" :style-class-passthrough="styleClassPassthrough">
+    <template #default>
+      <header class="site-header">
+        <nav class="home-navigation" aria-label="Home Navigation">
+          <SkipLinks>
+            <template #homeLink>
+              <slot name="branding"></slot>
+            </template>
+          </SkipLinks>
+        </nav>
+        <ResponsiveHeader
+          :responsive-nav-links="responsiveNavLinks"
+          :gap-between-first-and-second-nav="gapBetweenFirstAndSecondNav"
+          :overflow-details-summary-icons="overflowDetailsSummaryIcons"
+          :collapse-breakpoint="collapseBreakpoint"
+          :collapse-at-main-nav-intersection="collapseAtMainNavIntersection"
+          :allow-expand-on-gesture="allowExpandOnGesture"
+          :style-class-passthrough="navStyleClassPassthrough"
+        >
+          <template v-if="slots.secondaryNavigation" #secondaryNavigation>
+            <slot name="secondaryNavigation"></slot>
+          </template>
+        </ResponsiveHeader>
+      </header>
+    </template>
+  </PageRow>
+</template>
+
+<script setup lang="ts">
+import type { ResponsiveHeaderProp } from "../../../types/components";
+import PageRow from "../../01.atoms/page-row/PageRow.vue";
+import SkipLinks from "../../skip-links/SkipLinks.vue";
+import ResponsiveHeader from "../responsive-header/ResponsiveHeader.vue";
+
+interface Props {
+  responsiveNavLinks?: ResponsiveHeaderProp;
+  gapBetweenFirstAndSecondNav?: number;
+  overflowDetailsSummaryIcons?: Record<string, string>;
+  collapseBreakpoint?: number | null;
+  collapseAtMainNavIntersection?: boolean;
+  allowExpandOnGesture?: boolean;
+  pageRowVariant?: "full" | "popout" | "content" | "inset-content";
+  styleClassPassthrough?: string | string[];
+  navStyleClassPassthrough?: string | string[];
+}
+
+withDefaults(defineProps<Props>(), {
+  responsiveNavLinks: () => ({}),
+  gapBetweenFirstAndSecondNav: 12,
+  overflowDetailsSummaryIcons: () => ({
+    more: "gravity-ui:ellipsis",
+    burger: "gravity-ui:bars",
+  }),
+  collapseBreakpoint: null,
+  collapseAtMainNavIntersection: false,
+  allowExpandOnGesture: true,
+  pageRowVariant: "content",
+  styleClassPassthrough: () => [],
+  navStyleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+</script>
+
+<style lang="css">
+@layer components {
+  /* ─── Public CSS tokens ─────────────────────────────────────────────────
+     Override on the consumer's scope class (via styleClassPassthrough).
+     Nested --responsive-header-* / --overflow-nav-* tokens still apply —
+     forward a scope class via navStyleClassPassthrough to reach them.
+
+     --site-header-gap             (default: 2.4rem)
+     --site-header-padding-inline  (default: 2.4rem)
+     --site-header-padding-block   (default: 0px)
+     --site-header-bg              (default: transparent)
+     --site-header-position        (default: static)
+     --site-header-sticky-offset   (default: 0px)
+     --site-header-z-index         (default: 9)
+  ──────────────────────────────────────────────────────────────────────── */
+
+  .site-header {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: var(--site-header-gap, 2.4rem);
+    padding-block: var(--site-header-padding-block, 0px);
+    padding-inline: var(--site-header-padding-inline, 2.4rem);
+    background-color: var(--site-header-bg, transparent);
+    position: var(--site-header-position, static);
+    top: var(--site-header-sticky-offset, 0px);
+    z-index: var(--site-header-z-index, 9);
+    width: 100%;
+  }
+}
+</style>

package/app/components/03.organisms/site-header/stories/SiteHeader.stories.ts

@@ -0,0 +1,135 @@
+import SiteHeader from "../SiteHeader.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof SiteHeader> = {
+  title: "Organisms/Site Header",
+  component: SiteHeader,
+  argTypes: {
+    responsiveNavLinks: {
+      control: "object",
+      description: "Nav groups keyed by name — each item is either a link (`path`) or a dropdown (`childLinks`)",
+    },
+    gapBetweenFirstAndSecondNav: {
+      control: { type: "number", min: 0, step: 4 },
+      description: "Gap in pixels between the first and second nav groups",
+    },
+    collapseAtMainNavIntersection: {
+      control: "boolean",
+      description: "Collapse the main nav into the overflow burger menu once it no longer fits",
+    },
+    allowExpandOnGesture: {
+      control: "boolean",
+      description: "Allow the collapsed nav to expand on touch/gesture",
+    },
+    pageRowVariant: {
+      control: { type: "radio" },
+      options: ["full", "popout", "content", "inset-content"],
+      description: "Variant forwarded to the root PageRow",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Extra CSS classes applied to the root PageRow (targets --site-header-* tokens)",
+    },
+    navStyleClassPassthrough: {
+      control: "object",
+      description: "Extra CSS classes applied to the nested ResponsiveHeader (targets its own token API)",
+    },
+  },
+  args: {
+    pageRowVariant: "content",
+    gapBetweenFirstAndSecondNav: 12,
+    collapseAtMainNavIntersection: false,
+    allowExpandOnGesture: true,
+    styleClassPassthrough: [],
+    navStyleClassPassthrough: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SiteHeader>;
+
+export const Default: Story = {
+  args: {
+    responsiveNavLinks: {
+      firstNav: [
+        {
+          name: "Components",
+          childLinksTitle: "UI Components",
+          childLinks: [
+            { name: "Buttons", path: "/forms/examples/buttons" },
+            { name: "Tabs", path: "/ui/tabs" },
+            { name: "Carousels", path: "/ui/carousel-basic" },
+          ],
+        },
+        { name: "Typography", path: "/typography/page-heading" },
+      ],
+      secondNav: [{ name: "Contact", path: "#" }],
+    },
+  },
+  render: (args) => ({
+    components: { SiteHeader },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SiteHeader v-bind="args">
+        <template #branding>
+          <a href="/" style="color:inherit;text-decoration:none;font-weight:600">Brand</a>
+        </template>
+      </SiteHeader>
+    `,
+  }),
+};
+
+/** A single flat nav group with no dropdowns — the shape a lighter, few-page site would use. */
+export const SimpleFlatNav: Story = {
+  name: "Simple Flat Nav (no dropdowns)",
+  args: {
+    responsiveNavLinks: {
+      main: [
+        { name: "Home", path: "/" },
+        { name: "About", path: "/about" },
+        { name: "Services", path: "/services" },
+        { name: "Contact", path: "/contact" },
+      ],
+    },
+  },
+  render: (args) => ({
+    components: { SiteHeader },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SiteHeader v-bind="args">
+        <template #branding>
+          <a href="/" style="color:inherit;text-decoration:none;font-weight:600">Brand</a>
+        </template>
+      </SiteHeader>
+    `,
+  }),
+};
+
+export const WithSecondaryNavigationSlot: Story = {
+  name: "With secondaryNavigation slot",
+  args: {
+    responsiveNavLinks: {
+      firstNav: [{ name: "Home", path: "/" }],
+    },
+  },
+  render: (args) => ({
+    components: { SiteHeader },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SiteHeader v-bind="args">
+        <template #branding>
+          <a href="/" style="color:inherit;text-decoration:none;font-weight:600">Brand</a>
+        </template>
+        <template #secondaryNavigation>
+          <a href="/settings" aria-label="Settings">⚙</a>
+        </template>
+      </SiteHeader>
+    `,
+  }),
+};

package/app/components/03.organisms/site-header/tests/SiteHeader.spec.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import SiteHeader from "../SiteHeader.vue";
+import type { ResponsiveHeaderProp } from "../../../../types/components";
+
+const navLinks: ResponsiveHeaderProp = {
+  firstNav: [{ name: "Home", path: "/" }],
+};
+
+const responsiveHeaderStub = {
+  name: "ResponsiveHeader",
+  props: [
+    "responsiveNavLinks",
+    "gapBetweenFirstAndSecondNav",
+    "overflowDetailsSummaryIcons",
+    "collapseBreakpoint",
+    "collapseAtMainNavIntersection",
+    "allowExpandOnGesture",
+    "styleClassPassthrough",
+  ],
+  template: `<div class="responsive-header-stub"><slot name="secondaryNavigation"></slot></div>`,
+};
+
+describe("SiteHeader", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the branding slot inside SkipLinks' homeLink slot", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      slots: { branding: "<a href='/' class='brand-link'>Brand</a>" },
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.find(".home-link .brand-link").exists()).toBe(true);
+  });
+
+  it("does not render the secondaryNavigation slot when not provided", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.text()).not.toContain("Extra nav");
+  });
+
+  it("forwards the secondaryNavigation slot through to ResponsiveHeader", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      slots: { secondaryNavigation: "<span>Extra nav</span>" },
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.text()).toContain("Extra nav");
+  });
+
+  it("forwards responsiveNavLinks and other nav props to ResponsiveHeader", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      props: {
+        responsiveNavLinks: navLinks,
+        gapBetweenFirstAndSecondNav: 24,
+        collapseAtMainNavIntersection: true,
+        allowExpandOnGesture: false,
+        navStyleClassPassthrough: ["site-header-nav"],
+      },
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    const responsiveHeader = wrapper.findComponent(responsiveHeaderStub);
+    expect(responsiveHeader.props("responsiveNavLinks")).toEqual(navLinks);
+    expect(responsiveHeader.props("gapBetweenFirstAndSecondNav")).toBe(24);
+    expect(responsiveHeader.props("collapseAtMainNavIntersection")).toBe(true);
+    expect(responsiveHeader.props("allowExpandOnGesture")).toBe(false);
+    expect(responsiveHeader.props("styleClassPassthrough")).toEqual(["site-header-nav"]);
+  });
+
+  it("passes pageRowVariant through to the root PageRow", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      props: { pageRowVariant: "full" },
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.find(".page-row.full").exists()).toBe(true);
+  });
+
+  it("defaults pageRowVariant to content", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.find(".page-row.content").exists()).toBe(true);
+  });
+
+  it("applies styleClassPassthrough to the root PageRow", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      props: { styleClassPassthrough: ["header"] },
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.find(".page-row.header").exists()).toBe(true);
+  });
+
+  it("renders correct HTML structure with default props", async () => {
+    const wrapper = await mountSuspended(SiteHeader, {
+      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/app/components/03.organisms/site-header/tests/__snapshots__/SiteHeader.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SiteHeader > renders correct HTML structure with default props 1`] = `
+"<div class="page-row content">
+  <header class="site-header">
+    <nav class="home-navigation" aria-label="Home Navigation">
+      <div class="home-link-navigation">
+        <div class="home-link"></div>
+        <nav class="skip-links-nav" aria-label="Skip navigation"><a href="#main-content" class="skip-link">Skip to main content</a><a href="#footer-content" class="skip-link">Skip to footer</a></nav>
+      </div>
+    </nav>
+    <div class="responsive-header-stub"></div>
+  </header>
+</div>"
+`;

package/app/components/05.forms/input-select/CONSUMER-STYLING.md

@@ -0,0 +1,42 @@
+# InputSelectCore — Consumer Styling Guide
+
+## Two override paths
+
+Same public/private split as `InputTextCore` (see that component's `CONSUMER-STYLING.md` for the
+full rationale) — `.input-select-wrapper` now exposes local tokens, one indirection step below the
+global `--theme-*` ones they default from:
+
+```css
+--_input-select-surface: var(--theme-input-surface);
+--_input-select-surface-hover: var(--theme-input-surface-hover);
+--_input-select-border: var(--theme-border);
+--_input-select-border-focus: var(--theme-border-focus);
+--_input-select-outline-color: var(--_input-select-border-focus);
+```
+
+- **Global override**: redeclare `--theme-input-surface` / `--theme-border` / `--theme-border-focus`
+  / `--theme-input-surface-hover` wherever you'd normally set theme tokens.
+- **Local override** (this component only, guaranteed to win):
+
+```css
+.input-select-wrapper {
+  --_input-select-border: var(--slate-06);
+  --_input-select-border-focus: var(--slate-04);
+  --_input-select-surface: var(--slate-01);
+}
+```
+
+## Note on `--_input-select-outline-color`
+
+Before 2026-08-22 this was referenced (on the open-picker outline) but never declared anywhere —
+a dangling private token that silently resolved to the property's initial value (same failure mode
+as the `--theme-button-surface` typo documented in the layer's `CLAUDE.md`, pitfall list). It's now
+properly defined, defaulting to `--_input-select-border-focus`.
+
+---
+
+## Other tokens
+
+Generic form-geometry tokens (`--input-padding-inline`, `--input-min-height`, `--input-font-size`,
+`--form-element-border-width`, `--form-input-border-radius`, etc.) are shared across every
+`05.forms` component and declared in `setup/04.elements/forms/*.css` — not component-local.

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -73,7 +73,17 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 <style lang="css">
 @layer components {
 .input-select-wrapper {
-  background-color: var(--theme-input-surface);
+  /* Local overrides, one indirection step below the global --theme-* tokens they default from —
+     a consumer can target `.input-select-wrapper { --_input-select-border: ...; }` directly for
+     a guaranteed-specific override, instead of relying solely on redefining the global token.
+     See CONSUMER-STYLING.md. */
+  --_input-select-surface: var(--theme-input-surface);
+  --_input-select-surface-hover: var(--theme-input-surface-hover);
+  --_input-select-border: var(--theme-border);
+  --_input-select-border-focus: var(--theme-border-focus);
+  --_input-select-outline-color: var(--_input-select-border-focus);
+
+  background-color: var(--_input-select-surface);
   overflow: hidden;
 
   z-index: 2;
@@ -81,31 +91,33 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
   transition: all var(--theme-form-transition-duration) ease-in-out;
 
   &.normal {
-    border: var(--form-element-border-width) solid var(--theme-border);
+    border: var(--form-element-border-width) solid var(--_input-select-border);
     border-radius: var(--form-input-border-radius);
     outline: var(--form-element-outline-width) solid transparent;
   }
 
   &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
-    background-color: var(--theme-input-surface);
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_input-select-border);
+    background-color: var(--_input-select-surface);
   }
 
   &:has(select:focus-visible, :hover) {
-    outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+    outline: var(--form-element-outline-width-focus) solid var(--_input-select-border-focus);
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
   .input-select-core {
     appearance: none;
     background-color: transparent;
+    display: flex;
+    align-items: center;
 
     /* For legacy support - eg, Safari */
     /* &::after {
       content: '';
       width: 0.8em;
       height: 0.5em;
-      background-color: var(--theme-border);
+      background-color: var(--_input-select-border);
       clip-path: polygon(100% 0%, 0 0%, 50% 100%);
     } */
 
@@ -128,7 +140,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
     &:open::picker(select) {
       opacity: 1;
-      border: var(--form-element-border-width) solid var(--theme-border);
+      border: var(--form-element-border-width) solid var(--_input-select-border);
       outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
 
       @starting-style {
@@ -145,7 +157,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
     font-family: var(--font-family);
     font-size: var(--input-font-size);
-    line-height: var(--input-element-line-height);
+    /* line-height: var(--input-element-line-height); */
     padding-block: var(--input-padding-block);
     padding-inline: var(--input-padding-inline);
     min-height: var(--input-min-height);
@@ -156,7 +168,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
       transition: all var(--theme-form-transition-duration) ease-in-out;
 
       &:hover {
-        background-color: var(--theme-input-surface-hover);
+        background-color: var(--_input-select-surface-hover);
       }
 
       .input-select-core-option-decorator-icon {

package/app/components/05.forms/input-text/CONSUMER-STYLING.md

@@ -0,0 +1,60 @@
+# InputTextCore — Consumer Styling Guide
+
+## Two override paths
+
+Before 2026-08-22, `.input-text-wrapper` read the global `--theme-*` tokens directly
+(`--theme-input-surface`, `--theme-border`, `--theme-border-focus`, `--theme-input-surface-hover`).
+Overriding those globally (e.g. in a consumer app's unlayered `:root` block) should always have
+worked on pure CSS-cascade grounds — an unlayered `:root` declaration (specificity `0,1,0`) beats
+the layer's own `:where(html, [data-theme], [data-invalid])` declaration (specificity `0`)
+regardless of source/import order — but a consumer app hit a case where a global override wasn't
+visibly landing and the root cause wasn't pinned down (see `nuxt-components`'s own git history
+around the same date for a *different*, confirmed bug in a sibling app: wrapping consumer CSS in
+`@layer consumer` broke in production because SSR-inlined per-chunk `<style>` tags fix layer
+priority by first-reference document order, not the app's intended `@layer` statement order — sic
+that isn't what was happening here, since the consumer app's CSS was already unlayered, but it's
+the same class of "cascade behaves differently than a clean mental model predicts" issue).
+
+Rather than leave global-token overrides as the only lever, `.input-text-wrapper` now also
+exposes its own local tokens, one indirection step below the global ones:
+
+```css
+--_input-text-surface: var(--theme-input-surface);
+--_input-text-surface-hover: var(--theme-input-surface-hover);
+--_input-text-border: var(--theme-border);
+--_input-text-border-focus: var(--theme-border-focus);
+```
+
+- **Global override** (affects every themed component, not just this one): redeclare
+  `--theme-input-surface` / `--theme-border` / `--theme-border-focus` / `--theme-input-surface-hover`
+  at whatever scope you'd normally set theme tokens (`:root`, `[data-theme]`, a page wrapper).
+- **Local override** (this component only, guaranteed to win — it's the last declaration before
+  the property that consumes it, no global-token indirection to reason about):
+
+```css
+/* Unscoped consumer CSS, no :deep() needed */
+.input-text-wrapper {
+  --_input-text-border: var(--slate-06);
+  --_input-text-border-focus: var(--slate-04);
+  --_input-text-surface: var(--slate-01);
+}
+```
+
+Prefer the local override when you only want to change this one component's look, or when you've
+hit a case (like the one above) where a global-token change isn't landing and you don't have time
+to dig into why — the local path is a strictly simpler cascade to reason about.
+
+---
+
+## Other tokens
+
+- `--input-icon-slot-gap`, `--input-padding-inline`, `--input-padding-block`, `--input-min-height`,
+  `--input-font-size`, `--form-element-border-width`, `--form-input-border-radius`,
+  `--form-element-border-bottom-width-underlined`, `--form-element-outline-width(-focus)`,
+  `--form-element-outline-offset-focus` — all generic form-geometry tokens shared across every
+  `05.forms` component, declared in `setup/04.elements/forms/*.css`. Not component-local, so
+  overriding one affects every form element, not just `InputTextCore`.
+- `--theme-input-text-color-normal`, `--theme-input-placeholder`,
+  `--theme-input-placeholder-font-size` — still read directly from the global theme tokens, no
+  local indirection yet. Follow the same pattern above (`--_input-text-*`) if a future consumer
+  needs a local override for these.

package/app/components/05.forms/input-text/InputTextCore.vue

@@ -127,10 +127,19 @@ onMounted(() => {
 <style lang="css">
 @layer components {
   .input-text-wrapper {
+    /* Local overrides, one indirection step below the global --theme-* tokens they default from
+       — a consumer can target `.input-text-wrapper { --_input-text-border: ...; }` directly for
+       a guaranteed-specific override, instead of relying solely on redefining the global token.
+       See CONSUMER-STYLING.md. */
+    --_input-text-surface: var(--theme-input-surface);
+    --_input-text-surface-hover: var(--theme-input-surface-hover);
+    --_input-text-border: var(--theme-border);
+    --_input-text-border-focus: var(--theme-border-focus);
+
     display: flex;
     align-items: center;
     gap: var(--input-icon-slot-gap);
-    background-color: var(--theme-input-surface);
+    background-color: var(--_input-text-surface);
     overflow: hidden;
     transition: all var(--theme-form-transition-duration) ease-in-out;
 
@@ -138,25 +147,25 @@ onMounted(() => {
     position: relative;
 
     &.normal {
-      border: var(--form-element-border-width) solid var(--theme-border);
+      border: var(--form-element-border-width) solid var(--_input-text-border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
 
       padding-inline: var(--input-padding-inline);
 
       &:has(input:is(:hover), button:is(:hover)) {
-        outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+        outline: var(--form-element-outline-width-focus) solid var(--_input-text-border-focus);
         outline-offset: var(--form-element-outline-offset-focus);
       }
 
       &:has(input:focus-visible, button:focus-visible) {
-        outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+        outline: var(--form-element-outline-width-focus) solid var(--_input-text-border-focus);
         outline-offset: var(--form-element-outline-offset-focus);
       }
     }
 
     &.underlined {
-      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_input-text-border);
       padding-inline: var(--input-padding-inline);
     }
 
@@ -171,17 +180,17 @@ onMounted(() => {
       box-sizing: content-box;
 
       .input-button-core {
-        background-color: var(--theme-input-surface);
+        background-color: var(--_input-text-surface);
         aspect-ratio: 1;
         border-radius: 0;
         width: var(--input-min-height);
 
         &:hover {
-          background-color: var(--theme-input-surface-hover);
+          background-color: var(--_input-text-surface-hover);
         }
 
         &:is(:focus-visible) {
-          outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+          outline: var(--form-element-outline-width-focus) solid var(--_input-text-border-focus);
           outline-offset: -4px;
         }