srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/05.forms/patterns/stories/MigratedFieldsForm.stories.ts

@@ -1,13 +1,18 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { reactive } from "vue";
-import InputTextWithLabel from "../../input-text/variants/InputTextWithLabel.vue";
-import InputRangeDefault from "../../input-range/variants/InputRangeDefault.vue";
-import InputNumberDefault from "../../input-number/variants/InputNumberDefault.vue";
-import InputTextareaWithLabel from "../../input-textarea/variants/InputTextareaWithLabel.vue";
-import InputSelectWithLabel from "../../input-select/variants/InputSelectWithLabel.vue";
-import ToggleSwitchWithLabel from "../../toggle-switch/variants/ToggleSwitchWithLabel.vue";
-import InputButtonCore from "../../input-button/InputButtonCore.vue";
+import InputTextWithLabel from "../../input-text/InputTextWithLabel.vue";
+import InputRangeDefault from "../../input-range/InputRangeDefault.vue";
+import InputNumberField from "../../input-number/InputNumberField.vue";
+import InputTextareaWithLabel from "../../input-textarea/InputTextareaWithLabel.vue";
+import InputSelectWithLabel from "../../input-select/InputSelectWithLabel.vue";
+import ToggleSwitchWithLabel from "../../toggle-switch/ToggleSwitchWithLabel.vue";
+import MultipleCheckboxes from "../../input-checkbox/MultipleCheckboxes.vue";
+import SingleCheckbox from "../../input-checkbox/SingleCheckbox.vue";
+import MultipleRadiobuttons from "../../input-radio/MultipleRadiobuttons.vue";
+import TripleToggleSwitch from "../../triple-toggle-switch/TripleToggleSwitch.vue";
+import InputButton from "../../input-button/InputButton.vue";
 import FormField from "../../form-field/FormField.vue";
+import FormWrapper from "../../form-wrapper/FormWrapper.vue";
 import HeroText from "../../../01.atoms/text-blocks/hero-text/HeroText.vue";
 import type { InputUiVariant, IFormMultipleOptions } from "~/types/forms/types.forms.d";
 
