@brightspot/ui 1.0.1-wc.4 → 1.2.0

package/dist/util/throttle.js

@@ -0,0 +1,30 @@
+/* eslint-disable prefer-rest-params */
+export function throttle(interval, fn) {
+    if (interval <= 0) {
+        return fn;
+    }
+    let timeoutId;
+    let lastTrigger = 0;
+    return function () {
+        // Already scheduled to run.
+        if (timeoutId) {
+            return;
+        }
+        const now = Date.now();
+        const delay = interval - now + lastTrigger;
+        // Waited long enough so execute.
+        if (delay <= 0) {
+            lastTrigger = now;
+            fn.apply(this, [...arguments]);
+        }
+        else {
+            // Schedule for later.
+            timeoutId = setTimeout(() => {
+                lastTrigger = now;
+                timeoutId = undefined;
+                fn.apply(this, [...arguments]);
+            }, delay);
+        }
+    };
+}
+//# sourceMappingURL=throttle.js.map

package/dist/util/throttle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"throttle.js","sourceRoot":"","sources":["../../src/util/throttle.ts"],"names":[],"mappings":"AAEA,uCAAuC;AACvC,MAAM,UAAU,QAAQ,CAAC,QAAgB,EAAE,EAAmB;IAC5D,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;QAClB,OAAO,EAAE,CAAA;IACX,CAAC;IAED,IAAI,SAAoD,CAAA;IACxD,IAAI,WAAW,GAAG,CAAC,CAAA;IAEnB,OAAO;QACL,4BAA4B;QAC5B,IAAI,SAAS,EAAE,CAAC;YACd,OAAM;QACR,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;QACtB,MAAM,KAAK,GAAG,QAAQ,GAAG,GAAG,GAAG,WAAW,CAAA;QAE1C,iCAAiC;QACjC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACf,WAAW,GAAG,GAAG,CAAA;YACjB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAA;QAChC,CAAC;aAAM,CAAC;YACN,sBAAsB;YACtB,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,WAAW,GAAG,GAAG,CAAA;gBACjB,SAAS,GAAG,SAAS,CAAA;gBACrB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAA;YAChC,CAAC,EAAE,KAAK,CAAC,CAAA;QACX,CAAC;IACH,CAAC,CAAA;AACH,CAAC"}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@brightspot/ui",
-  "version": "1.0.1-wc.4",
+  "version": "1.2.0",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
   "main": "./dist/tailwind.config.js",
-  "customElements": "custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "exports": {
     ".": "./dist/tailwind.config.js",
     "./dist/*": "./dist/*",
-    "./custom-elements.json": "./custom-elements.json"
+    "./custom-elements.json": "./dist/custom-elements.json"
   },
   "scripts": {
     "format": "prettier --write --ignore-unknown .",
@@ -34,6 +34,7 @@
     "@storybook/web-components-vite": "^10.0.6",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^24.10.0",
+    "@types/postcss-import": "^14.0.3",
     "@wc-toolkit/storybook-helpers": "^10.0.0",
     "autoprefixer": "10.4.21",
     "css-loader": "^6.7.1",
@@ -73,13 +74,13 @@
     "dist/components/**/*.js"
   ],
   "files": [
-    "dist/**/*",
-    "custom-elements.json"
+    "dist/**/*"
   ],
   "lint-staged": {
     "src/components/**/*.ts": [
       "node scripts/run-cem.cjs",
-      "git add custom-elements.json"
+      "node scripts/generate-docs.mjs",
+      "git add docs/components/"
     ],
     "*": "yarn format"
   }

package/custom-elements.json

