srcdev-nuxt-components 9.6.9 → 9.6.11

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

@@ -4,23 +4,29 @@
     :type="!isLink ? props.type : undefined"
     :href="isLink ? props.href : undefined"
     :readonly="!isLink ? props.readonly : undefined"
-    :aria-disabled="!isLink ? props.readonly : undefined"
+    :aria-disabled="!isLink && props.readonly ? 'true' : undefined"
     data-testid="input-button"
     :data-theme="theme"
+    :data-variant="variant"
+    :data-pill="isPill ? '' : undefined"
+    :data-pending="isPending ? '' : undefined"
+    :data-pending-effect="hasPendingEffect ? '' : undefined"
+    :data-link="isLink ? '' : undefined"
+    :data-icon-only="hasIconOnlySlot() ? '' : undefined"
     class="input-button"
-    :class="buttonClasses()"
+    :class="elementClasses"
     @click.capture="guardReadonly"
   >
     <PendingEffect v-if="hasPendingEffect" :theme="theme" />
 
-    <span v-if="hasLeftSlot()" class="btn-icon left">
+    <span v-if="hasLeftSlot()" class="input-button-icon" data-slot="left">
       <slot name="left"></slot>
     </span>
-    <span class="button-text" :class="[{ 'sr-only': hasIconOnlySlot() }]">{{ buttonText }}</span>
-    <span v-if="hasRightSlot()" class="btn-icon right">
+    <span class="input-button-text" :class="{ 'sr-only': hasIconOnlySlot() }">{{ buttonText }}</span>
+    <span v-if="hasRightSlot()" class="input-button-icon" data-slot="right">
       <slot name="right"></slot>
     </span>
-    <span v-if="hasIconOnlySlot()" class="btn-icon icon-only">
+    <span v-if="hasIconOnlySlot()" class="input-button-icon" data-slot="icon-only">
       <slot name="iconOnly"></slot>
     </span>
   </component>
@@ -77,22 +83,10 @@ const tag = computed(() => {
   return "button";
 });
 
-// Cache slot computations for better performance
 const hasLeftSlot = () => Boolean(slots.left && !slots.iconOnly);
 const hasRightSlot = () => Boolean(slots.right && !slots.iconOnly);
 const hasIconOnlySlot = () => Boolean(slots.iconOnly);
 
