@fpkit/acss 0.5.12 → 0.5.13

package/libs/components/card.d.ts

@@ -1,56 +1,300 @@
 import React__default from 'react';
-import { F as FP } from '../ui-9a6f9f8d.js';
+import { U as UI } from '../ui-645f95b5.js';
 
-type CardProps = {
-    elm?: 'div' | 'aside' | 'section' | 'article';
-    title?: React__default.ReactNode;
-    footer?: React__default.ReactNode;
-} & React__default.ComponentProps<typeof FP>;
+/**
+ * Base props shared across all Card sub-components.
+ *
+ * This interface provides common styling and structural props
+ * that all Card sub-components support.
+ */
+interface CardSubComponentProps {
+    /** CSS class names to apply */
+    className?: string;
+    /** Inline styles to apply */
+    style?: React__default.CSSProperties;
+    /** Child elements to render */
+    children?: React__default.ReactNode;
+}
+/**
+ * Props for the Card.Title sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardTitleProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'h3'
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * HTML id attribute for the title.
+     * Useful for aria-labelledby references.
+     */
+    id?: string;
+}
+/**
+ * Props for the Card.Content sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardContentProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * Use 'article' for standalone content, 'div' for generic containers.
+     * @default 'article'
+     */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * Props for the Card.Footer sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardFooterProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'div'
+     */
+    as?: 'div' | 'footer';
+}
+/**
+ * Props for the main Card component.
+ *
+ * Extends all props from the UI component while adding Card-specific functionality.
+ * Supports polymorphic rendering via the `as` prop.
+ *
+ * @extends React.ComponentProps<typeof UI>
+ */
+interface CardProps extends React__default.ComponentProps<typeof UI> {
+    /**
+     * HTML element to render the Card as.
+     * Inherits from UI component's polymorphic `as` prop.
+     * @default 'div'
+     */
+    as?: React__default.ElementType;
+    /**
+     * ARIA role for the card.
+     * Use 'article' for standalone content, 'region' with aria-label for landmarks.
+     * @example
+     * ```tsx
+     * <Card role="article">...</Card>
+     * <Card role="region" aria-label="User profile">...</Card>
+     * ```
+     */
+    role?: string;
+    /**
+     * Accessible label for the card.
+     * Required when using interactive cards or role="region".
+     * @example
+     * ```tsx
+     * <Card role="region" aria-label="Featured products">...</Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this card.
+     * @example
+     * ```tsx
+     * <Card aria-labelledby="card-title-1">
+     *   <Card.Title id="card-title-1">Title</Card.Title>
+     * </Card>
+     * ```
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element that describes this card.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Makes the card interactive with keyboard support.
+     * Adds tabIndex, role="button", and keyboard event handlers.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Click handler for interactive cards.
+     * When provided without `interactive`, a warning will be logged in development.
+     */
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation.
+     * Automatically set to 0 when `interactive` is true.
+     */
+    tabIndex?: number;
+}
+
+/**
+ * Card.Title - Title sub-component for Card
+ *
+ * Renders a heading element for the card title. Defaults to h3 for proper
+ * document outline, but can be customized via the `as` prop.
+ *
+ * ## Accessibility
+ * - Use appropriate heading level based on document structure
+ * - Combine with `aria-labelledby` on parent Card for accessible names
+ *
+ * @example
+ * ```tsx
+ * <Card aria-labelledby="card-title-1">
+ *   <Card.Title id="card-title-1">Featured Product</Card.Title>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom heading level
+ * <Card.Title as="h2">Section Title</Card.Title>
+ * ```
+ */
 declare const Title: {
-    ({ children, className, styles, as, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-        as?: React__default.ElementType<any> | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardTitleProps): React__default.JSX.Element;
     displayName: string;
 };
+/**
+ * Card.Content - Content sub-component for Card
+ *
+ * Renders the main content area of the card. Defaults to `<article>` for
+ * standalone content, but can be changed to `div` or `section` via the `as` prop.
+ *
+ * ## Semantic HTML Guidelines
+ * - Use `article` (default) for self-contained, syndicate-able content
+ * - Use `div` for generic content containers
+ * - Use `section` for thematic groupings with a heading
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Article Title</Card.Title>
+ *   <Card.Content>
+ *     <p>This is standalone content...</p>
+ *   </Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Generic container (not standalone content)
+ * <Card.Content as="div">
+ *   <p>Generic content...</p>
+ * </Card.Content>
+ * ```
+ */
 declare const Content: {
-    ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardContentProps): React__default.JSX.Element;
     displayName: string;
 };
