@atelier-ui/angular 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/angular",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Atelier UI component library for Angular — LLM-optimised, accessible, design-token-driven",
   "keywords": [
     "angular",
@@ -20,8 +20,11 @@
   "peerDependencies": {
     "@angular/core": "^21.0.0",
     "@angular/common": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@atelier-ui/spec": "*"
+    "@angular/forms": "^21.0.0"
+  },
+  "dependencies": {
+    "@atelier-ui/spec": "*",
+    "tslib": "^2.3.0"
   },
   "module": "fesm2022/atelier-ui-angular.mjs",
   "typings": "types/atelier-ui-angular.d.ts",
@@ -34,8 +37,5 @@
       "default": "./fesm2022/atelier-ui-angular.mjs"
     }
   },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
+  "sideEffects": false
 }

package/types/atelier-ui-angular.d.ts

@@ -1137,6 +1137,8 @@ declare class LlmProgress {
  * ```
  */
 declare class LlmBreadcrumbs {
+    readonly separator: _angular_core.InputSignal<string | undefined>;
+    protected readonly separatorCssVar: _angular_core.Signal<string>;
     private readonly _itemIds;
     private _nextId;
     /** @internal — used by LlmBreadcrumbItem via LLM_BREADCRUMBS token */
@@ -1146,7 +1148,7 @@ declare class LlmBreadcrumbs {
     /** @internal */
     unregisterItem(id: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmBreadcrumbs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmBreadcrumbs, "llm-breadcrumbs", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmBreadcrumbs, "llm-breadcrumbs", never, { "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /**
  * A single breadcrumb step. The last item is automatically treated as
@@ -1274,5 +1276,160 @@ interface LlmDrawerContext {
 }
 declare const LLM_DRAWER: InjectionToken<LlmDrawerContext>;
 
-export { LLM_ACCORDION_GROUP, LLM_BREADCRUMBS, LLM_DIALOG, LLM_DRAWER, LLM_RADIO_GROUP, LLM_SELECT, LLM_TAB_GROUP, LlmAccordionGroup, LlmAccordionHeader, LlmAccordionItem, LlmAlert, LlmAvatar, LlmAvatarGroup, LlmBadge, LlmBreadcrumbItem, LlmBreadcrumbs, LlmButton, LlmCard, LlmCardContent, LlmCardFooter, LlmCardHeader, LlmCheckbox, LlmDialog, LlmDialogContent, LlmDialogFooter, LlmDialogHeader, LlmDrawer, LlmDrawerContent, LlmDrawerFooter, LlmDrawerHeader, LlmInput, LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger, LlmOption, LlmPagination, LlmProgress, LlmRadio, LlmRadioGroup, LlmSelect, LlmSkeleton, LlmTab, LlmTabGroup, LlmTextarea, LlmToast, LlmToastContainer, LlmToastService, LlmToggle, LlmTooltip };
-export type { LlmAccordionGroupContext, LlmBreadcrumbsContext, LlmDialogContext, LlmDrawerContext, LlmRadioGroupContext, LlmSelectContext, LlmTabGroupContext, PageItem, TabInfo, ToastData, ToastOptions };
+interface LlmTableContext {
+    readonly size: Signal<'sm' | 'md' | 'lg'>;
+    readonly variant: Signal<'default' | 'striped' | 'bordered'>;
+}
+declare const LLM_TABLE: InjectionToken<LlmTableContext>;
+/**
+ * Accessible data table with sorting, row selection, sticky header, and empty state.
+ * Compose with `llm-thead`, `llm-tbody`, `llm-tr`, `llm-th`, and `llm-td`.
+ *
+ * Usage:
+ * ```html
+ * <llm-table variant="striped" [stickyHeader]="true">
+ *   <llm-thead>
+ *     <llm-tr>
+ *       <llm-th sortable [sortDirection]="sort" (sort)="sort = $event">Name</llm-th>
+ *       <llm-th>Status</llm-th>
+ *     </llm-tr>
+ *   </llm-thead>
+ *   <llm-tbody [empty]="rows.length === 0" [colSpan]="2">
+ *     @for (row of rows; track row.id) {
+ *       <llm-tr selectable [selected]="selection.has(row.id)" (selectedChange)="toggle(row.id, $event)">
+ *         <llm-td>{{ row.name }}</llm-td>
+ *         <llm-td>{{ row.status }}</llm-td>
+ *       </llm-tr>
+ *     }
+ *     <div llmTableEmpty>No results found.</div>
+ *   </llm-tbody>
+ * </llm-table>
+ * ```
+ */
+declare class LlmTable implements LlmTableContext {
+    /** Visual style of the table rows. */
+    readonly variant: _angular_core.InputSignal<"default" | "bordered" | "striped">;
+    /** Row density. */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Whether the header row sticks to the top when the table scrolls. */
+    readonly stickyHeader: _angular_core.InputSignal<boolean>;
+    /** @internal */
+    protected readonly hostClasses: Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmTable, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmTable, "llm-table", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Table head section. Contains header rows with `llm-tr` and `llm-th`.
+ *
+ * Usage:
+ * ```html
+ * <llm-thead>
+ *   <llm-tr>
+ *     <llm-th sortable [sortDirection]="sort" (sort)="sort = $event">Name</llm-th>
+ *   </llm-tr>
+ * </llm-thead>
+ * ```
+ */
+declare class LlmThead {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmThead, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmThead, "llm-thead", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Table body section. Shows rows or an empty state.
+ *
+ * Usage:
+ * ```html
+ * <llm-tbody [empty]="rows.length === 0" [colSpan]="3">
+ *   @for (row of rows; track row.id) {
+ *     <llm-tr><llm-td>{{ row.name }}</llm-td></llm-tr>
+ *   }
+ *   <div llmTableEmpty>No results found.</div>
+ * </llm-tbody>
+ * ```
+ */
+declare class LlmTbody {
+    /** When true, hides rows and shows the `[llmTableEmpty]` slot content instead. */
+    readonly empty: _angular_core.InputSignal<boolean>;
+    /** Number of columns to span in the empty-state row. Should match total column count. */
+    readonly colSpan: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmTbody, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmTbody, "llm-tbody", never, { "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[llmTableEmpty]"], true, never>;
+}
+/**
+ * Table row. Use inside `llm-thead` or `llm-tbody`.
+ * Set `selectable` to auto-add a checkbox column for row selection.
+ *
+ * Usage:
+ * ```html
+ * <llm-tr selectable [selected]="isSelected" (selectedChange)="toggle($event)">
+ *   <llm-td>Cell content</llm-td>
+ * </llm-tr>
+ * ```
+ */
+declare class LlmTr {
+    /** Whether this row is currently selected. */
+    readonly selected: _angular_core.InputSignal<boolean>;
+    /** Whether this row shows a selection checkbox. */
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    /** Optional identifier for this row. Useful for tracking selection. */
+    readonly rowId: _angular_core.InputSignal<string | undefined>;
+    /** Emits when the row's checkbox is toggled. */
+    readonly selectedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** @internal */
+    protected readonly hostClasses: Signal<"" | "is-selectable">;
+    /** @internal — applied to inner <tr> for CSS selection styling */
+    protected readonly innerClasses: Signal<"" | "is-selected">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmTr, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmTr, "llm-tr", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; }, never, ["*"], true, never>;
+}
+/** Sort direction for sortable column headers. */
+type LlmSortDirection = 'asc' | 'desc' | null;
+/**
+ * Table header cell. Set `sortable` to enable sort cycling.
+ * The consumer controls `sortDirection` (fully controlled — no internal state).
+ *
+ * Usage:
+ * ```html
+ * <llm-th sortable [sortDirection]="nameSortDir" (sort)="nameSortDir = $event">Name</llm-th>
+ * ```
+ */
+declare class LlmTh {
+    /** Whether this column is sortable. Renders a sort button when true. */
+    readonly sortable: _angular_core.InputSignal<boolean>;
+    /** Current sort direction. Fully controlled — the consumer owns this state. */
+    readonly sortDirection: _angular_core.InputSignal<LlmSortDirection>;
+    /** Text alignment of the header cell content. */
+    readonly align: _angular_core.InputSignal<"center" | "start" | "end">;
+    /** Fixed column width (e.g. `'120px'`, `'10rem'`). */
+    readonly width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emits when the header is clicked.
+     * Cycles: `null` → `'asc'` → `'desc'` → `null`.
+     */
+    readonly sort: _angular_core.OutputEmitterRef<LlmSortDirection>;
+    /** @internal */
+    protected readonly ariaSort: Signal<"none" | "ascending" | "descending" | undefined>;
+    /** @internal */
+    protected readonly cellClasses: Signal<string>;
+    /** @internal */
+    protected cycleSort(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmTh, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmTh, "llm-th", never, { "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "sort": "sort"; }, never, ["*", "*"], true, never>;
+}
+/**
+ * Table data cell. Use inside `llm-tr` inside `llm-tbody`.
+ *
+ * Usage:
+ * ```html
+ * <llm-td align="end">{{ value }}</llm-td>
+ * ```
+ */
+declare class LlmTd {
+    /** Text alignment of the cell content. */
+    readonly align: _angular_core.InputSignal<"center" | "start" | "end">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmTd, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmTd, "llm-td", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { LLM_ACCORDION_GROUP, LLM_BREADCRUMBS, LLM_DIALOG, LLM_DRAWER, LLM_RADIO_GROUP, LLM_SELECT, LLM_TABLE, LLM_TAB_GROUP, LlmAccordionGroup, LlmAccordionHeader, LlmAccordionItem, LlmAlert, LlmAvatar, LlmAvatarGroup, LlmBadge, LlmBreadcrumbItem, LlmBreadcrumbs, LlmButton, LlmCard, LlmCardContent, LlmCardFooter, LlmCardHeader, LlmCheckbox, LlmDialog, LlmDialogContent, LlmDialogFooter, LlmDialogHeader, LlmDrawer, LlmDrawerContent, LlmDrawerFooter, LlmDrawerHeader, LlmInput, LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger, LlmOption, LlmPagination, LlmProgress, LlmRadio, LlmRadioGroup, LlmSelect, LlmSkeleton, LlmTab, LlmTabGroup, LlmTable, LlmTbody, LlmTd, LlmTextarea, LlmTh, LlmThead, LlmToast, LlmToastContainer, LlmToastService, LlmToggle, LlmTooltip, LlmTr };
+export type { LlmAccordionGroupContext, LlmBreadcrumbsContext, LlmDialogContext, LlmDrawerContext, LlmRadioGroupContext, LlmSelectContext, LlmSortDirection, LlmTabGroupContext, LlmTableContext, PageItem, TabInfo, ToastData, ToastOptions };