@fpkit/acss 0.5.12 → 0.5.13

package/libs/components/dialog/dialog.d.ts

@@ -1,51 +1,105 @@
-import React__default, { CSSProperties } from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
+import React__default, { ReactNode, CSSProperties } from 'react';
 
 /**
- * Defines the props for the Dialog component.
+ * Base properties shared by all dialog variants.
  *
- * @property {boolean} [showDialog] - Determines whether the dialog should be shown.
- * @property {boolean} [isAlertDialog] - Determines whether the dialog should be displayed as an alert dialog.
- * @property {() => void} [onClose] - A callback function to be called when the dialog is closed.
- * @property {string} dialogTitle - The title of the dialog.
- * @property {string} [dialogLabel] - An optional label for the dialog.
- * @property {React.ReactNode} children - The content to be displayed inside the dialog.
- * @property {() => void | Promise<void>} [onConfirm] - A callback function to be called when the user confirms the dialog.
- * @property {string} [confirmLabel] - The label for the confirm button.
- * @property {string} [cancelLabel] - The label for the cancel button.
- * @property {string} [className] - An optional CSS class name to be applied to the dialog.
- * @property {CSSProperties} [styles] - Optional inline styles to be applied to the dialog.
+ * @property {string} dialogTitle - The title displayed in the dialog header
+ * @property {string} [dialogLabel] - Optional accessible label for the dialog (aria-label)
+ * @property {ReactNode} children - Content to be displayed inside the dialog body
+ * @property {string} [className] - Additional CSS classes to apply to the dialog
+ * @property {CSSProperties} [styles] - Inline styles to apply to the dialog element
  */