+/**
+ * Card.Footer - Footer sub-component for Card
+ *
+ * Renders a footer section for the card. Use for actions, metadata, or
+ * supplementary information.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product</Card.Title>
+ *   <Card.Content>Description...</Card.Content>
+ *   <Card.Footer>
+ *     <button>Add to Cart</button>
+ *     <span>$29.99</span>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Semantic footer element
+ * <Card.Footer as="footer">
+ *   <p>Last updated: 2024-01-15</p>
+ * </Card.Footer>
+ * ```
+ */
 declare const Footer: {
-    ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-        className?: string | undefined;
-        styles?: React__default.CSSProperties | undefined;
-    }>): React__default.JSX.Element;
+    ({ children, className, style, as, ...props }: CardFooterProps): React__default.JSX.Element;
     displayName: string;
 };
+/**
+ * Card - A flexible, accessible card component with compound component pattern
+ *
+ * The Card component provides a container for grouping related content and actions.
+ * It follows the compound component pattern, exposing `Card.Title`, `Card.Content`,
+ * and `Card.Footer` sub-components for structured layouts.
+ *
+ * ## Features
+ * - **Polymorphic rendering**: Render as any HTML element via `as` prop
+ * - **Compound components**: Structured sub-components for consistent layouts
+ * - **Interactive variant**: Built-in keyboard navigation and ARIA support
+ * - **Fully accessible**: WCAG 2.1 AA compliant with proper semantic HTML
+ *
+ * ## Accessibility
+ *
+ * ### Non-Interactive Cards
+ * - Use semantic HTML: `article` for standalone content, `section` for groupings
+ * - Provide accessible names with `aria-labelledby` referencing the title
+ *
+ * ### Interactive Cards (Clickable)
+ * - Set `interactive={true}` to enable keyboard navigation (Enter/Space)
+ * - Provide accessible name via `aria-label` or `aria-labelledby`
+ * - Ensure adequate focus indicators (handled by CSS)
+ *
+ * @example
+ * // Basic card with compound components
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product Name</Card.Title>
+ *   <Card.Content>
+ *     <p>Product description goes here...</p>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <button>Buy Now</button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Accessible interactive card
+ * ```tsx
+ * <Card
+ *   interactive
+ *   aria-label="View product details"
+ *   onClick={() => navigate('/product/123')}
+ * >
+ *   <Card.Title>Product Name</Card.Title>
+ *   <Card.Content>Click anywhere to view details</Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Semantic article card with accessible name
+ * ```tsx
+ * <Card as="article" aria-labelledby="article-title">
+ *   <Card.Title id="article-title">Article Headline</Card.Title>
+ *   <Card.Content>Article body...</Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * // Card as a landmark region
+ * ```tsx
+ * <Card role="region" aria-label="Featured products">
+ *   <Card.Title>Featured</Card.Title>
+ *   <Card.Content>...</Card.Content>
+ * </Card>
+ * ```
+ */
 declare const Card: {
-    ({ elm, styles, children, classes, id, ...props }: CardProps): React__default.JSX.Element;
+    ({ as, styles, children, classes, id, interactive, onClick, tabIndex, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: CardProps): React__default.JSX.Element;
     displayName: string;
     Title: {
-        ({ children, className, styles, as, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-            as?: React__default.ElementType<any> | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardTitleProps): React__default.JSX.Element;
         displayName: string;
     };
     Content: {
-        ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardContentProps): React__default.JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
-            className?: string | undefined;
-            styles?: React__default.CSSProperties | undefined;
-        }>): React__default.JSX.Element;
+        ({ children, className, style, as, ...props }: CardFooterProps): React__default.JSX.Element;
         displayName: string;
     };
 };

package/libs/components/card.js

@@ -1,4 +1,4 @@
-export { d as Card, b as Content, c as Footer, a as Title, e as default } from '../chunk-BSPKFLO4.js';
-import '../chunk-NE6YXTMC.js';
+export { d as Card, b as Content, c as Footer, a as Title, e as default } from '../chunk-JJ43O4Y5.js';
+import '../chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=card.js.map

package/libs/components/cards/card.css

