@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

package/dist/4-page/ds-page.d.ts

@@ -0,0 +1,110 @@
+import { LitElement, type PropertyValues } from "lit";
+import "../2-core/ds-icon";
+export type PageLayout = "sidebar" | "split" | "inspector" | "column" | "centered" | "tiles";
+export declare const PAGE_LAYOUTS: readonly PageLayout[];
+/**
+ * A standard page: where units stand on the grid. Every layout uses the same
+ * five areas, so content can move between layouts without being rewritten.
+ *
+ * - `slot="header"` runs along the top of the main area
+ * - `slot="nav"` is the leading column: navigation, or the list in `split`
+ * - the default slot is the main area
+ * - `slot="aside"` is the trailing column, shown by `inspector`
+ * - `slot="footer"` runs along the bottom of the main area
+ *
+ * Columns are whole squares: `sidebar` and `inspector` lead with 12, `split`
+ * with 16; `column` is 32 wide and `centered` 16, and `measure` sets either in
+ * whole squares. A centred column stands on a whole square: the room beside it
+ * is rounded down to squares, so the column never straddles a grid line.
+ * `tiles` places each main child in a 12-square tile. Below 30 squares of
+ * width every layout stacks.
+ *
+ * With `drawer`, the navigation folds away below 30 squares instead of
+ * standing above the work: a menu button one square wide stands before the
+ * header and opens it in a drawer over the page (0-face/drawer.ts, the
+ * header's), with focus kept inside, closed by Escape, its close button, a
+ * link or the page widening, and the page's scroll held behind it.
+ *
+ * @element ds-page
+ * @attr layout - `sidebar`, `split`, `inspector`, `column`, `centered` or `tiles`.
+ * @attr divided - Draws a hairline between the columns.
+ * @attr measure - Width of the `column` or `centered` column in whole squares.
+ * @attr fill - Takes its container's height; each column scrolls on its own.
+ * @attr view - Labels each area with its slot name, for inspection.
+ * @attr drawer - Folds the navigation into a drawer on a narrow page.
+ * @attr drawer-label - The menu button's and drawer's name: a translation key, the shared word "Menu" by default.
+ * @fires ds-page-drawer - The drawer opened or closed; `detail.open` says which.
+ *
+ * @example
+ * <ds-page layout="sidebar">
+ *   <ds-sidebar slot="nav" label="Projects"></ds-sidebar>
+ *   <ds-row slot="header" fill>…</ds-row>
+ *   <ds-list>…</ds-list>
+ * </ds-page>
+ */
+export declare class Page extends LitElement {
+    static properties: {
+        layout: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        divided: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        measure: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        fill: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        view: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        drawer: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        drawerLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    layout: PageLayout;
+    divided: boolean;
+    measure: number | undefined;
+    fill: boolean;
+    view: boolean;
+    drawer: boolean;
+    drawerLabel: string | undefined;
+    static styles: import("lit").CSSResult[];
+    private navigationDrawer;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the navigation drawer is open. */
+    get drawerOpen(): boolean;
+    /** Open the navigation drawer (on a narrow page with `drawer`). */
+    openDrawer(): void;
+    /** Close the navigation drawer. */
+    closeDrawer(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(): void;
+}
+/**
+ * A measure is a count of squares: 28 is 28 squares, never 28.5 or 28px. A
+ * fraction rounds to the nearest square, and anything that is not a positive
+ * number is ignored so the layout keeps its own width.
+ */
+export declare function measureStyle(measure: number | null | undefined): string | undefined;
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-page": Page;
+    }
+}
+//# sourceMappingURL=ds-page.d.ts.map

package/dist/4-page/ds-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-page.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvE,OAAO,mBAAmB,CAAC;AAI3B,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC7F,eAAO,MAAM,YAAY,EAAE,SAAS,UAAU,EAAqE,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;IAEM,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAExC,MAAM,CAAC,MAAM,4BAA4C;IAEzD,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAWtD,iBAAiB;IAMjB,oBAAoB;IAQpB,6CAA6C;IAC7C,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,mEAAmE;IACnE,UAAU,IAAI,IAAI;IAElB,mCAAmC;IACnC,WAAW,IAAI,IAAI;IAEnB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAmB/C,MAAM;IAwBN,YAAY;CAQb;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGnF;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/4-page/ds-page.js

