@itguy614/clean-ui 1.2.2 → 1.3.0

package/dist/types/common.d.ts

@@ -16,6 +16,13 @@ export type CuiVariant = "solid" | "outline" | "subtle" | "ghost" | "dash";
 /** A color value that accepts a role (mapped to its token) OR any raw CSS
  *  color string. Used by paint components (Icon, Divider, Backdrop). */
 export type CuiColorOrCss = CuiColor | (string & {});
+/**
+ * Element a component's title renders as — a heading level, or `div` to opt out.
+ *
+ * Shared by every component with a `title` convenience prop (`CuiCardHeader`,
+ * `CuiModalHeader`, `CuiConfirmDialog`), so the vocabulary stays one thing.
+ */
+export type CuiTitleAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
 /** Every component can be hidden via `v-show`. */
 export interface HideableProps {
     /** Hide the component (v-show) */
@@ -45,6 +52,37 @@ export interface DisableableProps {
  */
 export type LiveRegionMode = "off" | "polite" | "assertive";
 /** Components that announce to screen readers via an ARIA live region. */
+/**
+ * The role icon on a feedback component — CuiAlert, CuiToast, CuiBanner. Alongside an
+ * `#icon` slot, which replaces the icon with arbitrary content.
+ */
+/**
+ * For components whose `title` prop renders a heading.
+ *
+ * A title that looks like a heading should be one — a `<div>` is invisible to heading
+ * navigation and absent from the document outline (#129). The right *level* depends on
+ * where the component sits, which the component cannot know, so it is the caller's:
+ * `h2` under a page `h1`, `h4` inside an `h3` section. `div` opts out for a title that
+ * is decorative rather than structural.
+ *
+ * Each component sets its own default in `withDefaults` — `h3` for a card, `h2` for a
+ * dialog, which starts a fresh accessible context.
+ */
+export interface TitleAsProps {
+    /** Element the title renders as. See {@link CuiTitleAs}. */
+    titleAs?: CuiTitleAs;
+}
+export interface RoleIconProps {
+    /**
+     * Replace the role icon. A name in the static icon registry (built-ins plus
+     * `registerIcons()`) renders that icon; anything else — an emoji, a character —
+     * renders as text. A name resolvable only through the optional lazy resolver is not
+     * known statically and renders as text.
+     */
+    icon?: string;
+    /** Hide the role icon entirely. */
+    noIcon?: boolean;
+}
 export interface LiveRegionProps {
     /**
      * Screen-reader live-region mode. Defaults from `color`: `error` → assertive
@@ -68,4 +106,56 @@ export interface FormControlProps extends DisableableProps {
     /** Readonly state */
     readonly?: boolean;
 }
+/**
+ * Attributes that belong on a form control's **native focusable element**, not
+ * on its wrapper.
+ *
+ * Without these declared as props, Vue's attribute fallthrough drops them on
+ * the component's single root — `.cui-input-wrapper`, `.cui-select`, and so on
+ * — which is a plain `<div>`. A `<label for>` then points at something that
+ * cannot be focused or labelled, so clicking the label does nothing and screen
+ * readers never form the label/control association (#78). `name` and
+ * `autocomplete` are equally useless on a wrapper: the browser only reads them
+ * off a real form control.
+ *
+ * Declaring them here takes them out of `$attrs`, so they stop landing on the
+ * wrapper and the component binds them where they belong. `class` and `style`
+ * still fall through to the wrapper, which is where consumers expect them.
+ *
+ * `CuiFormField` supplies `id`, `ariaDescribedby` and `ariaLabelledby` through
+ * its slot bindings, so `v-bind="f"` wires all of this up on its own.
+ */
+export interface AriaLabelableProps {
+    /** id of the element — what a `<label for>` has to point at, where it can. */
+    id?: string;
+    /** id(s) of the text describing this control — help text, error message. */
+    ariaDescribedby?: string;
+    /**
+     * id(s) of the element labelling this control.
+     *
+     * The only way to name something `<label for>` cannot reach: a group has no
+     * single control to point at, and `CuiSelect`'s trigger is a
+     * `div[role="combobox"]`, which is not a *labelable* element. `for`/`id`
+     * silently forms no association with either, so without this they are unnamed.
+     */
+    ariaLabelledby?: string;
+    /**
+     * Marks the control as required for assistive tech.
+     *
+     * `CuiFormField`'s visible marker is an asterisk, which is decorative and `aria-hidden`,
+     * so required-ness reached assistive tech through no path at all (#175). This rides the
+     * same plumbing as `ariaDescribedby`: declared once here, inherited by every control, and
+     * supplied automatically by `CuiFormField`.
+     *
+     * Deliberately `aria-required` rather than the native `required` attribute — the latter
+     * switches on browser validation and would change form behaviour, not just announce it.
+     */
+    ariaRequired?: boolean;
+}
+export interface NativeControlProps extends AriaLabelableProps {
+    /** Native control name, for form serialization and browser autofill. */
+    name?: string;
+    /** Native autocomplete hint, e.g. `"email"`, `"street-address"`, `"off"`. */
+    autocomplete?: string;
+}
 //# sourceMappingURL=common.d.ts.map

package/dist/types/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAKA;wCACwC;AACxC,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,WAAW,GACX,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,eAAe,GACf,cAAc,CAAC;AAEnB;2CAC2C;AAC3C,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvD,yDAAyD;AACzD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9D,mDAAmD;AACnD,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,MAAM,CAAC;AAEzD;+EAC+E;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3E;wEACwE;AACxE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAIrD,kDAAkD;AAClD,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,qDAAqD;AACrD,MAAM,WAAW,aAAa;IAC5B,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,uCAAuC;AACvC,MAAM,WAAW,gBAAgB;IAC/B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE5D,0EAA0E;AAC1E,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,gFAAgF;AAChF,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"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"}

package/dist/utils/colorIconMap.d.ts

@@ -1,6 +1,50 @@
+import type { CuiColor } from "../types/common";
 /**
- * Maps color roles to their default Phosphor icon names.
- * Used by CuiAlert and CuiToast for auto-icons.
+ * Default icon per color role, for CuiAlert, CuiToast and CuiBanner.
+ *
+ * `error` is an octagon rather than an ✕ (which reads as "close") and rather than
+ * `warning-circle` (which would leave hue as the only thing separating the two roles).
+ * `components/__tests__/feedbackRoleIcon.test.ts` holds that invariant.
+ *
+ * These are the defaults, not the answer: `registerRoleIcons()` overrides them app-wide.
  */
-export declare const COLOR_ICON_MAP: Record<string, string>;
+export declare const COLOR_ICON_MAP: Record<CuiColor, string>;
+/**
+ * Override the icon a color role renders in CuiAlert, CuiToast and CuiBanner.
+ *
+ * Role → icon is a theme concern in the same way role → colour is, and colours are
+ * overridable at the root. Without this, a design language with its own error glyph had
+ * to pass `icon` at every single feedback component in the app (#140).
+ *
+ * ```ts
+ * registerRoleIcons({ error: "siren", success: "seal-check" });
+ * ```
+ *
+ * Reactive, so a call after mount re-renders. Names are resolved the same way the `icon`
+ * prop is — see {@link resolveRoleIcon} — so an unregistered name renders as text rather
+ * than as a `?` glyph.
+ */
+export declare function registerRoleIcons(icons: Partial<Record<CuiColor, string>>): void;
+/** Test seam: drop app-level overrides, leaving the library defaults. */
+export declare function __clearRoleIcons(): void;
+/**
+ * Resolve the icon a feedback component should render, from its color role and an
+ * optional `icon` override.
+ *
+ *  - explicit override naming a registered icon → that icon
+ *  - explicit override that is anything else    → rendered as literal text
+ *  - otherwise → the role's icon: `registerRoleIcons()` first, then the library default
+ *
+ * The text branch exists because `CuiToast.icon` has always taken an emoji or a character
+ * and a programmatic toast has no slot to fall back on, so one prop had to cover both.
+ *
+ * The discriminator is the STATIC registry — built-ins plus `registerIcons()`. A name that
+ * only resolves through the optional lazy resolver (`@itguy614/clean-ui/icons/lazy`) is
+ * not known here and renders as text. Mirrors `resolveLiveRegion` in shape: a pure
+ * resolver the components read once (#119).
+ */
+export declare function resolveRoleIcon(icon: string | undefined, color: CuiColor): {
+    name: string | null;
+    text: string | null;
+};
 //# sourceMappingURL=colorIconMap.d.ts.map

package/dist/utils/colorIconMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorIconMap.d.ts","sourceRoot":"","sources":["../../src/utils/colorIconMap.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAOjD,CAAC"}
+{"version":3,"file":"colorIconMap.d.ts","sourceRoot":"","sources":["../../src/utils/colorIconMap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAUnD,CAAC;AAKF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAEhF;AAED,yEAAyE;AACzE,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,KAAK,EAAE,QAAQ,GACd;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAK9C"}

package/dist/utils/colorIconMap.js

@@ -1,11 +1,26 @@
+import { shallowReactive as i } from "vue";
+import { hasIcon as o } from "../icons/registry.js";
 const c = {
+  primary: "info",
+  secondary: "info",
   success: "check-circle",
-  error: "x-circle",
+  error: "warning-octagon",
   warning: "warning-circle",
   info: "info",
-  primary: "info",
-  secondary: "info"
-};
+  surface: "info",
+  "surface-light": "info",
+  "surface-dark": "info"
+}, t = i({});
+function f(n) {
+  Object.assign(t, n);
+}
+function l(n, r) {
+  if (n) return o(n) ? { name: n, text: null } : { name: null, text: n };
+  const e = t[r] ?? c[r] ?? "info";
+  return o(e) ? { name: e, text: null } : { name: null, text: e };
+}
 export {
-  c as COLOR_ICON_MAP
+  c as COLOR_ICON_MAP,
+  f as registerRoleIcons,
+  l as resolveRoleIcon
 };

package/dist/utils/date.d.ts

@@ -7,6 +7,19 @@ export declare function daysInMonth(year: number, month: number): number;
 /** Get day of week for first day of month (0=Sun) */
 export declare function firstDayOfMonth(year: number, month: number): number;
 /** Check if two dates are the same calendar day */
+/** How many years one page of a year picker shows. */
+export declare const YEARS_PER_PAGE = 12;
+/**
+ * Calendar arithmetic. Here rather than private to a component so the next
+ * picker doesn't hand-roll its own — this file is already the home for
+ * `daysInMonth`, `firstDayOfMonth` and friends. Date's constructor normalises
+ * overflow for us, so adding 1 to 31 January lands on 1 February.
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+export declare const addMonths: (date: Date, months: number) => Date;
+export declare const addYears: (date: Date, years: number) => Date;
+/** First year of the page `date` falls in, for a year grid. */
+export declare const yearPageStart: (year: number, perPage?: number) => number;
 export declare function isSameDay(a: Date, b: Date): boolean;
 /** Check if a date is today */
 export declare function isToday(d: Date): boolean;

package/dist/utils/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,eAAO,MAAM,WAAW,UAGvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAG7B,CAAC;AAEF,eAAO,MAAM,eAAe,UAA6C,CAAC;AAE1E,oCAAoC;AACpC,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,qDAAqD;AACrD,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,mDAAmD;AACnD,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAInD;AAED,+BAA+B;AAC/B,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,OAAO,CAExC;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAc7D;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAwC7E;AAED,wFAAwF;AACxF,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAUnD;AAED,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,8CAA8C;AAC9C,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAMlD;AAED,8CAA8C;AAC9C,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAK5C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,kCAAkC;AAClC,wBAAgB,cAAc,CAC5B,IAAI,EAAE,IAAI,EACV,IAAI,EAAE;IACJ,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,iBAAiB,CAAC,EAAE,CAAC;CAChD,GACA,OAAO,CAeT"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,eAAO,MAAM,WAAW,UAGvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAG7B,CAAC;AAEF,eAAO,MAAM,eAAe,UAA6C,CAAC;AAE1E,oCAAoC;AACpC,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,qDAAqD;AACrD,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,mDAAmD;AACnD,sDAAsD;AACtD,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAAI,MAAM,IAAI,EAAE,MAAM,MAAM,KAAG,IACmB,CAAC;AAEvE,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,QAAQ,MAAM,KAAG,IACiB,CAAC;AAEzE,eAAO,MAAM,QAAQ,GAAI,MAAM,IAAI,EAAE,OAAO,MAAM,KAAG,IACkB,CAAC;AAExE,+DAA+D;AAC/D,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,EAAE,UAAS,MAAuB,KAAG,MACzC,CAAC;AAEvC,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAInD;AAED,+BAA+B;AAC/B,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,OAAO,CAExC;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAc7D;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAwC7E;AAED,wFAAwF;AACxF,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAUnD;AAED,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,8CAA8C;AAC9C,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAMlD;AAED,8CAA8C;AAC9C,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAK5C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,kCAAkC;AAClC,wBAAgB,cAAc,CAC5B,IAAI,EAAE,IAAI,EACV,IAAI,EAAE;IACJ,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,iBAAiB,CAAC,EAAE,CAAC;CAChD,GACA,OAAO,CAeT"}