@@ -1 +1 @@
-:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}/*# sourceMappingURL=card.css.map */
+:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}[data-card=interactive]{cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}[data-card=interactive]:hover{transform:translateY(-2px);box-shadow:0 .25rem .75rem rgba(0,0,0,.15)}[data-card=interactive]:focus-visible{outline:.125rem solid var(--focus-color, #0066CC);outline-offset:.125rem}[data-card=interactive]:focus:not(:focus-visible){outline:none}/*# sourceMappingURL=card.css.map */

package/libs/components/cards/card.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/cards/card.scss"],"names":[],"mappings":"AAAA,MACE,eACA,gBACA,uCACA,0BACA,qBACA,yBACA,iBAGF,mCAEE,4BACA,qCACA,oBACA,iCACA,gCACA,mCAEA,kFAEE,mBACA,oBAEF,2CACE,qBAEF,mDACE,aACA,sBACA,OAGF,yDACE,6BAEF,+EAEE,gCAEF,iFACE","file":"card.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/cards/card.scss"],"names":[],"mappings":"AAAA,MACE,eACA,gBACA,uCACA,0BACA,qBACA,yBACA,iBAGF,mCAEE,4BACA,qCACA,oBACA,iCACA,gCACA,mCAEA,kFAEE,mBACA,oBAEF,2CACE,qBAEF,mDACE,aACA,sBACA,OAGF,yDACE,6BAEF,+EAEE,gCAEF,iFACE,gDAKJ,wBACE,eACA,kDAEA,8BACE,2BACA,2CAIF,sCACE,kDACA,uBAIF,kDACE","file":"card.css"}

package/libs/components/cards/card.min.css

@@ -1,3 +1,3 @@
-:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}
+:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}[data-card=interactive]{cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}[data-card=interactive]:hover{transform:translateY(-2px);box-shadow:0 .25rem .75rem rgba(0,0,0,.15)}[data-card=interactive]:focus-visible{outline:.125rem solid var(--focus-color, #0066CC);outline-offset:.125rem}[data-card=interactive]:focus:not(:focus-visible){outline:none}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2NhcmRzL2NhcmQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLGNBQUEsQ0FDQSxlQUFBLENBQ0Esc0NBQUEsQ0FDQSx5QkFBQSxDQUNBLG9CQUFBLENBQ0Esd0JBQUEsQ0FDQSxnQkFBQSxDQUdGLG1DQUVFLDJCQUFBLENBQ0Esb0NBQUEsQ0FDQSxtQkFBQSxDQUNBLGdDQUFBLENBQ0EsK0JBQUEsQ0FDQSxrQ0FBQSxDQUVBLGtGQUVFLGtCQUFBLENBQ0EsbUJBQUEsQ0FFRiwyQ0FDRSxvQkFBQSxDQUVGLG1EQUNFLFlBQUEsQ0FDQSxxQkFBQSxDQUNBLE1BQUEsQ0FHRix5REFDRSw0QkFBQSxDQUVGLCtFQUVFLCtCQUFBLENBRUYsaUZBQ0UsK0NBQUEiLCJmaWxlIjoiY2FyZC5taW4uY3NzIn0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2NhcmRzL2NhcmQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLGNBQUEsQ0FDQSxlQUFBLENBQ0Esc0NBQUEsQ0FDQSx5QkFBQSxDQUNBLG9CQUFBLENBQ0Esd0JBQUEsQ0FDQSxnQkFBQSxDQUdGLG1DQUVFLDJCQUFBLENBQ0Esb0NBQUEsQ0FDQSxtQkFBQSxDQUNBLGdDQUFBLENBQ0EsK0JBQUEsQ0FDQSxrQ0FBQSxDQUVBLGtGQUVFLGtCQUFBLENBQ0EsbUJBQUEsQ0FFRiwyQ0FDRSxvQkFBQSxDQUVGLG1EQUNFLFlBQUEsQ0FDQSxxQkFBQSxDQUNBLE1BQUEsQ0FHRix5REFDRSw0QkFBQSxDQUVGLCtFQUVFLCtCQUFBLENBRUYsaUZBQ0UsK0NBQUEsQ0FLSix3QkFDRSxjQUFBLENBQ0EsaURBQUEsQ0FFQSw4QkFDRSwwQkFBQSxDQUNBLDBDQUFBLENBSUYsc0NBQ0UsaURBQUEsQ0FDQSxzQkFBQSxDQUlGLGtEQUNFLFlBQUEiLCJmaWxlIjoiY2FyZC5taW4uY3NzIn0= */

package/libs/components/details/details.css

@@ -1 +1 @@
-details{--details-border: 0.0625rem solid #dfdfdf;--details-direction: column;--details-display: flex;--details-gap: 0rem;--details-h: max-content;--details-justify: flex-start;--details-px: 1.5rem;--details-py: 1rem;--details-radius: 0;--details-w: 100%;--max-h-closed: 6.25rem;--max-h-open: 50rem;--summary-align: center;--summary-cursor: pointer;--summary-display: flex;--summary-gap: 0.5rem;--summary-justify: flex-start;--summary-transitions: all 0.75s ease-in-out;interpolate-size:allow-keywords;display:var(--details-display);flex-direction:var(--details-direction);justify-content:var(--details-justify);gap:var(--details-gap);width:var(--details-w);border:var(--details-border);border-left:none;border-right:none;transition:var(--summary-transitions);max-height:var(--max-h-closed);overflow:clip}details+details{border-radius:0;border-top:none}details:first-of-type{border-radius:var(--details-radius) var(--details-radius) 0 0}details:last-of-type{border-radius:0 0 var(--details-radius) var(--details-radius)}details:only-of-type{border-radius:var(--details-radius)}details::marker{content:none}details summary{display:var(--summary-display);justify-content:var(--summary-justify);align-items:var(--summary-align);padding-inline:var(--summary-px, var(--details-px));padding-block:var(--summary-py, var(--details-py));gap:var(--summary-gap);list-style:none;border-top-left-radius:var(--details-radius);border-top-right-radius:var(--details-radius);transition:var(--summary-transitions)}@supports(transition-behavior: allow-discrete){@starting-style{details summary{border-bottom:none;transition:var(--summary-transitions)}}}details summary::-webkit-details-marker{display:none}details summary:focus-within{outline:none;border-bottom:solid 2px currentColor;background-color:#f5f5f5}details summary:hover{cursor:var(--summary-cursor)}details summary>section{width:var(--details-w)}details .list-styles summary{border-left:none;border-right:none}details>section{padding-inline:var(--details-px);padding-block:var(--details-py);margin-block-start:0;border:1px rgba(0,0,0,0) solid}details[open]{max-height:max-content;transition:var(--summary-transitions)}details[open]>summary{border-bottom:var(--details-border)}details[open]>section{max-height:var(--max-h-open)}/*# sourceMappingURL=details.css.map */
+details{--details-border: 0.0625rem solid #dfdfdf;--details-direction: column;--details-display: flex;--details-gap: 0rem;--details-h: max-content;--details-justify: flex-start;--details-px: 1.5rem;--details-py: 1rem;--details-radius: 0;--details-w: 100%;--max-h-closed: 6.25rem;--max-h-open: 50rem;--summary-align: center;--summary-cursor: pointer;--summary-display: flex;--summary-gap: 0.5rem;--summary-justify: flex-start;--summary-transitions: all 0.75s ease-in-out;interpolate-size:allow-keywords;display:var(--details-display);flex-direction:var(--details-direction);justify-content:var(--details-justify);gap:var(--details-gap);width:var(--details-w);border:var(--details-border);border-left:none;border-right:none;transition:var(--summary-transitions);max-height:var(--max-h-closed);overflow:clip}@starting-style{details{transition:var(--summary-transitions);color:red}}details+details{border-radius:0;border-top:none}details:first-of-type{border-radius:var(--details-radius) var(--details-radius) 0 0}details:last-of-type{border-radius:0 0 var(--details-radius) var(--details-radius)}details:only-of-type{border-radius:var(--details-radius)}details::marker{content:none}details summary{display:var(--summary-display);justify-content:var(--summary-justify);align-items:var(--summary-align);padding-inline:var(--summary-px, var(--details-px));padding-block:var(--summary-py, var(--details-py));gap:var(--summary-gap);list-style:none;border-top-left-radius:var(--details-radius);border-top-right-radius:var(--details-radius);transition:var(--summary-transitions)}details summary::-webkit-details-marker{display:none}details summary:focus-within{outline:none;border-bottom:solid 2px currentColor;background-color:#f5f5f5}details summary:hover{cursor:var(--summary-cursor)}details summary>section{width:var(--details-w)}details .list-styles summary{border-left:none;border-right:none}details>section{padding-inline:var(--details-px);padding-block:var(--details-py);margin-block-start:0;border:1px rgba(0,0,0,0) solid}details[open]{max-height:max-content;transition:var(--summary-transitions)}details[open]>summary{border-bottom:var(--details-border)}details[open]>section{max-height:var(--max-h-open)}@starting-style{details[open]>section{max-height:0}}@supports(transition-behavior: allow-discrete){@starting-style{details{max-height:0;transition:var(--summary-transitions)}}}/*# sourceMappingURL=details.css.map */

package/libs/components/details/details.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/details/details.scss"],"names":[],"mappings":"AAAA,QACE,0CACA,4BACA,wBACA,oBACA,yBACA,8BACA,qBACA,mBACA,oBACA,kBACA,wBACA,oBACA,wBACA,0BACA,wBACA,sBACA,8BACA,6CAEA,gCACA,+BACA,wCACA,uCACA,uBACA,uBACA,6BACA,iBACA,kBACA,sCACA,+BACA,cACA,gBACE,gBACA,gBAGF,sBACE,8DAGF,qBACE,8DAIF,qBACE,oCAGF,gBACE,aAGF,gBACE,+BACA,uCACA,iCACA,oDACA,mDACA,uBACA,gBACA,6CACA,8CACA,sCAEA,+CACE,gBAbJ,gBAcM,mBACA,wCAIJ,wCACE,aAGF,6BACE,aACA,qCACA,yBAIF,sBACE,6BAEF,wBACE,uBAKF,6BACE,iBACA,kBAIJ,gBACE,iCACA,gCACA,qBACA,+BAGF,cACE,uBACA,sCACA,sBACE,oCAEF,sBACE","file":"details.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/details/details.scss"],"names":[],"mappings":"AAAA,QACE,0CACA,4BACA,wBACA,oBACA,yBACA,8BACA,qBACA,mBACA,oBACA,kBACA,wBACA,oBACA,wBACA,0BACA,wBACA,sBACA,8BACA,6CAEA,gCACA,+BACA,wCACA,uCACA,uBACA,uBACA,6BACA,iBACA,kBACA,sCACA,+BACA,cAEA,gBAjCF,QAkCI,sCACA,WAGF,gBACE,gBACA,gBAGF,sBACE,8DAGF,qBACE,8DAIF,qBACE,oCAGF,gBACE,aAGF,gBACE,+BACA,uCACA,iCACA,oDACA,mDACA,uBACA,gBACA,6CACA,8CACA,sCAEA,wCACE,aAGF,6BACE,aACA,qCACA,yBAIF,sBACE,6BAEF,wBACE,uBAKF,6BACE,iBACA,kBAIJ,gBACE,iCACA,gCACA,qBACA,+BAGF,cACE,uBACA,sCACA,sBACE,oCAEF,sBACE,6BACA,gBAFF,sBAGI,cAKN,+CACE,gBAxHJ,QAyHM,aACA","file":"details.css"}

package/libs/components/details/details.min.css

@@ -1,3 +1,3 @@
-details{--details-border: 0.0625rem solid #dfdfdf;--details-direction: column;--details-display: flex;--details-gap: 0rem;--details-h: max-content;--details-justify: flex-start;--details-px: 1.5rem;--details-py: 1rem;--details-radius: 0;--details-w: 100%;--max-h-closed: 6.25rem;--max-h-open: 50rem;--summary-align: center;--summary-cursor: pointer;--summary-display: flex;--summary-gap: 0.5rem;--summary-justify: flex-start;--summary-transitions: all 0.75s ease-in-out;interpolate-size:allow-keywords;display:var(--details-display);flex-direction:var(--details-direction);justify-content:var(--details-justify);gap:var(--details-gap);width:var(--details-w);border:var(--details-border);border-left:none;border-right:none;transition:var(--summary-transitions);max-height:var(--max-h-closed);overflow:clip}details+details{border-radius:0;border-top:none}details:first-of-type{border-radius:var(--details-radius) var(--details-radius) 0 0}details:last-of-type{border-radius:0 0 var(--details-radius) var(--details-radius)}details:only-of-type{border-radius:var(--details-radius)}details::marker{content:none}details summary{display:var(--summary-display);justify-content:var(--summary-justify);align-items:var(--summary-align);padding-inline:var(--summary-px, var(--details-px));padding-block:var(--summary-py, var(--details-py));gap:var(--summary-gap);list-style:none;border-top-left-radius:var(--details-radius);border-top-right-radius:var(--details-radius);transition:var(--summary-transitions)}@supports(transition-behavior: allow-discrete){@starting-style{details summary{border-bottom:none;transition:var(--summary-transitions)}}}details summary::-webkit-details-marker{display:none}details summary:focus-within{outline:none;border-bottom:solid 2px currentColor;background-color:#f5f5f5}details summary:hover{cursor:var(--summary-cursor)}details summary>section{width:var(--details-w)}details .list-styles summary{border-left:none;border-right:none}details>section{padding-inline:var(--details-px);padding-block:var(--details-py);margin-block-start:0;border:1px rgba(0,0,0,0) solid}details[open]{max-height:-moz-max-content;max-height:max-content;transition:var(--summary-transitions)}details[open]>summary{border-bottom:var(--details-border)}details[open]>section{max-height:var(--max-h-open)}
+details{--details-border: 0.0625rem solid #dfdfdf;--details-direction: column;--details-display: flex;--details-gap: 0rem;--details-h: max-content;--details-justify: flex-start;--details-px: 1.5rem;--details-py: 1rem;--details-radius: 0;--details-w: 100%;--max-h-closed: 6.25rem;--max-h-open: 50rem;--summary-align: center;--summary-cursor: pointer;--summary-display: flex;--summary-gap: 0.5rem;--summary-justify: flex-start;--summary-transitions: all 0.75s ease-in-out;interpolate-size:allow-keywords;display:var(--details-display);flex-direction:var(--details-direction);justify-content:var(--details-justify);gap:var(--details-gap);width:var(--details-w);border:var(--details-border);border-left:none;border-right:none;transition:var(--summary-transitions);max-height:var(--max-h-closed);overflow:clip}@starting-style{details{transition:var(--summary-transitions);color:red}}details+details{border-radius:0;border-top:none}details:first-of-type{border-radius:var(--details-radius) var(--details-radius) 0 0}details:last-of-type{border-radius:0 0 var(--details-radius) var(--details-radius)}details:only-of-type{border-radius:var(--details-radius)}details::marker{content:none}details summary{display:var(--summary-display);justify-content:var(--summary-justify);align-items:var(--summary-align);padding-inline:var(--summary-px, var(--details-px));padding-block:var(--summary-py, var(--details-py));gap:var(--summary-gap);list-style:none;border-top-left-radius:var(--details-radius);border-top-right-radius:var(--details-radius);transition:var(--summary-transitions)}details summary::-webkit-details-marker{display:none}details summary:focus-within{outline:none;border-bottom:solid 2px currentColor;background-color:#f5f5f5}details summary:hover{cursor:var(--summary-cursor)}details summary>section{width:var(--details-w)}details .list-styles summary{border-left:none;border-right:none}details>section{padding-inline:var(--details-px);padding-block:var(--details-py);margin-block-start:0;border:1px rgba(0,0,0,0) solid}details[open]{max-height:-moz-max-content;max-height:max-content;transition:var(--summary-transitions)}details[open]>summary{border-bottom:var(--details-border)}details[open]>section{max-height:var(--max-h-open)}@starting-style{details[open]>section{max-height:0}}@supports(transition-behavior: allow-discrete){@starting-style{details{max-height:0;transition:var(--summary-transitions)}}}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RldGFpbHMvZGV0YWlscy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFFBQ0UseUNBQUEsQ0FDQSwyQkFBQSxDQUNBLHVCQUFBLENBQ0EsbUJBQUEsQ0FDQSx3QkFBQSxDQUNBLDZCQUFBLENBQ0Esb0JBQUEsQ0FDQSxrQkFBQSxDQUNBLG1CQUFBLENBQ0EsaUJBQUEsQ0FDQSx1QkFBQSxDQUNBLG1CQUFBLENBQ0EsdUJBQUEsQ0FDQSx5QkFBQSxDQUNBLHVCQUFBLENBQ0EscUJBQUEsQ0FDQSw2QkFBQSxDQUNBLDRDQUFBLENBRUEsK0JBQUEsQ0FDQSw4QkFBQSxDQUNBLHVDQUFBLENBQ0Esc0NBQUEsQ0FDQSxzQkFBQSxDQUNBLHNCQUFBLENBQ0EsNEJBQUEsQ0FDQSxnQkFBQSxDQUNBLGlCQUFBLENBQ0EscUNBQUEsQ0FDQSw4QkFBQSxDQUNBLGFBQUEsQ0FDQSxnQkFDRSxlQUFBLENBQ0EsZUFBQSxDQUdGLHNCQUNFLDZEQUFBLENBR0YscUJBQ0UsNkRBQUEsQ0FJRixxQkFDRSxtQ0FBQSxDQUdGLGdCQUNFLFlBQUEsQ0FHRixnQkFDRSw4QkFBQSxDQUNBLHNDQUFBLENBQ0EsZ0NBQUEsQ0FDQSxtREFBQSxDQUNBLGtEQUFBLENBQ0Esc0JBQUEsQ0FDQSxlQUFBLENBQ0EsNENBQUEsQ0FDQSw2Q0FBQSxDQUNBLHFDQUFBLENBRUEsK0NBQ0UsZ0JBYkosZ0JBY00sa0JBQUEsQ0FDQSxxQ0FBQSxDQUFBLENBQUEsQ0FJSix3Q0FDRSxZQUFBLENBR0YsNkJBQ0UsWUFBQSxDQUNBLG9DQUFBLENBQ0Esd0JBQUEsQ0FJRixzQkFDRSw0QkFBQSxDQUVGLHdCQUNFLHNCQUFBLENBS0YsNkJBQ0UsZ0JBQUEsQ0FDQSxpQkFBQSxDQUlKLGdCQUNFLGdDQUFBLENBQ0EsK0JBQUEsQ0FDQSxvQkFBQSxDQUNBLDhCQUFBLENBR0YsY0FDRSwyQkFBQSxDQUFBLHNCQUFBLENBQ0EscUNBQUEsQ0FDQSxzQkFDRSxtQ0FBQSxDQUVGLHNCQUNFLDRCQUFBIiwiZmlsZSI6ImRldGFpbHMubWluLmNzcyJ9 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RldGFpbHMvZGV0YWlscy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFFBQ0UseUNBQUEsQ0FDQSwyQkFBQSxDQUNBLHVCQUFBLENBQ0EsbUJBQUEsQ0FDQSx3QkFBQSxDQUNBLDZCQUFBLENBQ0Esb0JBQUEsQ0FDQSxrQkFBQSxDQUNBLG1CQUFBLENBQ0EsaUJBQUEsQ0FDQSx1QkFBQSxDQUNBLG1CQUFBLENBQ0EsdUJBQUEsQ0FDQSx5QkFBQSxDQUNBLHVCQUFBLENBQ0EscUJBQUEsQ0FDQSw2QkFBQSxDQUNBLDRDQUFBLENBRUEsK0JBQUEsQ0FDQSw4QkFBQSxDQUNBLHVDQUFBLENBQ0Esc0NBQUEsQ0FDQSxzQkFBQSxDQUNBLHNCQUFBLENBQ0EsNEJBQUEsQ0FDQSxnQkFBQSxDQUNBLGlCQUFBLENBQ0EscUNBQUEsQ0FDQSw4QkFBQSxDQUNBLGFBQUEsQ0FFQSxnQkFqQ0YsUUFrQ0kscUNBQUEsQ0FDQSxTQUFBLENBQUEsQ0FHRixnQkFDRSxlQUFBLENBQ0EsZUFBQSxDQUdGLHNCQUNFLDZEQUFBLENBR0YscUJBQ0UsNkRBQUEsQ0FJRixxQkFDRSxtQ0FBQSxDQUdGLGdCQUNFLFlBQUEsQ0FHRixnQkFDRSw4QkFBQSxDQUNBLHNDQUFBLENBQ0EsZ0NBQUEsQ0FDQSxtREFBQSxDQUNBLGtEQUFBLENBQ0Esc0JBQUEsQ0FDQSxlQUFBLENBQ0EsNENBQUEsQ0FDQSw2Q0FBQSxDQUNBLHFDQUFBLENBRUEsd0NBQ0UsWUFBQSxDQUdGLDZCQUNFLFlBQUEsQ0FDQSxvQ0FBQSxDQUNBLHdCQUFBLENBSUYsc0JBQ0UsNEJBQUEsQ0FFRix3QkFDRSxzQkFBQSxDQUtGLDZCQUNFLGdCQUFBLENBQ0EsaUJBQUEsQ0FJSixnQkFDRSxnQ0FBQSxDQUNBLCtCQUFBLENBQ0Esb0JBQUEsQ0FDQSw4QkFBQSxDQUdGLGNBQ0UsMkJBQUEsQ0FBQSxzQkFBQSxDQUNBLHFDQUFBLENBQ0Esc0JBQ0UsbUNBQUEsQ0FFRixzQkFDRSw0QkFBQSxDQUNBLGdCQUZGLHNCQUdJLFlBQUEsQ0FBQSxDQUtOLCtDQUNFLGdCQXhISixRQXlITSxZQUFBLENBQ0EscUNBQUEsQ0FBQSxDQUFBIiwiZmlsZSI6ImRldGFpbHMubWluLmNzcyJ9 */

package/libs/components/dialog/dialog.cjs

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunk7K76RW2A_cjs = require('../../chunk-7K76RW2A.cjs');
-require('../../chunk-M5QL5TAE.cjs');
-require('../../chunk-KKLTUJFB.cjs');
-require('../../chunk-LHVJKDMA.cjs');
-require('../../chunk-6TE5QEVE.cjs');
+var chunkD4YLRWAO_cjs = require('../../chunk-D4YLRWAO.cjs');
+require('../../chunk-PQ2K3BM6.cjs');
+require('../../chunk-3MKLDCKQ.cjs');
+require('../../chunk-J32EZPYD.cjs');
+require('../../chunk-L75OQKEI.cjs');
 
 
 
 Object.defineProperty(exports, 'Dialog', {
 	enumerable: true,
-	get: function () { return chunk7K76RW2A_cjs.a; }
+	get: function () { return chunkD4YLRWAO_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunk7K76RW2A_cjs.b; }
+	get: function () { return chunkD4YLRWAO_cjs.b; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=dialog.cjs.map

package/libs/components/dialog/dialog.css

@@ -1 +1 @@
-: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%}/*# sourceMappingURL=dialog.css.map */
+: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=dialog.css.map */

package/libs/components/dialog/dialog.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/dialog/dialog.scss"],"names":[],"mappings":"AAAA,MACE,gCACA,uBACA,iCACA,4BACA,6BACA,6CACA,yBACA,8BACA,2BACA,gCACA,+CACA,qCACA,uBACA,gCAGF,OACE,0BACA,uBACA,sBACA,mEACA,0CACA,8BACA,uDAEA,aACE,8BACA,4CACA,sBAEF,eACE,WACA,aACA,sBACA,sBACA,4CACA,qBACA,YAIJ,eACE,aACA,8BACA,mBACA,WACA,eACA,kBACE,qBACA,mBAEF,6BACE,mBAEF,mCACE,yCACA,mCACA,eACA,kFAEE,uCACA,+CAKN,qCAEE,aACA,mBACA,eACA,uDACA,sBACA","file":"dialog.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/dialog/dialog.scss"],"names":[],"mappings":"AAAA,MACE,gCACA,uBACA,iCACA,4BACA,6BACA,6CACA,yBACA,8BACA,2BACA,gCACA,+CACA,qCACA,uBACA,gCAGA,8BACA,+BACA,gCACA,kFAIF,+BACE,MACE,oCACA,gCACA,mCACA,oDACA,iCAIJ,OACE,0BACA,uBACA,sBACA,mEACA,0CACA,8BACA,0CAGA,qBACE,oCACA,0CAGF,aACE,8BACA,4CACA,sBAGF,eACE,WACA,aACA,sBACA,sBACA,4CACA,qBACA,YAIJ,eACE,aACA,8BACA,mBACA,WACA,eAEA,kBACE,qBACA,mBAGF,6BACE,mBAGF,mCACE,yCACA,mCACA,eAEA,yCACE,uCACA,+CAIF,iDACE,oCACA,0CACA,uCACA,+CAIF,6DACE,aAKN,qCAEE,aACA,mBACA,eACA,uDACA,sBACA,WAGA,+EACE,oCACA,0CAGF,uGACE","file":"dialog.css"}

package/libs/components/dialog/dialog.d.cts

@@ -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 };