@diwacopilot/components 1.0.0

package/dist/types/components/diwa-button/diwa-button.d.ts

@@ -0,0 +1,102 @@
+import type { ButtonSize, ButtonType, ButtonVariant } from "./types";
+import type { Theme } from "../../utils/styles";
+/**
+ * @component diwa-button
+ *
+ * A fully encapsulated, accessible button primitive.
+ * Renders as a native <button> (or <a> when `href` is supplied).
+ *
+ * Design token override API (set on :root or any ancestor):
+ *   --diwa-button-bg          Background color (primary variant default)
+ *   --diwa-button-bg-hover    Hover background
+ *   --diwa-button-color       Foreground / text color
+ *   --diwa-button-radius      Border radius
+ *   --diwa-button-height      Height for md size
+ *   --diwa-button-height-sm   Height for sm size
+ *   --diwa-button-height-lg   Height for lg size
+ *   --diwa-button-padding-x   Horizontal padding for md/lg
+ *   --diwa-button-padding-x-sm Horizontal padding for sm
+ *
+ * Usage:
+ *   <diwa-button variant="primary">Get Started</diwa-button>
+ *   <diwa-button variant="secondary" size="sm" disabled>Cancel</diwa-button>
+ *   <diwa-button href="/dashboard" target="_blank">Open Panel</diwa-button>
+ *
+ * @slot default — Button label content (text, icons, or mixed)
+ */
+export declare class DiwaButton {
+    host: HTMLDiwaButtonElement;
+    /**
+     * Per-component theme override.
+     *
+     * Setting this reflects data-theme onto the host element, causing the light/dark
+     * token overrides in app.css to cascade into the Shadow DOM automatically.
+     * Mirrors the `theme` prop on every PDS component.
+     */
+    theme: Theme;
+    /** Visual style variant. */
+    variant: ButtonVariant;
+    /** Size tier — controls height and padding. */
+    size: ButtonSize;
+    /**
+     * Native button type. Only applies when rendered as <button>
+     * (i.e., no `href` prop is set).
+     */
+    type: ButtonType;
+    /**
+     * Disabled state. Blocks all pointer and keyboard interaction.
+     * When rendered as <a>, sets aria-disabled instead of disabled
+     * (the `disabled` attribute is not valid on anchor elements).
+     */
+    disabled: boolean;
+    /**
+     * Loading state. Shows an inline spinner, disables the button,
+     * and sets aria-busy="true" to communicate async activity to
+     * screen readers.
+     */
+    loading: boolean;
+    /**
+     * When set, the button renders as an <a> element (link semantics).
+     * Pair with `target` for external links.
+     */
+    href?: string;
+    /** Link target — only meaningful when `href` is set. */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /** Native button name — submitted with form data. */
+    name?: string;
+    /** Native button value — submitted with form data. */
+    value?: string;
+    /**
+     * Accessible label. Use when the visible slot content is not
+     * descriptive enough (e.g., icon-only buttons).
+     */
+    label?: string;
+    /**
+     * When `true`, the default label slot is visually hidden so the button
+     * renders as a compact square (icon-only mode). The slot text is kept in
+     * the DOM for screen-reader accessible-name calculation.
+     *
+     * For best accessibility, always pair with the `label` prop **or** ensure
+     * the default slot contains descriptive text, so the button has a name.
+     *
+     * Usage:
+     *   <diwa-button hide-label label="Save">
+     *     <svg slot="icon-start">…</svg>
+     *   </diwa-button>
+     */
+    hideLabel: boolean;
+    /**
+     * Lucide icon name in kebab-case (e.g. `"star"`, `"arrow-right"`), or `'none'`
+     * to show no icon. When set to any value other than `'none'`, renders a
+     * `<diwa-icon>` in the leading (icon-start) position.
+     *
+     * The `icon-start` slot still works alongside this prop — the prop-rendered
+     * icon comes first, followed by any slotted content.
+     */
+    icon: string;
+    private get isInteractive();
+    private get iconSize();
+    private handleClick;
+    render(): any;
+}
+//# sourceMappingURL=diwa-button.d.ts.map

