srcdev-nuxt-components 9.1.55 → 9.1.56

package/app/components/02.molecules/alert-masked-content/stories/AlertMaskedContent.stories.ts

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import AlertMaskedContent from "../AlertMaskedContent.vue";
+
+const meta: Meta<typeof AlertMaskedContent> = {
+  title: "Molecules/AlertMaskedContent",
+  component: AlertMaskedContent,
+  argTypes: {
+    theme: {
+      control: { type: "inline-radio" },
+      options: ["info", "success", "warning", "error"],
+      description: "Semantic theme — controls the accent colour and default icon",
+      table: { category: "Appearance" },
+    },
+    customIcon: {
+      control: "text",
+      description: "Iconify icon name to override the default theme icon",
+      table: { category: "Appearance" },
+    },
+    dismissible: {
+      control: "boolean",
+      description: "Show a close button (emits 'dismiss' on click)",
+      table: { category: "Behaviour" },
+    },
+    maskConfig: { table: { disable: true } },
+    contentId: { table: { disable: true } },
+    ariaLive: { table: { disable: true } },
+  },
+  args: {
+    theme: "info",
+    dismissible: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertMaskedContent>;
+
+const wrapperStyle = `
+  max-width: 600px;
+  padding: 2rem;
+  background: linear-gradient(135deg, oklch(40% 0.15 250), oklch(25% 0.1 300));
+  border-radius: 8px;
+`;
+
+/** Default — info theme over a coloured background to show the glass effect. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" :style="'${wrapperStyle}'">
+        <AlertMaskedContent v-bind="args">
+          <template #title>Alert title</template>
+          <template #content>This is the alert body. It describes what happened and what the user should do next.</template>
+        </AlertMaskedContent>
+      </div>
+    `,
+  }),
+};
+
+/** Dismissible — renders the close button. */
+export const Dismissible: Story = {
+  args: { theme: "info", dismissible: true },
+  render: (args) => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" :style="'${wrapperStyle}'">
+        <AlertMaskedContent v-bind="args">
+          <template #title>Dismissible alert</template>
+          <template #content>Click the close button to emit the dismiss event.</template>
+        </AlertMaskedContent>
+      </div>
+    `,
+  }),
+};
+
+/** All themes — all four semantic variants stacked over a shared background. */
+export const AllThemes: Story = {
+  name: "All Themes",
+  render: () => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return { themes: ["info", "success", "warning", "error"] as const };
+    },
+    template: `
+      <div style="${wrapperStyle} display: flex; flex-direction: column; gap: 1.2rem;">
+        <div v-for="theme in themes" :key="theme" :data-theme="theme">
+          <AlertMaskedContent :theme="theme" :dismissible="true">
+            <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }}</template>
+            <template #content>This is the {{ theme }} masked variant.</template>
+          </AlertMaskedContent>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/** Compared side-by-side with different background colours to show how the glass adapts. */
+export const BackgroundVariants: Story = {
+  name: "Background Variants",
+  render: () => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return {
+        backgrounds: [
+          "linear-gradient(135deg, oklch(40% 0.15 250), oklch(25% 0.1 300))",
+          "linear-gradient(135deg, oklch(35% 0.12 30), oklch(20% 0.08 60))",
+          "linear-gradient(135deg, oklch(20% 0 0), oklch(10% 0 0))",
+        ],
+      };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.6rem;">
+        <div
+          v-for="(bg, i) in backgrounds"
+          :key="i"
+          :style="{ background: bg, padding: '2rem', borderRadius: '8px', maxWidth: '500px' }"
+          data-theme="info"
+        >
+          <AlertMaskedContent theme="info" :dismissible="true">
+            <template #title>Glass effect</template>
+            <template #content>The masked border adapts to whatever sits behind it.</template>
+          </AlertMaskedContent>
+        </div>
+      </div>
+    `,
+  }),
+};

package/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts

@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import AlertMaskedContent from "../AlertMaskedContent.vue";
+
+const mockResizeObserver = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+vi.stubGlobal("ResizeObserver", mockResizeObserver);
+
+describe("AlertMaskedContent", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root element with class alert-masked-content", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-masked-content").exists()).toBe(true);
+  });
+
+  it("sets data-theme on the root element", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "success" } });
+    expect(wrapper.find(".alert-masked-content").attributes("data-theme")).toBe("success");
+  });
+
+  // ─── AlertMaskCore ────────────────────────────────────────────────────────
+
+  it("renders AlertMaskCore", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-mask-core").exists()).toBe(true);
+  });
+
+  it("renders AlertContentInner inside AlertMaskCore", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-mask-core .alert-content-inner").exists()).toBe(true);
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("renders the icon region", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-icon']").exists()).toBe(true);
+  });
+
+  it("replaces the icon via the #icon slot", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info" },
+      slots: { icon: '<span class="custom-icon">★</span>' },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Title slot ───────────────────────────────────────────────────────────
+
+  it("renders the title element when the #title slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info" },
+      slots: { title: "Important notice" },
+    });
+    expect(wrapper.find("[data-test-id='alert-title']").text()).toContain("Important notice");
+  });
+
+  it("does not render the title element when the #title slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(false);
+  });
+
+  // ─── Content slot ─────────────────────────────────────────────────────────
+
+  it("renders the content element when the #content slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info" },
+      slots: { content: "More detail here." },
+    });
+    expect(wrapper.find("[data-test-id='alert-content']").text()).toContain("More detail here.");
+  });
+
+  it("does not render the content element when the #content slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(false);
+  });
+
+  // ─── contentId / ariaLive ─────────────────────────────────────────────────
+
+  it("sets id on the body element when contentId is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info", contentId: "toast-message-xyz" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBe("toast-message-xyz");
+  });
+
+  it("sets aria-live on the body element when ariaLive is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info", ariaLive: "assertive" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBe("assertive");
+  });
+
+  // ─── Dismiss button ───────────────────────────────────────────────────────
+
+  it("does not render the dismiss button when dismissible is false", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info", dismissible: false } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+  });
+
+  it("renders the dismiss button when dismissible is true", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info", dismissible: true } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+  });
+
+  it("emits the dismiss event when the dismiss button is clicked", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info", dismissible: true } });
+    await wrapper.find("[data-test-id='alert-dismiss']").trigger("click");
+    expect(wrapper.emitted("dismiss")).toBeTruthy();
+  });
+
+  // ─── Default maskConfig ───────────────────────────────────────────────────
+
+  it("passes the resolved maskConfig to AlertMaskCore", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    const contentEl = wrapper.find(".alert-mask-content");
+    const style = (contentEl.element as HTMLElement).style;
+    // Default borderLeft: 6 → --insetInlineStart: 6px
+    expect(style.getPropertyValue("--insetInlineStart")).toBe("6px");
+    expect(style.getPropertyValue("--insetBlockStart")).toBe("1px");
+    expect(style.getPropertyValue("--insetInlineEnd")).toBe("1px");
+    expect(style.getPropertyValue("--insetBlockEnd")).toBe("1px");
+  });
+
+  it("merges custom maskConfig over defaults", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info", maskConfig: { borderLeft: 12 } },
+    });
+    const contentEl = wrapper.find(".alert-mask-content");
+    const style = (contentEl.element as HTMLElement).style;
+    expect(style.getPropertyValue("--insetInlineStart")).toBe("12px");
+  });
+});

package/app/components/05.forms/input-button/InputButtonCore.vue

@@ -10,7 +10,7 @@
     class="input-button-core"
     :class="buttonClasses"
   >
-    <PendingEffect v-if="hasPendingEffect" />
+    <PendingEffect v-if="hasPendingEffect" :theme="theme" />
 
     <span v-if="hasLeftSlot" class="btn-icon left">
       <slot name="left"></slot>
@@ -87,7 +87,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 <style lang="css">
 @layer components {
   .input-button-core {
-    all: unset;
+    /* all: unset; */
 
     display: grid;
     grid-auto-flow: column;
@@ -108,53 +108,52 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     }
 
     /*
-  * Variants
-  **/
-    &.primary {
-      background-color: var(--theme-button-primary-surface);
-      color: var(--theme-button-primary-text);
-      border: var(--button-border-width) solid var(--theme-button-primary-border);
-      outline: var(--button-outline-width) solid var(--theme-button-primary-outline);
-
-      &:hover,
-      &:focus-visible {
-        background-color: var(--theme-button-secondary-surface);
-        color: var(--theme-button-secondary-text);
-        border-color: var(--theme-button-primary-border-active);
-        outline-color: var(--theme-button-primary-outline-active);
-      }
+    * Theming
+    **/
+    background-color: var(--theme-surface);
+    color: var(--theme-on-surface);
+    border: var(--button-border-width) solid var(--theme-border);
+    outline: var(--button-outline-width) solid var(--theme-ring);
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--theme-surface-hover);
+      color: var(--theme-text);
+      border-color: var(--theme-border-focus);
+      outline-color: var(--theme-ring);
+    }
 
-      &.is-pending {
-        background-color: color-mix(in oklab, var(--theme-button-primary-surface) 50%, transparent);
-      }
+    &.is-pending {
+      background-color: color-mix(in oklab, var(--theme-surface) 50%, transparent);
     }
 
     &.secondary {
-      background-color: var(--theme-button-secondary-surface);
-      border: var(--button-border-width) solid var(--theme-button-secondary-border);
-      color: var(--theme-button-secondary-text);
-      outline: var(--button-outline-width) solid var(--theme-button-secondary-outline);
+      background-color: var(--theme-surface-inverted);
+      border: var(--button-border-width) solid var(--theme-border);
+      color: var(--theme-text-inverted);
+      outline: var(--button-outline-width) solid var(--theme-ring);
 
       &:hover,
       &:focus-visible {
-        background-color: var(--theme-button-primary-surface);
-        color: var(--theme-button-primary-text);
-        border-color: var(--theme-button-secondary-border-active);
-        outline-color: var(--theme-button-secondary-outline-active);
+        background-color: var(--theme-surface);
+        color: var(--theme-on-surface);
+        border-color: var(--theme-border-focus);
+        outline-color: var(--theme-surface);
       }
     }
 
     &.tertiary {
-      background-color: var(--theme-button-tertiary-surface);
-      border: var(--button-border-width) solid transparent;
-      color: var(--theme-button-tertiary-text);
+      background-color: light-dark(var(--slate-01), transparent);
+      border: var(--button-border-width) solid var(--theme-border);
+      color: var(--theme-text);
       text-decoration: underline;
-      outline: var(--button-outline-width) solid transparent;
+      outline: var(--button-outline-width) solid var(--theme-border-focus);
 
       &:hover,
       &:focus-visible {
-        border-color: var(--theme-button-tertiary-border-active);
-        outline-color: var(--theme-button-tertiary-outline-active);
+        background-color: var(--theme-surface-hover);
+        border-color: var(--theme-border-focus);
+        outline-color: var(--theme-border-focus);
       }
     }
 
@@ -180,11 +179,8 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
     &[readonly] {
       opacity: 0.5;
-      &:hover,
-      &:focus-visible {
-        cursor: not-allowed;
-        pointer-events: none;
-      }
+      cursor: not-allowed;
+      pointer-events: none;
     }
 
     .button-text {

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -100,22 +100,22 @@ const flexDirection = ref(props.direction);
     --_white-space: nowrap;
   }
   background-color: var(--theme-input-surface);
-  border: var(--form-element-border-width) solid var(--theme-input-border);
-  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+  border: var(--form-element-border-width) solid var(--theme-border);
+  outline: var(--form-element-outline-width) solid transparent;
 
   box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
 
   &:hover {
     background-color: var(--theme-input-surface-hover);
-    border-color: var(--theme-input-border);
-    outline-color: var(--theme-input-outline-hover);
+    border-color: var(--theme-border);
+    outline-color: var(--theme-ring);
     outline-offset: var(--form-element-outline-offset-focus);
     cursor: pointer;
   }
 
   &:has(.input-checkbox-radio-core:focus-visible) {
-    background-color: var(--theme-input-surface-focus);
-    outline-color: var(--theme-input-outline-focus);
+    background-color: var(--theme-surface-subtle);
+    outline-color: var(--theme-border-focus);
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
@@ -126,7 +126,7 @@ const flexDirection = ref(props.direction);
   .input-checkbox-radio-options-button-label {
     display: flex;
     flex-grow: 1;
-    color: var(--theme-checkbox-label-text-color);
+    color: var(--colour-text-default);
     font-size: var(--input-font-size);
     width: 100%;
     min-height: var(--input-element-line-height);
@@ -145,7 +145,7 @@ const flexDirection = ref(props.direction);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--theme-checkbox-decorator-color);
+    color: var(--theme-text);
 
     .icon {
       height: var(--input-checkbox-decorator-icon-size);

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -113,8 +113,8 @@ const inputClasses = computed(() => [
   place-content: center;
 
   background-color: var(--theme-checkbox-symbol-surface);
-  border: 0.1rem solid var(--theme-input-border);
-  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+  border: 0.1rem solid var(--theme-border);
+  outline: var(--form-element-outline-width) solid transparent;
 
   height: var(--input-checked-element-size);
   width: var(--input-checked-element-size);
@@ -139,7 +139,7 @@ const inputClasses = computed(() => [
 
   &:not(:is(.button)) {
     &:has(input:focus-visible) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
       outline-offset: var(--form-element-outline-offset-focus);
     }
   }
@@ -150,7 +150,7 @@ const inputClasses = computed(() => [
 
       .input-checked-icon-checked,
       .icon {
-        color: var(--theme-checkbox-symbol-color);
+        color: var(--theme-text);
       }
     }
   }
@@ -164,7 +164,7 @@ const inputClasses = computed(() => [
 
     .input-checked-icon-checked,
     .icon {
-      color: var(--theme-checkbox-symbol-color);
+      color: var(--theme-text);
       height: var(--input-checked-icon-size);
       width: var(--input-checked-icon-size);
       box-shadow: var(--_box-shadow);

package/app/components/05.forms/input-copy/InputCopyCore.vue

@@ -79,7 +79,7 @@ watch(
     display: flex;
     align-items: stretch;
     overflow: hidden;
-    border: var(--form-element-border-width) solid var(--theme-input-border);
+    border: var(--form-element-border-width) solid var(--theme-border);
     border-radius: var(--form-input-border-radius);
     background-color: var(--theme-input-surface);
     transition: all var(--theme-form-transition-duration) ease-in-out;
@@ -101,19 +101,19 @@ watch(
 
     .input-copy-button.input-button-core {
       border-radius: 0;
-      border-inline-start: var(--form-element-border-width) solid var(--theme-input-border);
+      border-inline-start: var(--form-element-border-width) solid var(--theme-border);
       padding-inline: var(--input-padding-inline);
       min-width: var(--input-min-height);
-      background-color: var(--theme-button-secondary-surface);
-      color: var(--theme-button-secondary-text);
+      background-color: transparent;
+      color: var(--theme-text);
 
       &:hover {
-        background-color: var(--theme-button-primary-surface);
-        color: var(--theme-button-primary-text);
+        background-color: var(--theme-surface);
+        color: var(--theme-on-surface);
       }
 
       &:focus-visible {
-        outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+        outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
         outline-offset: -4px;
       }
     }

package/app/components/05.forms/input-number/InputNumberCore.vue

@@ -71,10 +71,10 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
   width: fit-content;
 
-  background-color: var(--theme-button-surface);
+  background-color: var(--theme-input-surface);
   border-radius: var(--form-element-border-width);
-  border: var(--form-element-border-width) solid var(--theme-input-border);
-  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+  border: var(--form-element-border-width) solid var(--theme-border);
+  outline: var(--form-element-outline-width) solid transparent;
   box-shadow: var(--_focus-box-shadow);
 
   .slot {
@@ -144,12 +144,12 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
     .left-slot {
       margin-inline-end: 0;
-      border-right: 2px solid var(--theme-button-surface-hover);
+      border-right: 2px solid var(--theme-input-surface-hover);
     }
 
     .right-slot {
       margin-inline-end: 0;
-      border-left: 2px solid var(--theme-button-surface-hover);
+      border-left: 2px solid var(--theme-input-surface-hover);
     }
   }
 }

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

@@ -81,18 +81,18 @@ 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-input-border);
+    border: var(--form-element-border-width) solid var(--theme-border);
     border-radius: var(--form-input-border-radius);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+    outline: var(--form-element-outline-width) solid transparent;
   }
 
   &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-input-border);
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
     background-color: var(--theme-input-surface);
   }
 
   &:has(select:focus-visible, :hover) {
-    outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+    outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
@@ -105,7 +105,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
       content: '';
       width: 0.8em;
       height: 0.5em;
-      background-color: var(--theme-input-border);
+      background-color: var(--theme-border);
       clip-path: polygon(100% 0%, 0 0%, 50% 100%);
     } */
 
@@ -128,7 +128,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
     &:open::picker(select) {
       opacity: 1;
-      border: var(--form-element-border-width) solid var(--theme-input-border);
+      border: var(--form-element-border-width) solid var(--theme-border);
       outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
 
       @starting-style {

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

@@ -138,25 +138,25 @@ onMounted(() => {
     position: relative;
 
     &.normal {
-      border: var(--form-element-border-width) solid var(--theme-input-border);
+      border: var(--form-element-border-width) solid var(--theme-border);
       border-radius: var(--form-input-border-radius);
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+      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-input-outline-focus);
+        outline: var(--form-element-outline-width-focus) solid var(--theme-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-input-outline-focus);
+        outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
         outline-offset: var(--form-element-outline-offset-focus);
       }
     }
 
     &.underlined {
-      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-input-border);
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
       padding-inline: var(--input-padding-inline);
     }
 
@@ -181,7 +181,7 @@ onMounted(() => {
         }
 
         &:is(:focus-visible) {
-          outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+          outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
           outline-offset: -4px;
         }
 

package/app/components/05.forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -180,13 +180,13 @@ updateElementClasses(["input-text-as-number", "has-left-button", "has-right-butt
 
           &.left-slot {
             .input-button-core {
-              border-right: var(--form-element-border-width) solid var(--theme-input-border);
+              border-right: var(--form-element-border-width) solid var(--theme-border);
             }
           }
 
           &.right-slot {
             .input-button-core {
-              border-left: var(--form-element-border-width) solid var(--theme-input-border);
+              border-left: var(--form-element-border-width) solid var(--theme-border);
             }
           }
         }