@atelier-ui/react 0.2.14 → 0.2.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/package.json +1 -1
- package/src/lib/accordion/atl-accordion.css +21 -5
- package/src/lib/accordion/atl-accordion.d.ts.map +1 -1
- package/src/lib/accordion/atl-accordion.js +2 -3
- package/src/lib/accordion/atl-accordion.js.map +1 -1
- package/src/lib/alert/atl-alert.css +11 -1
- package/src/lib/alert/atl-alert.d.ts.map +1 -1
- package/src/lib/alert/atl-alert.js +2 -1
- package/src/lib/alert/atl-alert.js.map +1 -1
- package/src/lib/avatar/atl-avatar.css +24 -4
- package/src/lib/avatar/atl-avatar.d.ts.map +1 -1
- package/src/lib/avatar/atl-avatar.js +2 -1
- package/src/lib/avatar/atl-avatar.js.map +1 -1
- package/src/lib/badge/atl-badge.css +16 -6
- package/src/lib/breadcrumbs/atl-breadcrumbs.css +16 -0
- package/src/lib/button/atl-button.css +12 -2
- package/src/lib/card/atl-card.css +29 -4
- package/src/lib/chat/atl-chat.css +44 -15
- package/src/lib/chat/atl-chat.d.ts.map +1 -1
- package/src/lib/chat/atl-chat.js +2 -1
- package/src/lib/chat/atl-chat.js.map +1 -1
- package/src/lib/checkbox/atl-checkbox.css +12 -2
- package/src/lib/checkbox/atl-checkbox.d.ts +1 -5
- package/src/lib/checkbox/atl-checkbox.d.ts.map +1 -1
- package/src/lib/checkbox/atl-checkbox.js +2 -3
- package/src/lib/checkbox/atl-checkbox.js.map +1 -1
- package/src/lib/code-block/atl-code-block.css +27 -8
- package/src/lib/code-block/atl-code-block.d.ts.map +1 -1
- package/src/lib/code-block/atl-code-block.js +2 -1
- package/src/lib/code-block/atl-code-block.js.map +1 -1
- package/src/lib/combobox/atl-combobox.css +56 -5
- package/src/lib/combobox/atl-combobox.d.ts.map +1 -1
- package/src/lib/combobox/atl-combobox.js +4 -2
- package/src/lib/combobox/atl-combobox.js.map +1 -1
- package/src/lib/dialog/atl-dialog.css +28 -4
- package/src/lib/dialog/atl-dialog.d.ts.map +1 -1
- package/src/lib/dialog/atl-dialog.js +2 -1
- package/src/lib/dialog/atl-dialog.js.map +1 -1
- package/src/lib/drawer/atl-drawer.css +31 -4
- package/src/lib/drawer/atl-drawer.d.ts.map +1 -1
- package/src/lib/drawer/atl-drawer.js +2 -1
- package/src/lib/drawer/atl-drawer.js.map +1 -1
- package/src/lib/icon/atl-icon.css +18 -0
- package/src/lib/icon/atl-icon.d.ts +2 -1
- package/src/lib/icon/atl-icon.d.ts.map +1 -1
- package/src/lib/icon/atl-icon.js +6 -25
- package/src/lib/icon/atl-icon.js.map +1 -1
- package/src/lib/icons.d.ts +39 -0
- package/src/lib/icons.d.ts.map +1 -0
- package/src/lib/icons.js +49 -0
- package/src/lib/icons.js.map +1 -0
- package/src/lib/input/atl-input.css +21 -7
- package/src/lib/input/atl-input.d.ts.map +1 -1
- package/src/lib/input/atl-input.js +2 -1
- package/src/lib/input/atl-input.js.map +1 -1
- package/src/lib/menu/atl-menu.css +28 -3
- package/src/lib/pagination/atl-pagination.css +11 -1
- package/src/lib/progress/atl-progress.css +10 -0
- package/src/lib/radio/atl-radio.css +11 -1
- package/src/lib/radio/atl-radio.d.ts.map +1 -1
- package/src/lib/radio/atl-radio.js +5 -3
- package/src/lib/radio/atl-radio.js.map +1 -1
- package/src/lib/radio-group/atl-radio-group.css +10 -0
- package/src/lib/select/atl-select.css +21 -3
- package/src/lib/select/atl-select.d.ts +1 -5
- package/src/lib/select/atl-select.d.ts.map +1 -1
- package/src/lib/select/atl-select.js +1 -3
- package/src/lib/select/atl-select.js.map +1 -1
- package/src/lib/skeleton/atl-skeleton.css +15 -0
- package/src/lib/spec.d.ts +20 -6
- package/src/lib/spec.d.ts.map +1 -1
- package/src/lib/spec.js +1 -1
- package/src/lib/spec.js.map +1 -1
- package/src/lib/stepper/atl-stepper.css +11 -1
- package/src/lib/stepper/atl-stepper.d.ts.map +1 -1
- package/src/lib/stepper/atl-stepper.js +2 -1
- package/src/lib/stepper/atl-stepper.js.map +1 -1
- package/src/lib/table/atl-table.css +42 -3
- package/src/lib/table/atl-table.d.ts.map +1 -1
- package/src/lib/table/atl-table.js +2 -1
- package/src/lib/table/atl-table.js.map +1 -1
- package/src/lib/tabs/atl-tabs.css +27 -5
- package/src/lib/textarea/atl-textarea.css +22 -7
- package/src/lib/textarea/atl-textarea.d.ts.map +1 -1
- package/src/lib/textarea/atl-textarea.js +2 -1
- package/src/lib/textarea/atl-textarea.js.map +1 -1
- package/src/lib/toast/atl-toast.css +21 -0
- package/src/lib/toast/atl-toast.d.ts.map +1 -1
- package/src/lib/toast/atl-toast.js +2 -1
- package/src/lib/toast/atl-toast.js.map +1 -1
- package/src/lib/toggle/atl-toggle.css +11 -1
- package/src/lib/toggle/atl-toggle.d.ts +1 -5
- package/src/lib/toggle/atl-toggle.d.ts.map +1 -1
- package/src/lib/toggle/atl-toggle.js +2 -3
- package/src/lib/toggle/atl-toggle.js.map +1 -1
- package/src/lib/tooltip/atl-tooltip.css +21 -0
- package/styles/tokens.css +12 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-toast.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/atl-toast.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,QAAQ,EACR,WAAW,EACX,MAAM,GAEP,MAAM,OAAO,CAAC;AAKf,OAAO,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"atl-toast.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/atl-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n useState,\n useCallback,\n useRef,\n ReactNode,\n} from 'react';\nimport type {\n AtlToastOptions,\n AtlToastContainerPosition,\n} from '../spec';\nimport './atl-toast.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/**\n * Internal data structure for a toast message.\n */\nexport interface ToastData extends Required<AtlToastOptions> {\n id: string;\n message: string;\n}\n\ninterface ToastContextValue {\n show: (message: string, options?: AtlToastOptions) => string;\n dismiss: (id: string) => void;\n clear: () => void;\n toasts: ToastData[];\n}\n\nconst ToastContext = createContext<ToastContextValue>({\n show: () => '',\n dismiss: () => undefined,\n clear: () => undefined,\n toasts: [],\n});\n\n/**\n * Context provider that manages the toast state.\n */\nexport function AtlToastProvider({ children }: { children: ReactNode }) {\n const [toasts, setToasts] = useState<ToastData[]>([]);\n const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());\n const toastId = useRef(0);\n\n const dismiss = useCallback((id: string) => {\n const timer = timersRef.current.get(id);\n if (timer) {\n clearTimeout(timer);\n timersRef.current.delete(id);\n }\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n const show = useCallback(\n (message: string, options: AtlToastOptions = {}): string => {\n const id = `atl-toast-${toastId.current++}`;\n const toast: ToastData = {\n id,\n message,\n variant: options.variant ?? 'default',\n duration: options.duration ?? 5000,\n dismissible: options.dismissible ?? true,\n };\n setToasts((prev) => [...prev, toast]);\n if (toast.duration > 0) {\n const timer = setTimeout(() => dismiss(id), toast.duration);\n timersRef.current.set(id, timer);\n }\n return id;\n },\n [dismiss]\n );\n\n const clear = useCallback(() => {\n for (const timer of timersRef.current.values()) clearTimeout(timer);\n timersRef.current.clear();\n setToasts([]);\n }, []);\n\n return (\n <ToastContext.Provider value={{ show, dismiss, clear, toasts }}>\n {children}\n </ToastContext.Provider>\n );\n}\n\n/** Access toast actions: show, dismiss, clear. Must be inside AtlToastProvider. */\nexport function useAtlToast() {\n const ctx = useContext(ToastContext);\n return { show: ctx.show, dismiss: ctx.dismiss, clear: ctx.clear };\n}\n\n/**\n * Properties for the AtlToastContainer component.\n */\nexport interface AtlToastContainerProps {\n /**\n * Position of the toast container in the viewport.\n */\n position?: AtlToastContainerPosition;\n}\n\n/**\n * Renders the toast stack at a fixed viewport position.\n * Must be placed inside AtlToastProvider.\n */\nexport function AtlToastContainer({ position = 'bottom-right' }: AtlToastContainerProps) {\n const { toasts, dismiss } = useContext(ToastContext);\n const classes = `atl-toast-container position-${position}`;\n\n return (\n <div className={classes} aria-live=\"polite\" role=\"status\">\n {toasts.map((toast) => (\n <AtlToastItem key={toast.id} data={toast} onDismiss={dismiss} />\n ))}\n </div>\n );\n}\n\n/**\n * Properties for the AtlToastItem component.\n */\nexport interface AtlToastItemProps {\n /**\n * The toast data to display.\n */\n data: ToastData;\n /**\n * Callback fired when the toast is dismissed.\n */\n onDismiss: (id: string) => void;\n}\n\n/**\n * An individual toast notification item.\n */\nexport function AtlToastItem({ data, onDismiss }: AtlToastItemProps) {\n const classes = `atl-toast variant-${data.variant}`;\n return (\n <div className={classes} role=\"status\">\n <span className=\"message\">{data.message}</span>\n {data.dismissible && (\n <button\n className=\"dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n onClick={() => onDismiss(data.id)}\n >\n <AtlIcon name=\"close\" size=\"sm\" />\n </button>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
/* Geometry contract: every size this component states is a border-box size.
|
|
2
|
+
* Declared with the component rather than as a global reset, so it ships in the
|
|
3
|
+
* same file as the sizes it governs and no consuming app has to supply one.
|
|
4
|
+
* Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
|
|
5
|
+
* See ADR-0043. */
|
|
6
|
+
.atl-toggle,
|
|
7
|
+
.atl-toggle * {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
}
|
|
10
|
+
|
|
1
11
|
.atl-toggle {
|
|
2
12
|
display: block;
|
|
3
13
|
font-family: var(--ui-font-family);
|
|
@@ -37,7 +47,7 @@
|
|
|
37
47
|
width: 2.75rem;
|
|
38
48
|
height: 1.5rem;
|
|
39
49
|
border-radius: var(--ui-radius-full);
|
|
40
|
-
border:
|
|
50
|
+
border: var(--ui-border-width) solid var(--ui-color-border-strong);
|
|
41
51
|
background-color: var(--ui-color-input-bg);
|
|
42
52
|
transition: background-color var(--ui-transition-fast),
|
|
43
53
|
border-color var(--ui-transition-fast),
|
|
@@ -5,10 +5,6 @@ import './atl-toggle.css';
|
|
|
5
5
|
* Properties for the AtlToggle component.
|
|
6
6
|
*/
|
|
7
7
|
export interface AtlToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly' | 'value'>, AtlToggleSpec {
|
|
8
|
-
/**
|
|
9
|
-
* Whether the toggle is read-only.
|
|
10
|
-
*/
|
|
11
|
-
readOnly?: boolean;
|
|
12
8
|
/**
|
|
13
9
|
* Callback fired when the checked state changes.
|
|
14
10
|
*/
|
|
@@ -25,5 +21,5 @@ export interface AtlToggleProps extends Omit<InputHTMLAttributes<HTMLInputElemen
|
|
|
25
21
|
/**
|
|
26
22
|
* A toggle switch component for binary choices, supporting validation and custom labels.
|
|
27
23
|
*/
|
|
28
|
-
export declare function AtlToggle({ checked, onCheckedChange, invalid, errors, disabled,
|
|
24
|
+
export declare function AtlToggle({ checked, onCheckedChange, invalid, errors, disabled, required, children, className, id, name, ...rest }: AtlToggleProps): import("react").JSX.Element;
|
|
29
25
|
//# sourceMappingURL=atl-toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-toggle.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzG,aAAa;IACf;;OAEG;IACH,
|
|
1
|
+
{"version":3,"file":"atl-toggle.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzG,aAAa;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAe,EACf,eAAe,EACf,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,+BAiDhB"}
|
|
@@ -4,8 +4,7 @@ import './atl-toggle.css';
|
|
|
4
4
|
/**
|
|
5
5
|
* A toggle switch component for binary choices, supporting validation and custom labels.
|
|
6
6
|
*/
|
|
7
|
-
export function AtlToggle({ checked = false, onCheckedChange, invalid = false, errors = [], disabled = false,
|
|
8
|
-
const readOnly = reactReadOnly ?? specReadOnly ?? false;
|
|
7
|
+
export function AtlToggle({ checked = false, onCheckedChange, invalid = false, errors = [], disabled = false, required = false, children, className, id, name, ...rest }) {
|
|
9
8
|
const generatedId = useId();
|
|
10
9
|
const inputId = id || `toggle-${generatedId}`;
|
|
11
10
|
const errorId = `${inputId}-errors`;
|
|
@@ -18,6 +17,6 @@ export function AtlToggle({ checked = false, onCheckedChange, invalid = false, e
|
|
|
18
17
|
]
|
|
19
18
|
.filter(Boolean)
|
|
20
19
|
.join(' ');
|
|
21
|
-
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,
|
|
20
|
+
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))) }))] }));
|
|
22
21
|
}
|
|
23
22
|
//# sourceMappingURL=atl-toggle.js.map
|
|
@@ -1 +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;
|
|
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;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"]}
|
|
@@ -1,5 +1,26 @@
|
|
|
1
|
+
/* Geometry contract: every size this component states is a border-box size.
|
|
2
|
+
* Declared with the component rather than as a global reset, so it ships in the
|
|
3
|
+
* same file as the sizes it governs and no consuming app has to supply one.
|
|
4
|
+
* Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
|
|
5
|
+
* See ADR-0043. */
|
|
6
|
+
:is(
|
|
7
|
+
.atl-tooltip,
|
|
8
|
+
.atl-tooltip-wrapper
|
|
9
|
+
),
|
|
10
|
+
:is(
|
|
11
|
+
.atl-tooltip,
|
|
12
|
+
.atl-tooltip-wrapper
|
|
13
|
+
) * {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
}
|
|
16
|
+
|
|
1
17
|
/* Tooltip wrapper — inline container */
|
|
2
18
|
.atl-tooltip-wrapper {
|
|
19
|
+
/* The library states its own typeface (ADR-0035). Without this the component
|
|
20
|
+
* renders in the consuming app's font while its neighbours render Instrument
|
|
21
|
+
* Sans — measured: a card next to a button showed two typefaces. Declared once
|
|
22
|
+
* per component root, never on a descendant (ADR-0049). */
|
|
23
|
+
font-family: var(--ui-font-family);
|
|
3
24
|
display: inline-block;
|
|
4
25
|
position: relative;
|
|
5
26
|
}
|
package/styles/tokens.css
CHANGED
|
@@ -179,6 +179,18 @@
|
|
|
179
179
|
--ui-radius-xl: 1.25rem; /* was 1rem */
|
|
180
180
|
--ui-radius-full: 9999px;
|
|
181
181
|
|
|
182
|
+
/* ── Border widths ──────────────────────────────────────────────────────────
|
|
183
|
+
* Two steps, because the library only ever needed two: the hairline that
|
|
184
|
+
* separates surfaces (133 uses) and the heavier weight that marks a control
|
|
185
|
+
* (12 uses — the avatar status ring, the stepper circle, the checkbox mark,
|
|
186
|
+
* the table header rule). The 1.5px weight nine control outlines used is
|
|
187
|
+
* folded into `thick`: a half pixel renders blurry at 1x device-pixel-ratio
|
|
188
|
+
* and the two weights were never distinguishable side by side.
|
|
189
|
+
* Not here on purpose: AtlToast's 4px accent bar and AtlRadio's 6px dot are
|
|
190
|
+
* graphic devices drawn with `border-width`, not border weights. See ADR-0047. */
|
|
191
|
+
--ui-border-width: 1px;
|
|
192
|
+
--ui-border-width-thick: 2px;
|
|
193
|
+
|
|
182
194
|
/* Spacing */
|
|
183
195
|
--ui-spacing-1: 0.25rem;
|
|
184
196
|
--ui-spacing-2: 0.5rem;
|