srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/05.forms/input-text/{variants/InputTextWithLabel.vue → InputTextWithLabel.vue}

@@ -8,9 +8,7 @@
     >
       <InputLabel
         :id
-        :for="id"
-        :theme
-        :name
+        :required
         :input-variant
         :field-has-error
         :style-class-passthrough="['input-text-label']"
@@ -19,16 +17,16 @@
       </InputLabel>
 
       <InputDescription
-        :id
+        v-if="inputVariant !== 'outlined'"
         :description-id
-        :name
+        :input-variant
         :field-has-error="fieldHasError"
         :style-class-passthrough="['input-text-description']"
       >
-        <template #descriptionHtml>
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
           <slot name="descriptionHtml"></slot>
         </template>
-        <template #descriptionText>
+        <template v-if="slots.descriptionText" #descriptionText>
           <slot name="descriptionText"></slot>
         </template>
       </InputDescription>
@@ -67,8 +65,7 @@
 
     <InputDescription
       v-if="inputVariant === 'outlined'"
-      :id
-      :name
+      :description-id
       :input-variant
       :field-has-error="fieldHasError"
       :style-class-passthrough="['input-text-description']"
@@ -107,6 +104,8 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   maxlength: 255,
+  min: undefined,
+  max: undefined,
   inputmode: "text",
   placeholder: "",
   fieldHasError: false,
@@ -128,7 +127,7 @@ const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   slots
 );
 
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string>({ required: true });
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 