package/dist/types/components/diwa-button/types.d.ts

@@ -0,0 +1,25 @@
+/**
+ * diwa-button — Public TypeScript interfaces
+ * ============================================
+ * Exported so framework wrapper packages and consumers can share these types.
+ */
+/** Visual variant of the button. Maps to distinct styled roles. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+/** Size tier. Controls height, padding, and font-size. */
+export type ButtonSize = "sm" | "md" | "lg";
+/** Native button type attribute — passthrough to the inner <button>. */
+export type ButtonType = "button" | "submit" | "reset";
+/**
+ * Per-component theme override.
+ *
+ * When set, the component writes `data-theme="light|dark"` onto its host element.
+ * This causes the [data-theme] CSS variable overrides in app.css to cascade into
+ * the Shadow DOM via custom property inheritance — no hardcoded colour values needed.
+ *
+ * Use this to render a single component in the opposite theme from its surroundings,
+ * e.g. a light-theme button inside a dark-mode layout.
+ *
+ * Mirrors the `theme` prop present on every PDS component.
+ */
+export type { Theme } from '../../utils/styles';
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/diwa-button-pure/diwa-button-pure-styles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * diwa-button-pure-styles.ts
+ * ===========================
+ * CSS-in-JS styles for <diwa-button-pure>.
+ *
+ * A minimal, transparent button: icon + label only, no background or border.
+ * Mirrors the PDS p-button-pure aesthetic.
+ *
+ * Layout rules:
+ *   alignLabel='end'   (default) → icon  label
+ *   alignLabel='start'           → label icon  (via flex-direction: row-reverse)
+ *   stretch=true                 → fills container width, gap between icon and label
+ */
+import type { ButtonPureSize, ButtonPureAlignLabel } from './types';
+export declare const getComponentCss: (_size: ButtonPureSize, _disabled: boolean, _loading: boolean, _underline: boolean, _active: boolean, _hideLabel: boolean, _alignLabel: ButtonPureAlignLabel, _stretch: boolean) => string;
+//# sourceMappingURL=diwa-button-pure-styles.d.ts.map

package/dist/types/components/diwa-button-pure/diwa-button-pure-utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * diwa-button-pure-utils.ts
+ * ==========================
+ * ARIA helpers for <diwa-button-pure>.
+ */
+export interface ButtonPureAriaAttributes {
+    'aria-label'?: string;
+    'aria-busy'?: 'true';
+    'aria-disabled'?: 'true';
+}
+export declare const getButtonPureAriaAttributes: (disabled: boolean, loading: boolean, label: string | undefined, isLink: boolean) => ButtonPureAriaAttributes;
+//# sourceMappingURL=diwa-button-pure-utils.d.ts.map

package/dist/types/components/diwa-button-pure/diwa-button-pure.d.ts

