@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-notification/bh-notification.js

@@ -0,0 +1,324 @@
+import { h } from "@stencil/core";
+export class BhNotification {
+    /**
+     * Type of notification (determines color and icon)
+     */
+    type = 'default';
+    /**
+     * Notification title
+     */
+    notificationTitle = '';
+    /**
+     * Notification description
+     */
+    description = '';
+    /**
+     * Text for the action button
+     */
+    actionText = '';
+    /**
+     * Text for the dismiss button
+     */
+    dismissText = '';
+    /**
+     * Whether to show the close button
+     */
+    dismissible = true;
+    /**
+     * Custom icon name (overrides type-based icon)
+     */
+    icon = '';
+    /**
+     * Emitted when action button is clicked
+     */
+    bhAction;
+    /**
+     * Emitted when dismiss button is clicked
+     */
+    bhDismiss;
+    /**
+     * Emitted when close button is clicked
+     */
+    bhClose;
+    getIconName() {
+        if (this.icon)
+            return this.icon;
+        switch (this.type) {
+            case 'primary':
+                return 'new_releases';
+            case 'success':
+                return 'check_circle';
+            case 'error':
+                return 'error';
+            case 'warning':
+                return 'warning';
+            case 'feature':
+                return 'rocket_launch';
+            case 'default':
+                return 'info';
+            default:
+                return 'info';
+        }
+    }
+    getIconColor() {
+        switch (this.type) {
+            case 'primary':
+                return 'brand';
+            case 'success':
+                return 'success';
+            case 'error':
+                return 'error';
+            case 'warning':
+                return 'warning';
+            case 'feature':
+                return 'highlight';
+            case 'default':
+            default:
+                return 'gray';
+        }
+    }
+    getIconStyle() {
+        switch (this.type) {
+            case 'primary':
+                return 'outlined';
+            case 'success':
+                return 'filled';
+            case 'error':
+                return 'filled';
+            case 'warning':
+                return 'filled';
+            case 'feature':
+                return 'outlined';
+            case 'default':
+            default:
+                return 'outlined';
+        }
+    }
+    handleAction = () => {
+        this.bhAction.emit();
+    };
+    handleDismiss = () => {
+        this.bhDismiss.emit();
+    };
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    render() {
+        const notificationClasses = {
+            notification: true,
+            [`notification-${this.type}`]: true,
+        };
+        return (h("div", { key: '515c579b7f77846984dcb59b12c51714cd522c90', class: notificationClasses, role: "alert", part: "container" }, h("div", { key: '6fa7a5ff931a4a5c798364e20c3cc295fd974617', class: "notification-content" }, h("div", { key: '3720231fd305c2c93e8b4baef2fc93403fed8748', class: "notification-icon-wrapper" }, h("bh-featured-icon", { key: 'eafe7f9f29cc2dfaca9cfc116a033e1a62583af0', icon: this.getIconName(), color: this.getIconColor(), size: "sm", iconStyle: this.getIconStyle() })), h("div", { key: 'fc7ae04d183ba374eabd77b103351da1eb2bb0f0', class: "notification-text" }, h("div", { key: 'e3377410aa9c6463e468195c18311b3498a6cb7c', class: "notification-text-wrapper" }, this.notificationTitle && (h("h3", { key: 'f277e1461742af2a03484a7e1f326f1616c5e341', class: "notification-title" }, this.notificationTitle)), this.description && (h("p", { key: '76bbc3b8ae19325a3304abf2fec2a43459b75e4d', class: "notification-description" }, this.description))), (this.actionText || this.dismissText) && (h("div", { key: 'ea940be7065dc17a70c9783e65383b0b820f1064', class: "notification-actions" }, this.dismissText && (h("bh-button", { key: 'b5ec730be6f688456c5105475240b695d7805e4f', hierarchy: "quaternary", size: "sm", label: this.dismissText, icon: "none", onBhClick: this.handleDismiss })), this.actionText && (h("bh-button", { key: '22f5a5ffb96d978c884678047ec73252baca3338', hierarchy: "quaternary", size: "sm", label: this.actionText, icon: "none", onBhClick: this.handleAction })))))), this.dismissible && (h("button", { key: '65bf8f837739ce1216375d42d2cf00166f524135', class: "notification-close", onClick: this.handleClose, "aria-label": "Close notification" }, h("span", { key: '4e4040982feb853b3e2c20af1c948edd49e8c6fe', class: "material-symbols-outlined close-icon" }, "close")))));
+    }
+    static get is() { return "bh-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-notification.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NotificationType",
+                    "resolved": "\"default\" | \"error\" | \"feature\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "NotificationType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-notification/bh-notification.tsx",
+                            "id": "src/components/bh-notification/bh-notification.tsx::NotificationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of notification (determines color and icon)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "notificationTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notification-title",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification description"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "actionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the action button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-text",
+                "defaultValue": "''"
+            },
+            "dismissText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the dismiss button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismiss-text",
+                "defaultValue": "''"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon name (overrides type-based icon)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhAction",
+                "name": "bhAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when action button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhDismiss",
+                "name": "bhDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when dismiss button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhClose",
+                "name": "bhClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when close button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-notification.js.map

package/collection/components/bh-notification/bh-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-notification.js","sourceRoot":"","sources":["../../../src/components/bh-notification/bh-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAexE,MAAM,OAAO,cAAc;IACzB;;OAEG;IACK,IAAI,GAAqB,SAAS,CAAC;IAE3C;;OAEG;IACK,iBAAiB,GAAW,EAAE,CAAC;IAEvC;;OAEG;IACK,WAAW,GAAW,EAAE,CAAC;IAEjC;;OAEG;IACK,UAAU,GAAW,EAAE,CAAC;IAEhC;;OAEG;IACK,WAAW,GAAW,EAAE,CAAC;IAEjC;;OAEG;IACK,WAAW,GAAY,IAAI,CAAC;IAEpC;;OAEG;IACK,IAAI,GAAW,EAAE,CAAC;IAE1B;;OAEG;IACM,QAAQ,CAAsB;IAEvC;;OAEG;IACM,SAAS,CAAsB;IAExC;;OAEG;IACM,OAAO,CAAsB;IAE9B,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAEhC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,cAAc,CAAC;YACxB,KAAK,SAAS;gBACZ,OAAO,cAAc,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC;YACnB,KAAK,SAAS;gBACZ,OAAO,eAAe,CAAC;YACzB,KAAK,SAAS;gBACZ,OAAO,MAAM,CAAC;YAChB;gBACE,OAAO,MAAM,CAAC;QAClB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,OAAO,CAAC;YACjB,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,SAAS;gBACZ,OAAO,SAAS,CAAC;YACnB,KAAK,SAAS;gBACZ,OAAO,WAAW,CAAC;YACrB,KAAK,SAAS,CAAC;YACf;gBACE,OAAO,MAAM,CAAC;QAClB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,UAAU,CAAC;YACpB,KAAK,SAAS;gBACZ,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,QAAQ,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,QAAQ,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,UAAU,CAAC;YACpB,KAAK,SAAS,CAAC;YACf;gBACE,OAAO,UAAU,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,YAAY,GAAG,GAAS,EAAE;QAChC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,aAAa,GAAG,GAAS,EAAE;QACjC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAEM,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,mBAAmB,GAAG;YAC1B,YAAY,EAAE,IAAI;YAClB,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SACpC,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,WAAW;YAC5D,4DAAK,KAAK,EAAC,sBAAsB;gBAE/B,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,yEACE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,EAC1B,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,GAC9B,CACE;gBAGN,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,4DAAK,KAAK,EAAC,2BAA2B;wBACnC,IAAI,CAAC,iBAAiB,IAAI,CACzB,2DAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,iBAAiB,CAAM,CAC7D;wBACA,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,WAAW,CAAK,CAC3D,CACG;oBAGL,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACxC,4DAAK,KAAK,EAAC,sBAAsB;wBAC9B,IAAI,CAAC,WAAW,IAAI,CACnB,kEACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B,CACH;wBACA,IAAI,CAAC,UAAU,IAAI,CAClB,kEACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAI,CAAC,YAAY,GAC5B,CACH,CACG,CACP,CACG,CACF;YAGL,IAAI,CAAC,WAAW,IAAI,CACnB,+DACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,oBAAoB;gBAE/B,6DAAM,KAAK,EAAC,sCAAsC,YAAa,CACxD,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type NotificationType =\n  | 'primary'\n  | 'default'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'feature';\n\n@Component({\n  tag: 'bh-notification',\n  styleUrl: 'bh-notification.css',\n  shadow: true,\n})\nexport class BhNotification {\n  /**\n   * Type of notification (determines color and icon)\n   */\n  @Prop() type: NotificationType = 'default';\n\n  /**\n   * Notification title\n   */\n  @Prop() notificationTitle: string = '';\n\n  /**\n   * Notification description\n   */\n  @Prop() description: string = '';\n\n  /**\n   * Text for the action button\n   */\n  @Prop() actionText: string = '';\n\n  /**\n   * Text for the dismiss button\n   */\n  @Prop() dismissText: string = '';\n\n  /**\n   * Whether to show the close button\n   */\n  @Prop() dismissible: boolean = true;\n\n  /**\n   * Custom icon name (overrides type-based icon)\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Emitted when action button is clicked\n   */\n  @Event() bhAction!: EventEmitter<void>;\n\n  /**\n   * Emitted when dismiss button is clicked\n   */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  /**\n   * Emitted when close button is clicked\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  private getIconName(): string {\n    if (this.icon) return this.icon;\n\n    switch (this.type) {\n      case 'primary':\n        return 'new_releases';\n      case 'success':\n        return 'check_circle';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'feature':\n        return 'rocket_launch';\n      case 'default':\n        return 'info';\n      default:\n        return 'info';\n    }\n  }\n\n  private getIconColor(): 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight' {\n    switch (this.type) {\n      case 'primary':\n        return 'brand';\n      case 'success':\n        return 'success';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'feature':\n        return 'highlight';\n      case 'default':\n      default:\n        return 'gray';\n    }\n  }\n\n  private getIconStyle(): 'outlined' | 'filled' {\n    switch (this.type) {\n      case 'primary':\n        return 'outlined';\n      case 'success':\n        return 'filled';\n      case 'error':\n        return 'filled';\n      case 'warning':\n        return 'filled';\n      case 'feature':\n        return 'outlined';\n      case 'default':\n      default:\n        return 'outlined';\n    }\n  }\n\n  private handleAction = (): void => {\n    this.bhAction.emit();\n  };\n\n  private handleDismiss = (): void => {\n    this.bhDismiss.emit();\n  };\n\n  private handleClose = (): void => {\n    this.bhClose.emit();\n  };\n\n  render() {\n    const notificationClasses = {\n      notification: true,\n      [`notification-${this.type}`]: true,\n    };\n\n    return (\n      <div class={notificationClasses} role=\"alert\" part=\"container\">\n        <div class=\"notification-content\">\n          {/* Icon */}\n          <div class=\"notification-icon-wrapper\">\n            <bh-featured-icon\n              icon={this.getIconName()}\n              color={this.getIconColor()}\n              size=\"sm\"\n              iconStyle={this.getIconStyle()}\n            />\n          </div>\n\n          {/* Text Content */}\n          <div class=\"notification-text\">\n            <div class=\"notification-text-wrapper\">\n              {this.notificationTitle && (\n                <h3 class=\"notification-title\">{this.notificationTitle}</h3>\n              )}\n              {this.description && (\n                <p class=\"notification-description\">{this.description}</p>\n              )}\n            </div>\n\n            {/* Actions */}\n            {(this.actionText || this.dismissText) && (\n              <div class=\"notification-actions\">\n                {this.dismissText && (\n                  <bh-button\n                    hierarchy=\"quaternary\"\n                    size=\"sm\"\n                    label={this.dismissText}\n                    icon=\"none\"\n                    onBhClick={this.handleDismiss}\n                  />\n                )}\n                {this.actionText && (\n                  <bh-button\n                    hierarchy=\"quaternary\"\n                    size=\"sm\"\n                    label={this.actionText}\n                    icon=\"none\"\n                    onBhClick={this.handleAction}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Close Button */}\n        {this.dismissible && (\n          <button\n            class=\"notification-close\"\n            onClick={this.handleClose}\n            aria-label=\"Close notification\"\n          >\n            <span class=\"material-symbols-outlined close-icon\">close</span>\n          </button>\n        )}\n      </div>\n    );\n  }\n}"]}