package/dist/utils/date.js

@@ -1,4 +1,4 @@
-const D = [
+const f = [
   "January",
   "February",
   "March",
@@ -11,7 +11,7 @@ const D = [
   "October",
   "November",
   "December"
-], p = [
+], g = [
   "Jan",
   "Feb",
   "Mar",
@@ -24,57 +24,58 @@ const D = [
   "Oct",
   "Nov",
   "Dec"
-], S = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function Y(e, t) {
+], h = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function S(e, t) {
   return new Date(e, t + 1, 0).getDate();
 }
 function A(e, t) {
   return new Date(e, t, 1).getDay();
 }
-function g(e, t) {
+const p = 12, y = (e, t) => new Date(e.getFullYear(), e.getMonth(), e.getDate() + t), m = (e, t) => new Date(e.getFullYear(), e.getMonth() + t, e.getDate()), O = (e, t) => new Date(e.getFullYear() + t, e.getMonth(), e.getDate()), N = (e, t = p) => Math.floor(e / t) * t;
+function Y(e, t) {
   return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-function h(e) {
-  return g(e, /* @__PURE__ */ new Date());
+function T(e) {
+  return Y(e, /* @__PURE__ */ new Date());
 }
-function y(e, t) {
-  const r = e.getFullYear(), n = e.getMonth(), i = e.getDate();
-  return t.replace("YYYY", String(r)).replace("YY", String(r).slice(-2)).replace("MMMM", D[n]).replace("MMM", p[n]).replace("MM", String(n + 1).padStart(2, "0")).replace(new RegExp("(?<!M)M(?!M)"), String(n + 1)).replace("DD", String(i).padStart(2, "0")).replace(new RegExp("(?<!D)D(?!D)"), String(i));
+function w(e, t) {
+  const r = e.getFullYear(), n = e.getMonth(), c = e.getDate();
+  return t.replace("YYYY", String(r)).replace("YY", String(r).slice(-2)).replace("MMMM", f[n]).replace("MMM", g[n]).replace("MM", String(n + 1).padStart(2, "0")).replace(new RegExp("(?<!M)M(?!M)"), String(n + 1)).replace("DD", String(c).padStart(2, "0")).replace(new RegExp("(?<!D)D(?!D)"), String(c));
 }
-function m(e, t) {
+function x(e, t) {
   if (!e || !t) return null;
-  let r = -1, n = -1, i = 1;
-  const c = t.indexOf("YYYY"), o = c === -1 ? t.indexOf("YY") : -1, M = t.indexOf("MMMM"), s = M === -1 ? t.indexOf("MMM") : -1, l = M === -1 && s === -1 ? t.indexOf("MM") : -1, u = t.indexOf("DD");
-  if (c !== -1) {
-    const a = e.slice(c, c + 4);
+  let r = -1, n = -1, c = 1;
+  const i = t.indexOf("YYYY"), s = i === -1 ? t.indexOf("YY") : -1, M = t.indexOf("MMMM"), o = M === -1 ? t.indexOf("MMM") : -1, l = M === -1 && o === -1 ? t.indexOf("MM") : -1, u = t.indexOf("DD");
+  if (i !== -1) {
+    const a = e.slice(i, i + 4);
     r = parseInt(a, 10);
-  } else if (o !== -1) {
-    const a = e.slice(o, o + 2);
+  } else if (s !== -1) {
+    const a = e.slice(s, s + 2);
     r = 2e3 + parseInt(a, 10);
   }
   if (l !== -1) {
     const a = e.slice(l, l + 2);
     n = parseInt(a, 10) - 1;
-  } else if (s !== -1) {
-    const a = e.slice(s, s + 3);
-    n = p.findIndex((f) => f.toLowerCase() === a.toLowerCase());
+  } else if (o !== -1) {
+    const a = e.slice(o, o + 3);
+    n = g.findIndex((D) => D.toLowerCase() === a.toLowerCase());
   } else if (M !== -1) {
-    const a = D.find((f) => e.includes(f));
-    a && (n = D.indexOf(a));
+    const a = f.find((D) => e.includes(D));
+    a && (n = f.indexOf(a));
   }
   if (u !== -1) {
     const a = e.slice(u, u + 2);
-    i = parseInt(a, 10);
+    c = parseInt(a, 10);
   }
-  return isNaN(r) || r < 0 || n < 0 || n > 11 || isNaN(i) ? null : new Date(r, n, i);
+  return isNaN(r) || r < 0 || n < 0 || n > 11 || isNaN(c) ? null : new Date(r, n, c);
 }
-function O(e) {
+function F(e) {
   return e.replace("YYYY", "####").replace("YY", "##").replace("MMMM", "AAAAAAAAAA").replace("MMM", "AAA").replace("MM", "##").replace(new RegExp("(?<!#)M(?!M)"), "##").replace("DD", "##").replace(new RegExp("(?<!#)D(?!D)"), "##");
 }
-function N(e) {
+function I(e) {
   return e.replace(/[^0-9a-zA-Z]/g, "");
 }
-function T(e) {
+function b(e) {
   if (!e) return null;
   const t = e.split("-");
   if (t.length < 3) return null;
@@ -85,7 +86,7 @@ function d(e) {
   const t = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), n = String(e.getDate()).padStart(2, "0");
   return `${t}-${r}-${n}`;
 }
-function x(e, t) {
+function _(e, t) {
   if (t.minDate && e < t.minDate || t.maxDate && e > t.maxDate || t.disabledDate && t.disabledDate(e)) return !0;
   if (t.disabledDates) {
     const r = d(e);
@@ -97,18 +98,23 @@ function x(e, t) {
   return !1;
 }
 export {
-  S as DAY_NAMES_SHORT,
-  D as MONTH_NAMES,
-  p as MONTH_NAMES_SHORT,
+  h as DAY_NAMES_SHORT,
+  f as MONTH_NAMES,
+  g as MONTH_NAMES_SHORT,
+  p as YEARS_PER_PAGE,
+  y as addDays,
+  m as addMonths,
+  O as addYears,
   d as dateToIso,
-  Y as daysInMonth,
+  S as daysInMonth,
   A as firstDayOfMonth,
-  y as formatDate,
-  O as formatToMask,
-  N as formatToRaw,
-  x as isDateDisabled,
-  g as isSameDay,
-  h as isToday,
-  T as isoToDate,
-  m as parseFormattedDate
+  w as formatDate,
+  F as formatToMask,
+  I as formatToRaw,
+  _ as isDateDisabled,
+  Y as isSameDay,
+  T as isToday,
+  b as isoToDate,
+  x as parseFormattedDate,
+  N as yearPageStart
 };

package/dist/utils/sizing.d.ts

@@ -29,8 +29,33 @@ export interface ButtonSizeStyle extends SizeStyle {
  * Use this in JS-emitted size maps instead of hand-writing the calc() string.
  */
 export declare const scaleDensity: (v: string) => string;
-/** Like {@link scaleDensity} but floored at the 24px minimum touch target (WCAG 2.5.8) — for interactive control heights. */
+/**
+ * Like {@link scaleDensity} but floored at the minimum touch target — for interactive
+ * control heights.
+ *
+ * The floor is `--cui-control-min-target`, defaulting to the 24px of WCAG 2.5.8. It is a
+ * custom property so that going below the minimum is a deliberate, greppable act rather
+ * than an accident: set it on a container and every control inside relaxes together, which
+ * is the realistic case (a dense toolbar holds buttons *and* inputs). At the shipped sizes
+ * the floor only actually binds at `xs` + compact density.
+ */
 export declare const scaleControlHeight: (v: string) => string;
+/**
+ * The size one step down the scale — for a control nested inside another, where matching
+ * the parent's size would crowd it: the tag chips inside a combobox or tag input, the
+ * +/- buttons inside an input stepper. `xs` has nowhere lower to go and stays `xs`.
+ *
+ * This is the only sizing concept those three composite controls genuinely shared; the
+ * rest of what their private tables carried derives from `INPUT_SIZE_SCALE` (#123).
+ */
+export declare const nestedSize: (size: CuiSize) => CuiSize;
+/**
+ * Horizontal padding was rebalanced in #123/#124: `md` was 1rem (16px), equal to its own
+ * font size, which read as a lot of dead space beside a short value and sat well above
+ * comparable systems. The whole curve moved rather than just `md`, because dropping `md`
+ * alone to 12px would have made it identical to `sm` and flattened the two most-used
+ * steps. Heights and font sizes are unchanged.
+ */
 export declare const INPUT_SIZE_SCALE: Record<string, SizeStyle>;
 export declare const BUTTON_SIZE_SCALE: Record<string, ButtonSizeStyle>;
 export declare const TEXTAREA_SIZE_SCALE: Record<string, {

package/dist/utils/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/utils/sizing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,gEAAgE;AAChE,eAAO,MAAM,UAAU,EAAE,SAAS,OAAO,EAAmC,CAAC;AAE7E;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,OAAO,EACzC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,SAAS,CAAC,EAAE,GACtB,CAAC,CAaH;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,GAAG,EAAE,MAAM,CAAC;CACb;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,WAAyB,CAAC;AAChE,6HAA6H;AAC7H,eAAO,MAAM,kBAAkB,GAAI,GAAG,MAAM,WAAoC,CAAC;AAMjF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAMtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAM7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAM5F,CAAC"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/utils/sizing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,gEAAgE;AAChE,eAAO,MAAM,UAAU,EAAE,SAAS,OAAO,EAAmC,CAAC;AAE7E;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,OAAO,EACzC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,SAAS,CAAC,EAAE,GACtB,CAAC,CAaH;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,GAAG,EAAE,MAAM,CAAC;CACb;AAQD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,WAAyB,CAAC;AAChE;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAAI,GAAG,MAAM,WACoB,CAAC;AAMjE;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,OAAO,KAAG,OACY,CAAC;AAExD;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAMtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAM7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAM5F,CAAC"}

package/dist/utils/sizing.js

@@ -1,27 +1,27 @@
-const x = ["xs", "sm", "md", "lg", "xl"];
-function h(r, t) {
-  if (t.includes(r)) return r;
-  const S = x.indexOf(r);
-  let n = t[0], i = 1 / 0;
-  for (const o of t) {
-    const s = Math.abs(x.indexOf(o) - S);
-    s < i && (i = s, n = o);
+const t = ["xs", "sm", "md", "lg", "xl"];
+function p(r, n) {
+  if (n.includes(r)) return r;
+  const S = t.indexOf(r);
+  let i = n[0], o = 1 / 0;
+  for (const s of n) {
+    const x = Math.abs(t.indexOf(s) - S);
+    x < o && (o = x, i = s);
   }
-  return n;
+  return i;
 }
-const p = "var(--cui-density-scale, 1)", c = (r) => `calc(${r} * ${p})`, f = (r) => `max(24px, calc(${r} * ${p}))`, e = c, m = f, g = {
+const c = "var(--cui-density-scale, 1)", f = (r) => `calc(${r} * ${c})`, h = (r) => `max(var(--cui-control-min-target, 24px), calc(${r} * ${c}))`, e = f, m = h, g = (r) => t[Math.max(0, t.indexOf(r) - 1)], a = {
   xs: { height: m("1.75rem"), px: e("0.5rem"), fontSize: "0.75rem" },
-  sm: { height: m("2rem"), px: e("0.75rem"), fontSize: "0.8125rem" },
-  md: { height: m("2.5rem"), px: e("1rem"), fontSize: "1rem" },
-  lg: { height: m("3rem"), px: e("1.25rem"), fontSize: "1.0625rem" },
-  xl: { height: m("3.5rem"), px: e("1.5rem"), fontSize: "1.125rem" }
+  sm: { height: m("2rem"), px: e("0.625rem"), fontSize: "0.8125rem" },
+  md: { height: m("2.5rem"), px: e("0.75rem"), fontSize: "1rem" },
+  lg: { height: m("3rem"), px: e("0.875rem"), fontSize: "1.0625rem" },
+  xl: { height: m("3.5rem"), px: e("1rem"), fontSize: "1.125rem" }
 }, l = {
   xs: { height: m("1.75rem"), px: e("0.5rem"), fontSize: "0.75rem", gap: e("0.25rem") },
   sm: { height: m("2rem"), px: e("0.75rem"), fontSize: "0.8125rem", gap: e("0.375rem") },
   md: { height: m("2.5rem"), px: e("1rem"), fontSize: "1rem", gap: e("0.5rem") },
   lg: { height: m("3rem"), px: e("1.5rem"), fontSize: "1.0625rem", gap: e("0.5rem") },
   xl: { height: m("3.5rem"), px: e("2rem"), fontSize: "1.125rem", gap: e("0.625rem") }
-}, a = {
+}, z = {
   xs: { px: e("0.5rem"), py: e("0.25rem"), fontSize: "0.75rem" },
   sm: { px: e("0.75rem"), py: e("0.375rem"), fontSize: "0.8125rem" },
   md: { px: e("1rem"), py: e("0.5rem"), fontSize: "1rem" },
@@ -30,10 +30,11 @@ const p = "var(--cui-density-scale, 1)", c = (r) => `calc(${r} * ${p})`, f = (r)
 };
 export {
   l as BUTTON_SIZE_SCALE,
-  g as INPUT_SIZE_SCALE,
-  x as SIZE_ORDER,
-  a as TEXTAREA_SIZE_SCALE,
-  h as clampSize,
-  f as scaleControlHeight,
-  c as scaleDensity
+  a as INPUT_SIZE_SCALE,
+  t as SIZE_ORDER,
+  z as TEXTAREA_SIZE_SCALE,
+  p as clampSize,
+  g as nestedSize,
+  h as scaleControlHeight,
+  f as scaleDensity
 };

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "1.2.2";
+const o = "1.3.0";
 export {
   o as version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itguy614/clean-ui",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "type": "module",
   "description": "A clean, dark-mode-ready Vue 3 component library — 100+ token-driven, themeable, accessible components.",
   "license": "MIT",