@@ -0,0 +1,82 @@
+import type { ButtonPureSize, ButtonPureAlignLabel, ButtonPureType } from "./types";
+import type { Theme } from "../../utils/styles";
+/**
+ * @component diwa-button-pure
+ *
+ * A transparent, text+icon action button — no background or border.
+ * Mirrors the PDS `p-button-pure` component.
+ *
+ * Default layout: [icon] [label]  (alignLabel="end")
+ * Reversed layout: [label] [icon] (alignLabel="start")
+ * Stretched layout: [icon] ·····  [label] (stretch + alignLabel="end")
+ *
+ * Usage:
+ *   <diwa-button-pure>Read more</diwa-button-pure>
+ *   <diwa-button-pure icon="arrow-left" align-label="start">Back</diwa-button-pure>
+ *   <diwa-button-pure hide-label label="Close" icon="x" />
+ *
+ * @slot default — Button label text
+ */
+export declare class DiwaButtonPure {
+    host: HTMLDiwaButtonPureElement;
+    /** Per-component theme override (light / dark). */
+    theme: Theme;
+    /** Text size tier. Controls both font-size and icon size. */
+    size: ButtonPureSize;
+    /**
+     * Lucide icon name in kebab-case (e.g. `"arrow-right"`, `"star"`), or `"none"`
+     * to render with no icon. Defaults to `"arrow-right"` — matching PDS.
+     */
+    icon: string;
+    /** Disabled state. Blocks all pointer and keyboard interaction. */
+    disabled: boolean;
+    /**
+     * Loading state. Replaces the icon with a spinner, blocks interaction,
+     * and announces aria-busy to screen readers.
+     */
+    loading: boolean;
+    /**
+     * When `true`, the label slot is visually hidden (icon-only mode).
+     * Always pair with the `label` prop for screen-reader accessible name.
+     */
+    hideLabel: boolean;
+    /** Forces the button into its active/pressed visual state. */
+    active: boolean;
+    /** Adds an underline decoration to the label text. */
+    underline: boolean;
+    /**
+     * Controls which side the label appears on relative to the icon.
+     * - `"end"` (default): [icon] [label]
+     * - `"start"`:         [label] [icon]
+     */
+    alignLabel: ButtonPureAlignLabel;
+    /**
+     * When `true`, the button stretches to fill its container and the space
+     * between icon and label expands to fill remaining width.
+     */
+    stretch: boolean;
+    /** Native button type. Only applies when rendered as `<button>`. */
+    type: ButtonPureType;
+    /** Native button name — submitted with form data. */
+    name?: string;
+    /** Native button value — submitted with form data. */
+    value?: string;
+    /**
+     * When set, renders as an `<a>` element (link semantics).
+     * Pair with `target` for external links.
+     */
+    href?: string;
+    /** Link target — only meaningful when `href` is set. */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * Accessible label for icon-only buttons.
+     * Required when `hideLabel` is `true`.
+     */
+    label?: string;
+    private get isInteractive();
+    /** Icon pixel size scaled to the current size tier. */
+    private get iconSize();
+    private readonly handleClick;
+    render(): any;
+}
+//# sourceMappingURL=diwa-button-pure.d.ts.map

package/dist/types/components/diwa-button-pure/types.d.ts

@@ -0,0 +1,5 @@
+export type ButtonPureSize = 'sm' | 'md' | 'lg';
+/** Controls which side the label appears on relative to the icon. */
+export type ButtonPureAlignLabel = 'start' | 'end';
+export type ButtonPureType = 'button' | 'submit' | 'reset';
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/diwa-checkbox/diwa-checkbox-styles.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxState } from './types';
+export declare const getComponentCss: (state: CheckboxState, _disabled: boolean, compact: boolean, _hideLabel: boolean) => string;
+//# sourceMappingURL=diwa-checkbox-styles.d.ts.map

package/dist/types/components/diwa-checkbox/diwa-checkbox.d.ts

