@trintel/zooy 1.0.1-beta.0 → 1.0.1

package/dist/chunks/{unsafe-html-D49sIpJ5.js → unsafe-html-Bg0eM3hS.js}

@@ -1,13 +1,13 @@
-import { E as r, T as s } from "./settings-BPOpwVkr.js";
-import { e as n, i as o, t as c } from "./directive-kLG6oqUu.js";
+import { E as r, T as s } from "./main-BGOPab-5.js";
+import { i as n, t as o, e as c } from "./directive-kLG6oqUu.js";
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class e extends o {
+class e extends n {
   constructor(t) {
-    if (super(t), this.it = r, t.type !== c.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(t), this.it = r, t.type !== o.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(t) {
     if (t === r || t == null) return this._t = void 0, this.it = t;
@@ -20,7 +20,7 @@ class e extends o {
   }
 }
 e.directiveName = "unsafeHTML", e.resultType = 1;
-const l = n(e);
+const l = c(e);
 export {
   e,
   l as o

package/dist/chunks/{unsafe-html-C_MKAcuC.js → unsafe-html-CpAqmPyx.js}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./settings-CK2vhfPu.js"),r=require("./directive-Dp4ZTz-F.js");/**
+"use strict";const s=require("./main-Bx21zlkN.js"),r=require("./directive-Dp4ZTz-F.js");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/zooy.cjs.js

@@ -1 +1 @@
-"use strict";const e=require("./chunks/main-DUusfqrI.js");module.exports=e.zooy;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/main-Bx21zlkN.js");exports.Binder=e.Binder;exports.Component=e.Component;exports.ComponentLibraryRegistry=e.ComponentLibraryRegistry;exports.Conductor=e.Conductor;exports.Dragger=e.Dragger;exports.Evt=e.Evt;exports.FormPanel=e.FormPanel;exports.Panel=e.Panel;exports.Split=e.Split;exports.UiEventType=e.UiEventType;exports.UserManager=e.UserManager;exports.View=e.View;exports.default=e.zooy;exports.domUtils=e.domUtils;exports.handlers=e.handlers;exports.registerCarbonLibrary=e.registerCarbonLibrary;exports.registerMdcLibrary=e.registerMdcLibrary;exports.uriUtils=e.uriUtils;exports.zoo=e.zoo;

package/dist/zooy.es.js

@@ -1,4 +1,22 @@
-import { z as f } from "./chunks/main-Dp7wHHgP.js";
+import { B as r, n as e, C as i, s as n, D as o, m as t, F as l, P as d, S as g, q as m, U as y, V as p, z as C, v as U, y as b, r as u, l as v, w as L, A as P } from "./chunks/main-BGOPab-5.js";
 export {
-  f as default
+  r as Binder,
+  e as Component,
+  i as ComponentLibraryRegistry,
+  n as Conductor,
+  o as Dragger,
+  t as Evt,
+  l as FormPanel,
+  d as Panel,
+  g as Split,
+  m as UiEventType,
+  y as UserManager,
+  p as View,
+  C as default,
+  U as domUtils,
+  b as handlers,
+  u as registerCarbonLibrary,
+  v as registerMdcLibrary,
+  L as uriUtils,
+  P as zoo
 };

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@trintel/zooy",
   "description": "UI Building Blocks",
-  "version": "1.0.1-beta.0",
+  "version": "1.0.1",
   "main": "./dist/zooy.cjs.js",
   "module": "./dist/zooy.es.js",
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "import": "./dist/zooy.es.js",
@@ -25,9 +26,7 @@
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "build_css": "sass --load-path=node_modules --style=compressed src/sass/main.scss src/css/main.css",
     "build": "npm run clean && vite build",
-    "dev_watch_sass": "sass --watch --load-path=node_modules --style=compressed src/sass/main.scss src/css/main.css",
     "lint": "eslint src/**/*.js",
     "lint:fix": "eslint src/**/*.js --fix",
     "dev": "vite",
@@ -40,7 +39,7 @@
   },
   "dependencies": {
     "@carbon/icons": "^11.70.0",
-    "@carbon/web-components": "^2.41.0",
+    "@carbon/web-components": "^2.42.0",
     "@ibm/plex": "^6.4.1",
     "badu": "^8.6.0",
     "material-components-web": "^14.0.0",

package/src/sass/carbon.scss

@@ -0,0 +1,117 @@
+// ============================================================================
+// Carbon Design System Icon Toggle Support
+// ============================================================================
+// Provides CSS-based icon swapping for toggle buttons when using the
+// django-zooy carbon_icon template tag with toggle_to parameter.
+//
+// Example usage in Django template:
+//   {% carbon_icon "favorite" 16 slot="icon" toggle_to="favorite--filled" %}
+//
+// This renders two icons wrapped in .icon-toggle-wrapper, and this CSS
+// controls which icon is visible based on the is-selected attribute.
+// ============================================================================
+
+cds-icon-button {
+  // Icon toggle wrapper - makes container invisible to layout
+  .icon-toggle-wrapper {
+    display: contents;
+  }
+
+  // Icon swap visibility controls (only for toggle_to mode)
+  .off-icon {
+    display: inline;
+  }
+
+  .on-icon {
+    display: none;
+  }
+
+  // When button is selected, swap icon visibility
+  // Note: The attribute is 'isselected' (no hyphen) in the actual DOM
+  &[isselected] {
+    // Icon-swap mode: toggle visibility
+    .off-icon {
+      display: none;
+    }
+
+    .on-icon {
+      display: inline;
+    }
+
+    // Optional: Color swap on selection (opt-in via data-toggle-color)
+    &[data-toggle-color] svg {
+      fill: var(--cds-icon-primary, #0f62fe);
+    }
+  }
+}
+
+
+// ============================================================================
+// Carbon Data Table Support
+// ============================================================================
+// Provides styling for Carbon data tables, including numeric column alignment.
+//
+// Example usage in Django template:
+//   <cds-table-header-cell class="number">Count</cds-table-header-cell>
+//   <cds-table-cell class="number">1,234</cds-table-cell>
+//
+// Per Carbon Design System guidelines, variable numerical values (prices,
+// percentages, counts, etc.) and their column headers should be right-aligned.
+// ============================================================================
+
+cds-table {
+  // Numeric table cells - right-aligned per Carbon Design guidelines
+  cds-table-cell {
+    &.number {
+      text-align: right;
+    }
+  }
+
+  // Numeric column headers - right-aligned to match cell alignment
+  cds-table-header-cell {
+    &.number {
+      text-align: right;
+    }
+  }
+}
+
+// Batch filter popover - active state styling
+// Matches Carbon's overflow menu behavior when open
+cds-popover.cds--overflow-menu--open {
+  box-shadow: 0 2px 6px var(--cds-shadow);
+  background-color: var(--cds-background);
+  transition: none;
+}
+
+.zoo-datatable-skeleton-wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+
+  cds-table,
+  cds-table-skeleton {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  cds-table {
+    z-index: 2; /* Table always on top */
+  }
+
+  cds-table-skeleton {
+    z-index: 1;
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 1s ease, visibility 1s ease;
+
+    &.hidden {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}
+
+.hidden {
+  opacity: 0;
+  visibility: hidden;
+}

package/src/sass/main.scss

@@ -2,6 +2,6 @@
 
 // Zooy styles
 @use "split";
-@use "carbon-icons";
+@use "carbon";