@cumulus-ui/components 0.1.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2025 cumulus-ui contributors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,25 @@
+# Cumulus UI
+
+**Web components inspired by the [Cloudscape Design System](https://cloudscape.design) and [Rainforest](https://github.com/krhoyt/Rainforest)**
+
+Built with [Lit 3](https://lit.dev) + TypeScript.
+
+> **Status:** Early development — foundation infrastructure only.
+
+## Design Philosophy
+
+- **Web standards first** — native custom elements, no framework required
+- **Cloudscape-inspired** — follows the [Cloudscape Design System](https://cloudscape.design) visual language and token system
+- **Lit-powered** — built on [Lit 3](https://lit.dev) for reactive properties, shadow DOM, and efficient rendering
+- **Type-safe** — full TypeScript with strict mode, exported `.d.ts` declarations
+- **Tested** — real browser tests via Playwright, accessibility audits via axe-core
+- **Dual output** — ESM for bundlers, CDN bundle for `<script>` tags
+
+## References
+
+- [Cloudscape Design System](https://cloudscape.design) — AWS's open-source design system
+- [Rainforest](https://github.com/krhoyt/Rainforest) — Kevin Hoyt's Cloudscape-inspired web components
+
+## License
+
+Apache 2.0

package/dist/alert/interfaces.d.ts

@@ -0,0 +1,107 @@
+export declare namespace AlertProps {
+    type Type = 'success' | 'error' | 'warning' | 'info';
+    interface Ref {
+        /**
+         * Sets focus on the alert content.
+         */
+        focus(): void;
+    }
+    interface I18nStrings {
+        successIconAriaLabel?: string;
+        errorIconAriaLabel?: string;
+        warningIconAriaLabel?: string;
+        infoIconAriaLabel?: string;
+        dismissAriaLabel?: string;
+    }
+    interface AnalyticsMetadata {
+        errorContext?: ErrorContext;
+    }
+    interface Style {
+        root?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            borderWidth?: string;
+            color?: string;
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+        };
+        icon?: {
+            color?: string;
+        };
+        dismissButton?: {
+            color?: {
+                active?: string;
+                default?: string;
+                hover?: string;
+            };
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+        };
+    }
+    interface PersistenceConfig {
+        uniqueKey: string;
+        crossServicePersistence?: boolean;
+    }
+}
+export interface AlertProps {
+    /**
+     * Specifies the type of message you want to display.
+     */
+    type?: AlertProps.Type;
+    /**
+     * Provides a text alternative for the icon.
+     *
+     * @deprecated Use the label properties inside `i18nStrings` instead.
+     * If the label is assigned via the `i18nStrings` property, this label will be ignored.
+     */
+    statusIconAriaLabel?: string;
+    /**
+     * Determines whether the alert is displayed.
+     * @deprecated Use conditional rendering in your code instead of this prop.
+     */
+    visible?: boolean;
+    /**
+     * Adds a close button to the alert when set to `true`.
+     * An `onDismiss` event is fired when a user clicks the button.
+     */
+    dismissible?: boolean;
+    /**
+     * Adds an aria-label to the dismiss button.
+     * @i18n
+     *
+     * @deprecated Use `i18nStrings.dismissAriaLabel` instead.
+     * If the label is assigned via the `i18nStrings` property, this label will be ignored.
+     */
+    dismissAriaLabel?: string;
+    /** @slot default — Primary text displayed in the element */
+    /** @slot header — Heading text */
+    /** @slot buttonText — Displays an action button next to the message area when set */
+    /** @slot action — Specifies an action for the alert message */
+    /** @event dismiss — CustomEvent<void> */
+    /** @event buttonClick — CustomEvent<void> */
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     * @property {AlertProps.I18nStrings} [i18nStrings] - optional
+     * @i18n
+     */
+    i18nStrings?: AlertProps.I18nStrings;
+    /**
+     * Specifies additional analytics-related metadata.
+     * * `errorContext` - Identifies the error category and sub-category.
+     * @analytics
+     */
+    analyticsMetadata?: AlertProps.AnalyticsMetadata;
+    /**
+     * An object containing CSS properties to customize the alert's visual appearance.
+     * Refer to the [style](/components/alert/?tabId=style) tab for more details.
+     */
+    style?: AlertProps.Style;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/alert/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/alert/interfaces.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,WAAW,UAAU,CAAC;IAClC,KAAK,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACrD,UAAU,GAAG;QACX;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IACD,UAAU,WAAW;QACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B;IACD,UAAU,iBAAiB;QACzB,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;IACD,UAAU,KAAK;QACb,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,IAAI,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;KACH;IACD,UAAU,iBAAiB;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,uBAAuB,CAAC,EAAE,OAAO,CAAC;KACnC;CACF;AACD,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,kCAAkC;IAClC,qFAAqF;IACrF,+DAA+D;IAC/D,yCAAyC;IACzC,6CAA6C;IAC7C;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;CAO1B"}

package/dist/anchor-navigation/index.d.ts

@@ -0,0 +1,5 @@
+import { CsAnchorNavigationInternal } from './internal.js';
+export declare class CsAnchorNavigation extends CsAnchorNavigationInternal {
+}
+export type { AnchorNavigationProps } from './interfaces.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/anchor-navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/anchor-navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,qBAAa,kBAAmB,SAAQ,0BAA0B;CAAG;AAIrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/anchor-navigation/interfaces.d.ts

@@ -0,0 +1,54 @@
+export interface AnchorNavigationProps {
+    /**
+     * Adds `aria-labelledby` to the component.
+     *
+     * Use this property for identifying the header or title that labels the anchor navigation.
+     * To use it correctly, define an ID for the element either as label, and set the property to that ID.
+     */
+    ariaLabelledby?: string;
+    /**
+     * List of anchors. Each anchor object has the following properties:
+     *
+     * * `text` (string) - The text for the anchor item.
+     * * `href` (string) - The `id` attribute of the target HTML element that the anchor refers to.
+     * For example: `"#section1.1"`
+     * * `level` (number) - Level of nesting of the anchor.
+     * * `info` (string | undefined) - Additional information to display next to the link, for example: "New" or "Updated".
+     *
+     * Note: The list of anchors should be sorted in the order they appear on the page.
+     */
+    anchors: AnchorNavigationProps.Anchor[];
+    /**
+     * Specifies the active anchor href. When set, the component will operate in a
+     * controlled manner, and internal scroll-spy will be disabled.
+     */
+    activeHref?: string;
+    /**
+     * Specifies the height (in pixels) to be considered as an offset when activating anchors.
+     * This is useful when you have a fixed or sticky header that might overlap with the content as you scroll.
+     *
+     * Defaults to 0.
+     */
+    scrollSpyOffset?: number;
+}
+export declare namespace AnchorNavigationProps {
+    interface Anchor {
+        /**
+         * The text for the anchor item.
+         */
+        text: string;
+        /**
+         * The `href` of the anchor. For example: `"#section1.1"`".
+         */
+        href: string;
+        /**
+         * Level of nesting of the anchor.
+         */
+        level: number;
+        /**
+         * Additional information to display next to the link, for example: "New" or "Updated".
+         */
+        info?: string;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/anchor-navigation/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/anchor-navigation/interfaces.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;OAUG;IACH,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAG1B;AACD,MAAM,CAAC,OAAO,WAAW,qBAAqB,CAAC;IAC7C,UAAU,MAAM;QACd;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;CACF"}

package/dist/anchor-navigation/internal.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { AnchorNavigationProps } from './interfaces.js';
+export declare class CsAnchorNavigationInternal extends LitElement {
+    static styles: import("lit").CSSResult[];
+    anchors: AnchorNavigationProps.Anchor[];
+    activeHref?: string;
+    scrollSpyOffset: number;
+    ariaLabelledby?: string;
+    private _observedHref;
+    private _observer;
+    private _sectionMap;
+    private get _isControlled();
+    private get _currentHref();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    private _setupScrollSpy;
+    private _handleIntersection;
+    private _teardownScrollSpy;
+    private _onAnchorClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=internal.d.ts.map

package/dist/anchor-navigation/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/anchor-navigation/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAI7D,qBAAa,0BAA2B,SAAQ,UAAU;IACxD,OAAgB,MAAM,4BAA+C;IAGrE,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,CAAM;IAG7C,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,eAAe,SAAK;IAGpB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAAM;IAE3B,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,WAAW,CAAgD;IAEnE,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAiBlD,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAIb,MAAM;CAqChB"}

package/dist/anchor-navigation/styles.d.ts

@@ -0,0 +1,5 @@
+import { sharedStyles } from '../internal/styles/shared.js';
+export declare const componentStyles: import("lit").CSSResult;
+export { componentStyles as anchorNavigationStyles };
+export { sharedStyles };
+//# sourceMappingURL=styles.d.ts.map

package/dist/anchor-navigation/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/anchor-navigation/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,eAAO,MAAM,eAAe,yBAuI3B,CAAC;AAEF,OAAO,EAAE,eAAe,IAAI,sBAAsB,EAAE,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/annotation-context/interfaces.d.ts

@@ -0,0 +1,47 @@
+import { TutorialPanelProps } from '../tutorial-panel/interfaces.js';
+export interface AnnotationContextProps {
+    /**
+     * The currently launched tutorial. This should be the object received
+     * in the `detail` property of the `onStartTutorial` event.
+     */
+    currentTutorial: AnnotationContextProps.Tutorial | null;
+    /** @event stepChange — CustomEvent<AnnotationContextProps.StepChangeDetail> */
+    /** @event startTutorial — CustomEvent<TutorialPanelProps.TutorialDetail> */
+    /** @event exitTutorial — CustomEvent<TutorialPanelProps.TutorialDetail> */
+    /** @event finish — CustomEvent<void> */
+    /** @slot default — Put all page content inside this component's children */
+    /**
+     * An object containing all the necessary localized strings required by the component. The object should contain:
+     *
+     * * `finishButtonText` - Specifies the text that's displayed in the finish button.
+     * * `labelDismissAnnotation` - Specifies the aria-label for the dismiss button.
+     * * `labelHotspot` - Specifies the aria-label for the hotspot button. The `openState` argument is deprecated, it's handled by the hotspot button aria-expanded attribute.
+     * * `nextButtonText` - Specifies the text that's displayed in the next button.
+     * * `previousButtonText` - Specifies the text that's displayed in the previous button.
+     * * `stepCounterText` - Specifies the step counter text that's displayed in the annotation popover.
+     * * `taskTitle` - Specifies the title text that's displayed in the annotation popover.
+     */
+    i18nStrings: AnnotationContextProps.I18nStrings;
+}
+export declare namespace AnnotationContextProps {
+    interface StepChangeDetail {
+        step: number;
+        reason: 'next' | 'previous' | 'open' | 'auto-fallback';
+    }
+    interface OpenChangeDetail {
+        open: boolean;
+    }
+    type Task = TutorialPanelProps.Task;
+    type Step = TutorialPanelProps.Step;
+    type Tutorial = TutorialPanelProps.Tutorial;
+    interface I18nStrings {
+        nextButtonText: string;
+        previousButtonText: string;
+        finishButtonText: string;
+        labelDismissAnnotation: string;
+        labelHotspot: (openState: boolean, stepIndex: number, totalStepCount: number) => string;
+        stepCounterText: (stepIndex: number, totalStepCount: number) => string;
+        taskTitle: (taskIndex: number, taskTitle: string) => string;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/annotation-context/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/annotation-context/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,eAAe,EAAE,sBAAsB,CAAC,QAAQ,GAAG,IAAI,CAAC;IACxD,+EAA+E;IAC/E,4EAA4E;IAC5E,2EAA2E;IAC3E,wCAAwC;IACxC,4EAA4E;IAC5E;;;;;;;;;;OAUG;IACH,WAAW,EAAE,sBAAsB,CAAC,WAAW,CAAC;CACjD;AACD,MAAM,CAAC,OAAO,WAAW,sBAAsB,CAAC;IAC9C,UAAU,gBAAgB;QACxB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAC;KACxD;IACD,UAAU,gBAAgB;QACxB,IAAI,EAAE,OAAO,CAAC;KACf;IACD,KAAK,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC;IACpC,KAAK,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC;IACpC,KAAK,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;IAC5C,UAAU,WAAW;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;QACzB,sBAAsB,EAAE,MAAM,CAAC;QAC/B,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;QACxF,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;QACvE,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;KAC7D;CACF"}

package/dist/app-layout/interfaces.d.ts

@@ -0,0 +1,264 @@
+import { IconProps } from '../icon/interfaces.js';
+export interface BaseLayoutProps {
+    /**
+     * Specifies additional analytics-related metadata.
+     * * `instanceIdentifier` - A unique string that identifies this component instance in your application.
+     * * `flowType` -  Identifies the type of flow represented by the component.
+     * **Note:** This API is currently experimental.
+     * @analytics
+     */
+    analyticsMetadata?: AppLayoutProps.AnalyticsMetadata;
+    /**
+     * Determines the default behavior of the component based on some predefined page layouts.
+     * Individual properties will always take precedence over the default coming from the content type.
+     */
+    contentType?: AppLayoutProps.ContentType;
+    /**
+     * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.
+        * Each Drawer is an item in the drawers wrapper with the following properties:
+     * * id (string) - the id of the drawer.
+     * * content (unknown) - the content in the drawer.
+     * * trigger (DrawerTrigger) - the button that opens and closes the active drawer.
+     * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.
+     * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
+     * * resizable (boolean) - if the drawer is resizable or not.
+     * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.
+     * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.
+     *
+     * #### DrawerTrigger
+     * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.
+     * - `iconSvg` (unknown) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)
+     *
+     * #### DrawerAriaLabels
+     * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
+     * - `closeButton` (string) - (Optional) Label for the close button.
+     * - `triggerButton` (string) - (Optional) Label for the trigger button. When `badge` is true, include the badge information in the label (for example, "Notifications, has unread messages").
+     * - `resizeHandle` (string) - (Optional) Label for the resize handle.
+     */
+    drawers?: Array<AppLayoutProps.Drawer>;
+    /**
+     * The active drawer id. If you want to clear the active drawer, use `null`.
+     */
+    activeDrawerId?: string | null;
+    /** @event drawerChange — CustomEvent<AppLayoutProps.DrawerChangeDetail> */
+    /**
+     * If `true`, disables outer paddings for the content slot.
+     */
+    disableContentPaddings?: boolean;
+    /**
+     * State of the navigation drawer.
+     */
+    navigationOpen?: boolean;
+    /**
+     * Navigation drawer width in pixels.
+     */
+    navigationWidth?: number;
+    /**
+     * If `true`, the navigation drawer is not displayed at all.
+     */
+    navigationHide?: boolean;
+    /**
+     * State of the tools drawer.
+     */
+    toolsOpen?: boolean;
+    /**
+     * If `true`, the tools drawer is not displayed at all.
+     */
+    toolsHide?: boolean;
+    /**
+     * Tools drawer width in pixels.
+     */
+    toolsWidth?: number;
+    /**
+     * Maximum main content panel width in pixels.
+     *
+     * If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.
+     */
+    maxContentWidth?: number;
+    /**
+     * Minimum main content panel width in pixels.
+     */
+    minContentWidth?: number;
+    /**
+     * If true, the notification slot is rendered above the scrollable
+     * content area so it is always visible.
+     */
+    stickyNotifications?: boolean;
+    /**
+     * CSS selector for the application header.
+     */
+    headerSelector?: string;
+    /**
+     * CSS selector for the application footer.
+     */
+    footerSelector?: string;
+    /**
+     * Aria labels for the drawer operating buttons. Use this property to ensure accessibility.
+     *
+     * * `navigation` (string) - Label for the landmark that wraps the navigation drawer.
+     * * `navigationClose` (string) - Label for the button that closes the navigation drawer.
+     * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.
+     * * `notification` (string) - Label for the region that contains notification messages.
+     * * `tools` (string) - Label for the landmark that wraps the tools drawer.
+     * * `toolsClose` (string) - Label for the button that closes the tools drawer.
+     * * `toolsToggle` (string) - Label for the button that opens the tools drawer.
+     * * `drawers` (string) - Label for the landmark that wraps the active drawer.
+     * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.
+     * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.
+     *
+     * Example:
+     * ```
+     * {
+     *   navigation: "Navigation drawer",
+     *   navigationClose: "Close navigation drawer",
+     *   navigationToggle: "Open navigation drawer",
+     *   notifications: "Notifications",
+     *   tools: "Help panel",
+     *   toolsClose: "Close help panel",
+     *   toolsToggle: "Open help panel",
+     *   drawers: "Drawers",
+     *   drawersOverflow: "Overflow drawers",
+     *   drawersOverflowWithBadge: "Overflow drawers (Unread notifications)"
+     * }
+     * ```
+     * @i18n
+     */
+    ariaLabels?: AppLayoutProps.Labels;
+    /** @slot navigation — Navigation drawer */
+    /** @slot contentHeader — Top area of the page content */
+    /**
+     * Disables overlap between `contentHeader` and `content` slots.
+     * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.
+     * @visualrefresh
+     */
+    disableContentHeaderOverlap?: boolean;
+    /**
+     * Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:
+     * * `default` - Does not apply any visual treatment.
+     * * `high-contrast` - Applies high-contrast to both slots. Use in conjunction with `headerVariant="high-contrast"` in ContentLayout.
+     * @visualrefresh
+     */
+    headerVariant?: 'default' | 'high-contrast';
+    /** @slot content — Main content */
+    /** @slot tools — Tools drawer */
+    /** @slot notifications — Displayed on top of the main content in the scrollable area */
+    /** @slot breadcrumbs — Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout */
+    /** @event navigationChange — CustomEvent<AppLayoutProps.ChangeDetail> */
+    /** @event toolsChange — CustomEvent<AppLayoutProps.ChangeDetail> */
+    /** @slot splitPanel — Use this slot to add the [split panel component](/components/split-panel/) to the app layout */
+    /**
+     * The size of the split panel in pixels.
+     */
+    splitPanelSize?: number;
+    /**
+     * State of the split panel.
+     */
+    splitPanelOpen?: boolean;
+    /**
+     * Controls the split panel preferences.
+     *
+     * By default, the preference is `{ position: 'bottom' }`.
+     *
+     * On smaller screens, the panel is forced to the `'bottom'` position and the `'side'` preference becomes disabled.
+     */
+    splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;
+}
+export interface AppLayoutProps extends BaseLayoutProps {
+    /**
+     * Activates a backwards-compatibility mode for applications with non-fixed headers and footers.
+     * @deprecated This layout is being phased out and may miss some features.
+     */
+    disableBodyScroll?: boolean;
+}
+export declare namespace AppLayoutProps {
+    interface AnalyticsMetadata {
+        instanceIdentifier?: string;
+        flowType?: FlowType;
+    }
+    type ContentType = 'default' | 'form' | 'table' | 'cards' | 'wizard' | 'dashboard';
+    interface Ref {
+        /**
+         * Manually closes the navigation drawer if it is necessary for the current
+         * viewport size.
+         */
+        closeNavigationIfNecessary(): void;
+        /**
+         * Opens the tools panel if it is not already open. Note that it is preferable
+         * to control the state by listening to `toolsChange` and providing `toolsOpen`.
+         */
+        openTools(): void;
+        /**
+         * Focuses the tools panel if it is open. Use this to focus the tools panel
+         * after changing the content, for example when clicking on an 'info' link while
+         * the panel is already open.
+         */
+        focusToolsClose(): void;
+        /**
+         * Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.
+         */
+        focusActiveDrawer(): void;
+        /**
+         * Focuses the split panel if it is open.
+         */
+        focusSplitPanel(): void;
+    }
+    interface Drawer {
+        id: string;
+        content: unknown;
+        trigger?: {
+            iconName?: IconProps.Name;
+            iconSvg?: unknown;
+            customIcon?: unknown;
+        };
+        ariaLabels: DrawerAriaLabels;
+        badge?: boolean;
+        resizable?: boolean;
+        defaultSize?: number;
+        onResize?: (event: CustomEvent<{
+            size: number;
+        }>) => void;
+        preserveInactiveContent?: boolean;
+    }
+    interface DrawerAriaLabels {
+        drawerName: string;
+        closeButton?: string;
+        triggerButton?: string;
+        resizeHandle?: string;
+        resizeHandleTooltipText?: string;
+    }
+    interface Labels {
+        notifications?: string;
+        navigation?: string;
+        navigationToggle?: string;
+        navigationClose?: string;
+        tools?: string;
+        toolsToggle?: string;
+        toolsClose?: string;
+        drawers?: string;
+        drawersOverflow?: string;
+        drawersOverflowWithBadge?: string;
+    }
+    interface ChangeDetail {
+        open: boolean;
+    }
+    interface SplitPanelResizeDetail {
+        size: number;
+    }
+    interface SplitPanelPreferences {
+        position: 'side' | 'bottom';
+    }
+    type SplitPanelPosition = 'side' | 'bottom';
+    interface DrawerChangeDetail {
+        activeDrawerId: string | null;
+    }
+}
+export type AppLayoutPropsWithDefaults = Omit<AppLayoutProps, 'contentType' | 'navigationWidth' | 'toolsWidth' | 'minContentWidth' | 'navigationOpen' | 'onNavigationChange'> & {
+    placement: {
+        insetBlockStart: number;
+        insetBlockEnd: number;
+        insetInlineStart: number;
+        insetInlineEnd: number;
+        inlineSize: number;
+    };
+};
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/app-layout/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/app-layout/interfaces.ts"],"names":[],"mappings":"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"}

package/dist/app-layout-toolbar/interfaces.d.ts

@@ -0,0 +1,51 @@
+import { AppLayoutProps, BaseLayoutProps } from '../app-layout/interfaces.js';
+export interface AppLayoutToolbarProps extends BaseLayoutProps {
+    /**
+     * If `true`, the navigation trigger is not displayed at all,
+     * while navigation drawer might be displayed, but opened using a custom trigger.
+     */
+    navigationTriggerHide?: boolean;
+    /**
+     * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.
+        * Each Drawer is an item in the drawers wrapper with the following properties:
+     * * id (string) - the id of the drawer.
+     * * content (unknown) - the content in the drawer.
+     * * trigger (DrawerTrigger) - (Optional) the button that opens and closes the active drawer.
+     * If not set, a corresponding trigger button is not displayed, while the drawer might be displayed, but opened using a custom trigger.
+     * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.
+     * * badge (boolean) - (Optional) Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
+     * * resizable (boolean) - (Optional) if the drawer is resizable or not.
+     * * defaultSize (number) - (Optional) starting size of the drawer. if not set, defaults to 290.
+     * * onResize (({ size: number }) => void) - (Optional) Fired when the active drawer is resized.
+     *
+     * #### DrawerTrigger
+     * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.
+     * - `iconSvg` (unknown) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)
+     *
+     * #### DrawerAriaLabels
+     * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
+     * - `closeButton` (string) - (Optional) Label for the close button.
+     * - `triggerButton` (string) - (Optional) Label for the trigger button.
+     * - `resizeHandle` (string) - (Optional) Label for the resize handle.
+     */
+    drawers?: Array<AppLayoutToolbarProps.Drawer>;
+}
+export declare namespace AppLayoutToolbarProps {
+    type AnalyticsMetadata = AppLayoutProps.AnalyticsMetadata;
+    type ContentType = AppLayoutProps.ContentType;
+    interface Ref extends AppLayoutProps.Ref {
+        /**
+         * Focuses the navigation. Use this to focus the navigation after opening it programmatically.
+         */
+        focusNavigation(): void;
+    }
+    type Drawer = AppLayoutProps.Drawer;
+    type DrawerAriaLabels = AppLayoutProps.DrawerAriaLabels;
+    type Labels = AppLayoutProps.Labels;
+    type ChangeDetail = AppLayoutProps.ChangeDetail;
+    type SplitPanelResizeDetail = AppLayoutProps.SplitPanelResizeDetail;
+    type SplitPanelPreferences = AppLayoutProps.SplitPanelPreferences;
+    type SplitPanelPosition = AppLayoutProps.SplitPanelPosition;
+    type DrawerChangeDetail = AppLayoutProps.DrawerChangeDetail;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/app-layout-toolbar/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/app-layout-toolbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9E,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;CAC/C;AACD,MAAM,CAAC,OAAO,WAAW,qBAAqB,CAAC;IAC7C,KAAK,iBAAiB,GAAG,cAAc,CAAC,iBAAiB,CAAC;IAC1D,KAAK,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC;IAC9C,UAAU,GAAI,SAAQ,cAAc,CAAC,GAAG;QACtC;;WAEG;QACH,eAAe,IAAI,IAAI,CAAC;KACzB;IACD,KAAK,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IACpC,KAAK,gBAAgB,GAAG,cAAc,CAAC,gBAAgB,CAAC;IACxD,KAAK,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IACpC,KAAK,YAAY,GAAG,cAAc,CAAC,YAAY,CAAC;IAChD,KAAK,sBAAsB,GAAG,cAAc,CAAC,sBAAsB,CAAC;IACpE,KAAK,qBAAqB,GAAG,cAAc,CAAC,qBAAqB,CAAC;IAClE,KAAK,kBAAkB,GAAG,cAAc,CAAC,kBAAkB,CAAC;IAC5D,KAAK,kBAAkB,GAAG,cAAc,CAAC,kBAAkB,CAAC;CAC7D"}