@@ -0,0 +1,85 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import type { CheckboxState } from './types';
+import type { Theme } from '../../utils/styles';
+/**
+ * @component diwa-checkbox
+ *
+ * A fully accessible checkbox control with label, validation state,
+ * and indeterminate support. Mirrors the PDS p-checkbox API.
+ *
+ * Semi-controlled: the `checked` prop is mutable — the component
+ * updates it internally AND emits an `update` event. The consumer can
+ * either listen to `update` to manage state externally, or use it
+ * standalone without any event wiring.
+ *
+ * Accessibility:
+ *   - Native `<input type="checkbox">` inside Shadow DOM with delegatesFocus
+ *   - `aria-checked="mixed"` set automatically when `indeterminate` is true
+ *   - `aria-describedby` wires the message element when state is error/success
+ *   - `role` is implicit from native input — no extra ARIA needed
+ *
+ * Usage:
+ *   <diwa-checkbox label="Accept terms" checked={accepted}
+ *     onupdate={e => setAccepted(e.detail.checked)} />
+ *
+ * Note (V1): The inner <input name> is inside Shadow DOM and is therefore
+ *   not visible to ancestor <form> elements for native form submission.
+ *   Use ElementInternals (V2) or submit via JavaScript instead.
+ */
+export declare class DiwaCheckbox {
+    host: HTMLDiwaCheckboxElement;
+    /** Per-component theme override (`light` / `dark`). */
+    theme: Theme;
+    /** Visible label text rendered next to the checkbox. */
+    label: string;
+    /** Native name attribute (identifies the field in JS / form data). */
+    name: string;
+    /** Value submitted/emitted when the checkbox is checked. */
+    value: string;
+    /**
+     * Whether the checkbox is checked.
+     *
+     * Semi-controlled: mutates internally on user interaction and
+     * also emits an `update` event so the consumer can sync their state.
+     */
+    checked: boolean;
+    /**
+     * Indeterminate state — renders a dash icon and sets `aria-checked="mixed"`.
+     * Setting this to `true` takes visual precedence over `checked`.
+     * The consumer is responsible for clearing it once the user toggles.
+     */
+    indeterminate: boolean;
+    /** Puts the checkbox in a disabled state. Blocks interaction. */
+    disabled: boolean;
+    /** Marks the field as required. Shows a visual asterisk in the label. */
+    required: boolean;
+    /** Validation state: `'none'` (default), `'error'`, or `'success'`. */
+    state: CheckboxState;
+    /** Helper / validation message shown below the checkbox. Only shown when state ≠ 'none'. */
+    message: string;
+    /** Reduces the checkbox size from 20 px to 14 px for denser layouts. */
+    compact: boolean;
+    /** Hides the label visually while keeping it accessible to screen readers. */
+    hideLabel: boolean;
+    /**
+     * Emitted when the user toggles the checkbox.
+     * `event.detail.checked` is the new checked state.
+     *
+     * React consumers: use the lowercase `onupdate` prop:
+     * ```jsx
+     * <diwa-checkbox onupdate={e => setChecked(e.detail.checked)} />
+     * ```
+     */
+    update: EventEmitter<{
+        checked: boolean;
+        name: string;
+        value: string;
+    }>;
+    private checkboxEl?;
+    /** Keep the native input's non-reflected .indeterminate property in sync. */
+    watchIndeterminate(value: boolean): void;
+    private handleChange;
+    private setCheckboxRef;
+    render(): any;
+}
+//# sourceMappingURL=diwa-checkbox.d.ts.map

package/dist/types/components/diwa-checkbox/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * diwa-checkbox — Public TypeScript types
+ */
+export type CheckboxState = 'none' | 'error' | 'success';
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/diwa-divider/diwa-divider-styles.d.ts

@@ -0,0 +1,3 @@
+import type { DividerOrientation } from './types';
+export declare const getComponentCss: (orientation: DividerOrientation) => string;
+//# sourceMappingURL=diwa-divider-styles.d.ts.map

package/dist/types/components/diwa-divider/diwa-divider.d.ts

@@ -0,0 +1,37 @@
+import type { DividerOrientation } from './types';
+import type { Theme } from '../../utils/styles';
+/**
+ * @component diwa-divider
+ *
+ * A purely presentational separator line. Renders a native `<hr>` element
+ * styled via CSS-in-JS. Supports horizontal (default) and vertical orientations.
+ *
+ * Accessibility:
+ *   - Renders as `role="separator"` (implicit from `<hr>`)
+ *   - `aria-orientation` is set automatically from the `orientation` prop
+ *   - Non-interactive — no focus, no keyboard handling
+ *
+ * Usage:
+ *   <!-- Horizontal (default) -->
+ *   <diwa-divider />
+ *
+ *   <!-- Vertical — requires a flex or grid parent with a defined height -->
+ *   <div style="display:flex; height:40px">
+ *     <span>Left</span>
+ *     <diwa-divider orientation="vertical" />
+ *     <span>Right</span>
+ *   </div>
+ */
+export declare class DiwaDivider {
+    /** Per-component theme override (`light` / `dark`). */
+    theme: Theme;
+    /**
+     * Orientation of the divider line.
+     * - `'horizontal'` (default) — a full-width 1 px horizontal rule.
+     * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.
+     *   The parent must be a flex or grid container with a defined height.
+     */
+    orientation: DividerOrientation;
+    render(): any;
+}
+//# sourceMappingURL=diwa-divider.d.ts.map

