@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-drawer/co-drawer.css

@@ -89,6 +89,17 @@
 
 .co-drawer__header-content { flex: 1; min-width: 0; }
 
+.co-drawer__heading-row {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+}
+
+.co-drawer__icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-secondary);
+}
+
 .co-drawer__heading {
   margin: 0;
   font-size: var(--co-font-size-18);
@@ -100,6 +111,14 @@
   white-space: nowrap;
 }
 
+.co-drawer__description {
+  margin: var(--co-spacing-xs) 0 0;
+  font-size: var(--co-font-size-13);
+  font-weight: 400;
+  color: var(--co-semantic-text-muted);
+  line-height: 1.4;
+}
+
 .co-drawer__close {
   display: flex;
   align-items: center;
@@ -131,6 +150,7 @@
 .co-drawer__body {
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: var(--co-spacing-xl);
   position: relative;
 }

package/dist/collection/components/co-drawer/co-drawer.js

@@ -15,6 +15,10 @@ export class CoDrawer {
         this.size = 'md';
         /** Drawer title (used when `header` slot is empty) */
         this.heading = '';
+        /** Optional description shown below the heading */
+        this.description = '';
+        /** Optional Phosphor icon name shown before the heading */
+        this.icon = '';
         /** Show close (X) button in header */
         this.closable = true;
         /** Close when clicking the backdrop */
@@ -52,12 +56,12 @@ export class CoDrawer {
         }
     }
     render() {
-        return (h("co-overlay", { key: '7f8f76010bc12983c86d0d38bbdb2f73d4f9a30f', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: '690c564145cf4b6dcad6f2fd69837f215cc9dff1', class: {
+        return (h("co-overlay", { key: '7c69e70718bf2085643677d37053afd37d2b6352', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: '01ab0f984e661aea796b7df9c04997d2bd1980e4', class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '25bde1a909e3193f58b69b51a96ddc7047b127ad', class: "co-drawer__header", part: "header" }, h("div", { key: '8275159a2f5014beeccfa91e3f38e4553a8d4767', class: "co-drawer__header-content" }, h("slot", { key: 'c2c820b841b5db2967a33d14a95e17a4ab81c85a', name: "header" }, h("h2", { key: '9dd5bc6c6e5a7f82693a44b5ce3b325bf46df2d5', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading))), this.closable && (h("button", { key: 'e9f45d205e7ebf8518b7648b4173d265a781f692', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '35f4e707c886934c2bbc197e82e9962d0a0239ac', name: "x", size: 20 })))), h("div", { key: '7aa4cb9b859aead97347f2a9b2a95f905fee2c8d', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: '76337250192da2fac77af76c0ea05d16acb6ea80', name: "tabs" })), h("div", { key: '7ed67e52ee496ab545d40c0869a427a50fc1b4d5', class: "co-drawer__body", part: "body" }, h("slot", { key: '433ba3a19c5a8b534907c2ca366b05e63fcf3e20' }), h("co-loader", { key: '0e0c33ca5205450f700e35e5664fb0d55c8ec0a6', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: '88e2e9a8f5fc3b8e8fc4875d0eaf5a0953000f01', class: "co-drawer__footer", part: "footer" }, h("slot", { key: 'edf5528718a7ddd392776241efc248af028bbecf', name: "footer" })))));
+            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '5176fec875eeb18be424ff9c898280dd31d0e3a1', class: "co-drawer__header", part: "header" }, h("div", { key: '3b3476ccbffa5dabafcc810695993c4b0679730d', class: "co-drawer__header-content" }, h("slot", { key: '7b7b4432956e107e12ecc4c46347fb431b4fca4f', name: "header" }, h("div", { key: '786511c2d038f3ca408d094afee8966b310ee36f', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '1f3331f934a568d8564e968739629f01eb8b8460', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: '19f2fe27e891efdd00d9a95e2e62c858c6688cac', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'cc65c4946b4a8f3add2509c412e64bd8c8389fda', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: '4026e85eefcf7fd221c9ee61f807b8757857de1b', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'bf861e28ccf9a1ecc2189415943240f1e81bf69a', name: "x", size: 20 })))), h("div", { key: '57c591df50af7d19ce2926eb7dcba6c2ab3422d5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: 'c9e3ab57d666cfb85802d5e07dd89769434c696d', name: "tabs" })), h("div", { key: 'd7f0adf9a58f92756b9f83987c326dc208b10441', class: "co-drawer__body", part: "body" }, h("slot", { key: '6f2ad9551a80c1e957b35d8c61f6bed314dfc567' }), h("co-loader", { key: '088d8c6623b2d56e45361c06de0cb199653c1f0d', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: 'cdb32ec0e7f2dcfe971fec5b33224ad812987bdc', class: "co-drawer__footer", part: "footer" }, h("slot", { key: 'c08df3969fb871d3b313b121dd077a72769d3019', name: "footer" })))));
     }
     static get is() { return "co-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -153,6 +157,46 @@ export class CoDrawer {
                 "attribute": "heading",
                 "defaultValue": "''"
             },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description shown below the heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional Phosphor icon name shown before the heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
             "closable": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoEmptyState {
     render() {
-        return (h("div", { key: 'd414a4b9c7336d6f7cdd467a25be8287cbc61688', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '482eac0c4337a7b8eba92018a8a8f898f44793e1', class: "co-empty-state__icon" }, h("co-icon", { key: '8cb46703a9c8f34277fffd95ffbb1b14c0e89366', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: '2517c9b2524aef5db6516908d63c8c9b4287a53d', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'a4793896bc598d7fbe92b367b8412f18d2643595', class: "co-empty-state__description" }, this.description)), h("div", { key: 'c68653bbc2012b6b8a967400ce3e49e29bc9ef9f', class: "co-empty-state__actions" }, h("slot", { key: '665dccd15ed54b78a0d3f13a94dcd8e65720c8c5' }))));
+        return (h("div", { key: '68397ba09dd6d82282d7db563661336ccc486386', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '85b31861da503e36312d14a941d3cc143cc07806', class: "co-empty-state__icon" }, h("co-icon", { key: '2592b0d3f395455a4bf9986ce91e7df38506baec', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: 'f949906b9403693d90b7591fa92232cb65820fcd', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '229b1ec71c70b1fdd5caa1e00b8013e5d0b55c8f', class: "co-empty-state__description" }, this.description)), h("div", { key: 'b24817feb623386a92d4c7442631f624828f9f4a', class: "co-empty-state__actions" }, h("slot", { key: 'f5819e1b60a761950b2f1c7d16ac40db9f120d97' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-calendar/co-event-calendar.css

@@ -0,0 +1,146 @@
+/*
+ * co-event-calendar — shell chrome (toolbar + body). The grid itself is themed
+ * by co-calendar-month via --co-cal-* tokens; the shell only styles the toolbar,
+ * reusing semantic Cobalt tokens so dark mode and brand overrides apply for free.
+ */
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+  font-family: var(--co-font-family-primary);
+  color: var(--co-semantic-text-default);
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+.cal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md);
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────── */
+.cal__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-md);
+}
+
+.cal__nav-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+}
+
+.cal__title {
+  flex: 1 1 auto;
+  margin: 0;
+  text-align: center;
+  font-size: var(--co-font-size-16, 16px);
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--co-semantic-text-default);
+}
+
+.cal__views-spacer {
+  /* keeps the title visually centered when no view switcher is shown */
+  flex: 0 0 auto;
+  inline-size: 1px;
+}
+
+.cal__btn {
+  height: 32px;
+  padding: 0 var(--co-spacing-md);
+  background: none;
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.cal__btn:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.cal__btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+.cal__icon-btn {
+  height: 32px;
+  width: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 0;
+  border-radius: var(--co-border-radius-xs);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.cal__icon-btn:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.cal__icon-btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── View switcher ───────────────────────────────────────────── */
+.cal__views {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--co-semantic-surface-hover);
+  border-radius: var(--co-border-radius-xs);
+}
+.cal__view-btn {
+  height: 28px;
+  padding: 0 var(--co-spacing-md);
+  background: none;
+  border: 0;
+  border-radius: var(--co-border-radius-xxs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-secondary);
+  cursor: pointer;
+  text-transform: capitalize;
+}
+.cal__view-btn--active {
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.cal__view-btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── Body ────────────────────────────────────────────────────── */
+.cal__body {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
+}
+.cal__body co-calendar-month {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+.cal__placeholder {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm);
+  color: var(--co-semantic-text-muted);
+  text-transform: capitalize;
+}