package/collection/components/bh-page-navigation/bh-page-navigation.css

@@ -0,0 +1,253 @@
+/**
+ * BellhopOS Stencil Global Styles
+ *
+ * This file imports all design tokens and provides global CSS custom properties
+ * that are available to all Stencil components.
+ */
+
+/* ==========================================================================
+   FONT IMPORTS
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
+
+/* ==========================================================================
+   DESIGN TOKENS
+   ========================================================================== */
+
+:root {
+  /* -------------------------------------------------------------------------
+     COLORS - Primary
+     ------------------------------------------------------------------------- */
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%);
+  --color-transparent: hsla(0, 0%, 100%, 0);
+
+  /* Neutral */
+  --color-neutral-25: hsl(240, 20%, 99%);
+  --color-neutral-50: hsl(240, 20%, 98%);
+  --color-neutral-100: hsl(240, 17%, 95%);
+  --color-neutral-200: hsl(227, 25%, 89%);
+  --color-neutral-300: hsl(224, 24%, 78%);
+  --color-neutral-400: hsl(226, 24%, 59%);
+  --color-neutral-500: hsl(226, 24%, 48%);
+  --color-neutral-600: hsl(226, 24%, 38%);
+  --color-neutral-700: hsl(226, 24%, 25%);
+  --color-neutral-800: hsl(233, 33%, 10%);
+  --color-neutral-900: hsl(231, 32%, 8%);
+  --color-neutral-950: hsl(231, 32%, 8%);
+
+  /* Brand */
+  --color-brand-25: hsl(220, 82%, 98%);
+  --color-brand-50: hsl(222, 87%, 97%);
+  --color-brand-100: hsl(221, 94%, 94%);
+  --color-brand-200: hsl(221, 92%, 86%);
+  --color-brand-300: hsl(224, 95%, 77%);
+  --color-brand-400: hsl(224, 94%, 72%);
+  --color-brand-500: hsl(230, 67%, 58%);
+  --color-brand-600: hsl(230, 69%, 48%);
+  --color-brand-700: hsl(230, 75%, 34%);
+  --color-brand-800: hsl(243, 86%, 44%);
+  --color-brand-900: hsl(237, 69%, 24%);
+  --color-brand-950: hsl(237, 61%, 20%);
+
+  /* Error */
+  --color-error-25: hsl(12, 100%, 99%);
+  --color-error-50: hsl(5, 86%, 97%);
+  --color-error-100: hsl(4, 93%, 94%);
+  --color-error-200: hsl(3, 96%, 89%);
+  --color-error-300: hsl(4, 96%, 80%);
+  --color-error-400: hsl(4, 92%, 69%);
+  --color-error-500: hsl(4, 86%, 58%);
+  --color-error-600: hsl(4, 74%, 49%);
+  --color-error-700: hsl(4, 76%, 40%);
+  --color-error-800: hsl(4, 72%, 33%);
+  --color-error-900: hsl(8, 65%, 29%);
+  --color-error-950: hsl(8, 75%, 19%);
+
+  /* Warning */
+  --color-warning-25: hsl(42, 100%, 98%);
+  --color-warning-50: hsl(45, 100%, 96%);
+  --color-warning-100: hsl(45, 96%, 89%);
+  --color-warning-200: hsl(44, 98%, 77%);
+  --color-warning-300: hsl(42, 99%, 65%);
+  --color-warning-400: hsl(39, 98%, 56%);
+  --color-warning-500: hsl(34, 94%, 50%);
+  --color-warning-600: hsl(28, 97%, 44%);
+  --color-warning-700: hsl(22, 92%, 37%);
+  --color-warning-800: hsl(19, 84%, 31%);
+  --color-warning-900: hsl(18, 79%, 27%);
+  --color-warning-950: hsl(17, 79%, 17%);
+
+  /* Success */
+  --color-success-25: hsl(142, 80%, 98%);
+  --color-success-50: hsl(145, 81%, 96%);
+  --color-success-100: hsl(140, 80%, 90%);
+  --color-success-200: hsl(144, 78%, 80%);
+  --color-success-300: hsl(148, 63%, 67%);
+  --color-success-400: hsl(150, 57%, 54%);
+  --color-success-500: hsl(152, 77%, 39%);
+  --color-success-600: hsl(153, 91%, 30%);
+  --color-success-700: hsl(155, 90%, 24%);
+  --color-success-800: hsl(155, 84%, 20%);
+  --color-success-900: hsl(156, 83%, 16%);
+  --color-success-950: hsl(157, 82%, 11%);
+
+  /* -------------------------------------------------------------------------
+     TYPOGRAPHY
+     ------------------------------------------------------------------------- */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Text Sizes */
+  --text-xl-size: 1.25rem;
+  --text-lg-size: 1.125rem;
+  --text-md-size: 1rem;
+  --text-sm-size: 0.875rem;
+  --text-xs-size: 0.75rem;
+
+  /* Line Heights */
+  --text-xl-line: 1.875rem;
+  --text-lg-line: 1.75rem;
+  --text-md-line: 1.5rem;
+  --text-sm-line: 1.25rem;
+  --text-xs-line: 1.125rem;
+
+  /* -------------------------------------------------------------------------
+     SPACING
+     ------------------------------------------------------------------------- */
+  --spacing-none: 0rem;
+  --spacing-xxs: 0.125rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.375rem;
+  --spacing-md: 0.5rem;
+  --spacing-lg: 0.75rem;
+  --spacing-xl: 1rem;
+  --spacing-2xl: 1.25rem;
+  --spacing-3xl: 1.5rem;
+  --spacing-4xl: 2rem;
+  --spacing-5xl: 2.5rem;
+  --spacing-6xl: 3rem;
+
+  /* -------------------------------------------------------------------------
+     RADIUS
+     ------------------------------------------------------------------------- */
+  --radius-none: 0rem;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.25rem;
+  --radius-4xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* -------------------------------------------------------------------------
+     SHADOWS
+     ------------------------------------------------------------------------- */
+  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
+    0px 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+
+  /* -------------------------------------------------------------------------
+     ICON COMPENSATION (for buttons with icons)
+     ------------------------------------------------------------------------- */
+  --icon-compensation-xs-btn: calc(var(--spacing-lg) - var(--spacing-xs));
+  --icon-compensation-sm-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-md-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-lg-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+}
+
+/* ==========================================================================
+   BASE STYLES
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Material Symbols base styling */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+
+:host {
+  display: block;
+}
+
+/* Main Page Navigation Container */
+.page-navigation {
+  width: 320px;
+  min-width: 280px;
+  background-color: var(--color-white);
+  padding: var(--spacing-xl) var(--spacing-md);
+  font-family: var(--font-inter);
+  height: 100vh;
+  overflow-y: auto;
+  border-right: 1px solid var(--color-neutral-200);
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.page-navigation-header {
+  margin-bottom: var(--spacing-3xl);
+}
+
+.page-navigation-title {
+  font-size: var(--text-xl-size);
+  font-weight: var(--weight-semibold);
+  line-height: var(--text-xl-line);
+  color: var(--color-neutral-900);
+  padding: var(--spacing-none) var(--spacing-xl);
+  margin: 0;
+}
+
+.page-navigation-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .page-navigation {
+    width: 280px;
+    min-width: 280px;
+  }
+}