-type DialogModalProps = React__default.ComponentProps<typeof FP> & React__default.ComponentProps<"dialog"> & {
+interface BaseDialogProps {
+    /** The title displayed in the dialog header */
     dialogTitle: string;
+    /** Optional accessible label for the dialog (aria-label) */
     dialogLabel?: string;
-    children: React__default.ReactNode;
-    showDialog?: boolean;
+    /** Content to be displayed inside the dialog body */
+    children: ReactNode;
+    /** Additional CSS classes to apply to the dialog */
+    className?: string;
+    /** Inline styles to apply to the dialog element */
+    styles?: CSSProperties;
+}
+/**
+ * Props for the controlled Dialog component.
+ * Use this when you want to manage dialog state externally.
+ *
+ * @extends BaseDialogProps
+ * @property {boolean} isOpen - Controls whether the dialog is currently open
+ * @property {(open: boolean) => void} onOpenChange - Callback fired when dialog open state should change
+ * @property {boolean} [isAlertDialog=false] - If true, renders as non-modal inline alert using dialog.show()
+ * @property {() => void} [onClose] - Deprecated: Use onOpenChange instead. Called when dialog closes.
+ * @property {() => void | Promise<void>} [onConfirm] - Callback fired when confirm button is clicked
+ * @property {string} [confirmLabel="Confirm"] - Text label for the confirm button
+ * @property {string} [cancelLabel="Cancel"] - Text label for the cancel button
+ * @property {boolean} [hideFooter=false] - If true, hides the dialog footer with action buttons
+ */
+interface DialogProps extends BaseDialogProps {
+    /** Controls whether the dialog is currently open (controlled component) */
+    isOpen: boolean;
+    /** Callback fired when dialog open state should change */
+    onOpenChange: (open: boolean) => void;
+    /** If true, renders as non-modal inline alert using dialog.show() instead of dialog.showModal() */
     isAlertDialog?: boolean;
+    /** @deprecated Use onOpenChange instead. Called when dialog closes. */
     onClose?: () => void;
+    /** Callback fired when confirm button is clicked */
     onConfirm?: () => void | Promise<void>;
+    /** Text label for the confirm button */
     confirmLabel?: string;
+    /** Text label for the cancel button */
     cancelLabel?: string;
-    className?: string;
+    /** If true, hides the dialog footer with action buttons */
     hideFooter?: boolean;
-    styles?: CSSProperties;
-};
+}
+
 /**
- * Renders a dialog modal component with customizable content and behavior.
+ * A controlled dialog component that supports both modal and non-modal (inline alert) modes.
+ *
+ * **Modal Dialog** (default): Uses native `<dialog>` element with `.showModal()` which provides:
+ * - Automatic focus trap (Tab cycles within dialog)
+ * - Escape key closes dialog (native behavior)
+ * - Backdrop overlay with click-to-close
+ * - Inert background (page content becomes non-interactive)
+ *
+ * **Inline Alert Dialog** (`isAlertDialog={true}`): Uses `.show()` for non-modal inline alerts:
+ * - No focus trap (page remains interactive)
+ * - No escape key behavior
+ * - Positioned inline in page flow
+ * - User must explicitly close with button
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Controlled usage
+ * const [open, setOpen] = useState(false);
+ * <Dialog
+ *   isOpen={open}
+ *   onOpenChange={setOpen}
+ *   dialogTitle="Confirm Delete"
+ * >
+ *   Are you sure you want to delete this item?
+ * </Dialog>
+ * ```
  *
- * @param showDialog - Determines whether the dialog should be shown.
- * @param isAlertDialog - Determines whether the dialog should be displayed as an alert dialog.
- * @param onClose - A callback function to be called when the dialog is closed.
- * @param dialogTitle - The title of the dialog.
- * @param dialogLabel - An optional label for the dialog.
- * @param children - The content to be displayed inside the dialog.
- * @param onConfirm - A callback function to be called when the user confirms the dialog.
- * @param confirmLabel - The label for the confirm button.
- * @param cancelLabel - The label for the cancel button.
- * @param className - An optional CSS class name to be applied to the dialog.
- * @param styles - Optional inline styles to be applied to the dialog.
+ * @param {DialogProps} props - Component props
+ * @param {boolean} props.isOpen - Controls whether the dialog is currently open
+ * @param {(open: boolean) => void} props.onOpenChange - Callback fired when dialog open state changes
+ * @param {string} props.dialogTitle - The title displayed in the dialog header
+ * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert
+ * @param {() => void} [props.onClose] - Deprecated: Use onOpenChange. Called when dialog closes.
+ * @param {ReactNode} props.children - Content to display inside the dialog body
+ * @param {() => void | Promise<void>} [props.onConfirm] - Callback fired when confirm button is clicked
+ * @param {string} [props.confirmLabel="Confirm"] - Text label for confirm button
+ * @param {string} [props.cancelLabel="Cancel"] - Text label for cancel button
+ * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {string} [props.dialogLabel] - Optional aria-label for the dialog
+ * @param {CSSProperties} [props.styles] - Inline styles to apply to dialog element
+ * @returns {JSX.Element} A controlled dialog component
  */
-declare const Dialog: React__default.FC<DialogModalProps>;
-declare const _default: React__default.NamedExoticComponent<DialogModalProps>;
+declare const Dialog: React__default.FC<DialogProps>;
+declare const _default: React__default.NamedExoticComponent<DialogProps>;
 
 export { Dialog, _default as default };

package/libs/components/dialog/dialog.js

@@ -1,7 +1,7 @@
-export { a as Dialog, b as default } from '../../chunk-SXVZSWX6.js';
-import '../../chunk-HYBZBN4G.js';
-import '../../chunk-O6QZBB6G.js';
-import '../../chunk-QCMV4VQZ.js';
-import '../../chunk-NE6YXTMC.js';
+export { a as Dialog, b as default } from '../../chunk-VUH3FXGJ.js';
+import '../../chunk-ETFLFC2S.js';
+import '../../chunk-772NRB75.js';
+import '../../chunk-QLZWHAMK.js';
+import '../../chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=dialog.js.map