-// Combine all button classes into a single computed
-const buttonClasses = () => [
-  props.variant,
-  elementClasses.value,
-  { "icon-only": hasIconOnlySlot() },
-  { "pending-effect": props.hasPendingEffect },
-  { "is-pending": props.isPending },
-  { pill: props.isPill },
-  { "is-link": isLink.value },
-];
-
 const guardReadonly = (event: MouseEvent) => {
   if (!props.readonly) return;
   event.preventDefault();
@@ -128,47 +122,32 @@ watch(
     overflow: hidden;
     transition: all var(--control-transition-duration) var(--control-transition-ease);
 
-    &.is-link {
+    &[data-link] {
       display: inline-grid;
     }
 
-    &.pending-effect {
+    &[data-pending-effect] {
       overflow: visible;
     }
 
-    /*
-    * Theming
-    * Every colour is a public --input-button-{variant}-{property} token, inline-fallback to
-    * the shared theme slot (see theming-component-token-pattern.md for why: overriding one
-    * variant here never touches the --theme-* slots other components read).
-    *
-    * Flat by default: border defaults to the variant's own surface colour (so the resting state
-    * shows no visible edge) and outline defaults to fully transparent — outline is reserved for
-    * the focus-visible ring, not used to reinforce the flat look. Hover darkens the surface via
-    * color-mix (always darker, regardless of which direction the underlying theme ramp runs in
-    * light vs dark mode — no more "hover looks lighter" surprises) and carries the border along
-    * with it, still flat; outline stays transparent through hover too.
-    * focus-visible is deliberately its own block, not grouped with :hover — it's the one state
-    * that gets a real, separately-themeable a11y indicator, and its outline-width/-offset (set
-    * below, in Shared States) give it a visible ring regardless of the border/outline being
-    * invisible everywhere else.
-    * --_surface is a private local (not a public token) — it exists purely so -hover/-border/-ring
-    * can color-mix() off the SAME resolved value a consumer's --input-button-{variant}-surface
-    * override produces, without every derived token repeating that fallback chain itself.
-    **/
-    &.primary {
+    /* Primary is filled, secondary outlined, tertiary text-only; inline has no colours (wrappers style it).
+       Primary and secondary carry a light shadow ring; hover draws the outline over its inner edge. */
+    &[data-variant="primary"] {
       --_surface: var(--input-button-primary-surface, var(--theme-surface));
       --_surface-hover: var(--input-button-primary-surface-hover, color-mix(in oklab, var(--_surface) 85%, black));
+      --_primary-border-hover: var(--input-button-primary-border-hover, var(--_surface-hover));
 
       background-color: var(--_surface);
       color: var(--input-button-primary-text, var(--theme-on-surface));
       border: var(--button-border-width) solid var(--input-button-primary-border, var(--_surface));
       outline: var(--button-outline-width) solid var(--input-button-primary-ring, transparent);
+      box-shadow: 0 0 0 var(--input-button-shadow-width, var(--form-element-shadow-width))
+        var(--input-button-primary-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       &:hover {
         background-color: var(--_surface-hover);
-        border-color: var(--input-button-primary-border-hover, var(--_surface-hover));
-        outline-color: var(--input-button-primary-ring-hover, transparent);
+        border-color: var(--_primary-border-hover);
+        outline-color: var(--input-button-primary-ring-hover, var(--_primary-border-hover));
       }
 
       &:focus-visible {
@@ -177,9 +156,7 @@ watch(
       }
     }
 
-    &.is-pending {
-      /* Always the primary surface regardless of variant — pre-existing behaviour, not
-         something this migration changes. */
+    &[data-pending] {
       background-color: color-mix(
         in oklab,
         var(--input-button-primary-surface, var(--theme-surface)) 50%,
@@ -187,22 +164,21 @@ watch(
       );
     }
 
-    &.secondary {
-      --_surface: var(--input-button-secondary-surface, var(--theme-surface-inverted));
-      --_surface-hover: var(
-        --input-button-secondary-surface-hover,
-        color-mix(in oklab, var(--_surface) 85%, black)
-      );
+    &[data-variant="secondary"] {
+      --_secondary-border: var(--input-button-secondary-border, var(--theme-surface));
+      --_secondary-border-hover: var(--input-button-secondary-border-hover, var(--_secondary-border));
 
-      background-color: var(--_surface);
-      color: var(--input-button-secondary-text, var(--theme-text-inverted));
-      border: var(--button-border-width) solid var(--input-button-secondary-border, var(--_surface));
+      background-color: var(--input-button-secondary-surface, transparent);
+      color: var(--input-button-secondary-text, var(--theme-surface));
+      border: var(--button-border-width) solid var(--_secondary-border);
       outline: var(--button-outline-width) solid var(--input-button-secondary-ring, transparent);
+      box-shadow: 0 0 0 var(--input-button-shadow-width, var(--form-element-shadow-width))
+        var(--input-button-secondary-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       &:hover {
-        background-color: var(--_surface-hover);
-        border-color: var(--input-button-secondary-border-hover, var(--_surface-hover));
-        outline-color: var(--input-button-secondary-ring-hover, transparent);
+        background-color: var(--input-button-secondary-surface-hover, var(--theme-surface-subtle));
+        border-color: var(--_secondary-border-hover);
+        outline-color: var(--input-button-secondary-ring-hover, var(--_secondary-border-hover));
       }
 
       &:focus-visible {
@@ -211,22 +187,15 @@ watch(
       }
     }
 
-    &.tertiary {
-      --_surface: var(--input-button-tertiary-surface, var(--slate-01));
-      --_surface-hover: var(
-        --input-button-tertiary-surface-hover,
-        color-mix(in oklab, var(--_surface) 85%, black)
-      );
-
-      background-color: var(--_surface);
-      color: var(--input-button-tertiary-text, var(--theme-text));
-      border: var(--button-border-width) solid var(--input-button-tertiary-border, var(--_surface));
+    &[data-variant="tertiary"] {
+      background-color: var(--input-button-tertiary-surface, transparent);
+      color: var(--input-button-tertiary-text, var(--theme-surface));
+      border: var(--button-border-width) solid var(--input-button-tertiary-border, transparent);
       outline: var(--button-outline-width) solid var(--input-button-tertiary-ring, transparent);
-      text-decoration: underline;
 
       &:hover {
-        background-color: var(--_surface-hover);
-        border-color: var(--input-button-tertiary-border-hover, var(--_surface-hover));
+        background-color: var(--input-button-tertiary-surface-hover, var(--theme-surface-subtle));
+        border-color: var(--input-button-tertiary-border-hover, transparent);
         outline-color: var(--input-button-tertiary-ring-hover, transparent);
       }
 
@@ -236,38 +205,21 @@ watch(
       }
     }
 
-    /* Trial (2026-09-27): where supported, text picks black or white from its own surface, per
-       state. An explicit --input-button-{variant}-text still wins. Remove this block to revert. */
+    /* Trial (2026-09-27): primary text picks black or white from its own surface. Remove to revert. */
     @supports (color: contrast-color(red)) {
-      &.primary {
+      &[data-variant="primary"] {
         color: var(--input-button-primary-text, contrast-color(var(--_surface)));
 
         &:hover {
           color: var(--input-button-primary-text, contrast-color(var(--_surface-hover)));
         }
       }
-
-      &.secondary {
-        color: var(--input-button-secondary-text, contrast-color(var(--_surface)));
-
-        &:hover {
-          color: var(--input-button-secondary-text, contrast-color(var(--_surface-hover)));
-        }
-      }
-
-      &.tertiary {
-        color: var(--input-button-tertiary-text, contrast-color(var(--_surface)));
-
-        &:hover {
-          color: var(--input-button-tertiary-text, contrast-color(var(--_surface-hover)));
-        }
-      }
     }
 
-    &.primary,
-    &.secondary,
-    &.tertiary {
-      &.pill {
+    &[data-variant="primary"],
+    &[data-variant="secondary"],
+    &[data-variant="tertiary"] {
+      &[data-pill] {
         border-radius: 100vw;
       }
     }
@@ -290,10 +242,10 @@ watch(
       pointer-events: none;
     }
 
-    .button-text {
+    & .input-button-text {
       display: inline-block;
       min-inline-size: 0;
-      white-space: var(--input-button-text-white-space, nowrap);
+      white-space: var(--input-button-text-white-space, normal);
       overflow-wrap: anywhere;
       font-size: var(--button-font-size);
       line-height: var(--button-line-height);
@@ -301,22 +253,22 @@ watch(
       text-transform: var(--button-text-transform);
     }
 
-    .btn-icon {
+    & .input-button-icon {
       display: flex;
 
-      .icon {
+      & .icon {
         display: inline-block;
         font-size: var(--input-icon-size);
       }
     }
 
-    &.icon-only {
+    &[data-icon-only] {
       aspect-ratio: 1;
       border-radius: var(--button-border-radius-icon-only);
       margin: 0;
       padding: 0;
 
-      .btn-icon {
+      & .input-button-icon {
         margin: 1.2rem;
       }
     }

package/app/components/05.forms/input-button/playwright/input-button.playwright.ts

@@ -2,7 +2,7 @@ import { test, expect, type Page } from "@playwright/test";
 
 // --- Config ---
 const STORYBOOK_URL = "http://127.0.0.1:6006";
-const STORY_BASE = "components-forms-input-button-inputbuttoncore";
+const STORY_BASE = "components-forms-input-button-inputbutton";
 const BUTTON_TIMEOUT = 15000;
 
 // --- Helpers ---

package/app/components/05.forms/input-button/stories/InputButton.stories.ts

@@ -1,13 +1,16 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../InputButton.vue";
 import InputText from "../../input-text/InputText.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 interface InputButtonStoryArgs {
   type: "submit" | "button" | "reset";
   theme: "default" | "success" | "error" | "warning";
   variant: "primary" | "secondary" | "tertiary" | "inline";
   buttonText: string;
+  isPill: boolean;
   styleClassPassthrough: string[];
   isPending: boolean;
   hasPendingEffect: boolean;
@@ -75,7 +78,7 @@ export default {
     variant: {
       control: { type: "select" },
       options: ["primary", "secondary", "tertiary", "inline"],
-      description: "Button variant/style",
+      description: "primary: filled. secondary: outlined. tertiary: text-only. inline: no colours, for wrapper components that style the button themselves",
       table: {
         category: "Styling",
       },
@@ -201,7 +204,7 @@ export default {
     isPending: false,
     hasPendingEffect: false,
     readonly: false,
-    isPill: false, // Ensure isPill is present and defaulted
+    isPill: false,
     useLeftSlot: false,
     useRightSlot: false,
     useIconOnlySlot: false,
@@ -215,7 +218,45 @@ export default {
     rightIconName: "mdi:arrow-right",
     iconOnlyName: "mdi:flash",
   },
-} as Meta<typeof StorybookComponent>;
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The library's button. Renders a `<button>`, or a link when `href` is set (`NuxtLink` for a `/` path unless `external`). `variant` (primary, secondary, tertiary, inline) and `theme` pick the colours, `is-pill` rounds it, `readonly` dims it and blocks clicks, and `is-pending` with `has-pending-effect` animates a border while work runs. Label copy is `button-text`; the `left`/`right` slots add icons beside it, and `iconOnly` replaces it (the text stays as screen-reader text). The Slots and Icons controls are story-only. It's also the action button inside [InputCopy](?path=/story/molecules-input-copy--default), [CookieConsentBanner](?path=/story/molecules-cookieconsentbanner--default) and the step buttons of [InputNumberField](?path=/story/components-forms-input-number-inputnumberfield--default).",
+      },
+    },
+  },
+} as Meta<InputButtonStoryArgs>;
+
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0; font-size: 1.4rem;";
+const usedByNote = `
+  <p style="${storyNoteStyle}">
+    Also the action button inside
+    <a href="/?path=/story/molecules-input-copy--default" target="_top">InputCopy</a>,
+    <a href="/?path=/story/molecules-cookieconsentbanner--default" target="_top">CookieConsentBanner</a>
+    (variant inline, styled by the banner's tokens) and the step buttons of
+    <a href="/?path=/story/components-forms-input-number-inputnumberfield--default" target="_top">InputNumberField</a>.
+  </p>
+`;
+
+const storyOnlyArgs = [
+  "useLeftSlot",
+  "useRightSlot",
+  "useIconOnlySlot",
+  "leftSlotContent",
+  "rightSlotContent",
+  "iconOnlyContent",
+  "leftIconName",
+  "rightIconName",
+  "iconOnlyName",
+  "useLeftIcon",
+  "useRightIcon",
+  "useIconOnly",
+] as const;
+
+const stripStoryArgs = (args: InputButtonStoryArgs) =>
+  Object.fromEntries(Object.entries(args).filter(([key]) => !(storyOnlyArgs as readonly string[]).includes(key)));
 
 const Template: StoryFn<InputButtonStoryArgs> = (args) => ({
   components: { StorybookComponent },
@@ -228,14 +269,18 @@ const Template: StoryFn<InputButtonStoryArgs> = (args) => ({
       }
     };
 
+    const componentArgs = computed(() => stripStoryArgs(args));
+
     return {
       args,
+      componentArgs,
       clickCount,
       handleClick,
     };
   },
   template: `
-    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;margin: 36px;">
+    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin: 3.6rem;">
+      ${usedByNote}
       <!-- :key forces a remount when any slot-visibility arg changes. Verified the args
            themselves ARE reactive here (a plain {{ args.useLeftSlot }} interpolation updates
            live on toggle) — the bug is narrower: Vue's compiled-at-runtime string template
@@ -244,10 +289,11 @@ const Template: StoryFn<InputButtonStoryArgs> = (args) => ({
            Toggling a control changed the fallthrough attribute (confirmed via useleftslot="true"
            in the rendered DOM) but never actually added/removed the slot content until a hard
            refresh. Remounting sidesteps whatever the underlying slot-stability quirk is, rather
-           than chasing it further. -->
+           than chasing it further. The story-only args are stripped before v-bind, so they no
+           longer land on the button as attributes. -->
       <StorybookComponent
         :key="[args.useLeftSlot, args.useLeftIcon, args.useRightSlot, args.useRightIcon, args.useIconOnlySlot, args.useIconOnly].join(',')"
-        v-bind="args"
+        v-bind="componentArgs"
         @click="handleClick"
       >
         <template v-if="args.useLeftSlot || args.useLeftIcon" #left>
@@ -276,6 +322,9 @@ Default.args = {
   useLeftSlot: false,
   useRightSlot: false,
 };
+Default.parameters = {
+  docs: { description: { story: "Text only. Every prop is live in Controls, including the pending, pill and readonly states." } },
+};
 
 export const WithBothEmojiIcons = Template.bind({});
 WithBothEmojiIcons.args = {
@@ -285,6 +334,9 @@ WithBothEmojiIcons.args = {
   leftSlotContent: "💸",
   rightSlotContent: "✅",
 };
+WithBothEmojiIcons.parameters = {
+  docs: { description: { story: "Plain content in the `left` and `right` slots." } },
+};
 
 export const WithBothNuxtIconComponents = Template.bind({});
 WithBothNuxtIconComponents.args = {
@@ -294,6 +346,9 @@ WithBothNuxtIconComponents.args = {
   leftIconName: "mdi:arrow-left",
   rightIconName: "mdi:arrow-right",
 };
+WithBothNuxtIconComponents.parameters = {
+  docs: { description: { story: "`<Icon class=\"icon\">` in both slots, sized by `--input-icon-size`." } },
+};
 
 export const EmojiIconOnly = Template.bind({});
 EmojiIconOnly.args = {
@@ -301,6 +356,9 @@ EmojiIconOnly.args = {
   useIconOnlySlot: true,
   iconOnlyContent: "⚡",
 };
+EmojiIconOnly.parameters = {
+  docs: { description: { story: "The `iconOnly` slot makes the button square (`data-icon-only`) and keeps `button-text` as screen-reader text." } },
+};
 
 export const NuxtIconOnlyComponent = Template.bind({});
 NuxtIconOnlyComponent.args = {
@@ -308,6 +366,9 @@ NuxtIconOnlyComponent.args = {
   useIconOnly: true,
   iconOnlyName: "mdi:chevron-right-circle-outline",
 };
+NuxtIconOnlyComponent.parameters = {
+  docs: { description: { story: "Icon-only with an `<Icon>`; the accessible name still comes from `button-text`." } },
+};
 
 // Composition check, not a props demo: confirms InputButton's --button-min-height (defaults
 // to var(--input-min-height)) actually keeps it height-aligned with an inline text input, the
@@ -334,4 +395,80 @@ const InlineTemplate: StoryFn = () => ({
 export const InlineWithTextInput = InlineTemplate.bind({});
 
 // Fixed showcase: hardcoded values, so Controls would do nothing here.
-InlineWithTextInput.parameters = { controls: { disable: true } };
+InlineWithTextInput.parameters = {
+  controls: { disable: true },
+  docs: {
+    description: {
+      story: "Composition check: `--button-min-height` defaults to `--input-min-height`, so the button lines up with an inline text input. Controls do nothing here.",
+    },
+  },
+};
+
+const stressLabels = [
+  "Jetzt unverbindlich einen kostenlosen Beratungstermin vereinbaren",
+  "Datenschutzgrundverordnungskonformitätsbestätigung",
+  "https://example.com/a/very/long/unbroken/url/for/the/button/label",
+  "<b>not bold</b>",
+  "🎉 Book now",
+  "احجز الآن",
+  "x",
+  "",
+];
+
+const StressTemplate: StoryFn<InputButtonStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const componentArgs = computed(() => {
+      const { buttonText: _buttonText, ...rest } = stripStoryArgs(args);
+      return rest;
+    });
+    return { args, componentArgs, stressLabels };
+  },
+  template: `
+    <div style="display: grid; gap: 2.4rem;">
+      <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;">
+        <StorybookComponent v-for="(label, index) in stressLabels" :key="index" v-bind="componentArgs" :button-text="label" />
+        <StorybookComponent v-bind="componentArgs" :button-text="stressLabels[0]">
+          <template #left><Icon name="mdi:calendar" class="icon" /></template>
+          <template #right><Icon name="mdi:arrow-right" class="icon" /></template>
+        </StorybookComponent>
+      </div>
+      <div style="display: flex; flex-wrap: wrap; gap: 1.2rem;">
+        <StorybookComponent v-bind="componentArgs" variant="secondary" button-text="Zurück zur vorherigen Seite" />
+        <StorybookComponent v-bind="componentArgs" :button-text="stressLabels[0]" />
+      </div>
+    </div>
+  `,
+});
+
+export const StressTest = StressTemplate.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = { isPill: true };
+StressTest.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>
+    `,
+  }),
+];
+StressTest.parameters = {
+  layout: "fullscreen",
+  initialCanvas: "mobileCanvas",
+  docs: {
+    story: { inline: false, height: "900px" },
+    description: {
+      story:
+        "Long German copy, an unbroken compound word, a long URL, HTML-like text, emoji, right-to-left text, a single character and an empty label, then a long label with icons on both sides and a wrapping row of two buttons. Check at every canvas width: no button pushes past the dashed outline, long labels wrap inside the button (`--input-button-text-white-space` defaults to `normal`), icons keep their size, markup renders as text, and the pill shape still reads with several lines. Toggle variant, pill and pending in Controls. Button text is never line-clamped: a cut-off action label can't be trusted.",
+    },
+  },
+};