package/dist/types/components/diwa-divider/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * diwa-divider — Public TypeScript types
+ */
+export type DividerOrientation = 'horizontal' | 'vertical';
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/diwa-flyout/diwa-flyout-styles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * diwa-flyout-styles.ts
+ * ======================
+ * CSS-in-JS styles for <diwa-flyout>.
+ *
+ * The flyout is a fixed-position overlay consisting of:
+ *   - A semi-transparent backdrop that covers the viewport.
+ *   - A panel that slides in from the start (left) or end (right) edge.
+ *
+ * Both the backdrop and panel animate on open/close. Because all values are
+ * passed as template literal expressions, the <style> tag is re-emitted on
+ * every render — which happens whenever `open` or `position` changes.
+ *
+ * Visibility technique: `:host` uses `visibility: hidden` with a delayed
+ * transition when closing so the panel is invisible after the slide-out
+ * animation completes, while still being `visibility: visible` during the
+ * opening animation so it animates in correctly.
+ */
+import type { FlyoutBackdrop, FlyoutPosition } from './types';
+export declare const getComponentCss: (open: boolean, position: FlyoutPosition, backdrop: FlyoutBackdrop) => string;
+//# sourceMappingURL=diwa-flyout-styles.d.ts.map

package/dist/types/components/diwa-flyout/diwa-flyout.d.ts

@@ -0,0 +1,75 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import type { FlyoutBackdrop, FlyoutPosition } from './types';
+import type { Theme } from '../../utils/styles';
+/**
+ * @component diwa-flyout
+ *
+ * A full-height overlay panel that slides in from the start or end edge of
+ * the viewport. Follows the controlled component pattern — the consumer
+ * manages `open` state in response to the `dismiss` event.
+ *
+ * Accessibility:
+ *   - Panel has `role="dialog"` and `aria-modal="true"`
+ *   - Clicking the backdrop, pressing Escape, or clicking the dismiss button
+ *     emits the `dismiss` event; the consumer sets `open={false}`
+ *   - Focus moves to the panel when opened and returns to the trigger element
+ *     when closed
+ *   - Body scroll is locked (`overflow: hidden`) while the flyout is open
+ *
+ * V1 limitations:
+ *   - No focus trap: Tab can navigate outside the panel. A full focus trap
+ *     will be added in V2.
+ *
+ * Usage:
+ *   <diwa-flyout heading="Settings" open={isOpen} onDismiss={() => setIsOpen(false)}>
+ *     <p>Flyout body content.</p>
+ *     <div slot="footer">
+ *       <diwa-button onClick={() => setIsOpen(false)}>Save</diwa-button>
+ *     </div>
+ *   </diwa-flyout>
+ *
+ * @slot default — Scrollable body content of the flyout.
+ * @slot header  — Extra content in the header row, inserted after the heading text.
+ * @slot footer  — Sticky footer content (e.g. action buttons). Auto-hides when empty.
+ */
+export declare class DiwaFlyout {
+    private panelEl?;
+    private savedFocusEl;
+    /** Per-component theme override (`light` / `dark`). */
+    theme: Theme;
+    /**
+     * Whether the flyout is currently open.
+     *
+     * Controlled prop — the consumer must set this to `false` in response to
+     * the `dismiss` event (backdrop click, Escape key, or dismiss button).
+     */
+    open: boolean;
+    /** Which edge of the viewport the panel slides in from (`start` = left, `end` = right). */
+    position: FlyoutPosition;
+    /**
+     * Controls the visual style of the backdrop overlay.
+     * `blur`    — frosted glass (default; use when opened by user interaction).
+     * `shading` — solid dark scrim (use for system-triggered flyouts).
+     */
+    backdrop: FlyoutBackdrop;
+    /** Heading text displayed in the flyout header. */
+    heading: string;
+    /**
+     * Emitted when the user requests the flyout to close (backdrop click,
+     * Escape key press, or dismiss button click).
+     *
+     * The consumer must set `open={false}` in response:
+     * ```html
+     * <diwa-flyout onDismiss={() => this.open = false} />
+     * ```
+     * Not bubbles, not composed.
+     */
+    dismiss: EventEmitter<void>;
+    onOpenChange(nextOpen: boolean): void;
+    disconnectedCallback(): void;
+    /** Close on Escape key while the flyout is open. */
+    onKeyDown(e: KeyboardEvent): void;
+    private handleDismiss;
+    render(): any;
+}
+//# sourceMappingURL=diwa-flyout.d.ts.map