package/app/components/05.forms/input-text/stories/InputPasswordWithLabel.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed } from "vue";
-import StorybookComponent from "../variants/InputPasswordWithLabel.vue";
+import StorybookComponent from "../InputPasswordWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
 interface InputPasswordWithLabelStoryArgs {

package/app/components/05.forms/input-text/stories/InputTextAsNumberWithLabel.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed } from "vue";
-import StorybookComponent from "../variants/InputTextAsNumberWithLabel.vue";
+import StorybookComponent from "../InputTextAsNumberWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
 interface InputTextAsNumberWithLabelStoryArgs {

package/app/components/05.forms/input-text/stories/InputTextWithLabel.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed } from "vue";
-import StorybookComponent from "../variants/InputTextWithLabel.vue";
+import StorybookComponent from "../InputTextWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
 interface InputTextWithLabelStoryArgs {

package/app/components/05.forms/input-text/tests/InputPasswordWithLabel.spec.ts

@@ -1,12 +1,13 @@
 // https://nuxt.com/docs/getting-started/testing#unit-testing
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ComponentUnderTest from "../variants/InputPasswordWithLabel.vue";
+import ComponentUnderTest from "../InputPasswordWithLabel.vue";
 
 const initialPropsData = {
   name: "password",
   label: "Password",
   errorMessage: "",
+  modelValue: "",
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;

package/app/components/05.forms/input-text/tests/InputTextAsNumberWithLabel.spec.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/getting-started/testing#unit-testing
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ComponentUnderTest from "../variants/InputTextAsNumberWithLabel.vue";
+import ComponentUnderTest from "../InputTextAsNumberWithLabel.vue";
 
 const initialPropsData = {
   name: "quantity",

package/app/components/05.forms/input-text/tests/InputTextWithLabel.spec.ts

@@ -1,13 +1,14 @@
 // https://nuxt.com/docs/getting-started/testing#unit-testing
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ComponentUnderTest from "../variants/InputTextWithLabel.vue";
+import ComponentUnderTest from "../InputTextWithLabel.vue";
 
 const initialPropsData = {
   type: "text" as const,
   name: "testName",
   label: "Test label",
   errorMessage: "",
+  modelValue: "",
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;

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

@@ -34,7 +34,7 @@ pre-existing gap in the type, not specific to `InputTextareaCore`.
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 ```css
 :where(html) {
@@ -48,8 +48,17 @@ Only declare the tokens you want to change — everything else keeps inheriting
 
 ---
 
-## Per-instance overrides
+## 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`.
+
+### One instance
 
 ```vue
 <InputTextareaCore id="message" name="message" style="--input-textarea-border: var(--gold-04);" />
 ```
+

package/app/components/05.forms/input-textarea/{variants/InputTextareaWithLabel.vue → InputTextareaWithLabel.vue}

@@ -8,9 +8,7 @@
     >
       <InputLabel
         :id
-        :for="id"
-        :theme
-        :name
+        :required
         :input-variant
         :field-has-error
         :style-class-passthrough="['input-textarea-label']"
@@ -20,8 +18,7 @@
 
       <InputDescription
         v-if="inputVariant !== 'outlined'"
-        :id
-        :description-id="descriptionId"
+        :description-id
         :input-variant
         :field-has-error="fieldHasError"
         :style-class-passthrough="['input-text-description']"
@@ -61,8 +58,7 @@
 
     <InputDescription
       v-if="inputVariant === 'outlined'"
-      :id
-      :name
+      :description-id
       :input-variant
       :field-has-error="fieldHasError"
       :style-class-passthrough="['input-text-description']"

package/app/components/05.forms/input-textarea/stories/InputTextareaWithLabel.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed, reactive } from "vue";
-import StorybookComponent from "../variants/InputTextareaWithLabel.vue";
+import StorybookComponent from "../InputTextareaWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
 interface InputTextareaWithLabelStoryArgs {

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { reactive, ref } from "vue";
-import InputTextWithLabel from "../../input-text/variants/InputTextWithLabel.vue";
-import InputSelectWithLabel from "../../input-select/variants/InputSelectWithLabel.vue";
-import InputTextareaWithLabel from "../../input-textarea/variants/InputTextareaWithLabel.vue";
+import InputTextWithLabel from "../../input-text/InputTextWithLabel.vue";
+import InputSelectWithLabel from "../../input-select/InputSelectWithLabel.vue";
+import InputTextareaWithLabel from "../../input-textarea/InputTextareaWithLabel.vue";
 import MultipleCheckboxes from "../../input-checkbox/MultipleCheckboxes.vue";
-import InputButtonCore from "../../input-button/InputButtonCore.vue";
+import InputButton from "../../input-button/InputButton.vue";
 import FormField from "../../form-field/FormField.vue";
 import HeroText from "../../../01.atoms/text-blocks/hero-text/HeroText.vue";
 import type { IFormMultipleOptions, InputUiVariant } from "~/types/forms/types.forms.d";
@@ -13,10 +13,9 @@ interface ContactFormStoryArgs {
   inputVariant: InputUiVariant;
 }
 
-// Demo composition, not a component of its own — a richer variant of the pattern the real
-// luxury-locs-by-natasha-nuxt3 /contact page uses (see that repo's app/pages/contact.vue): same
-// name/phone/email + multi-select services + comments shape, plus an InputSelectWithLabel
-// "How did you hear about us?" field that page doesn't have, to also exercise the select
+// Demo composition, not a component of its own — a richer variant of a typical contact page
+// pattern: name/phone/email + multi-select services + comments shape, plus an InputSelectWithLabel
+// "How did you hear about us?" field, to also exercise the select
 // component alongside the others in one composed form. No validation wiring
 // (useZodValidation/zod) here — that's the consuming app's concern, this is a visual/composition
 // reference only.
@@ -41,7 +40,7 @@ const Template: StoryFn<ContactFormStoryArgs> = (args) => ({
     InputSelectWithLabel,
     InputTextareaWithLabel,
     MultipleCheckboxes,
-    InputButtonCore,
+    InputButton,
     FormField,
     HeroText,
   },
@@ -174,7 +173,7 @@ const Template: StoryFn<ContactFormStoryArgs> = (args) => ({
         </FormField>
 
         <FormField width="wide" :has-gutter="false">
-          <InputButtonCore type="submit" variant="primary" button-text="Send message" />
+          <InputButton type="submit" variant="primary" button-text="Send message" />
         </FormField>
       </form>
     </div>

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

@@ -1,9 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { reactive } from "vue";
-import InputTextWithLabel from "../../input-text/variants/InputTextWithLabel.vue";
-import InputPasswordWithLabel from "../../input-text/variants/InputPasswordWithLabel.vue";
-import InputCheckboxRadioWithLabel from "../../input-checkbox-radio/InputCheckboxRadioWithLabel.vue";
-import InputButtonCore from "../../input-button/InputButtonCore.vue";
+import InputTextWithLabel from "../../input-text/InputTextWithLabel.vue";
+import InputPasswordWithLabel from "../../input-text/InputPasswordWithLabel.vue";
+import InputCheckboxRadioField from "../../input-checkbox-radio/InputCheckboxRadioField.vue";
+import InputButton from "../../input-button/InputButton.vue";
 import FormField from "../../form-field/FormField.vue";
 import GlassPanel from "../../../01.atoms/glass-panel/GlassPanel.vue";
 import HeroText from "../../../01.atoms/text-blocks/hero-text/HeroText.vue";
@@ -37,8 +37,8 @@ const Template: StoryFn<LoginFormStoryArgs> = (args) => ({
   components: {
     InputTextWithLabel,
     InputPasswordWithLabel,
-    InputCheckboxRadioWithLabel,
-    InputButtonCore,
+    InputCheckboxRadioField,
+    InputButton,
     FormField,
     GlassPanel,
     HeroText,
@@ -91,24 +91,24 @@ const Template: StoryFn<LoginFormStoryArgs> = (args) => ({
 
             <FormField width="wide" :has-gutter="false">
               <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem;">
-                <InputCheckboxRadioWithLabel
+                <InputCheckboxRadioField
                   v-model="state.rememberMe"
                   type="checkbox"
                   name="rememberMe"
                   label="Remember me"
                   :input-variant="args.inputVariant"
                 />
-                <InputButtonCore type="button" variant="tertiary" button-text="Forgot password?" />
+                <InputButton type="button" variant="tertiary" button-text="Forgot password?" />
               </div>
             </FormField>
 
             <FormField width="wide" :has-gutter="false">
-              <!-- InputButtonCore keeps box-sizing: content-box, so width: 100% alone sizes only
+              <!-- InputButton keeps box-sizing: content-box, so width: 100% alone sizes only
                    the content box and padding/border overflow past it — box-sizing: border-box
                    here makes width: 100% mean the actual rendered width, not a demo-only quirk
                    worth fixing in the component itself since content-box is relied on elsewhere
                    (e.g. icon-only's aspect-ratio: 1). -->
-              <InputButtonCore
+              <InputButton
                 type="submit"
                 variant="primary"
                 button-text="Sign in"