@atelier-ui/react 0.2.14 → 0.2.15

package/src/lib/toggle/atl-toggle.js

@@ -4,8 +4,7 @@ import './atl-toggle.css';
 /**
  * A toggle switch component for binary choices, supporting validation and custom labels.
  */
-export function AtlToggle({ checked = false, onCheckedChange, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, children, className, id, name, ...rest }) {
-    const readOnly = reactReadOnly ?? specReadOnly ?? false;
+export function AtlToggle({ checked = false, onCheckedChange, invalid = false, errors = [], disabled = false, required = false, children, className, id, name, ...rest }) {
     const generatedId = useId();
     const inputId = id || `toggle-${generatedId}`;
     const errorId = `${inputId}-errors`;
@@ -18,6 +17,6 @@ export function AtlToggle({ checked = false, onCheckedChange, invalid = false, e
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { type: "checkbox", role: "switch", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, readOnly: readOnly, required: required, "aria-checked": checked, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), _jsx("span", { className: "track", "aria-hidden": "true", children: _jsx("span", { className: "thumb" }) }), children] }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
+    return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { type: "checkbox", role: "switch", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, required: required, "aria-checked": checked, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), _jsx("span", { className: "track", "aria-hidden": "true", children: _jsx("span", { className: "thumb" }) }), children] }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
 }
 //# sourceMappingURL=atl-toggle.js.map

package/src/lib/toggle/atl-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"atl-toggle.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,kBAAkB,CAAC;AA0B1B;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,OAAO,GAAG,KAAK,EACf,eAAe,EACf,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACQ;IACf,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,UAAU,WAAW,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,kBACP,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACF,eAAM,SAAS,EAAC,OAAO,iBAAa,MAAM,YACxC,eAAM,SAAS,EAAC,OAAO,GAAG,GACrB,EACN,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes, ReactNode, useId } from 'react';\nimport type { AtlToggleSpec } from '../spec';\nimport './atl-toggle.css';\n\n/**\n * Properties for the AtlToggle component.\n */\nexport interface AtlToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly' | 'value'>,\n    AtlToggleSpec {\n  /**\n   * Whether the toggle is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Callback fired when the checked state changes.\n   */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * List of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * Optional content to display alongside the toggle.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A toggle switch component for binary choices, supporting validation and custom labels.\n */\nexport function AtlToggle({\n  checked = false,\n  onCheckedChange,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  required = false,\n  children,\n  className,\n  id,\n  name,\n  ...rest\n}: AtlToggleProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const generatedId = useId();\n  const inputId = id || `toggle-${generatedId}`;\n  const errorId = `${inputId}-errors`;\n\n  const classes = [\n    'atl-toggle',\n    checked && 'is-checked',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes}>\n      <label htmlFor={inputId}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          id={inputId}\n          checked={checked}\n          onChange={(e) => onCheckedChange?.(e.target.checked)}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-checked={checked}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={errors.length > 0 ? errorId : undefined}\n          name={name}\n          {...rest}\n        />\n        <span className=\"track\" aria-hidden=\"true\">\n          <span className=\"thumb\" />\n        </span>\n        {children}\n      </label>\n      {errors.length > 0 && (\n        <div className=\"errors\" id={errorId} aria-live=\"polite\">\n          {errors.map((err, i) => (\n            <p key={i} className=\"error-message\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"atl-toggle.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,kBAAkB,CAAC;AAsB1B;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,OAAO,GAAG,KAAK,EACf,eAAe,EACf,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACQ;IACf,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,UAAU,WAAW,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,kBACP,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACF,eAAM,SAAS,EAAC,OAAO,iBAAa,MAAM,YACxC,eAAM,SAAS,EAAC,OAAO,GAAG,GACrB,EACN,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes, ReactNode, useId } from 'react';\nimport type { AtlToggleSpec } from '../spec';\nimport './atl-toggle.css';\n\n/**\n * Properties for the AtlToggle component.\n */\nexport interface AtlToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly' | 'value'>,\n    AtlToggleSpec {\n  /**\n   * Callback fired when the checked state changes.\n   */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * List of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * Optional content to display alongside the toggle.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A toggle switch component for binary choices, supporting validation and custom labels.\n */\nexport function AtlToggle({\n  checked = false,\n  onCheckedChange,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  required = false,\n  children,\n  className,\n  id,\n  name,\n  ...rest\n}: AtlToggleProps) {\n  const generatedId = useId();\n  const inputId = id || `toggle-${generatedId}`;\n  const errorId = `${inputId}-errors`;\n\n  const classes = [\n    'atl-toggle',\n    checked && 'is-checked',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes}>\n      <label htmlFor={inputId}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          id={inputId}\n          checked={checked}\n          onChange={(e) => onCheckedChange?.(e.target.checked)}\n          disabled={disabled}\n          required={required}\n          aria-checked={checked}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={errors.length > 0 ? errorId : undefined}\n          name={name}\n          {...rest}\n        />\n        <span className=\"track\" aria-hidden=\"true\">\n          <span className=\"thumb\" />\n        </span>\n        {children}\n      </label>\n      {errors.length > 0 && (\n        <div className=\"errors\" id={errorId} aria-live=\"polite\">\n          {errors.map((err, i) => (\n            <p key={i} className=\"error-message\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/src/lib/tooltip/atl-tooltip.css

@@ -1,3 +1,19 @@
+/* Geometry contract: every size this component states is a border-box size.
+ * Declared with the component rather than as a global reset, so it ships in the
+ * same file as the sizes it governs and no consuming app has to supply one.
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
+ * See ADR-0043. */
+:is(
+  .atl-tooltip,
+  .atl-tooltip-wrapper
+),
+:is(
+  .atl-tooltip,
+  .atl-tooltip-wrapper
+) * {
+  box-sizing: border-box;
+}
+
 /* Tooltip wrapper — inline container */
 .atl-tooltip-wrapper {
   display: inline-block;

package/styles/tokens.css

@@ -179,6 +179,18 @@
   --ui-radius-xl: 1.25rem;  /* was 1rem     */
   --ui-radius-full: 9999px;
 
+  /* ── Border widths ──────────────────────────────────────────────────────────
+   * Two steps, because the library only ever needed two: the hairline that
+   * separates surfaces (133 uses) and the heavier weight that marks a control
+   * (12 uses — the avatar status ring, the stepper circle, the checkbox mark,
+   * the table header rule). The 1.5px weight nine control outlines used is
+   * folded into `thick`: a half pixel renders blurry at 1x device-pixel-ratio
+   * and the two weights were never distinguishable side by side.
+   * Not here on purpose: AtlToast's 4px accent bar and AtlRadio's 6px dot are
+   * graphic devices drawn with `border-width`, not border weights. See ADR-0047. */
+  --ui-border-width: 1px;
+  --ui-border-width-thick: 2px;
+
   /* Spacing */
   --ui-spacing-1: 0.25rem;
   --ui-spacing-2: 0.5rem;