package/dist/types/components/diwa-flyout/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * diwa-flyout — Public TypeScript types
+ * ======================================
+ * Exported so framework wrapper packages and consumers can share these types.
+ */
+/** Which edge of the viewport the panel slides in from. */
+export type FlyoutPosition = 'start' | 'end';
+/**
+ * Controls the visual style of the backdrop overlay behind the flyout.
+ *
+ * `blur`    — frosted glass via backdrop-filter (default).
+ *             Use when the flyout is opened by direct user interaction.
+ *
+ * `shading` — solid dark scrim via --diwa-bg-shading.
+ *             Use for system-triggered flyouts.
+ */
+export type FlyoutBackdrop = 'blur' | 'shading';
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/diwa-icon/diwa-icon-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const getComponentCss: () => string;
+//# sourceMappingURL=diwa-icon-styles.d.ts.map

package/dist/types/components/diwa-icon/diwa-icon.d.ts

@@ -0,0 +1,49 @@
+import type { Theme } from '../../utils/styles';
+/**
+ * @component diwa-icon
+ *
+ * Renders a Lucide icon as an inline SVG inside Shadow DOM.
+ * The icon inherits `color` from the parent via `currentColor` by default.
+ *
+ * Usage:
+ *   <diwa-icon name="arrow-right"></diwa-icon>
+ *   <diwa-icon name="user" size="32" color="var(--diwa-accent)"></diwa-icon>
+ *   <diwa-icon name="bell" label="Notifications"></diwa-icon>
+ */
+export declare class DiwaIcon {
+    host: HTMLElement;
+    /**
+     * Lucide icon name in kebab-case.
+     * Full list: https://lucide.dev/icons/
+     * Examples: "arrow-right", "check", "user", "trash-2"
+     */
+    name: string;
+    /**
+     * Icon size in pixels. Sets both width and height.
+     * @default 24
+     */
+    size: number;
+    /**
+     * Stroke color. Defaults to `currentColor` so the icon inherits the
+     * parent element's text color automatically. Pass any CSS color value or
+     * custom property reference to override.
+     * @default "currentColor"
+     */
+    color: string;
+    /**
+     * Accessible label for non-decorative icons.
+     * When provided, adds `role="img"` and `aria-label` to the SVG.
+     * When omitted, the icon is treated as decorative (`aria-hidden="true"`).
+     */
+    label?: string;
+    /**
+     * Per-component theme override.
+     * Setting this reflects data-theme onto the host so light/dark token
+     * overrides cascade into the Shadow DOM via CSS custom property inheritance.
+     */
+    theme: Theme;
+    private svgEl?;
+    componentDidRender(): void;
+    render(): any;
+}
+//# sourceMappingURL=diwa-icon.d.ts.map

