@marwes-ui/svelte 1.3.0 → 1.4.0

package/dist/components/input/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createSelectRecipe, resolveSelectMode } from "@marwes-ui/core";
+  import { createSelectRecipe } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
   import type { SelectProps } from "./types.js";
 
@@ -24,7 +24,6 @@
       ...(describedBy ? { describedBy } : {}),
     })
   );
-  const mode = $derived(resolveSelectMode(rest));
   const mergedClass = $derived(mergeClass(kit.className, className));
 
   const placeholderSelected = $derived(!!placeholder && value === "");
@@ -36,7 +35,7 @@
   }
 </script>
 
-{#if mode === "native"}
+<span class="mw-select__control">
   <select
     class={mergedClass}
     {style}
@@ -45,6 +44,7 @@
     disabled={kit.a11y.disabled}
     required={kit.a11y.required}
     aria-label={kit.a11y.ariaLabel}
+    aria-labelledby={kit.a11y.ariaLabelledBy}
     aria-invalid={kit.a11y.ariaInvalid}
     aria-describedby={kit.a11y.ariaDescribedBy}
     data-placeholder-selected={placeholderSelected ? "true" : undefined}
@@ -58,31 +58,7 @@
       <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
     {/each}
   </select>
-{:else}
-  <span class="mw-select__control">
-    <select
-      class={mergedClass}
-      {style}
-      id={kit.a11y.id}
-      name={kit.a11y.name}
-      disabled={kit.a11y.disabled}
-      required={kit.a11y.required}
-      aria-label={kit.a11y.ariaLabel}
-      aria-invalid={kit.a11y.ariaInvalid}
-      aria-describedby={kit.a11y.ariaDescribedBy}
-      data-placeholder-selected={placeholderSelected ? "true" : undefined}
-      {value}
-      onchange={handleChange}
-    >
-      {#if placeholder}
-        <option value="" disabled={rest.required ? true : undefined}>{placeholder}</option>
-      {/if}
-      {#each options as opt}
-        <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
-      {/each}
-    </select>
-    <svg class="mw-select__control-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-      <path d="M11.5288 5.52876C11.7891 5.26841 12.2111 5.26841 12.4715 5.52876C12.7318 5.78911 12.7318 6.21114 12.4715 6.47147L8.47148 10.4715C8.21115 10.7318 7.78912 10.7318 7.52877 10.4715L3.52876 6.47147C3.26841 6.21112 3.26841 5.78911 3.52876 5.52876C3.78911 5.26841 4.21112 5.26841 4.47147 5.52876L6.58591 7.6432C7.36696 8.42425 8.63329 8.42425 9.41434 7.6432L11.5288 5.52876Z" fill="currentColor" />
-    </svg>
-  </span>
-{/if}
+  <svg class="mw-select__control-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <path d="M11.5288 5.52876C11.7891 5.26841 12.2111 5.26841 12.4715 5.52876C12.7318 5.78911 12.7318 6.21114 12.4715 6.47147L8.47148 10.4715C8.21115 10.7318 7.78912 10.7318 7.52877 10.4715L3.52876 6.47147C3.26841 6.21112 3.26841 5.78911 3.52876 5.52876C3.78911 5.26841 4.21112 5.26841 4.47147 5.52876L6.58591 7.6432C7.36696 8.42425 8.63329 8.42425 9.41434 7.6432L11.5288 5.52876Z" fill="currentColor" />
+  </svg>
+</span>

package/dist/components/input/SelectField.svelte

@@ -2,6 +2,7 @@
   import { IconName, buildInputFieldA11yIds, resolveSelectMode } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
   import Icon from "../icon/Icon.svelte";
+  import Text from "../text/Text.svelte";
   import Select from "./Select.svelte";
   import type { SelectFieldProps, SelectProps } from "./types.js";
 
@@ -83,6 +84,7 @@
     select = { options: [] },
     ariaDescribedBy,
     value = $bindable(getInitialSelectValue(select)),
+    variant,
     class: className,
   }: SelectFieldProps = $props();
 
@@ -103,6 +105,7 @@
       "mw-input-field",
       "mw-input-field--select",
       mode === "marwes" && "mw-input-field--select-marwes",
+      variant === "date" && "mw-input-field--select-date",
       disabled && "mw-input-field--disabled",
       invalid && "mw-input-field--invalid",
       className
@@ -276,7 +279,7 @@
 
 <div class={wrapperClass}>
   <label class="mw-input-field__label" for={fieldId}>
-    <p class="mw-p mw-p--md">{label}</p>
+    <Text variant="label">{label}</Text>
   </label>
   <div class="mw-input-field__input-wrapper">
     {#if mode === "native"}
@@ -384,12 +387,12 @@
   </div>
   {#if hasHelperText && !hasError}
     <div class="mw-input-field__helper" id={a11yIds.helperTextId}>
-      <p class="mw-p mw-p--sm">{helperText}</p>
+      <Text variant="caption">{helperText}</Text>
     </div>
   {/if}
   {#if hasError}
     <div class="mw-input-field__error" id={a11yIds.errorId} aria-live="polite">
-      <p class="mw-p mw-p--sm">{error}</p>
+      <Text variant="caption">{error}</Text>
     </div>
   {/if}
 </div>

package/dist/components/input/Textarea.svelte

@@ -43,6 +43,7 @@
   rows={kit.a11y.rows}
   cols={kit.a11y.cols}
   aria-label={kit.a11y.ariaLabel}
+  aria-labelledby={kit.a11y.ariaLabelledBy}
   aria-invalid={kit.a11y.ariaInvalid}
   aria-describedby={kit.a11y.ariaDescribedBy}
   {value}

package/dist/components/input/TextareaField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buildInputFieldA11yIds } from "@marwes-ui/core";
   import { mergeClass } from "../../internal/merge-class.js";
+  import Text from "../text/Text.svelte";
   import Textarea from "./Textarea.svelte";
   import type { TextareaFieldProps, TextareaProps } from "./types.js";
 
@@ -8,6 +9,7 @@
     id: userProvidedId,
     label,
     helperText,
+    counterText,
     error,
     textarea = {},
     ariaDescribedBy,
@@ -23,6 +25,7 @@
   }
 
   const hasHelperText = $derived(hasTextContent(helperText));
+  const hasCounterText = $derived(hasTextContent(counterText));
   const hasError = $derived(hasTextContent(error));
   const invalid = $derived(hasError || textarea.invalid || false);
   const disabled = $derived(textarea.disabled || false);
@@ -39,19 +42,31 @@
 
 <div class={wrapperClass}>
   <label class="mw-input-field__label" for={fieldId}>
-    <p class="mw-p mw-p--md">{label}</p>
+    <Text variant="label">{label}</Text>
   </label>
   <div class="mw-input-field__input-wrapper">
     <Textarea {...textarea} id={fieldId} {invalid} describedBy={a11yIds.describedBy ?? undefined} bind:value />
   </div>
-  {#if hasHelperText && !hasError}
-    <div class="mw-input-field__helper" id={a11yIds.helperTextId}>
-      <p class="mw-p mw-p--sm">{helperText}</p>
+  {#if (hasHelperText || hasCounterText) && !hasError}
+    <div class="mw-input-field__meta">
+      {#if hasHelperText}
+        <div class="mw-input-field__helper" id={a11yIds.helperTextId}>
+          <Text variant="caption">{helperText}</Text>
+        </div>
+      {:else}
+        <span aria-hidden="true"></span>
+      {/if}
+
+      {#if hasCounterText}
+        <div class="mw-input-field__counter">
+          <Text variant="caption">{counterText}</Text>
+        </div>
+      {/if}
     </div>
   {/if}
   {#if hasError}
     <div class="mw-input-field__error" id={a11yIds.errorId} aria-live="polite">
-      <p class="mw-p mw-p--sm">{error}</p>
+      <Text variant="caption">{error}</Text>
     </div>
   {/if}
 </div>

package/dist/components/input/index.d.ts

@@ -1,7 +1,15 @@
-export { default as Input } from "./Input.svelte";
 export { default as InputField } from "./InputField.svelte";
-export { default as Select } from "./Select.svelte";
+export { default as InputOtpField } from "./InputOtpField.svelte";
+export { default as RichTextField } from "./RichTextField.svelte";
+export { default as DropdownField } from "./DropdownField.svelte";
+export { default as SearchField } from "./SearchField.svelte";
+export { default as PasswordField } from "./PasswordField.svelte";
+export { default as EmailField } from "./EmailField.svelte";
+export { default as DateOfBirthField } from "./DateOfBirthField.svelte";
+export { default as ZipCodeField } from "./ZipCodeField.svelte";
+export { default as PhoneField } from "./PhoneField.svelte";
+export { default as URLField } from "./URLField.svelte";
+export { default as CurrencyField } from "./CurrencyField.svelte";
 export { default as SelectField } from "./SelectField.svelte";
-export { default as Textarea } from "./Textarea.svelte";
 export { default as TextareaField } from "./TextareaField.svelte";
-export type { InputProps, InputFieldProps, InputOtpProps, RichTextProps, RichTextFieldProps, SelectProps, SelectFieldProps, SelectOption, TextareaProps, TextareaFieldProps, } from "./types.js";
+export type { InputFieldProps, InputOtpFieldProps, RichTextFieldProps, CurrencyFieldProps, DateOfBirthFieldProps, DropdownFieldProps, EmailFieldProps, PasswordFieldProps, PhoneFieldProps, SearchFieldProps, SelectAppearance, SelectFieldProps, SelectFieldVariant, SelectOption, TextareaFieldProps, URLFieldProps, ZipCodeFieldProps, } from "./types.js";

package/dist/components/input/index.js

@@ -1,6 +1,22 @@
-export { default as Input } from "./Input.svelte";
+// `Input` atom intentionally NOT re-exported — use `InputField` (or a purpose variant).
 export { default as InputField } from "./InputField.svelte";
-export { default as Select } from "./Select.svelte";
+// `InputOtp` (the bare atom — cells-only render) is intentionally NOT
+// re-exported here. Use `InputOtpField` instead.
+export { default as InputOtpField } from "./InputOtpField.svelte";
+// `RichText` (the atom) is intentionally NOT re-exported here.
+// Use `RichTextField` instead. Internal consumers can deep-import
+// "./RichText.svelte" directly.
+export { default as RichTextField } from "./RichTextField.svelte";
+export { default as DropdownField } from "./DropdownField.svelte";
+export { default as SearchField } from "./SearchField.svelte";
+export { default as PasswordField } from "./PasswordField.svelte";
+export { default as EmailField } from "./EmailField.svelte";
+export { default as DateOfBirthField } from "./DateOfBirthField.svelte";
+export { default as ZipCodeField } from "./ZipCodeField.svelte";
+export { default as PhoneField } from "./PhoneField.svelte";
+export { default as URLField } from "./URLField.svelte";
+export { default as CurrencyField } from "./CurrencyField.svelte";
+// `Select` atom intentionally NOT re-exported — use `SelectField` or `DropdownField`.
 export { default as SelectField } from "./SelectField.svelte";
-export { default as Textarea } from "./Textarea.svelte";
+// `Textarea` atom intentionally NOT re-exported — use `TextareaField`.
 export { default as TextareaField } from "./TextareaField.svelte";

package/dist/components/input/types.d.ts

@@ -1,5 +1,6 @@
 import type { InputOptions, RichTextOptions, SelectOptions, TextareaOptions } from "@marwes-ui/core";
-export type { SelectOption } from "@marwes-ui/core";
+export type { SelectAppearance, SelectOption } from "@marwes-ui/core";
+export type SelectFieldVariant = "default" | "date";
 export interface InputProps extends Omit<InputOptions, "describedBy"> {
     value?: string;
     oninput?: (e: Event & {
@@ -29,13 +30,16 @@ export interface InputFieldProps {
     value?: string;
     class?: string;
 }
+/**
+ * Props for the bare `InputOtp` atom (Svelte).
+ *
+ * The atom renders only the OTP cells + hidden input. Use `InputOtpField`
+ * for labeled forms; reach for the atom directly only when you need a
+ * custom layout.
+ */
 export interface InputOtpProps {
     id?: string;
     name?: string;
-    label: string;
-    helperText?: string;
-    error?: string;
-    ariaDescribedBy?: string;
     value?: string;
     defaultValue?: string;
     length?: number;
@@ -45,9 +49,28 @@ export interface InputOtpProps {
     required?: boolean;
     invalid?: boolean;
     ariaLabel?: string;
+    label?: string;
+    ariaLabelledBy?: string;
+    /** ID(s) of elements that describe the input. Pre-merged by InputOtpField. */
+    describedBy?: string;
     onvaluechange?: (value: string) => void;
     class?: string;
 }
+export interface InputOtpFieldProps {
+    /** Optional: if omitted, a stable id is generated. */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: string;
+    /** Optional helper text shown below the cells. */
+    helperText?: string;
+    /** Optional error message. */
+    error?: string;
+    /** Props forwarded to the bare InputOtp atom. */
+    inputOtp?: Omit<InputOtpProps, "id" | "ariaLabel" | "label" | "ariaLabelledBy" | "describedBy">;
+    /** Additional aria-describedby IDs to merge with internal helper/error IDs. */
+    ariaDescribedBy?: string;
+    class?: string;
+}
 export interface RichTextProps extends RichTextOptions {
     onvaluechange?: (value: string) => void;
     class?: string;
@@ -81,6 +104,7 @@ export interface SelectFieldProps {
     select?: SelectProps;
     ariaDescribedBy?: string;
     value?: string;
+    variant?: SelectFieldVariant;
     class?: string;
 }
 export interface TextareaProps extends Omit<TextareaOptions, "describedBy"> {
@@ -96,9 +120,39 @@ export interface TextareaFieldProps {
     id?: string;
     label: string;
     helperText?: string;
+    counterText?: string;
     error?: string;
     textarea?: Omit<TextareaProps, "value">;
     ariaDescribedBy?: string;
     value?: string;
     class?: string;
 }
+export type DropdownFieldProps = Omit<SelectFieldProps, "select"> & {
+    select: Omit<SelectProps, "appearance"> & {
+        native?: boolean;
+    };
+};
+export type SearchFieldProps = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode">;
+};
+export type PasswordFieldProps = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type">;
+};
+export type EmailFieldProps = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete">;
+};
+export type DateOfBirthFieldProps = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete">;
+};
+export type ZipCodeFieldProps = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete">;
+};
+export type PhoneFieldProps = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete">;
+};
+export type URLFieldProps = Omit<InputFieldProps, "input"> & {
+    input?: Omit<InputFieldProps["input"], "type" | "inputMode" | "autoComplete">;
+};
+export type CurrencyFieldProps = InputFieldProps & {
+    currency?: string;
+};