srcdev-nuxt-components 9.4.12 → 9.5.1

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

@@ -0,0 +1,158 @@
+<template>
+  <div
+    class="input-checkbox-radio"
+    :class="elementClasses"
+    :data-type="type"
+    :data-input-variant="inputVariant"
+    :data-theme="theme"
+    :data-button="isButton ? '' : undefined"
+    :data-display-as-disc="displayAsDisc ? '' : undefined"
+    :data-invalid="fieldHasError ? '' : undefined"
+  >
+    <div class="input-checkbox-radio-icon-slot">
+      <slot name="checkedIcon">
+        <Icon :name="defaultIcon" class="input-checkbox-radio-icon" />
+      </slot>
+    </div>
+
+    <!-- v-model binds its checkbox/radio handler once at creation, so a type change needs a fresh input -->
+    <input
+      :id
+      :key="type"
+      v-model="modelValue"
+      :type
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :name
+      :required="required && !multipleOptions"
+      :value="trueValue"
+      class="input-checkbox-radio-input"
+      :aria-describedby="ariaDescribedby || undefined"
+      :aria-invalid="fieldHasError ? 'true' : undefined"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  type: "checkbox" | "radio";
+  id: string;
+  name: string;
+  required?: boolean;
+  theme?: FormUiTheme;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  ariaDescribedby?: string;
+  displayAsDisc?: boolean;
+  multipleOptions?: boolean;
+  isButton?: boolean;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  theme: "default",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  trueValue: true,
+  falseValue: false,
+  ariaDescribedby: "",
+  displayAsDisc: false,
+  multipleOptions: false,
+  isButton: false,
+  inputVariant: "normal",
+});
+
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({
+  required: true,
+});
+
+const defaultIcon = computed(() => (props.type === "checkbox" ? "material-symbols:check-small" : "material-symbols:circle"));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-checkbox-radio {
+    --_transition-duration: var(--input-checkbox-transition-duration, var(--theme-form-transition-duration));
+
+    display: grid;
+    grid-template-areas: "element-stack";
+    place-content: center;
+
+    background-color: var(--input-checkbox-surface, var(--theme-checkbox-symbol-surface));
+    border: 0.1rem solid var(--input-checkbox-border, var(--theme-border));
+    border-radius: var(--form-input-border-radius);
+    outline: var(--form-element-outline-width) solid transparent;
+
+    height: var(--input-checked-element-size);
+    width: var(--input-checked-element-size);
+
+    transition: all var(--_transition-duration) ease-in-out;
+
+    &[data-type="checkbox"][data-input-variant="underlined"] {
+      border-radius: 0;
+    }
+
+    &[data-type="radio"],
+    &[data-type="checkbox"][data-button][data-display-as-disc] {
+      border-radius: 100vw;
+    }
+
+    &:not([data-button]):has(input:focus-visible) {
+      outline: var(--form-element-outline-width-focus) solid var(--input-checkbox-border-focus, var(--theme-border-focus));
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    .input-checkbox-radio-icon-slot {
+      grid-area: element-stack;
+      display: grid;
+      place-content: center;
+      opacity: 0;
+      transition: opacity var(--_transition-duration) ease-in-out;
+
+      .input-checkbox-radio-icon,
+      .icon {
+        color: var(--input-checkbox-icon-color, var(--theme-text));
+        font-size: var(--_icon-size, var(--input-checked-icon-size));
+      }
+    }
+
+    &:has(input:checked) .input-checkbox-radio-icon-slot {
+      opacity: 1;
+    }
+
+    .input-checkbox-radio-input {
+      touch-action: manipulation;
+      grid-area: element-stack;
+      appearance: none;
+      margin: 0;
+      overflow: hidden;
+      opacity: 0;
+      cursor: pointer;
+
+      height: var(--input-checked-element-size);
+      width: var(--input-checked-element-size);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &,
+      .input-checkbox-radio-icon-slot {
+        transition: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,48 +1,55 @@
 <template>
   <label
     :for="id"
-    class="input-checkbox-radio-options-button"
+    class="input-checkbox-radio-button"
+    :class="elementClasses"
     :data-theme="theme"
-    :data-invalid="fieldHasError ? '' : null"
-    :class="[elementClasses, optionsLayout, { error: fieldHasError }, { 'is-pill': isPill }]"
+    :data-invalid="fieldHasError ? '' : undefined"
+    :data-options-layout="optionsLayout"
+    :data-direction="direction"
+    :data-pill="isPill ? '' : undefined"
   >
-    <InputCheckboxRadioCore
+    <InputCheckboxRadio
       :id
       v-model="modelValue"
       :is-button="true"
       :type
       :name
       :required
-      :true-value="trueValue"
-      :false-value="falseValue"
-      :field-has-error="fieldHasError"
+      :multiple-options
+      :true-value
+      :false-value
+      :field-has-error
       :theme
-      :aria-describedby="ariaDescribedby"
-      :display-as-disc="displayAsDisc"
+      :input-variant
+      :aria-describedby
+      :display-as-disc
     >
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
-    </InputCheckboxRadioCore>
-    <div v-if="slots.labelContent" class="input-checkbox-radio-options-button-label">
-      <slot name="labelContent"></slot>
+    </InputCheckboxRadio>
+    <div class="input-checkbox-radio-button-label">
+      <slot name="labelContent">{{ label }}</slot>
     </div>
-    <div v-else class="input-checkbox-radio-options-button-label">{{ label }}</div>
-    <div class="decorator-icon">
+    <div class="input-checkbox-radio-button-icon">
       <slot name="itemIcon">
-        <Icon name="material-symbols:add-2" class="icon" aria-hidden="true" focusable="false" />
+        <Icon :name="itemIcon" class="icon" aria-hidden="true" focusable="false" />
       </slot>
     </div>
   </label>
 </template>
 
 <script setup lang="ts">
+import type { FormUiTheme, InputUiVariant, OptionsLayout } from "~/types/forms/types.forms";
+
 interface Props {
   id: string;
   type: "checkbox" | "radio";
   name: string;
+  label?: string;
   required?: boolean;
-  theme?: "default" | "success" | "error" | "warning";
+  theme?: FormUiTheme;
   fieldHasError?: boolean;
   styleClassPassthrough?: string | string[];
   trueValue?: string | number | boolean;
@@ -50,13 +57,15 @@ interface Props {
   ariaDescribedby?: string;
   displayAsDisc?: boolean;
   multipleOptions?: boolean;
-  label: string;
-  optionsLayout?: string;
+  optionsLayout?: OptionsLayout;
   direction?: "row" | "row-reverse";
   isPill?: boolean;
+  inputVariant?: InputUiVariant;
+  itemIcon?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  label: "",
   required: false,
   theme: "default",
   fieldHasError: false,
@@ -69,117 +78,109 @@ const props = withDefaults(defineProps<Props>(), {
   optionsLayout: "equal-widths",
   direction: "row",
   isPill: false,
+  inputVariant: "normal",
+  itemIcon: "material-symbols:add-2",
 });
 
-const slots = useSlots();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough || []);
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
 
-const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>();
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const flexDirection = ref(props.direction);
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-.input-checkbox-radio-options-button {
-  --_white-space: wrap;
-
-  display: flex;
-  flex-direction: v-bind(flexDirection);
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  border-radius: 0.4rem;
-  user-select: none;
-  transition: all 0.2s ease-in-out;
-
-  &.is-pill {
-    border-radius: 100vw;
-  }
+  .input-checkbox-radio-button {
+    --_white-space: wrap;
 
-  &.inline {
-    --_white-space: nowrap;
-  }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--input-checkbox-button-gap, 1rem);
+    padding-block: var(--input-checkbox-button-padding-block, 0.4rem);
+    padding-inline: var(--input-checkbox-button-padding-inline, 1.2rem);
+    user-select: none;
 
-  /* Public --input-checkbox-button-* tokens, inline-fallback to the shared theme tokens (see
-     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-     input/control that also reads --theme-input-surface/--theme-border, etc. Defaults are
-     unchanged from before this migration — this is a token-rename pass, not a redesign. */
-  background-color: var(--input-checkbox-button-surface, var(--theme-input-surface));
-  border: var(--form-element-border-width) solid var(--input-checkbox-button-border, 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(--input-checkbox-button-surface-hover, var(--theme-input-surface-hover));
-    border-color: var(--input-checkbox-button-border, var(--theme-border));
-    outline-color: var(--input-checkbox-button-ring-hover, var(--theme-ring));
-    outline-offset: var(--form-element-outline-offset-focus);
-    cursor: pointer;
-  }
+    background-color: var(--input-checkbox-button-surface, var(--theme-input-surface));
+    border: var(--form-element-border-width) solid var(--input-checkbox-button-border, var(--theme-border));
+    border-radius: var(--input-checkbox-button-border-radius, 0.4rem);
+    outline: var(--form-element-outline-width) solid transparent;
 
-  &:has(.input-checkbox-radio-core:focus-visible) {
-    background-color: var(--input-checkbox-button-surface-focus, var(--theme-surface-subtle));
-    outline-color: var(--input-checkbox-button-ring-focus, var(--theme-border-focus));
-    outline-offset: var(--form-element-outline-offset-focus);
-  }
+    transition: all var(--input-checkbox-transition-duration, var(--theme-form-transition-duration)) ease-in-out;
 
-  padding-block: 0.4rem;
-  padding-inline: 1.2rem;
-  gap: 1rem;
+    &[data-direction="row-reverse"] {
+      flex-direction: row-reverse;
+    }
 
-  .input-checkbox-radio-options-button-label {
-    display: flex;
-    flex-grow: 1;
-    color: var(--input-checkbox-button-label-color, var(--colour-text-default));
-    font-size: var(--input-font-size);
-    width: 100%;
-    min-height: var(--input-element-line-height);
-    align-items: center;
-    justify-content: center;
-    /* justify-content only centers the label as a single block — once text actually wraps
-       (e.g. "Half Head Highlights"), that block fills the full available width and each
-       individual line falls back to its default left-alignment inside it. text-align is what
-       centers wrapped lines relative to each other. */
-    text-align: center;
-    padding-block: 0.8rem;
-    padding-inline: 0.8rem;
-    white-space: var(--_white-space);
+    &[data-pill] {
+      border-radius: var(--input-checkbox-button-border-radius-pill, 100vw);
+    }
+
+    &[data-options-layout="inline"] {
+      --_white-space: nowrap;
+    }
 
     &:hover {
+      background-color: var(--input-checkbox-button-surface-hover, var(--theme-input-surface-hover));
+      outline-color: var(--input-checkbox-button-ring-hover, var(--theme-ring));
+      outline-offset: var(--form-element-outline-offset-focus);
       cursor: pointer;
     }
-  }
 
-  .decorator-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--input-checkbox-button-icon-color, var(--theme-text));
+    &:has(.input-checkbox-radio-input:focus-visible) {
+      background-color: var(--input-checkbox-button-surface-focus, var(--theme-surface-subtle));
+      outline-color: var(--input-checkbox-button-ring-focus, var(--theme-border-focus));
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
 
-    .icon {
-      height: var(--input-checkbox-decorator-icon-size);
-      width: var(--input-checkbox-decorator-icon-size);
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
     }
-  }
 
-  .input-checkbox-radio-wrapper {
-    width: calc(var(--input-checked-icon-size) - 0.6rem);
-    height: calc(var(--input-checked-icon-size) - 0.6rem);
+    .input-checkbox-radio-button-label {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      color: var(--input-checkbox-button-label-color, var(--theme-text));
+      font-size: var(--input-font-size);
+      /* justify-content centres the block; text-align centres each wrapped line within it */
+      text-align: center;
+      padding-block: var(--input-checkbox-button-label-padding-block, 0.8rem);
+      padding-inline: var(--input-checkbox-button-label-padding-inline, 0.8rem);
+      white-space: var(--_white-space);
+      cursor: pointer;
+    }
+
+    .input-checkbox-radio-button-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--input-checkbox-button-icon-color, var(--theme-text));
 
-    .input-checked-icon-slot {
-      .input-checked-icon-checked {
-        width: calc(var(--input-checked-icon-size) - 0.8rem);
-        height: calc(var(--input-checked-icon-size) - 0.8rem);
+      .icon {
+        font-size: var(--input-checkbox-decorator-icon-size);
       }
     }
 
-    .input-checkbox-radio-core {
+    .input-checkbox-radio {
+      --_icon-size: calc(var(--input-checked-icon-size) - 0.8rem);
+
       width: calc(var(--input-checked-icon-size) - 0.6rem);
       height: calc(var(--input-checked-icon-size) - 0.6rem);
+
+      .input-checkbox-radio-input {
+        width: calc(var(--input-checked-icon-size) - 0.6rem);
+        height: calc(var(--input-checked-icon-size) - 0.6rem);
+      }
     }
   }
 }
-}
 </style>

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

@@ -0,0 +1,100 @@
+<template>
+  <label
+    :for="id"
+    class="input-checkbox-radio-field"
+    :class="elementClasses"
+    :data-invalid="fieldHasError ? '' : undefined"
+  >
+    <InputCheckboxRadio
+      :id
+      v-model="modelValue"
+      :type
+      :name
+      :required
+      :multiple-options
+      :true-value
+      :false-value
+      :field-has-error
+      :theme
+      :input-variant
+      :aria-describedby
+      :display-as-disc
+    >
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputCheckboxRadio>
+
+    <div class="input-checkbox-radio-field-label">
+      <slot name="labelContent">{{ label }}</slot>
+    </div>
+  </label>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  type: "checkbox" | "radio";
+  name: string;
+  label?: string;
+  required?: boolean;
+  theme?: FormUiTheme;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  ariaDescribedby?: string;
+  displayAsDisc?: boolean;
+  multipleOptions?: boolean;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "",
+  required: false,
+  theme: "default",
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  trueValue: true,
+  falseValue: false,
+  ariaDescribedby: "",
+  displayAsDisc: false,
+  multipleOptions: false,
+  inputVariant: "normal",
+});
+
+const modelValue = defineModel<(string | number | boolean)[] | string | number | boolean | undefined>({ required: true });
+const id = useId();
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-checkbox-radio-field {
+    display: flex;
+    align-items: center;
+    gap: var(--input-checked-icon-gap);
+    min-height: var(--input-min-height);
+    user-select: none;
+
+    .input-checkbox-radio-field-label {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      color: var(--input-checkbox-label-color, inherit);
+      padding-block: var(--input-checkbox-label-padding-block);
+      padding-inline: var(--input-checkbox-label-padding-inline);
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/app/components/05.forms/input-checkbox-radio/stories/{InputCheckboxRadioCore.stories.ts → InputCheckboxRadio.stories.ts}

@@ -1,9 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
-import StorybookComponent from "../InputCheckboxRadioCore.vue";
-import type { FormUiTheme } from "~/types/forms/types.forms.d";
+import StorybookComponent from "../InputCheckboxRadio.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
-interface InputCheckboxRadioCoreStoryArgs {
+interface InputCheckboxRadioStoryArgs {
   type: "checkbox" | "radio";
   id: string;
   name: string;
@@ -11,10 +11,12 @@ interface InputCheckboxRadioCoreStoryArgs {
   theme: FormUiTheme;
   fieldHasError: boolean;
   displayAsDisc: boolean;
+  isButton: boolean;
+  inputVariant: InputUiVariant;
 }
 
 export default {
-  title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioCore",
+  title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadio",
   component: StorybookComponent,
   argTypes: {
     type: {
@@ -34,7 +36,18 @@ export default {
     fieldHasError: { control: "boolean", table: { category: "States" } },
     displayAsDisc: {
       control: "boolean",
-      description: "Checkbox only — render as a filled disc instead of a check icon",
+      description: "Checkbox in button mode only: round the box into a disc",
+      table: { category: "Styling" },
+    },
+    isButton: {
+      control: "boolean",
+      description: "Set by InputCheckboxRadioButton: drops the focus outline (the button draws its own) and enables displayAsDisc",
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      description: "underlined squares off a checkbox",
       table: { category: "Styling" },
     },
   },
@@ -46,10 +59,12 @@ export default {
     theme: "default",
     fieldHasError: false,
     displayAsDisc: false,
+    isButton: false,
+    inputVariant: "normal",
   },
-} as Meta<InputCheckboxRadioCoreStoryArgs>;
+} as Meta<InputCheckboxRadioStoryArgs>;
 
-const Template: StoryFn<InputCheckboxRadioCoreStoryArgs> = (args) => ({
+const Template: StoryFn<InputCheckboxRadioStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
     const modelValue = ref(false);
@@ -69,7 +84,7 @@ export const Radio = Template.bind({});
 Radio.args = { type: "radio" };
 
 export const CheckboxAsDisc = Template.bind({});
-CheckboxAsDisc.args = { type: "checkbox", displayAsDisc: true };
+CheckboxAsDisc.args = { type: "checkbox", isButton: true, displayAsDisc: true };
 
 export const ErrorState = Template.bind({});
 ErrorState.args = { type: "checkbox", fieldHasError: true, theme: "error" };