package/dist/types/components/diwa-icon/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * diwa-icon — Public TypeScript interfaces
+ * =========================================
+ */
+/**
+ * Per-component theme override.
+ * Mirrors the `theme` prop on every PDS/Diwa component.
+ */
+export type { Theme } from '../../utils/styles';
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/diwa-inline-notification/diwa-inline-notification-styles.d.ts

@@ -0,0 +1,15 @@
+/**
+ * diwa-inline-notification-styles.ts
+ * ====================================
+ * CSS-in-JS styles for <diwa-inline-notification>.
+ *
+ * The notification is a static flex-row banner:
+ *   [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]
+ *
+ * Background and border colours are driven entirely by the `state` prop.
+ * All values are CSS custom properties so that the [data-theme="light"]
+ * overrides in app.css cascade into the Shadow DOM correctly.
+ */
+import type { InlineNotificationState } from './types';
+export declare const getComponentCss: (state: InlineNotificationState) => string;
+//# sourceMappingURL=diwa-inline-notification-styles.d.ts.map

package/dist/types/components/diwa-inline-notification/diwa-inline-notification.d.ts

@@ -0,0 +1,73 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import type { InlineNotificationState } from './types';
+import type { Theme } from '../../utils/styles';
+/**
+ * @component diwa-inline-notification
+ *
+ * A static inline banner that communicates contextual feedback.
+ * Supports four semantic states — info, success, warning, error — each with
+ * a distinct colour treatment and Lucide status icon.
+ *
+ * Accessibility:
+ *   - state="error" uses role="alert" (assertive live region)
+ *   - All other states use role="status" (polite live region)
+ *   - The icon is aria-hidden — semantic meaning is carried by the text
+ *   - The dismiss button has an accessible label via label + hideLabel
+ *
+ * Usage:
+ *   <diwa-inline-notification
+ *     state="success"
+ *     heading="Saved"
+ *     description="Your changes have been saved."
+ *   />
+ *
+ * @slot default — Fallback description content when the description prop is empty.
+ */
+export declare class DiwaInlineNotification {
+    /** Per-component theme override (`light` / `dark`). */
+    theme: Theme;
+    /**
+     * Semantic state — governs colour treatment, icon, and ARIA live role.
+     * - `info`    — neutral informational  (role="status", polite)
+     * - `success` — positive confirmation  (role="status", polite)
+     * - `warning` — non-blocking caution   (role="status", polite)
+     * - `error`   — critical or blocking   (role="alert",  assertive)
+     */
+    state: InlineNotificationState;
+    /** Bold heading text rendered above the description. */
+    heading: string;
+    /**
+     * Description text.
+     * When empty, the default slot is rendered instead — allowing rich markup.
+     */
+    description: string;
+    /**
+     * Whether to show the dismiss (×) button.
+     * When `false`, the notification can only be removed programmatically.
+     */
+    dismissButton: boolean;
+    /**
+     * Optional label for a secondary action button rendered beside the dismiss button.
+     * When set, a diwa-button-pure with an arrow icon emits the `action` event on click.
+     */
+    actionLabel?: string;
+    /**
+     * Shows a loading indicator on the action button and blocks its interaction.
+     * Has no effect when `actionLabel` is not set.
+     */
+    actionLoading: boolean;
+    /**
+     * Emitted when the dismiss (×) button is clicked.
+     * The consumer is responsible for removing or hiding the notification in response.
+     */
+    dismiss: EventEmitter<void>;
+    /**
+     * Emitted when the action button is clicked.
+     * Only fired when `actionLabel` is set and the button is not in a loading state.
+     */
+    action: EventEmitter<void>;
+    private handleDismiss;
+    private handleAction;
+    render(): any;
+}
+//# sourceMappingURL=diwa-inline-notification.d.ts.map