@@ -1,214 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "src/components/widget/Widget.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A collapsible container component with persistent state management.\n\nProvides collapsible behavior with localStorage persistence, keyboard\naccessibility, and automatic error expansion. Uses CSS Grid layout with\nnamed columns for flexible content positioning.",
-          "name": "Widget",
-          "cssProperties": [
-            {
-              "description": "Horizontal padding for grid columns (default: theme(spacing.6))",
-              "name": "--space"
-            },
-            {
-              "description": "Internal padding variable (default: var(--gap-l))",
-              "name": "--Widget-padding"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for widget content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "collapsible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable collapsible behavior with expand/collapse controls.\nWhen enabled, displays a chevron icon and allows users to toggle content visibility.",
-              "attribute": "collapsible"
-            },
-            {
-              "kind": "field",
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Widget title displayed in the header.",
-              "attribute": "heading"
-            },
-            {
-              "kind": "field",
-              "name": "internalname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Internal identifier for localStorage key generation.\nUsed in format: BSP.ContentEdit.widgetCollapsed.{widgetid}.{internalname}",
-              "attribute": "internalname"
-            },
-            {
-              "kind": "field",
-              "name": "invalid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Internal state tracking whether widget contains error messages.\nWidget automatically expands when errors are detected.",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "widgetid",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Widget type ID for localStorage key generation.\nCombined with internalname to create unique storage keys.",
-              "attribute": "widgetid"
-            },
-            {
-              "kind": "field",
-              "name": "collapsed",
-              "description": "Controls the collapsed state of the widget.\nWhen set, persists to localStorage and emits btu-widget-toggle event.",
-              "attribute": "collapsed"
-            },
-            {
-              "kind": "method",
-              "name": "_collapsibleTemplate",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Inherited from EventEmitterMixin, fired when element connects to DOM",
-              "name": "btu-brightspot-element-connected"
-            },
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Inherited from EventEmitterMixin, fired when element disconnects from DOM",
-              "name": "btu-brightspot-element-disconnected"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{error: Error}>"
-              },
-              "description": "Inherited from EventEmitterMixin, fired on connection error",
-              "name": "btu-brightspot-element-error"
-            },
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired after first render and initialization",
-              "name": "btu-widget-ready"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{collapsed: boolean}>"
-              },
-              "description": "Fired when collapse state changes",
-              "name": "btu-widget-toggle"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "collapsible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable collapsible behavior with expand/collapse controls.\nWhen enabled, displays a chevron icon and allows users to toggle content visibility.",
-              "fieldName": "collapsible",
-              "attribute": "collapsible"
-            },
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Widget title displayed in the header.",
-              "fieldName": "heading",
-              "attribute": "heading"
-            },
-            {
-              "name": "internalname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Internal identifier for localStorage key generation.\nUsed in format: BSP.ContentEdit.widgetCollapsed.{widgetid}.{internalname}",
-              "fieldName": "internalname",
-              "attribute": "internalname"
-            },
-            {
-              "name": "widgetid",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Widget type ID for localStorage key generation.\nCombined with internalname to create unique storage keys.",
-              "fieldName": "widgetid",
-              "attribute": "widgetid"
-            },
-            {
-              "name": "collapsed",
-              "description": "Controls the collapsed state of the widget.\nWhen set, persists to localStorage and emits btu-widget-toggle event.",
-              "fieldName": "collapsed",
-              "attribute": "collapsed"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/utils/EventEmitterMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-widget",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Widget",
-            "module": "src/components/widget/Widget.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-widget",
-          "declaration": {
-            "name": "Widget",
-            "module": "src/components/widget/Widget.ts"
-          }
-        }
-      ]
-    }
-  ]
-}

package/dist/components/widget/Widget.css

@@ -1,118 +0,0 @@
-.Widget {
-  --Widget-padding: var(--gap-l);
-  --space: theme(spacing.6);
-
-  @apply [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_[content-end]_var(--space)_[fullbleed-end]];
-
-  > *:not(.ContentEdit-preview) {
-    @apply [grid-column:content-start_/_content-end];
-  }
-}
-
-.Widget-title {
-  .Label {
-    @apply inline-flex;
-  }
-}
-
-.Widget-controls.is-locked {
-  @apply !hidden;
-}
-
-.Widget:not(.is-collapsible) {
-  &:has(.Widget-controls:not(:empty)) > .Widget-title {
-    @apply pe-2 [grid-column:fullbleed-start_/_span_2];
-  }
-
-  /* widget controls appear on the top right corner of the widget on the same row as title */
-  .Widget-controls {
-    @apply pe-[--space] [grid-column:span_2_/_fullbleed-end] [grid-row:1];
-  }
-
-  /*
-    Aligns Widget controls correctly with title for certain Admin Pages
-    e.g. Restore button in Admin > User + Roles > Archived User,
-         Widget controls in Admin > Sites & Settings > Archived Site
-  */
-  .Admin-main & .Widget-controls:has(> button:not(.FormFilter-icon)) {
-    @apply -mt-[3.35rem] bg-white;
-  }
-}
-
-.Widget-actionsToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
-}
-
-.Widget-actionsList {
-  @apply z-[10000];
-}
-
-.Widget-actions.is-open {
-  .Widget-actionsToggle {
-    @apply btu-button-pressed;
-  }
-}
-
-.Widget
-  :is(
-    .widget-urls.is-readOnly,
-    .widget-urlsRepeatable.is-readOnly,
-    .ContentEditSites-owner.is-readOnly,
-    .ContentEditSites-access.is-readOnly
-  ) {
-  @apply pointer-events-none select-none opacity-75;
-}
-
-.Widget .is-readOnly .UrlsWidget-itemLabel a,
-.widget .is-readOnly .RCIG-title:after,
-.widget .is-readOnly .ContentSummary-info,
-.widget .is-readOnly .ContentSelector-edit {
-  @apply pointer-events-auto cursor-pointer;
-}
-
-/* Collapsible widgets where widget titles have expand/collapse controls (e.g. Right rail publishing tools)
-** Note: In this use case Widget-controls are children of Widget-title instead of their sibling
-*/
-.Widget.is-collapsible {
-  .Widget-title:has(.Widget-expand:focus-visible) {
-    @apply ring-primary-600 ring-offset-primary-100 ring-1 ring-inset ring-offset-4;
-  }
-}
-
-/* TODO: Do we want to support this as a widget-part? */
-.Widget-heading {
-  @apply py-2 text-sm font-semibold text-gray-900;
-}
-
-/* TODO: Do we want to support this as a widget-part? */
-.Widget-restoreButton {
-  @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon before:btu-icon-archive-restore;
-}
-
-/* TODO: Do we want to support this as a widget-part? */
-.Widget-filters,
-.Widget-filter {
-  @apply flex items-center justify-between;
-}
-
-.Widget-filters {
-  @apply relative pt-3 before:absolute before:-inset-x-4 before:-inset-y-3 before:border-b before:border-b-gray-200 before:bg-gray-50;
-}
-
-.Widget-filter {
-  @apply z-0 flex-row-reverse;
-}
-
-.Widget-filterLabel {
-  @apply text-sm font-medium;
-}
-
-.Widget.is-collapsed {
-  > div,
-  > table {
-    @apply hidden;
-  }
-}
-
-/* The following code will need to be combed through to determine what styles should stay in bsp-ui and what should move back into cms tool-ui */
-/* See all the original styles for widgets in tool-ui ... */