package/libs/components/dialog/dialog.min.css

@@ -1,3 +1,3 @@
-:root{--dialog-min-w: max(20rem, 80%);--dialog-gap: 0.625rem;--dialog-border-color: lightgray;--dialog-border-width: thin;--dialog-border-style: solid;--dialog-border-radius: var(--border-radius);--dialog-padding: 1.5rem;--dialog-padding-inline: 1rem;--dialog-close-color: gray;--dialog-button-bg: transparent;--dialog-button-border: transparent thin solid;--dialog-button-hover-bg: whitesmoke;--dialog-display: flex;--dialog-flex-direction: column}dialog{width:var(--dialog-min-w);min-width:var(--min-w);gap:var(--dialog-gap);border:var(--dialog-border-color) var(--dialog-border-width) solid;border-radius:var(--dialog-border-radius);padding:var(--dialog-padding);padding-block-start:calc(var(--dialog-padding) - 0rem)}dialog[open]{display:var(--dialog-display);flex-direction:var(--dialog-flex-direction);gap:var(--dialog-gap)}dialog section{width:100%;display:flex;justify-content:start;gap:var(--dialog-gap);flex-direction:var(--dialog-flex-direction);margin-block-start:0;--sect-y: 0}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:100%}.dialog-header h3{margin-block-start:0;margin-block-end:0}.dialog-header .dialog-close{margin-block-end:0}.dialog-header button[type=button]{background-color:var(--dialog-button-bg);border:var(--dialog-button-border);cursor:pointer}.dialog-header button[type=button]:hover,.dialog-header button[type=button]:focus{border-color:var(--dialog-close-color);background-color:var(--dialog-button-hover-bg)}.alert-dialog-actions,.dialog-footer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:var(--dialog-footer-justify, flex-end);gap:var(--dialog-gap);width:100%}
+:root{--dialog-min-w: max(20rem, 80%);--dialog-gap: 0.625rem;--dialog-border-color: lightgray;--dialog-border-width: thin;--dialog-border-style: solid;--dialog-border-radius: var(--border-radius);--dialog-padding: 1.5rem;--dialog-padding-inline: 1rem;--dialog-close-color: gray;--dialog-button-bg: transparent;--dialog-button-border: transparent thin solid;--dialog-button-hover-bg: whitesmoke;--dialog-display: flex;--dialog-flex-direction: column;--dialog-focus-color: #0066cc;--dialog-focus-width: 0.125rem;--dialog-focus-offset: 0.125rem;--dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color)}@media(prefers-contrast: high){:root{--dialog-border-color: currentColor;--dialog-border-width: 0.125rem;--dialog-close-color: currentColor;--dialog-button-border: currentColor 0.125rem solid;--dialog-focus-width: 0.1875rem}}dialog{width:var(--dialog-min-w);min-width:var(--min-w);gap:var(--dialog-gap);border:var(--dialog-border-color) var(--dialog-border-width) solid;border-radius:var(--dialog-border-radius);padding:var(--dialog-padding);padding-block-start:var(--dialog-padding)}dialog:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}dialog[open]{display:var(--dialog-display);flex-direction:var(--dialog-flex-direction);gap:var(--dialog-gap)}dialog section{width:100%;display:flex;justify-content:start;gap:var(--dialog-gap);flex-direction:var(--dialog-flex-direction);margin-block-start:0;--sect-y: 0}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:100%}.dialog-header h3{margin-block-start:0;margin-block-end:0}.dialog-header .dialog-close{margin-block-end:0}.dialog-header button[type=button]{background-color:var(--dialog-button-bg);border:var(--dialog-button-border);cursor:pointer}.dialog-header button[type=button]:hover{border-color:var(--dialog-close-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset);border-color:var(--dialog-focus-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus:not(:focus-visible){outline:none}.alert-dialog-actions,.dialog-footer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:var(--dialog-footer-justify, flex-end);gap:var(--dialog-gap);width:100%}.alert-dialog-actions button:focus-visible,.dialog-footer button:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}.alert-dialog-actions button:focus:not(:focus-visible),.dialog-footer button:focus:not(:focus-visible){outline:none}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RpYWxvZy9kaWFsb2cuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLCtCQUFBLENBQ0Esc0JBQUEsQ0FDQSxnQ0FBQSxDQUNBLDJCQUFBLENBQ0EsNEJBQUEsQ0FDQSw0Q0FBQSxDQUNBLHdCQUFBLENBQ0EsNkJBQUEsQ0FDQSwwQkFBQSxDQUNBLCtCQUFBLENBQ0EsOENBQUEsQ0FDQSxvQ0FBQSxDQUNBLHNCQUFBLENBQ0EsK0JBQUEsQ0FHRixPQUNFLHlCQUFBLENBQ0Esc0JBQUEsQ0FDQSxxQkFBQSxDQUNBLGtFQUFBLENBQ0EseUNBQUEsQ0FDQSw2QkFBQSxDQUNBLHNEQUFBLENBRUEsYUFDRSw2QkFBQSxDQUNBLDJDQUFBLENBQ0EscUJBQUEsQ0FFRixlQUNFLFVBQUEsQ0FDQSxZQUFBLENBQ0EscUJBQUEsQ0FDQSxxQkFBQSxDQUNBLDJDQUFBLENBQ0Esb0JBQUEsQ0FDQSxXQUFBLENBSUosZUFDRSxZQUFBLENBQ0EsNkJBQUEsQ0FDQSxrQkFBQSxDQUNBLFVBQUEsQ0FDQSxjQUFBLENBQ0Esa0JBQ0Usb0JBQUEsQ0FDQSxrQkFBQSxDQUVGLDZCQUNFLGtCQUFBLENBRUYsbUNBQ0Usd0NBQUEsQ0FDQSxrQ0FBQSxDQUNBLGNBQUEsQ0FDQSxrRkFFRSxzQ0FBQSxDQUNBLDhDQUFBLENBS04scUNBRUUsWUFBQSxDQUNBLGtCQUFBLENBQ0EsY0FBQSxDQUNBLHNEQUFBLENBQ0EscUJBQUEsQ0FDQSxVQUFBIiwiZmlsZSI6ImRpYWxvZy5taW4uY3NzIn0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RpYWxvZy9kaWFsb2cuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLCtCQUFBLENBQ0Esc0JBQUEsQ0FDQSxnQ0FBQSxDQUNBLDJCQUFBLENBQ0EsNEJBQUEsQ0FDQSw0Q0FBQSxDQUNBLHdCQUFBLENBQ0EsNkJBQUEsQ0FDQSwwQkFBQSxDQUNBLCtCQUFBLENBQ0EsOENBQUEsQ0FDQSxvQ0FBQSxDQUNBLHNCQUFBLENBQ0EsK0JBQUEsQ0FHQSw2QkFBQSxDQUNBLDhCQUFBLENBQ0EsK0JBQUEsQ0FDQSxpRkFBQSxDQUlGLCtCQUNFLE1BQ0UsbUNBQUEsQ0FDQSwrQkFBQSxDQUNBLGtDQUFBLENBQ0EsbURBQUEsQ0FDQSwrQkFBQSxDQUFBLENBSUosT0FDRSx5QkFBQSxDQUNBLHNCQUFBLENBQ0EscUJBQUEsQ0FDQSxrRUFBQSxDQUNBLHlDQUFBLENBQ0EsNkJBQUEsQ0FDQSx5Q0FBQSxDQUdBLHFCQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FHRixhQUNFLDZCQUFBLENBQ0EsMkNBQUEsQ0FDQSxxQkFBQSxDQUdGLGVBQ0UsVUFBQSxDQUNBLFlBQUEsQ0FDQSxxQkFBQSxDQUNBLHFCQUFBLENBQ0EsMkNBQUEsQ0FDQSxvQkFBQSxDQUNBLFdBQUEsQ0FJSixlQUNFLFlBQUEsQ0FDQSw2QkFBQSxDQUNBLGtCQUFBLENBQ0EsVUFBQSxDQUNBLGNBQUEsQ0FFQSxrQkFDRSxvQkFBQSxDQUNBLGtCQUFBLENBR0YsNkJBQ0Usa0JBQUEsQ0FHRixtQ0FDRSx3Q0FBQSxDQUNBLGtDQUFBLENBQ0EsY0FBQSxDQUVBLHlDQUNFLHNDQUFBLENBQ0EsOENBQUEsQ0FJRixpREFDRSxtQ0FBQSxDQUNBLHlDQUFBLENBQ0Esc0NBQUEsQ0FDQSw4Q0FBQSxDQUlGLDZEQUNFLFlBQUEsQ0FLTixxQ0FFRSxZQUFBLENBQ0Esa0JBQUEsQ0FDQSxjQUFBLENBQ0Esc0RBQUEsQ0FDQSxxQkFBQSxDQUNBLFVBQUEsQ0FHQSwrRUFDRSxtQ0FBQSxDQUNBLHlDQUFBLENBR0YsdUdBQ0UsWUFBQSIsImZpbGUiOiJkaWFsb2cubWluLmNzcyJ9 */

package/libs/components/form/fields.cjs

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunk6BVXFW7U_cjs = require('../../chunk-6BVXFW7U.cjs');
-require('../../chunk-6TE5QEVE.cjs');
+var chunkAHDJGCG5_cjs = require('../../chunk-AHDJGCG5.cjs');
+require('../../chunk-L75OQKEI.cjs');
 
 
 
 Object.defineProperty(exports, 'Field', {
 	enumerable: true,
-	get: function () { return chunk6BVXFW7U_cjs.a; }
+	get: function () { return chunkAHDJGCG5_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunk6BVXFW7U_cjs.b; }
+	get: function () { return chunkAHDJGCG5_cjs.b; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=fields.cjs.map

package/libs/components/form/fields.d.cts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
+import { U as UI } from '../../ui-645f95b5.js';
 
 type FieldProps = {
     /**
@@ -7,7 +7,7 @@ type FieldProps = {
      */
     label: React__default.ReactNode;
     children: React__default.ReactNode;
-} & React__default.ComponentProps<'label'> & Partial<React__default.ComponentProps<typeof FP>>;
+} & React__default.ComponentProps<'label'> & Partial<React__default.ComponentProps<typeof UI>>;
 /**
  * Field component that renders a label and children wrapped in a div element.
  * @param labelFor Defines the for attribute of the label element

package/libs/components/form/fields.d.ts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
+import { U as UI } from '../../ui-645f95b5.js';
 
 type FieldProps = {
     /**
@@ -7,7 +7,7 @@ type FieldProps = {
      */
     label: React__default.ReactNode;
     children: React__default.ReactNode;
-} & React__default.ComponentProps<'label'> & Partial<React__default.ComponentProps<typeof FP>>;
+} & React__default.ComponentProps<'label'> & Partial<React__default.ComponentProps<typeof UI>>;
 /**
  * Field component that renders a label and children wrapped in a div element.
  * @param labelFor Defines the for attribute of the label element

package/libs/components/form/fields.js

@@ -1,4 +1,4 @@
-export { a as Field, b as default } from '../../chunk-BIP2NY53.js';
-import '../../chunk-NE6YXTMC.js';
+export { a as Field, b as default } from '../../chunk-RIVUMPOG.js';
+import '../../chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=fields.js.map

package/libs/components/form/textarea.cjs

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkLL7HTLMS_cjs = require('../../chunk-LL7HTLMS.cjs');
-require('../../chunk-6TE5QEVE.cjs');
+var chunkM5RRNTVX_cjs = require('../../chunk-M5RRNTVX.cjs');
+require('../../chunk-L75OQKEI.cjs');
 
 
 
 Object.defineProperty(exports, 'Textarea', {
 	enumerable: true,
-	get: function () { return chunkLL7HTLMS_cjs.a; }
+	get: function () { return chunkM5RRNTVX_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkLL7HTLMS_cjs.b; }
+	get: function () { return chunkM5RRNTVX_cjs.b; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=textarea.cjs.map

package/libs/components/form/textarea.d.cts

@@ -1,7 +1,7 @@
 import React__default from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
+import { U as UI } from '../../ui-645f95b5.js';
 
-type TextareaProps = React__default.ComponentProps<'textarea'> & React__default.ComponentProps<typeof FP>;
+type TextareaProps = React__default.ComponentProps<'textarea'> & React__default.ComponentProps<typeof UI>;
 /**
  * Textarea component.
  *

package/libs/components/form/textarea.d.ts

@@ -1,7 +1,7 @@
 import React__default from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
+import { U as UI } from '../../ui-645f95b5.js';
 
-type TextareaProps = React__default.ComponentProps<'textarea'> & React__default.ComponentProps<typeof FP>;
+type TextareaProps = React__default.ComponentProps<'textarea'> & React__default.ComponentProps<typeof UI>;
 /**
  * Textarea component.
  *

package/libs/components/form/textarea.js

@@ -1,4 +1,4 @@
-export { a as Textarea, b as default } from '../../chunk-PPOOBUOS.js';
-import '../../chunk-NE6YXTMC.js';
+export { a as Textarea, b as default } from '../../chunk-XBA562WW.js';
+import '../../chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=textarea.js.map

package/libs/components/heading/heading.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkM5QL5TAE_cjs = require('../../chunk-M5QL5TAE.cjs');
-require('../../chunk-6TE5QEVE.cjs');
+var chunkPQ2K3BM6_cjs = require('../../chunk-PQ2K3BM6.cjs');
+require('../../chunk-L75OQKEI.cjs');
 
 
 
-module.exports = chunkM5QL5TAE_cjs.a;
+module.exports = chunkPQ2K3BM6_cjs.b;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=heading.cjs.map

package/libs/components/heading/heading.d.cts

@@ -1,14 +1,3 @@
-import React__default from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
-
-type TitleProps = {
-    children: React__default.ReactNode;
-    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    ui?: string;
-} & React__default.ComponentProps<typeof FP>;
-declare const Heading: {
-    ({ type, id, styles, ui, children, ...props }: TitleProps): React__default.JSX.Element;
-    displayName: string;
-};
-
-export { TitleProps, Heading as default };
+import 'react';
+export { c as TitleProps, b as default } from '../../heading-3648c538.js';
+import '../../ui-645f95b5.js';

package/libs/components/heading/heading.d.ts

@@ -1,14 +1,3 @@
-import React__default from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
-
-type TitleProps = {
-    children: React__default.ReactNode;
-    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    ui?: string;
-} & React__default.ComponentProps<typeof FP>;
-declare const Heading: {
-    ({ type, id, styles, ui, children, ...props }: TitleProps): React__default.JSX.Element;
-    displayName: string;
-};
-
-export { TitleProps, Heading as default };
+import 'react';
+export { c as TitleProps, b as default } from '../../heading-3648c538.js';
+import '../../ui-645f95b5.js';

package/libs/components/heading/heading.js

@@ -1,4 +1,4 @@
-export { a as default } from '../../chunk-HYBZBN4G.js';
-import '../../chunk-NE6YXTMC.js';
+export { b as default } from '../../chunk-ETFLFC2S.js';
+import '../../chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=heading.js.map

package/libs/components/icons/icon.cjs

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkKKLTUJFB_cjs = require('../../chunk-KKLTUJFB.cjs');
-require('../../chunk-6TE5QEVE.cjs');
+var chunk3MKLDCKQ_cjs = require('../../chunk-3MKLDCKQ.cjs');
+require('../../chunk-L75OQKEI.cjs');
 
 
 
 Object.defineProperty(exports, 'Icon', {
 	enumerable: true,
-	get: function () { return chunkKKLTUJFB_cjs.a; }
+	get: function () { return chunk3MKLDCKQ_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkKKLTUJFB_cjs.b; }
+	get: function () { return chunk3MKLDCKQ_cjs.b; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=icon.cjs.map

package/libs/components/icons/icon.d.cts

@@ -1,15 +1,62 @@
 import { C as ComponentProps } from '../../component-props-a8a2f97e.js';
 import React__default from 'react';
-import { F as FP } from '../../ui-9a6f9f8d.js';
+import { U as UI } from '../../ui-645f95b5.js';
 
+/**
+ * Props for individual icon SVG components (e.g., Icon.Code, Icon.Home).
+ *
+ * These props control the visual presentation of SVG icons. Icon components
+ * are decorative by default and should be wrapped in the `Icon` container
+ * component which handles accessibility concerns.
+ *
+ * @property {string} [fill] - SVG fill color (CSS color value)
+ * @property {number} [size] - Icon size in pixels (sets both width and height)
+ * @property {string} [strokeColor] - SVG stroke color (CSS color value)
+ * @property {string} [strokeWidth] - SVG stroke width (e.g., '2px', '1.5')
+ * @property {string} [role] - ARIA role (use 'img' for semantic icons)
+ * @property {string} [aria-label] - Accessible label for standalone icons
+ * @property {boolean} [aria-hidden] - Hide from screen readers (default: true via Icon wrapper)
+ * @property {string} [alt] - @deprecated Use aria-label instead. Legacy prop for accessible label.
+ * @property {number} [width] - Explicit width in pixels (overrides size)
+ * @property {number} [height] - Explicit height in pixels (overrides size)
+ *
+ * @example
+ * ```tsx
+ * // Decorative icon with custom styling
+ * <Icon>
+ *   <Icon.Code size={24} fill="blue" />
+ *   View Code
+ * </Icon>
+ *
+ * // Standalone semantic icon
+ * <Icon aria-hidden={false} aria-label="Code snippet">
+ *   <Icon.Code size={20} />
+ * </Icon>
+ * ```
+ */
 interface IconProps$1 extends Partial<ComponentProps> {
+    /** SVG fill color */
     fill?: string;
+    /** Icon size in pixels (sets both width and height) */
     size?: number;
+    /** SVG stroke color */
     strokeColor?: string;
+    /** SVG stroke width */
     strokeWidth?: string;
+    /** ARIA role (use 'img' for semantic icons) */
     role?: string;
+    /** Accessible label (required for standalone icons) */
+    'aria-label'?: string;
+    /** Hide from screen readers (default: true) */
+    'aria-hidden'?: boolean;
+    /**
+     * @deprecated Use aria-label instead. This prop exists for backward compatibility.
+     * The alt attribute is only valid for img elements, not SVG.
+     */
     alt?: string;
+    /** Explicit width in pixels */
     width?: number;
+    /** Explicit height in pixels */
     height?: number;
 }
 
@@ -18,9 +65,91 @@ declare namespace Star {
     var displayName: string;
 }
 
-type IconProps = React__default.ComponentProps<typeof FP>;
+type IconProps = React__default.ComponentProps<typeof UI> & {
+    /**
+     * Controls screen reader visibility.
+     * - `true` (default): Hides icon from screen readers (decorative icon)
+     * - `false`: Makes icon visible to screen readers (semantic icon)
+     *
+     * **When to use decorative (aria-hidden="true", default):**
+     * - Icon accompanies visible text (e.g., button with icon + label)
+     * - Icon is purely visual decoration
+     *
+     * **When to use semantic (aria-hidden="false"):**
+     * - Icon is the only content (e.g., icon-only button)
+     * - Must provide `aria-label` or `aria-labelledby` for accessible name
+     *
+     * @default true
+     * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
+     */
+    "aria-hidden"?: boolean;
+    /**
+     * Accessible label for semantic icons.
+     * Required when icon is standalone (not accompanied by visible text).
+     *
+     * @example
+     * ```tsx
+     * // ✅ GOOD: Icon-only button with accessible name
+     * <button>
+     *   <Icon aria-hidden={false} aria-label="Close dialog">
+     *     <Icon.Remove />
+     *   </Icon>
+     * </button>
+     *
+     * // ✅ GOOD: Icon with visible text (default decorative)
+     * <button>
+     *   <Icon><Icon.Add /></Icon>
+     *   Add Item
+     * </button>
+     * ```
+     */
+    "aria-label"?: string;
+    /**
+     * Semantic role override.
+     * Use `role="img"` when icon conveys meaning and is not decorative.
+     *
+     * @default undefined (no role for decorative icons)
+     */
+    role?: string;
+};
+/**
+ * Icon wrapper component that enforces accessibility best practices.
+ *
+ * **Default behavior (decorative icon):**
+ * - Hidden from screen readers (`aria-hidden="true"`)
+ * - Used when icon accompanies visible text
+ *
+ * **Semantic icon pattern:**
+ * - Set `aria-hidden={false}` to expose to screen readers
+ * - Must provide `aria-label` for accessible name
+ * - Consider `role="img"` for complex SVG icons
+ *
+ * @param {IconProps} props - Component props
+ * @returns {React.ReactElement} Accessible icon wrapper
+ *
+ * @example
+ * // ✅ Decorative icon with text (default)
+ * <button>
+ *   <Icon><Icon.Save /></Icon>
+ *   Save Changes
+ * </button>
+ *
+ * @example
+ * // ✅ Semantic icon-only button
+ * <button aria-label="Close dialog">
+ *   <Icon aria-hidden={false}>
+ *     <Icon.Remove />
+ *   </Icon>
+ * </button>
+ *
+ * @example
+ * // ❌ BAD: Icon-only button without accessible name
+ * <button>
+ *   <Icon><Icon.Remove /></Icon>
+ * </button>
+ */
 declare const Icon: {
-    ({ id, classes, children, styles, ...props }: IconProps): React__default.JSX.Element;
+    ({ id, classes, children, styles, "aria-hidden": ariaHidden, "aria-label": ariaLabel, role, ...props }: IconProps): React__default.JSX.Element;
     displayName: string;
     Add: {
         ({ fill, size, role, alt, ...props }: Pick<IconProps$1, "role" | "fill" | "alt" | "size" | "styles" | "strokeColor">): JSX.Element;
@@ -233,7 +362,22 @@ declare const Icon: {
             display: string;
             alignItems: string;
             width: string;
-        };
+        }; /**
+         * Controls screen reader visibility.
+         * - `true` (default): Hides icon from screen readers (decorative icon)
+         * - `false`: Makes icon visible to screen readers (semantic icon)
+         *
+         * **When to use decorative (aria-hidden="true", default):**
+         * - Icon accompanies visible text (e.g., button with icon + label)
+         * - Icon is purely visual decoration
+         *
+         * **When to use semantic (aria-hidden="false"):**
+         * - Icon is the only content (e.g., icon-only button)
+         * - Must provide `aria-label` or `aria-labelledby` for accessible name
+         *
+         * @default true
+         * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
+         */
     };
     StopSolid: {
         ({ strokeColor, styles, size, role, alt, ...props }: Pick<IconProps$1, "role" | "fill" | "alt" | "size" | "styles" | "strokeColor">): React__default.JSX.Element;