@@ -17,11 +22,23 @@ interface MigratedFieldsFormStoryArgs {
 
 // Living reference, not a component of its own — one field per 05.forms component group that
 // currently scores 5/5 in the Component Ledger (.claude/component-ledger/audit.json: tier folder,
-// tests, story, skill doc, CONSUMER-STYLING.md, VS Code snippet). As of 2026-09-23 that's
-// InputTextCore (via InputTextWithLabel), InputRangeCore (via InputRangeDefault), InputNumberCore
-// (via InputNumberDefault), InputTextareaCore (via InputTextareaWithLabel), InputSelectCore
-// (via InputSelectWithLabel), and ToggleSwitchCore (via ToggleSwitchWithLabel) — every other
-// 05.forms component (checkbox, radio, ...) is still mid-migration.
+// tests, story, skill doc, CONSUMER-STYLING.md, VS Code snippet). As of 2026-09-27 that's
+// InputTextCore (via InputTextWithLabel), InputRangeCore (via InputRangeDefault), InputNumber
+// (via InputNumberField), InputTextareaCore (via InputTextareaWithLabel), InputSelectCore
+// (via InputSelectWithLabel), ToggleSwitchCore (via ToggleSwitchWithLabel), and input-checkbox
+// (MultipleCheckboxes + SingleCheckbox), plus input-radio (MultipleRadiobuttons, 5/5 as of
+// 2026-09-27). FormField (5/5 as of 2026-09-26) is the layout wrapper
+// around every field below, and FormFieldset (5/5 as of 2026-09-26) is rendered inside the
+// checkbox fields, FormWrapper (5/5 as of 2026-09-26) wraps the form itself, and InputError
+// (5/5 as of 2026-09-26) is the error strip every field below renders, so none of the four
+// gets a field of its own. InputDescription (5/5 as of 2026-09-26) is the help text under the
+// "Full name" field, rendered through InputTextWithLabel's descriptionText slot. InputLabel (5/5 as
+// of 2026-09-26) is the <label> every labelled field below renders, so it has no field of its own
+// either. The input-checkbox-radio family (InputCheckboxRadio/Field/Button, 5/5 as of 2026-09-27)
+// renders every checkbox and radio below, so it has no field of its own. TripleToggleSwitch (5/5 as of
+// 2026-09-27) is the "Theme preference" field; it has no Field wrapper or error state of its own,
+// so it sits under a plain caption and always has a value. Every other 05.forms component
+// (radio, ...) is still mid-migration.
 // Add a field here each time /migrate-component brings another 05.forms component up to 5/5, so
 // this story doubles as a visible migration-progress tracker rather than living only in the
 // ledger's HTML output. No validation wiring (useZodValidation/zod) here — that's the consuming
@@ -45,12 +62,17 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
   components: {
     InputTextWithLabel,
     InputRangeDefault,
-    InputNumberDefault,
+    InputNumberField,
     InputTextareaWithLabel,
     InputSelectWithLabel,
     ToggleSwitchWithLabel,
-    InputButtonCore,
+    MultipleCheckboxes,
+    SingleCheckbox,
+    MultipleRadiobuttons,
+    TripleToggleSwitch,
+    InputButton,
     FormField,
+    FormWrapper,
     HeroText,
   },
   setup() {
@@ -61,6 +83,49 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
       notes: "",
       colour: "",
       subscribe: false,
+      services: [] as string[],
+      contactMethod: "",
+      themePreference: "system",
+      terms: false,
+    });
+
+    const serviceOptions = reactive<IFormMultipleOptions>({
+      data: [
+        { id: "1", name: "services", value: "cut", label: "Cut" },
+        { id: "2", name: "services", value: "colour", label: "Colour" },
+        { id: "3", name: "services", value: "styling", label: "Styling" },
+      ],
+      total: 3,
+      skip: 0,
+      limit: 10,
+    });
+
+    const contactMethodOptions = reactive<IFormMultipleOptions>({
+      data: [
+        { id: "1", name: "contactMethod", value: "email", label: "Email" },
+        { id: "2", name: "contactMethod", value: "phone", label: "Phone" },
+        { id: "3", name: "contactMethod", value: "text", label: "Text message" },
+      ],
+      total: 3,
+      skip: 0,
+      limit: 10,
+    });
+
+    const themeOptions = reactive<IFormMultipleOptions>({
+      data: [
+        {
+          id: "themePreference-system",
+          name: "themePreference",
+          value: "system",
+          label: "System",
+          icon: "material-symbols:night-sight-auto-sharp",
+        },
+        { id: "themePreference-light", name: "themePreference", value: "light", label: "Light", icon: "radix-icons:sun" },
+        { id: "themePreference-dark", name: "themePreference", value: "dark", label: "Dark", icon: "radix-icons:moon" },
+      ],
+      total: 3,
+      skip: 0,
+      limit: 3,
     });
 
     const colourOptions = reactive<IFormMultipleOptions>({
@@ -77,14 +142,17 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
     // Demo-only "validation" — a real consuming app would wire this through something like
     // useZodValidation instead (see this file's top comment). Kept deliberately simple so the
     // Continue button has an obvious, reliable way to trigger each field's error state for
-    // exercising InputTextWithLabel/InputRangeDefault/InputNumberDefault/InputTextareaWithLabel/
-    // InputSelectWithLabel's error UI in Storybook.
+    // exercising InputTextWithLabel/InputRangeDefault/InputNumberField/InputTextareaWithLabel/
+    // InputSelectWithLabel/MultipleCheckboxes/MultipleRadiobuttons/SingleCheckbox's error UI in Storybook.
     const errors = reactive({
       fullName: "",
       budget: "",
       quantity: "",
       notes: "",
       colour: "",
+      services: "",
+      contactMethod: "",
+      terms: "",
     });
 
     const validate = () => {
@@ -93,6 +161,9 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
       errors.quantity = state.quantity >= 1 ? "" : "Quantity must be at least 1";
       errors.notes = state.notes.trim() ? "" : "Notes are required";
       errors.colour = state.colour ? "" : "Please choose a colour";
+      errors.services = state.services.length ? "" : "Choose at least one service";
+      errors.contactMethod = state.contactMethod ? "" : "Choose how we should contact you";
+      errors.terms = state.terms ? "" : "You must agree to the terms";
     };
 
     const clearErrors = () => {
@@ -101,9 +172,22 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
       errors.quantity = "";
       errors.notes = "";
       errors.colour = "";
+      errors.services = "";
+      errors.contactMethod = "";
+      errors.terms = "";
     };
 
-    return { args, state, errors, validate, clearErrors, colourOptions };
+    return {
+      args,
+      state,
+      errors,
+      validate,
+      clearErrors,
+      colourOptions,
+      serviceOptions,
+      contactMethodOptions,
+      themeOptions,
+    };
   },
   template: `
     <div style="margin: 36px; max-width: 480px;">
@@ -116,92 +200,149 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
       <p style="margin: 0 0 2rem 0; color: #475569; font-size: 1.4rem;">
         One field per 05.forms component that's fully migrated (5/5 on the Component Ledger).
         Click Continue with an empty name, a budget under £100, a quantity under 1, empty notes,
-        or no colour chosen to see the error states.
+        no colour or no contact method chosen to see the error states.
       </p>
 
-      <form novalidate @submit.prevent="validate">
-        <FormField width="wide" :has-gutter="false">
-          <InputTextWithLabel
-            v-model="state.fullName"
-            type="text"
-            name="fullName"
-            label="Full name"
-            placeholder="eg. Jane Smith"
-            :error-message="errors.fullName"
-            :field-has-error="!!errors.fullName"
-            :required="true"
-            :input-variant="args.inputVariant"
-          />
-        </FormField>
-
-        <FormField width="wide" :has-gutter="false">
-          <InputRangeDefault
-            v-model="state.budget"
-            name="budget"
-            label="Budget (£)"
-            :min="0"
-            :max="500"
-            :step="10"
-            :error-message="errors.budget"
-            :field-has-error="!!errors.budget"
-          >
-            <template #left><span aria-hidden="true">−</span></template>
-            <template #right><span aria-hidden="true">+</span></template>
-          </InputRangeDefault>
-        </FormField>
-
-        <FormField width="wide" :has-gutter="false">
-          <InputNumberDefault
-            v-model="state.quantity"
-            name="quantity"
-            label="Quantity"
-            :min="1"
-            :max="10"
-            :error-message="errors.quantity"
-            :field-has-error="!!errors.quantity"
-            :input-variant="args.inputVariant"
-          >
-            <template #left><span aria-hidden="true">−</span></template>
-            <template #right><span aria-hidden="true">+</span></template>
-          </InputNumberDefault>
-        </FormField>
-
-        <FormField width="wide" :has-gutter="false">
-          <InputTextareaWithLabel
-            v-model="state.notes"
-            name="notes"
-            label="Notes"
-            placeholder="Anything else we should know?"
-            :error-message="errors.notes"
-            :field-has-error="!!errors.notes"
-            :input-variant="args.inputVariant"
-          />
-        </FormField>
-
-        <FormField width="wide" :has-gutter="false">
-          <InputSelectWithLabel
-            v-model="state.colour"
-            v-model:field-data="colourOptions"
-            name="colour"
-            label="Favourite colour"
-            placeholder="Choose a colour"
-            :error-message="errors.colour"
-            :field-has-error="!!errors.colour"
-            :input-variant="args.inputVariant"
-          />
-        </FormField>
-
-        <FormField width="wide" :has-gutter="false">
-          <ToggleSwitchWithLabel v-model="state.subscribe" name="subscribe" label="Subscribe to updates" />
-        </FormField>
-
-        <FormField width="wide" :has-gutter="false">
-          <div style="display: flex; gap: 1.2rem;">
-            <InputButtonCore type="submit" variant="primary" button-text="Continue" />
-            <InputButtonCore type="button" variant="tertiary" button-text="Clear errors" @click="clearErrors" />
-          </div>
-        </FormField>
-      </form>
+      <FormWrapper width="medium">
+        <form novalidate @submit.prevent="validate">
+          <FormField width="wide" :has-gutter="false">
+            <InputTextWithLabel
+              v-model="state.fullName"
+              type="text"
+              name="fullName"
+              label="Full name"
+              placeholder="eg. Jane Smith"
+              :error-message="errors.fullName"
+              :field-has-error="!!errors.fullName"
+              :required="true"
+              :input-variant="args.inputVariant"
+            >
+              <template #descriptionText>As it appears on your ID</template>
+            </InputTextWithLabel>
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <InputRangeDefault
+              v-model="state.budget"
+              name="budget"
+              label="Budget (£)"
+              :min="0"
+              :max="500"
+              :step="10"
+              :error-message="errors.budget"
+              :field-has-error="!!errors.budget"
+            >
+              <template #left><span aria-hidden="true">−</span></template>
+              <template #right><span aria-hidden="true">+</span></template>
+            </InputRangeDefault>
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <InputNumberField
+              v-model="state.quantity"
+              name="quantity"
+              label="Quantity"
+              :min="1"
+              :max="10"
+              :error-message="errors.quantity"
+              :field-has-error="!!errors.quantity"
+              :input-variant="args.inputVariant"
+            >
+              <template #left><span aria-hidden="true">−</span></template>
+              <template #right><span aria-hidden="true">+</span></template>
+            </InputNumberField>
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <InputTextareaWithLabel
+              v-model="state.notes"
+              name="notes"
+              label="Notes"
+              placeholder="Anything else we should know?"
+              :error-message="errors.notes"
+              :field-has-error="!!errors.notes"
+              :input-variant="args.inputVariant"
+            />
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <InputSelectWithLabel
+              v-model="state.colour"
+              v-model:field-data="colourOptions"
+              name="colour"
+              label="Favourite colour"
+              placeholder="Choose a colour"
+              :error-message="errors.colour"
+              :field-has-error="!!errors.colour"
+              :input-variant="args.inputVariant"
+            />
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <ToggleSwitchWithLabel v-model="state.subscribe" name="subscribe" label="Subscribe to updates" />
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <MultipleCheckboxes
+              v-model="state.services"
+              v-model:field-data="serviceOptions"
+              name="services"
+              legend="Services of interest"
+              options-layout="inline"
+              :is-button="true"
+              :error-message="errors.services"
+              :field-has-error="!!errors.services"
+              :input-variant="args.inputVariant"
+            />
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <MultipleRadiobuttons
+              v-model="state.contactMethod"
+              v-model:field-data="contactMethodOptions"
+              name="contactMethod"
+              legend="Preferred contact method"
+              options-layout="inline"
+              :required="true"
+              :error-message="errors.contactMethod"
+              :field-has-error="!!errors.contactMethod"
+              :input-variant="args.inputVariant"
+            />
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <div style="display: grid; gap: 0.8rem; justify-items: start;">
+              <span>Theme preference</span>
+              <TripleToggleSwitch
+                v-model="state.themePreference"
+                v-model:field-data="themeOptions"
+                name="themePreference"
+                aria-label="Theme preference"
+              />
+            </div>
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <SingleCheckbox
+              v-model="state.terms"
+              name="terms"
+              legend="Terms and conditions"
+              label="I agree to the terms"
+              :required="true"
+              :error-message="errors.terms"
+              :field-has-error="!!errors.terms"
+              :input-variant="args.inputVariant"
+            />
+          </FormField>
+
+          <FormField width="wide" :has-gutter="false">
+            <div style="display: flex; gap: 1.2rem;">
+              <InputButton type="submit" variant="primary" button-text="Continue" />
+              <InputButton type="button" variant="tertiary" button-text="Clear errors" @click="clearErrors" />
+            </div>
+          </FormField>
+        </form>
+      </FormWrapper>
 
       <div
         style="margin-top: 2rem; padding: 1.6rem; border-radius: 0.8rem; background: #f8fafc; font-family: monospace; font-size: 1.3rem;"
@@ -212,6 +353,10 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
         <div>notes: {{ state.notes || '""' }}</div>
         <div>colour: {{ state.colour || '""' }}</div>
         <div>subscribe: {{ state.subscribe }}</div>
+        <div>services: {{ JSON.stringify(state.services) }}</div>
+        <div>contactMethod: {{ state.contactMethod || '""' }}</div>
+        <div>themePreference: {{ state.themePreference }}</div>
+        <div>terms: {{ state.terms }}</div>
       </div>
     </div>
   `,

package/app/components/05.forms/pending-effect/CONSUMER-STYLING.md

@@ -0,0 +1,92 @@
+# PendingEffect — Consumer Styling Guide
+
+`PendingEffect` draws an animated dashed line around a button while it is busy. You don't use it
+directly: `InputButton` renders it when `has-pending-effect` is set, and it animates while
+`is-pending` is true.
+
+```vue
+<InputButton button-text="Save" has-pending-effect :is-pending="saving" />
+```
+
+The CSS keys off the host button's classes: `.pending-effect` (added by `has-pending-effect`),
+`.is-pending`, and `.icon-only`. The SVG itself is `.pending-effect-container`.
+
+The line sits outside the button's edge, so nothing around it may clip overflow. `InputButton`
+sets `overflow: visible` on itself when `has-pending-effect` is on, but an ancestor with
+`overflow: hidden` and no spare room (e.g. a tight card or table cell) will still cut it off.
+
+## Public token API
+
+Set these on the button or any ancestor. Every token is read with its fallback at the point of
+use, so an override anywhere up the tree applies.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--pending-effect-line-color` | `var(--theme-surface)` | Colour of the moving line |
+| `--pending-effect-line-thickness` | `0.1rem` | Line stroke width |
+| `--pending-effect-line-length` | `2rem` | Length of each dash (the dash pattern repeats every `5rem`) |
+| `--pending-effect-blur-color` | `var(--theme-surface)` | Colour of the soft glow behind the line |
+| `--pending-effect-blur-size` | `0rem` | Glow width and blur radius. `0rem` turns the glow off; try `0.3rem` |
+| `--pending-effect-offset` | `1rem` | How far the line sits outside the button edge (total, split across both sides) |
+| `--pending-effect-border-radius` | `0.8rem` | Corner radius of the line |
+| `--pending-effect-border-radius-icon-only` | `100vw` | Corner radius on an icon-only button (fully round) |
+| `--pending-effect-animation-duration` | `3000ms` | Time for one loop of the animation |
+
+The colour defaults use `--theme-surface` resolved on the SVG, which carries the button's
+`data-theme`, so `theme="error"` etc. recolours the line automatically.
+
+Private tokens (not public API): `--_container-offset` (the SVG's overflow allowance, used for
+positioning maths) and `--_offset` (the resolved `--pending-effect-offset`).
+
+> **Changed 2026-09-26**: tokens were renamed from `--pending-line-color`, `--pending-line-thickness`,
+> `--pending-line-length`, `--pending-blur-color`, `--pending-blur-size`, `--pending-offset` and
+> `--animation-speed` to the `--pending-effect-*` names above. The old ones were declared on the
+> button itself, so setting them on a parent element had no effect. Inner classes were renamed
+> from `.pending-container`/`.pending-blur`/`.pending-line` to `.pending-effect-*`, and the
+> keyframes from `stroke-dashoffset` to `pending-effect-dash`.
+
+---
+
+## Reduced motion
+
+Under `prefers-reduced-motion: reduce` the effect stays hidden. The host button still gets
+`pointer-events: none` while `.is-pending` is set, from this component's CSS, so it can't be
+clicked twice.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --pending-effect-line-thickness: 0.2rem;
+  --pending-effect-blur-size: 0.3rem;
+}
+```
+
+---
+
+## 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`.
+
+### Page or section
+
+```css
+.checkout-page {
+  --pending-effect-line-color: var(--gold-05);
+  --pending-effect-animation-duration: 2000ms;
+}
+```
+
+---
+
+## Class passthrough
+
+`:style-class-passthrough` adds classes to the SVG. `InputButton` doesn't forward it, so this
+only matters if you render `PendingEffect` yourself.
+

package/app/components/05.forms/pending-effect/PendingEffect.vue

@@ -1,7 +1,13 @@
 <template>
-  <svg class="pending-container" :class="[elementClasses]" :data-theme="theme">
-    <rect pathLength="100" stroke-linecap="round" class="pending-blur" />
-    <rect pathLength="100" stroke-linecap="round" class="pending-line" />
+  <svg
+    class="pending-effect-container"
+    :class="elementClasses"
+    :data-theme="theme"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <rect pathLength="100" stroke-linecap="round" class="pending-effect-blur"/>
+    <rect pathLength="100" stroke-linecap="round" class="pending-effect-line"/>
   </svg>
 </template>
 
@@ -16,80 +22,81 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
   .pending-effect {
-    --pending-line-color: var(--theme-surface);
-    --pending-line-thickness: 0.1rem;
-    --pending-line-length: 2rem;
-    --pending-blur-color: var(--theme-surface);
-    --pending-blur-size: 0rem; /* 0.3rem */
-    --pending-offset: 1rem;
-    --animation-speed: 3000ms;
-    /* do not change, used for calculations */
-    --container-offset: 10rem;
     position: relative;
 
-    .pending-container {
+    .pending-effect-container {
+      --_container-offset: 10rem;
+      --_offset: var(--pending-effect-offset, 1rem);
+
       pointer-events: none;
       position: absolute;
-      inset: calc(var(--container-offset) / -2);
-      width: calc(100% + var(--container-offset));
-      height: calc(100% + var(--container-offset));
+      inset: calc(var(--_container-offset) / -2);
+      width: calc(100% + var(--_container-offset));
+      height: calc(100% + var(--_container-offset));
       opacity: 0;
 
-      .pending-blur,
-      .pending-line {
-        width: calc(100% - var(--container-offset) + var(--pending-offset));
-        height: calc(100% - var(--container-offset) + var(--pending-offset));
-        x: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
-        y: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
-        rx: 0.8rem;
+      .pending-effect-blur,
+      .pending-effect-line {
+        width: calc(100% - var(--_container-offset) + var(--_offset));
+        height: calc(100% - var(--_container-offset) + var(--_offset));
+        x: calc((var(--_container-offset) / 2) - (var(--_offset) / 2));
+        y: calc((var(--_container-offset) / 2) - (var(--_offset) / 2));
+        rx: var(--pending-effect-border-radius, 0.8rem);
         fill: transparent;
-        stroke: black;
-        stroke-width: 0.5rem;
-        stroke-dasharray: var(--pending-line-length) calc(5rem - var(--pending-line-length));
+        stroke-dasharray: var(--pending-effect-line-length, 2rem)
+          calc(5rem - var(--pending-effect-line-length, 2rem));
       }
 
-      .pending-line {
-        stroke: var(--pending-line-color);
-        stroke-width: var(--pending-line-thickness);
+      .pending-effect-line {
+        stroke: var(--pending-effect-line-color, var(--theme-surface));
+        stroke-width: var(--pending-effect-line-thickness, 0.1rem);
       }
 
-      .pending-blur {
-        filter: blur(var(--pending-blur-size));
-        stroke: var(--pending-blur-color);
-        stroke-width: var(--pending-blur-size);
+      .pending-effect-blur {
+        filter: blur(var(--pending-effect-blur-size, 0rem));
+        stroke: var(--pending-effect-blur-color, var(--theme-surface));
+        stroke-width: var(--pending-effect-blur-size, 0rem);
       }
     }
 
-    &:is(.icon-only) {
-      .pending-container {
-        .pending-blur,
-        .pending-line {
-          rx: 100vw;
-        }
+    &.icon-only .pending-effect-container {
+      .pending-effect-blur,
+      .pending-effect-line {
+        rx: var(--pending-effect-border-radius-icon-only, 100vw);
       }
     }
 
-    &:is(.is-pending) {
+    &.is-pending {
       pointer-events: none;
       cursor: wait;
 
       @media (prefers-reduced-motion: no-preference) {
-        animation: stroke-dashoffset var(--animation-speed) infinite linear;
-
-        .pending-container {
+        .pending-effect-container {
           opacity: 1;
+
+          .pending-effect-blur,
+          .pending-effect-line {
+            animation: pending-effect-dash var(--pending-effect-animation-duration, 3000ms) infinite linear;
+          }
         }
       }
     }
   }
 
-  @keyframes stroke-dashoffset {
+  @keyframes pending-effect-dash {
     0% {
       stroke-dashoffset: 0;
     }