package/dist/components/widget/Widget.d.ts

@@ -1,90 +0,0 @@
-import { LitElement } from 'lit';
-export interface WidgetProps {
-    collapsible?: boolean;
-    heading?: string;
-    internalname?: string;
-    widgetid?: string;
-}
-declare const Widget_base: (new (...args: any[]) => import("../../utils/EventEmitterMixin.js").EventEmitterMixinInterface) & typeof LitElement;
-/**
- * A collapsible container component with persistent state management.
- *
- * Provides collapsible behavior with localStorage persistence, keyboard
- * accessibility, and automatic error expansion. Uses CSS Grid layout with
- * named columns for flexible content positioning.
- *
- * @element btu-widget
- *
- * @fires {CustomEvent} btu-brightspot-element-connected - Inherited from EventEmitterMixin, fired when element connects to DOM
- * @fires {CustomEvent} btu-brightspot-element-disconnected - Inherited from EventEmitterMixin, fired when element disconnects from DOM
- * @fires {CustomEvent<{error: Error}>} btu-brightspot-element-error - Inherited from EventEmitterMixin, fired on connection error
- * @fires {CustomEvent} btu-widget-ready - Fired after first render and initialization
- * @fires {CustomEvent<{collapsed: boolean}>} btu-widget-toggle - Fired when collapse state changes
- *
- * @slot - Default slot for widget content
- *
- * @cssprop --space - Horizontal padding for grid columns (default: theme(spacing.6))
- * @cssprop --Widget-padding - Internal padding variable (default: var(--gap-l))
- *
- * @example
- * ```html
- * <btu-widget
- *   collapsible
- *   heading="My Widget"
- *   internalname="example"
- *   widgetid="widget-001">
- *   <p>Widget content goes here</p>
- * </btu-widget>
- * ```
- */
-export default class Widget extends Widget_base {
-    private _collapsed;
-    /**
-     * Enable collapsible behavior with expand/collapse controls.
-     * When enabled, displays a chevron icon and allows users to toggle content visibility.
-     * @attr
-     */
-    collapsible: boolean;
-    /**
-     * Widget title displayed in the header.
-     * @attr
-     */
-    heading?: string;
-    /**
-     * Internal identifier for localStorage key generation.
-     * Used in format: BSP.ContentEdit.widgetCollapsed.{widgetid}.{internalname}
-     * @attr
-     */
-    internalname?: string;
-    /**
-     * Internal state tracking whether widget contains error messages.
-     * Widget automatically expands when errors are detected.
-     * @private
-     */
-    invalid: boolean;
-    /**
-     * Widget type ID for localStorage key generation.
-     * Combined with internalname to create unique storage keys.
-     * @attr
-     */
-    widgetid?: string;
-    /**
-     * Controls the collapsed state of the widget.
-     * When set, persists to localStorage and emits btu-widget-toggle event.
-     * @attr
-     */
-    set collapsed(isCollapsed: boolean);
-    get collapsed(): boolean;
-    connectedCallback(): void;
-    createRenderRoot(): this;
-    firstUpdated(): void;
-    private _collapsibleTemplate;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'btu-widget': Widget;
-    }
-}
-export {};
-//# sourceMappingURL=Widget.d.ts.map

package/dist/components/widget/Widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../src/components/widget/Widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAStC,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAA6B;IAC/D,OAAO,CAAC,UAAU,CAAQ;IAE1B;;;;OAIG;IAEH,WAAW,UAAQ;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;OAIG;IAEH,OAAO,UAAQ;IAEf;;;;OAIG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,IACI,SAAS,CAAC,WAAW,EAAE,OAAO,EAcjC;IAED,IAAI,SAAS,IAhBc,OAAO,CAkBjC;IAED,iBAAiB,IAAI,IAAI;IAOzB,gBAAgB;IAIhB,YAAY,IAAI,IAAI;IAyBpB,OAAO,CAAC,oBAAoB;IAyC5B,MAAM;CAwBP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB;CACF"}