@@ -0,0 +1,155 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { define } from "../0-face/define";
+import { attachDrawer } from "../0-face/drawer";
+import { getText } from "../0-face/i18n";
+import "../2-core/ds-icon";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-page.css?inline";
+export const PAGE_LAYOUTS = ["sidebar", "split", "inspector", "column", "centered", "tiles"];
+/**
+ * A standard page: where units stand on the grid. Every layout uses the same
+ * five areas, so content can move between layouts without being rewritten.
+ *
+ * - `slot="header"` runs along the top of the main area
+ * - `slot="nav"` is the leading column: navigation, or the list in `split`
+ * - the default slot is the main area
+ * - `slot="aside"` is the trailing column, shown by `inspector`
+ * - `slot="footer"` runs along the bottom of the main area
+ *
+ * Columns are whole squares: `sidebar` and `inspector` lead with 12, `split`
+ * with 16; `column` is 32 wide and `centered` 16, and `measure` sets either in
+ * whole squares. A centred column stands on a whole square: the room beside it
+ * is rounded down to squares, so the column never straddles a grid line.
+ * `tiles` places each main child in a 12-square tile. Below 30 squares of
+ * width every layout stacks.
+ *
+ * With `drawer`, the navigation folds away below 30 squares instead of
+ * standing above the work: a menu button one square wide stands before the
+ * header and opens it in a drawer over the page (0-face/drawer.ts, the
+ * header's), with focus kept inside, closed by Escape, its close button, a
+ * link or the page widening, and the page's scroll held behind it.
+ *
+ * @element ds-page
+ * @attr layout - `sidebar`, `split`, `inspector`, `column`, `centered` or `tiles`.
+ * @attr divided - Draws a hairline between the columns.
+ * @attr measure - Width of the `column` or `centered` column in whole squares.
+ * @attr fill - Takes its container's height; each column scrolls on its own.
+ * @attr view - Labels each area with its slot name, for inspection.
+ * @attr drawer - Folds the navigation into a drawer on a narrow page.
+ * @attr drawer-label - The menu button's and drawer's name: a translation key, the shared word "Menu" by default.
+ * @fires ds-page-drawer - The drawer opened or closed; `detail.open` says which.
+ *
+ * @example
+ * <ds-page layout="sidebar">
+ *   <ds-sidebar slot="nav" label="Projects"></ds-sidebar>
+ *   <ds-row slot="header" fill>…</ds-row>
+ *   <ds-list>…</ds-list>
+ * </ds-page>
+ */
+export class Page extends LitElement {
+    constructor() {
+        super();
+        this.navigationDrawer = null;
+        this.relabel = () => this.requestUpdate();
+        this.layout = "sidebar";
+        this.divided = false;
+        this.fill = false;
+        this.view = false;
+        this.drawer = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        this.navigationDrawer?.destroy();
+        this.navigationDrawer = null;
+        super.disconnectedCallback();
+    }
+    /** Whether the navigation drawer is open. */
+    get drawerOpen() {
+        return this.navigationDrawer?.isOpen ?? false;
+    }
+    /** Open the navigation drawer (on a narrow page with `drawer`). */
+    openDrawer() { this.navigationDrawer?.open(); }
+    /** Close the navigation drawer. */
+    closeDrawer() { this.navigationDrawer?.close(); }
+    updated(changed) {
+        super.updated(changed);
+        if (!changed.has("drawer"))
+            return;
+        if (!this.drawer) {
+            this.navigationDrawer?.destroy();
+            this.navigationDrawer = null;
+            return;
+        }
+        const root = this.renderRoot;
+        const toggle = root.querySelector('[part="drawer-toggle"]');
+        const panel = root.querySelector('[part="drawer"]');
+        const nav = root.querySelector('[part="nav"]');
+        if (!toggle || !panel || !nav || this.navigationDrawer)
+            return;
+        this.navigationDrawer = attachDrawer({
+            toggle, panel, content: [nav],
+            onToggle: open => this.dispatchEvent(new CustomEvent("ds-page-drawer", { bubbles: true, composed: true, detail: { open } })),
+        });
+    }
+    render() {
+        const label = getText(this.drawerLabel || "Menu") || this.drawerLabel || "Menu";
+        const close = getText("Close") || "Close";
+        return html `
+      <div class="page" part="page" style=${ifDefined(measureStyle(this.measure))}>
+        <div class="bar" part="bar" ?hidden=${!this.drawer}>
+          <button class="ds-button ds-button--icon" part="drawer-toggle" type="button" aria-label=${label} aria-controls="drawer">
+            <ds-icon type="menu" size="large" aria-hidden="true"></ds-icon><ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+          </button>
+        </div>
+        <dialog class="ds-dialog ds-drawer" part="drawer" id="drawer" aria-label=${label}>
+          <div class="ds-drawer__bar"><button class="ds-button ds-button--icon ds-drawer__close" part="drawer-close" type="button" aria-label=${close}>
+            <ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+          </button></div>
+        </dialog>
+        <div class="area nav" part="nav" data-area="nav"><slot name="nav"></slot></div>
+        <div class="area header" part="header" data-area="header"><slot name="header"></slot></div>
+        <div class="area main" part="main" data-area="main"><slot></slot></div>
+        <div class="area aside" part="aside" data-area="aside"><slot name="aside"></slot></div>
+        <div class="area footer" part="footer" data-area="footer"><slot name="footer"></slot></div>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        // An area with nothing in it takes no room, so a header or footer is optional.
+        this.renderRoot.querySelectorAll("slot").forEach(slot => {
+            const sync = () => slot.parentElement?.toggleAttribute("data-empty", slot.assignedNodes({ flatten: true }).every(empty));
+            slot.addEventListener("slotchange", sync);
+            sync();
+        });
+    }
+}
+Page.properties = {
+    layout: { type: String, reflect: true },
+    divided: { type: Boolean, reflect: true },
+    measure: { type: Number, reflect: true },
+    fill: { type: Boolean, reflect: true },
+    view: { type: Boolean, reflect: true },
+    drawer: { type: Boolean, reflect: true },
+    drawerLabel: { type: String, attribute: "drawer-label" },
+};
+Page.styles = [unsafeCSS(controls), unsafeCSS(styles)];
+/**
+ * A measure is a count of squares: 28 is 28 squares, never 28.5 or 28px. A
+ * fraction rounds to the nearest square, and anything that is not a positive
+ * number is ignored so the layout keeps its own width.
+ */
+export function measureStyle(measure) {
+    const squares = Math.round(Number(measure));
+    return Number.isFinite(squares) && squares >= 1 ? `--ds-page-measure: calc(${squares} * var(--ds-unit))` : undefined;
+}
+function empty(node) {
+    return node.nodeType === Node.TEXT_NODE ? !node.textContent?.trim() : node.nodeType !== Node.ELEMENT_NODE;
+}
+define("ds-page", Page);

package/dist/4-page/email.d.ts

@@ -9,9 +9,8 @@ export declare function escapeHtml(value: string): string;
  * Offset the ink only: cell fills and the 20px line rhythm stay on the grid.
  */
 export declare function gridText(content: string): string;
-/** Static equivalent of Ezo’s ezo-button[primary] containing ezo-text.
- * Ezo client/design/2-core/styles/ezo-button.css: 16px control, 0.5px horizontal inset.
- * Ezo client/design/2-core/styles/ezo-text.css: centered 15px line in a 16px text box.
+/** Static equivalent of a primary ds-button containing ds-text:
+ * a 16px control with a 0.5px horizontal inset, and a centered 15px line in a 16px text box.
  * Half-pixel vertical padding reproduces that centering without Lit or flexbox.
  */
 export declare function primaryEmailButton(label: string, href: string): string;

package/dist/4-page/email.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../DS1/4-page/email.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,GAAG,YAAY,CAAA;AAE5B,eAAO,MAAM,IAAI,6DAA6D,CAAA;AAC9E,eAAO,MAAM,SAAS,0LAAwI,CAAA;AAe9J,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAYhD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,MAAM,CAER;AA2DD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAqB3E;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAE,CAAC,GAAG,EAAE,GAAG,EAAO,GAAG,MAAM,CAGpE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,iBAAiB,GAAG;IAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE;;;;EAS5I"}
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../DS1/4-page/email.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,GAAG,YAAY,CAAA;AAE5B,eAAO,MAAM,IAAI,6DAA6D,CAAA;AAC9E,eAAO,MAAM,SAAS,0LAAwI,CAAA;AAe9J,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAYhD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,MAAM,CAER;AA2DD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAqB3E;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAE,CAAC,GAAG,EAAE,GAAG,EAAO,GAAG,MAAM,CAGpE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,iBAAiB,GAAG;IAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE;;;;EAS5I"}

package/dist/4-page/email.js

@@ -32,9 +32,8 @@ export function escapeHtml(value) {
 export function gridText(content) {
     return `<div class="ds-email-ink" style="display:block;position:relative;top:2px;padding-left:2px">${content}</div>`;
 }
-/** Static equivalent of Ezo’s ezo-button[primary] containing ezo-text.
- * Ezo client/design/2-core/styles/ezo-button.css: 16px control, 0.5px horizontal inset.
- * Ezo client/design/2-core/styles/ezo-text.css: centered 15px line in a 16px text box.
+/** Static equivalent of a primary ds-button containing ds-text:
+ * a 16px control with a 0.5px horizontal inset, and a centered 15px line in a 16px text box.
  * Half-pixel vertical padding reproduces that centering without Lit or flexbox.
  */
 export function primaryEmailButton(label, href) {

package/dist/components.d.ts

@@ -2,7 +2,6 @@
 export * from "./2-core/ds-button";
 export * from "./2-core/ds-text";
 export * from "./2-core/ds-input";
-export * from "./2-core/ds-textarea";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-tooltip";
@@ -11,4 +10,8 @@ export * from "./3-unit/ds-list";
 export * from "./3-unit/ds-menu";
 export * from "./3-unit/ds-tabs";
 export * from "./4-page/ds-panel";
+export * from "./4-page/ds-page";
+export * from "./3-unit/ds-sidebar";
+export * from "./4-page/ds-grid";
+export * from "./2-core/ds-chart";
 //# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../DS1/components.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../DS1/components.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,mBAAmB,CAAC"}

package/dist/components.js

@@ -2,7 +2,6 @@
 export * from "./2-core/ds-button";
 export * from "./2-core/ds-text";
 export * from "./2-core/ds-input";
-export * from "./2-core/ds-textarea";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-tooltip";
@@ -11,3 +10,7 @@ export * from "./3-unit/ds-list";
 export * from "./3-unit/ds-menu";
 export * from "./3-unit/ds-tabs";
 export * from "./4-page/ds-panel";
+export * from "./4-page/ds-page";
+export * from "./3-unit/ds-sidebar";
+export * from "./4-page/ds-grid";
+export * from "./2-core/ds-chart";