@albi_scando/as-design-system-lib 1.8.2 → 1.9.1

package/dist/types/web-components/buttons/close-button/selector.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @see CloseButtonComponent selector
+ */
+export declare const selector = "close-button";

package/dist/types/web-components/buttons/confirm-button/component.d.ts

@@ -2,6 +2,20 @@ import { BaseButtonComponent } from '../base-button/component';
 /**
  * ConfirmButtonComponent extends BaseButtonComponent with a styled confirm button.
  * It renders a native <button> element directly instead of nesting base-button.
+ *
+ * @example
+ * <!-- Standalone (e.g. confirm and close a specific dialog by id) -->
+ * <confirm-button commandfor="my-dialog"></confirm-button>
+ *
+ * @example
+ * <!-- Auto-wired inside a dialog: commandfor is resolved automatically -->
+ * <confirmation-dialog id="my-dialog">...</confirmation-dialog>
+ *
+ * @example
+ * // JavaScript instantiation
+ * const btn = document.createElement('confirm-button');
+ * btn.commandfor = 'my-dialog';
+ * document.body.appendChild(btn);
  */
 export declare class ConfirmButtonComponent extends BaseButtonComponent {
     /**
@@ -17,13 +31,20 @@ export declare class ConfirmButtonComponent extends BaseButtonComponent {
      * Lifecycle hook invoked when the component is inserted into the DOM.
      */
     connectedCallback(): void;
+    /**
+     * Lifecycle hook invoked when the component is removed from the DOM.
+     */
+    disconnectedCallback(): void;
     /**
      * Renders the component's HTML structure.
      */
     protected _render(): void;
     /**
-     * It finds the closest parent dialog and
-     * sets the commandfor attribute to its ID.
+     * Finds the closest parent dialog and sets the `commandfor` attribute to its
+     * ID so that clicking the button closes the dialog automatically.
+     *
+     * Only sets `commandfor` when the button is nested inside a recognised dialog
+     * element. When used standalone the caller is responsible for setting it.
      *
      * @returns {void}
      */

package/dist/types/web-components/buttons/next-button/component.d.ts

@@ -1,8 +1,22 @@
 import { BaseButtonComponent } from '../base-button/component';
 /**
- * NextButtonComponent extends BaseButtonComponent with a next/forward navigation button.
- * Displays a right chevron icon with "Next" tooltip (hidden when disabled).
- * Used for navigating to next elements in a list or carousel.
+ * NextButtonComponent extends BaseButtonComponent with a next/forward navigation
+ * button. Displays a right chevron icon with "Next" tooltip (hidden when
+ * disabled). Used for navigating to the next item in a list, carousel or
+ * paginated view.
+ *
+ * The component dispatches the standard `click` event which parent components
+ * (e.g. `bar-menu`) listen to for navigation logic.
+ *
+ * @example
+ * <next-button></next-button>
+ * <next-button disabled></next-button>
+ *
+ * @example
+ * // JavaScript instantiation
+ * const btn = document.createElement('next-button');
+ * btn.disabled = true;
+ * document.body.appendChild(btn);
  */
 export declare class NextButtonComponent extends BaseButtonComponent {
     private static readonly _disabledAttribute;
@@ -20,6 +34,10 @@ export declare class NextButtonComponent extends BaseButtonComponent {
      * Lifecycle hook invoked when the component is inserted into the DOM.
      */
     connectedCallback(): void;
+    /**
+     * Lifecycle hook invoked when the component is removed from the DOM.
+     */
+    disconnectedCallback(): void;
     /**
      * Lifecycle hook invoked whenever an observed attribute changes.
      * Updates the title visibility based on disabled state.

package/dist/types/web-components/buttons/previous-button/component.d.ts

@@ -1,8 +1,22 @@
 import { BaseButtonComponent } from '../base-button/component';
 /**
- * PreviousButtonComponent extends BaseButtonComponent with a previous/back navigation button.
- * Displays a left chevron icon with "Previous" tooltip (hidden when disabled).
- * Used for navigating to previous elements in a list or carousel.
+ * PreviousButtonComponent extends BaseButtonComponent with a previous/back
+ * navigation button. Displays a left chevron icon with "Previous" tooltip
+ * (hidden when disabled). Used for navigating to the previous item in a list,
+ * carousel or paginated view.
+ *
+ * The component dispatches the standard `click` event which parent components
+ * (e.g. `bar-menu`) listen to for navigation logic.
+ *
+ * @example
+ * <previous-button></previous-button>
+ * <previous-button disabled></previous-button>
+ *
+ * @example
+ * // JavaScript instantiation
+ * const btn = document.createElement('previous-button');
+ * btn.disabled = true;
+ * document.body.appendChild(btn);
  */
 export declare class PreviousButtonComponent extends BaseButtonComponent {
     private static readonly _disabledAttribute;
@@ -20,6 +34,10 @@ export declare class PreviousButtonComponent extends BaseButtonComponent {
      * Lifecycle hook invoked when the component is inserted into the DOM.
      */
     connectedCallback(): void;
+    /**
+     * Lifecycle hook invoked when the component is removed from the DOM.
+     */
+    disconnectedCallback(): void;
     /**
      * Lifecycle hook invoked whenever an observed attribute changes.
      * Updates the title visibility based on disabled state.

package/dist/types/web-components/buttons/undo-button/component.d.ts

@@ -1,4 +1,23 @@
 import { BaseButtonComponent } from '../base-button/component';
+/**
+ * UndoButtonComponent extends BaseButtonComponent with a styled undo/cancel button.
+ * It renders a native <button> element and automatically wires itself to close
+ * the closest parent dialog (dismissing without confirming).
+ *
+ * @example
+ * <!-- Standalone (e.g. undo and close a specific dialog by id) -->
+ * <undo-button commandfor="my-dialog"></undo-button>
+ *
+ * @example
+ * <!-- Auto-wired inside a dialog: commandfor is resolved automatically -->
+ * <confirmation-dialog id="my-dialog">...</confirmation-dialog>
+ *
+ * @example
+ * // JavaScript instantiation
+ * const btn = document.createElement('undo-button');
+ * btn.commandfor = 'my-dialog';
+ * document.body.appendChild(btn);
+ */
 export declare class UndoButtonComponent extends BaseButtonComponent {
     /**
      * @constructor
@@ -13,13 +32,20 @@ export declare class UndoButtonComponent extends BaseButtonComponent {
      * Lifecycle hook invoked when the component is inserted into the DOM.
      */
     connectedCallback(): void;
+    /**
+     * Lifecycle hook invoked when the component is removed from the DOM.
+     */
+    disconnectedCallback(): void;
     /**
      * Renders the component's HTML structure.
      */
     protected _render(): void;
     /**
-     * It finds the closest parent dialog and
-     * sets the commandfor attribute to its ID.
+     * Finds the closest parent dialog and sets the `commandfor` attribute to its
+     * ID so that clicking the button closes the dialog automatically.
+     *
+     * Only sets `commandfor` when the button is nested inside a recognised dialog
+     * element. When used standalone the caller is responsible for setting it.
      *
      * @returns {void}
      */

package/dist/types/web-components/loaders/loader-bars/component.d.ts

@@ -1,29 +1,57 @@
+/**
+ * LoaderBarsComponent is a skeleton-style loading indicator that shows a
+ * series of animated shimmer bars while content is being loaded.
+ *
+ * The component is hidden by default and becomes visible only when the
+ * `loading` attribute is set to a truthy value. Use the `label` attribute
+ * to customise the loading text shown below the bars.
+ *
+ * @attr {boolean} loading - When present (or `loading="true"`), the loader
+ *   is visible. When absent or `loading="false"`, it is hidden.
+ * @attr {string}  label   - Optional loading label text. Defaults to "Loading…"
+ *
+ * @example
+ * <!-- HTML instantiation -->
+ * <loader-bars loading></loader-bars>
+ * <loader-bars loading label="Fetching data…"></loader-bars>
+ *
+ * @example
+ * // JavaScript instantiation
+ * const loader = document.createElement('loader-bars');
+ * loader.loading = true;
+ * loader.label = 'Fetching data…';
+ * document.body.appendChild(loader);
+ */
 export declare class LoaderBarsComponent extends HTMLElement {
     private static readonly _labelAttribute;
     private static readonly _loadingAttribute;
     /**
      * @constructor
+     * @ignore
      */
     constructor();
     /**
      * Specifies which attributes should be observed for changes.
      */
     static get observedAttributes(): string[];
+    get loading(): boolean;
     set loading(value: boolean);
+    get label(): string;
     set label(value: string);
     /**
-     * Lifecycle hook: component inserted into DOM
+     * Lifecycle hook: component inserted into DOM.
      */
     connectedCallback(): void;
     /**
-     * Lifecycle hook: component removed from DOM
+     * Lifecycle hook: observed attribute changed.
      */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
-     * Lifecycle hook: observed attribute changed
+     * Renders the component's Shadow DOM structure.
      */
-    attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
+    private _render;
     /**
-     * Render the component's Shadow DOM structure
+     * Updates the label text in the shadow DOM.
      */
-    private _render;
+    private _updateLabel;
 }

package/dist/types/web-components/loaders/loader-bars/main.d.ts

@@ -0,0 +1,2 @@
+export { LoaderBarsComponent } from './component';
+export { selector } from './selector';

package/dist/types/web-components/loaders/loader-bars/selector.d.ts

@@ -1,4 +1,4 @@
 /**
- * @see BarMenuComponent selector.
+ * @see LoaderBarsComponent selector.
  */
-export declare const selector = "bar-menu";
+export declare const selector = "loader-bars";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@albi_scando/as-design-system-lib",
-  "version": "1.8.2",
+  "version": "1.9.1",
   "description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
   "type": "module",
   "repository": {
@@ -55,8 +55,8 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.3",
     "@semantic-release/npm": "^13.1.3",
-    "@storybook/addon-docs": "10.3.3",
-    "@storybook/html-vite": "10.3.3",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/html-vite": "10.3.5",
     "@types/node": "^25.2.1",
     "@types/numeric": "^1.2.6",
     "@vitest/coverage-v8": "^4.0.18",
@@ -69,7 +69,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-regexp": "^3.0.0",
     "eslint-plugin-security": "^3.0.1",
-    "eslint-plugin-storybook": "10.3.3",
+    "eslint-plugin-storybook": "10.3.5",
     "globals": "^17.3.0",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -77,7 +77,7 @@
     "prettier": "3.8.1",
     "sass": "^1.97.3",
     "semantic-release": "^25.0.3",
-    "storybook": "10.3.3",
+    "storybook": "10.3.5",
     "typedoc": "^0.28.16",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",