@tmorrow/cre8-wc 2.0.6 → 2.0.8

package/lib/components/tag-list/tag-list.js

@@ -8,6 +8,7 @@ import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import styles from './tag-list.styles.js';
 /**
  * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.
@@ -23,6 +24,27 @@ export class Cre8TagList extends Cre8Element {
     _initializeAria() {
         this.fieldId = this.fieldId || nanoid();
     }
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.tags)
+            return null;
+        return this.tags.map((tag) => ({
+            tag: 'cre8-tag',
+            props: {
+                text: tag.text,
+                variant: tag.variant,
+                shape: tag.shape,
+                type: tag.type,
+                disabled: tag.disabled,
+                name: this.fieldId,
+            },
+        }));
+    }
+    updated(changed) {
+        if (['tags', 'fieldId'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-tag-list', {});
         return html `
@@ -42,6 +64,9 @@ __decorate([
 __decorate([
     property()
 ], Cre8TagList.prototype, "fieldId", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8TagList.prototype, "tags", void 0);
 if (customElements.get('cre8-tag-list') === undefined) {
     customElements.define('cre8-tag-list', Cre8TagList);
 }

package/lib/components/tag-list/tag-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-list.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAgB1C,YAAY;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,EAAG,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;yBACQ,mBAAmB;kDACM,IAAI,CAAC,KAAK;;;;;OAKrD,CAAC;IACN,CAAC;;AAlCQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACQ;AAOf;IADH,QAAQ,EAAE;4CACU;AAwBvB,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tag-list.styles.js';\n\n/**\n * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.\n * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.\n * Tag List has a label that should be used to describe the purpose of the list.\n *\n * @slot - The `cre8-tag` children of the list\n */\nexport class Cre8TagList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tag list legend label\n   */\n  @property()\n      label?: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  firstUpdated() {\n      this._initializeAria();\n  }\n\n  private _initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag-list', { });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend class=\"cre8-c-tag-list__legend\">${this.label}</legend>\n        <div class=\"cre8-c-tag-list__list\" role=\"list\">   \n          <slot></slot>\n        </div>\n      </fieldset>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tag-list') === undefined) {\n    customElements.define('cre8-tag-list', Cre8TagList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag-list': Cre8TagList;\n  }\n}\n\nexport default Cre8TagList;\n"]}
+{"version":3,"file":"tag-list.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAW1C;;;;;;GAMG;AAEH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAgB1C,YAAY;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IASD,oDAAoD;IAC5C,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAC5B,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC3B,GAAG,EAAE,UAAU;YACf,KAAK,EAAE;gBACH,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,OAAO,EAAE,GAAG,CAAC,OAAO;gBACpB,KAAK,EAAE,GAAG,CAAC,KAAK;gBAChB,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,QAAQ,EAAE,GAAG,CAAC,QAAQ;gBACtB,IAAI,EAAE,IAAI,CAAC,OAAO;aACrB;SACJ,CAAC,CAAC,CAAC;IACR,CAAC;IAES,OAAO,CAAC,OAA6B;QAC3C,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YACtD,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAGD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,EAAG,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;yBACQ,mBAAmB;kDACM,IAAI,CAAC,KAAK;;;;;OAKrD,CAAC;IACN,CAAC;;AAhEQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACQ;AAOf;IADH,QAAQ,EAAE;4CACU;AAejB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCACD;AAuC3B,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport styles from './tag-list.styles.js';\n\n/** One tag in a data-driven tag list. */\nexport interface Cre8TagData {\n  text: string;\n  variant?: 'neutral' | 'branded' | 'neutral-hybrid';\n  shape?: 'square' | 'round';\n  type?: 'checkbox' | 'radio';\n  disabled?: boolean;\n}\n\n/**\n * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.\n * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.\n * Tag List has a label that should be used to describe the purpose of the list.\n *\n * @slot - The `cre8-tag` children of the list\n */\n\nexport class Cre8TagList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tag list legend label\n   */\n  @property()\n      label?: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  firstUpdated() {\n      this._initializeAria();\n  }\n\n  private _initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n  }\n  /**\n   * Tags for a data-driven tag list. Set this and the list builds its own\n   * `cre8-tag` children in the light DOM. Leave it unset to compose them\n   * yourself.\n   */\n  @property({ type: Array })\n      tags?: Cre8TagData[];\n\n  /** The composition the data property stands for. */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.tags) return null;\n      return this.tags.map((tag) => ({\n          tag: 'cre8-tag',\n          props: {\n              text: tag.text,\n              variant: tag.variant,\n              shape: tag.shape,\n              type: tag.type,\n              disabled: tag.disabled,\n              name: this.fieldId,\n          },\n      }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['tags', 'fieldId'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag-list', { });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend class=\"cre8-c-tag-list__legend\">${this.label}</legend>\n        <div class=\"cre8-c-tag-list__list\" role=\"list\">   \n          <slot></slot>\n        </div>\n      </fieldset>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tag-list') === undefined) {\n    customElements.define('cre8-tag-list', Cre8TagList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag-list': Cre8TagList;\n  }\n}\n\nexport default Cre8TagList;\n"]}

package/lib/components/tooltip/tooltip.d.ts

@@ -33,8 +33,8 @@ import { Cre8Element } from '../cre8-element';
  * @slot default - Default, unnamed slot container for Tooltip text
  * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
  *
- * @fires open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
- * @fires close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
+ * @fires tooltip-open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
+ * @fires tooltip-close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
  */
 export declare class Cre8Tooltip extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/tooltip/tooltip.js

@@ -44,8 +44,8 @@ import styles from './tooltip.styles.js';
  * @slot default - Default, unnamed slot container for Tooltip text
  * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
  *
- * @fires open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
- * @fires close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
+ * @fires tooltip-open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
+ * @fires tooltip-close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
  */
 export class Cre8Tooltip extends Cre8Element {
     constructor() {
@@ -201,13 +201,13 @@ export class Cre8Tooltip extends Cre8Element {
             setTimeout(() => {
                 this.dynamicPosition();
             }, 1);
-            this.dispatchEvent(new CustomEvent('open', {
+            this.dispatchWithLegacyAlias(new CustomEvent('tooltip-open', {
                 detail: { isActive: this.isActive }, bubbles: true, composed: true,
             }));
         }
         else {
             /* 3 */
-            this.dispatchEvent(new CustomEvent('close', {
+            this.dispatchWithLegacyAlias(new CustomEvent('tooltip-close', {
                 detail: { isActive: this.isActive }, bubbles: true, composed: true,
             }));
         }

package/lib/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tooltip.styles.js';\n\n/**\n * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.\n * If you need to present a call to action with perhaps a button for the user to click, then use\n * [Popover](/docs/cre8-components-popover--docs) instead.\n *\n * ##Tooltip Styles\n * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the\n * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that\n * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.\n *\n * **With icon**\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct dirrection for icons, for example,\n * arrows, caret up or caret down.\n *\n * ##Usability Considerations\n * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on\n * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot\n * intuitively understand the interface without Tooltips, the interface should be redesigned.\n *\n * ##How to use\n * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.\n * Also, do not simply restate content on the page, for example, the title of the field.\n * - Tooltips should be short and to the point. Example: \"Click X to do X\" or \"Icon Description.\" If a succinct\n * description is not possible, the interaction element should be redesigned.\n * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)\n * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping\n * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.\n * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.\n * A novice user may never discover tap and hold for Tooltips.\n *\n * @slot default - Default, unnamed slot container for Tooltip text\n * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text\n *\n * @fires open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.\n * @fires close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.\n */\n\nexport class Cre8Tooltip extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.\n   * @type {\"default\"|\"top\"|\"left\"|\"right\"}\n   * @attr {string}\n   * - **default** positions the tooltip panel below the trigger element\n   * - **top** positions the tooltip panel above the trigger element\n   * - **left** positions the tooltip panel left of the trigger element\n   * - **right** positions the tooltip panel right of the trigger element\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * The knockout variant for the tooltip\n   * @attr {boolean}\n   * 1. If is true, the tooltip background is white\n   * 2. If is false, the tooltip background is gray\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /**\n   * The dynamic state for the tooltip. Position overrides isDynamic.\n   * @attr {boolean}\n   * - If true, the tooltip panel placement is determined by its position in the viewport\n   * - If false, the tooltip panel placement will be placed according to the position value\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * @attr {boolean}\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the tooltip\n   * @attr {boolean}\n   * - If true, the tooltip panel is visible\n   * - If false, the tooltip panel is hidden\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   *  Accepts the ID string of the item the tooltip is referencing\n   *  @attr {string}\n   *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element\n   */\n  @property({ type: String })\n      ariaDescribes?: string;\n\n  /**\n   * Internal unique id used to associate the trigger with the tooltip text. Generated automatically.\n   */\n  @property({ type: String })\n      _uniqueId?: string;\n\n  /**\n   * svg as a raw string\n   * - The icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip')\n      _Cre8Tooltip: HTMLElement;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip__panel')\n      _Cre8TooltipPanel: HTMLElement;\n\n  /**\n   * Query the document direction value\n   * <br/><br/> _*This property is dynamically set_\n   */\n  get isRTL() {\n      return document.dir === 'rtl';\n  }\n\n  /**\n   * updated Callback Lifecycle\n   * 1. Find the second slot\n   * 2. Create a string from joining the textContent of the textnodes\n   * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback\n   * */\n  updated() {\n    /* 1 & 2 */\n      const tipContent = this.shadowRoot.querySelectorAll('slot')[1]\n          .assignedNodes()\n          .reduce(\n              ((str, item) => `${str}${item.textContent.replace(/\\n/g, '').trim()}`),\n              ''\n          );\n    /* 3 */\n      if (document.getElementById(this._uniqueId)) {\n          document.getElementById(this._uniqueId).textContent = tipContent;\n      }\n  }\n\n  /**\n   * firstUpdated Callback Lifecycle\n   * 1. If ariaDescribes is set\n      * a. create an ID and assign it to the property _uniqueId\n      * b. Generate an empty div, assign it the  _uniqueId and the tooltip role\n  * 2. Set the aria-describedby on the ariaDescribes target\n  */\n  firstUpdated() {\n      if (this.ariaDescribes) { /* 1 */\n          this._uniqueId = this._uniqueId || nanoid(); /* 1.a */\n          const idMatcher = new RegExp(`\\\\b${this._uniqueId}\\\\b`); // prevents dupes from reconnects below\n      /* 1.b */\n          const a11yProxy = document.createElement('div');\n          a11yProxy.setAttribute('role', 'tooltip');\n          a11yProxy.setAttribute('style', 'position:fixed; left: -1000px; top: -1000px;');\n          a11yProxy.id = this._uniqueId;\n          const describedEl = document.getElementById(this.ariaDescribes);\n          describedEl.parentNode.insertBefore(a11yProxy, describedEl);\n          const idList = describedEl?.getAttribute('aria-describedBy');\n      /* 2 */\n          describedEl?.setAttribute(\n              'aria-describedby',\n              `${idList ? `${idList.replace(idMatcher, '')} ` : ''}${this._uniqueId}`.trim()\n          );\n      }\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window mouseover event listener\n   * 2. Add window mouseout event listener\n   * 3. Add mousedown event listener\n   * 4. Set the id and aria-describedby\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      this.addEventListener('mouseover', this.toggleActive); /* 1 */\n      this.addEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window mouseover event listener\n   * 2. Remove window mouseout event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      this.removeEventListener('mouseover', this.toggleActive); /* 1 */\n      this.removeEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Handle all dynamic placement\n   */\n  dynamicPosition() {\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n      if (this.isDynamic && this._Cre8TooltipPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const tooltipPanel = this._Cre8TooltipPanel.getBoundingClientRect();\n          const tooltipHeight = this._Cre8Tooltip.clientHeight + tooltipPanel.height + tooltipPanel.top;\n\n      /**\n       * If tooltip panel breaks out the left side of the window, position it to the right\n       */\n          if (tooltipPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If tooltip panel breaks out the right side of the window, position it to the left\n       */\n          if (tooltipPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If tooltip panel breaks out the top side of the window only, position it to the bottom center\n       */\n          if (tooltipPanel.top < 0 && tooltipPanel.left > 0 && tooltipPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If tooltip panel breaks out the bottom side of the window only, position it to the top center\n       */\n          if (\n              tooltipHeight >= window.innerHeight\n        && tooltipPanel.bottom >= window.innerHeight\n        && tooltipPanel.left >= 0\n        && tooltipPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If escape or tab key is struck when the tooltip is active, close it\n   * 2. If enter or escape is keyed, toggle the tooltip open or close.\n   *    We need these since the click event is on a div so that accessibility reads this aloud to a user\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (this.isActive) {\n          if (e.code === 'Escape' || e.code === 'Tab') {\n              this.toggleActive(); /* 1 */\n          }\n      }\n      if (e.code === 'Enter' || e.code === 'Space') {\n          this.toggleActive(); /* 2 */\n      }\n  }\n\n  /**\n   * Set Tooltip Active State\n   * 1. Toggle the active state between true and false\n   * 2. If is active, set the dynamic position and custom event.\n   * 3. If is not active, remove fire the close custom event.\n   * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.\n   */\n  toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n\n      if (this.isActive) {\n      /* 2 */\n          setTimeout(() => {\n              this.dynamicPosition();\n          }, 1);\n          this.dispatchEvent(new CustomEvent('open', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      } else {\n      /* 3 */\n          this.dispatchEvent(new CustomEvent('close', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      }\n\n    /* 4 */\n      setTimeout(() => {\n          if (this.isActive && this.isDynamic) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Remove Active State\n   * 1. If a specific event is fired, remove the active state.\n   */\n  removeActive = () => {\n      if (this.isActive) {\n          this.toggleActive();\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tooltip', {\n          'cre8-c-tooltip--top': this.position === 'top',\n          'cre8-c-tooltip--left': this.position === 'left',\n          'cre8-c-tooltip--right': this.position === 'right',\n          'cre8-c-tooltip--knockout': this.knockout,\n          'cre8-is-active': this.isActive,\n          'cre8-is-dynamic': this.isDynamic,\n          'cre8-is-dynamic-active': this.isActiveDynamic,\n      });\n\n      return html`\n        <div class=\"${componentClassNames}\">\n            <div \n                class=\"cre8-c-tooltip__trigger\"\n                tabindex=\"0\"\n                @focus=${this.toggleActive}\n                @keydown=${this._handleKeydown}\n            >\n                ${this.svg\n        ? html`\n            <slot name=\"trigger\">\n                <cre8-icon svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" \n                flip=\"${this.iconFlipDirection}\" aria-hidden=\"true\"></cre8-icon>\n            </slot>`\n        : html`<slot name=\"trigger\"></slot>`\n}\n            </div>\n            <dialog\n                id=${ifDefined(this._uniqueId)}\n                aria-labelledby=${this.ariaDescribes}\n                class=\"cre8-c-tooltip__panel\"\n                role=\"tooltip\">\n                <slot></slot>\n            </dialog>\n        </div>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tooltip') === undefined) {\n    customElements.define('cre8-tooltip', Cre8Tooltip);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tooltip': Cre8Tooltip;\n  }\n}\n\nexport default Cre8Tooltip;\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tooltip.styles.js';\n\n/**\n * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.\n * If you need to present a call to action with perhaps a button for the user to click, then use\n * [Popover](/docs/cre8-components-popover--docs) instead.\n *\n * ##Tooltip Styles\n * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the\n * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that\n * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.\n *\n * **With icon**\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct dirrection for icons, for example,\n * arrows, caret up or caret down.\n *\n * ##Usability Considerations\n * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on\n * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot\n * intuitively understand the interface without Tooltips, the interface should be redesigned.\n *\n * ##How to use\n * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.\n * Also, do not simply restate content on the page, for example, the title of the field.\n * - Tooltips should be short and to the point. Example: \"Click X to do X\" or \"Icon Description.\" If a succinct\n * description is not possible, the interaction element should be redesigned.\n * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)\n * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping\n * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.\n * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.\n * A novice user may never discover tap and hold for Tooltips.\n *\n * @slot default - Default, unnamed slot container for Tooltip text\n * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text\n *\n * @fires tooltip-open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.\n * @fires tooltip-close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.\n */\n\nexport class Cre8Tooltip extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.\n   * @type {\"default\"|\"top\"|\"left\"|\"right\"}\n   * @attr {string}\n   * - **default** positions the tooltip panel below the trigger element\n   * - **top** positions the tooltip panel above the trigger element\n   * - **left** positions the tooltip panel left of the trigger element\n   * - **right** positions the tooltip panel right of the trigger element\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * The knockout variant for the tooltip\n   * @attr {boolean}\n   * 1. If is true, the tooltip background is white\n   * 2. If is false, the tooltip background is gray\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /**\n   * The dynamic state for the tooltip. Position overrides isDynamic.\n   * @attr {boolean}\n   * - If true, the tooltip panel placement is determined by its position in the viewport\n   * - If false, the tooltip panel placement will be placed according to the position value\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * @attr {boolean}\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the tooltip\n   * @attr {boolean}\n   * - If true, the tooltip panel is visible\n   * - If false, the tooltip panel is hidden\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   *  Accepts the ID string of the item the tooltip is referencing\n   *  @attr {string}\n   *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element\n   */\n  @property({ type: String })\n      ariaDescribes?: string;\n\n  /**\n   * Internal unique id used to associate the trigger with the tooltip text. Generated automatically.\n   */\n  @property({ type: String })\n      _uniqueId?: string;\n\n  /**\n   * svg as a raw string\n   * - The icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip')\n      _Cre8Tooltip: HTMLElement;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip__panel')\n      _Cre8TooltipPanel: HTMLElement;\n\n  /**\n   * Query the document direction value\n   * <br/><br/> _*This property is dynamically set_\n   */\n  get isRTL() {\n      return document.dir === 'rtl';\n  }\n\n  /**\n   * updated Callback Lifecycle\n   * 1. Find the second slot\n   * 2. Create a string from joining the textContent of the textnodes\n   * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback\n   * */\n  updated() {\n    /* 1 & 2 */\n      const tipContent = this.shadowRoot.querySelectorAll('slot')[1]\n          .assignedNodes()\n          .reduce(\n              ((str, item) => `${str}${item.textContent.replace(/\\n/g, '').trim()}`),\n              ''\n          );\n    /* 3 */\n      if (document.getElementById(this._uniqueId)) {\n          document.getElementById(this._uniqueId).textContent = tipContent;\n      }\n  }\n\n  /**\n   * firstUpdated Callback Lifecycle\n   * 1. If ariaDescribes is set\n      * a. create an ID and assign it to the property _uniqueId\n      * b. Generate an empty div, assign it the  _uniqueId and the tooltip role\n  * 2. Set the aria-describedby on the ariaDescribes target\n  */\n  firstUpdated() {\n      if (this.ariaDescribes) { /* 1 */\n          this._uniqueId = this._uniqueId || nanoid(); /* 1.a */\n          const idMatcher = new RegExp(`\\\\b${this._uniqueId}\\\\b`); // prevents dupes from reconnects below\n      /* 1.b */\n          const a11yProxy = document.createElement('div');\n          a11yProxy.setAttribute('role', 'tooltip');\n          a11yProxy.setAttribute('style', 'position:fixed; left: -1000px; top: -1000px;');\n          a11yProxy.id = this._uniqueId;\n          const describedEl = document.getElementById(this.ariaDescribes);\n          describedEl.parentNode.insertBefore(a11yProxy, describedEl);\n          const idList = describedEl?.getAttribute('aria-describedBy');\n      /* 2 */\n          describedEl?.setAttribute(\n              'aria-describedby',\n              `${idList ? `${idList.replace(idMatcher, '')} ` : ''}${this._uniqueId}`.trim()\n          );\n      }\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window mouseover event listener\n   * 2. Add window mouseout event listener\n   * 3. Add mousedown event listener\n   * 4. Set the id and aria-describedby\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      this.addEventListener('mouseover', this.toggleActive); /* 1 */\n      this.addEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window mouseover event listener\n   * 2. Remove window mouseout event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      this.removeEventListener('mouseover', this.toggleActive); /* 1 */\n      this.removeEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Handle all dynamic placement\n   */\n  dynamicPosition() {\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n      if (this.isDynamic && this._Cre8TooltipPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const tooltipPanel = this._Cre8TooltipPanel.getBoundingClientRect();\n          const tooltipHeight = this._Cre8Tooltip.clientHeight + tooltipPanel.height + tooltipPanel.top;\n\n      /**\n       * If tooltip panel breaks out the left side of the window, position it to the right\n       */\n          if (tooltipPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If tooltip panel breaks out the right side of the window, position it to the left\n       */\n          if (tooltipPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If tooltip panel breaks out the top side of the window only, position it to the bottom center\n       */\n          if (tooltipPanel.top < 0 && tooltipPanel.left > 0 && tooltipPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If tooltip panel breaks out the bottom side of the window only, position it to the top center\n       */\n          if (\n              tooltipHeight >= window.innerHeight\n        && tooltipPanel.bottom >= window.innerHeight\n        && tooltipPanel.left >= 0\n        && tooltipPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If escape or tab key is struck when the tooltip is active, close it\n   * 2. If enter or escape is keyed, toggle the tooltip open or close.\n   *    We need these since the click event is on a div so that accessibility reads this aloud to a user\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (this.isActive) {\n          if (e.code === 'Escape' || e.code === 'Tab') {\n              this.toggleActive(); /* 1 */\n          }\n      }\n      if (e.code === 'Enter' || e.code === 'Space') {\n          this.toggleActive(); /* 2 */\n      }\n  }\n\n  /**\n   * Set Tooltip Active State\n   * 1. Toggle the active state between true and false\n   * 2. If is active, set the dynamic position and custom event.\n   * 3. If is not active, remove fire the close custom event.\n   * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.\n   */\n  toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n\n      if (this.isActive) {\n      /* 2 */\n          setTimeout(() => {\n              this.dynamicPosition();\n          }, 1);\n          this.dispatchWithLegacyAlias(new CustomEvent('tooltip-open', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      } else {\n      /* 3 */\n          this.dispatchWithLegacyAlias(new CustomEvent('tooltip-close', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      }\n\n    /* 4 */\n      setTimeout(() => {\n          if (this.isActive && this.isDynamic) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Remove Active State\n   * 1. If a specific event is fired, remove the active state.\n   */\n  removeActive = () => {\n      if (this.isActive) {\n          this.toggleActive();\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tooltip', {\n          'cre8-c-tooltip--top': this.position === 'top',\n          'cre8-c-tooltip--left': this.position === 'left',\n          'cre8-c-tooltip--right': this.position === 'right',\n          'cre8-c-tooltip--knockout': this.knockout,\n          'cre8-is-active': this.isActive,\n          'cre8-is-dynamic': this.isDynamic,\n          'cre8-is-dynamic-active': this.isActiveDynamic,\n      });\n\n      return html`\n        <div class=\"${componentClassNames}\">\n            <div \n                class=\"cre8-c-tooltip__trigger\"\n                tabindex=\"0\"\n                @focus=${this.toggleActive}\n                @keydown=${this._handleKeydown}\n            >\n                ${this.svg\n        ? html`\n            <slot name=\"trigger\">\n                <cre8-icon svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" \n                flip=\"${this.iconFlipDirection}\" aria-hidden=\"true\"></cre8-icon>\n            </slot>`\n        : html`<slot name=\"trigger\"></slot>`\n}\n            </div>\n            <dialog\n                id=${ifDefined(this._uniqueId)}\n                aria-labelledby=${this.ariaDescribes}\n                class=\"cre8-c-tooltip__panel\"\n                role=\"tooltip\">\n                <slot></slot>\n            </dialog>\n        </div>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tooltip') === undefined) {\n    customElements.define('cre8-tooltip', Cre8Tooltip);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tooltip': Cre8Tooltip;\n  }\n}\n\nexport default Cre8Tooltip;\n"]}

package/lib/components/utils/light-children.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Build a component's light-DOM children from a data property.
+ *
+ * Compound families in this system are composed by hand: a table is a table
+ * wrapping a header wrapping a row wrapping cells, five levels deep, and
+ * `docs/kb/01-components.md` warns that skipping a level renders but is subtly
+ * wrong. That is a lot of ceremony for "here are my columns and rows", and it is
+ * the single most error-prone thing an agent generates.
+ *
+ * So the flattened props build that composition for you. They build it in the
+ * **light DOM**, not the shadow root, and that is the whole trick: the result is
+ * byte-for-byte the DOM you would have written by hand, so every existing
+ * `::slotted()` rule, every behaviour, and every consumer keeps working. The
+ * flattened API is sugar, never a second rendering path.
+ *
+ * Elements this creates are marked, and only marked elements are ever touched —
+ * hand-written children are left exactly where they are.
+ */
+/** Marks an element as owned by a data property rather than by the author. */
+export declare const GENERATED_ATTR = "data-cre8-generated";
+export interface ChildSpec {
+    tag: string;
+    /** Set as properties when the value is not a string, as attributes otherwise. */
+    props?: Record<string, unknown>;
+    /** Text content. Mutually exclusive with `children`. */
+    text?: string;
+    /** `slot` attribute to place this child in a named slot of its parent. */
+    slot?: string;
+    children?: ChildSpec[];
+}
+/**
+ * Make `host`'s generated light children match `specs`.
+ *
+ * Passing `null` removes them, which is how clearing a data property hands the
+ * component back to hand-written children.
+ */
+export declare function syncLightChildren(host: HTMLElement, specs: ChildSpec[] | null | undefined): void;
+/** True when the author has put their own children in — data props defer to none. */
+export declare function hasAuthoredChildren(host: HTMLElement): boolean;
+//# sourceMappingURL=light-children.d.ts.map

package/lib/components/utils/light-children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-children.d.ts","sourceRoot":"","sources":["../../../components/utils/light-children.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,8EAA8E;AAC9E,eAAO,MAAM,cAAc,wBAAwB,CAAC;AAEpD,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;CACxB;AAgED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAIhG;AAED,qFAAqF;AACrF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAE9D"}

package/lib/components/utils/light-children.js

@@ -0,0 +1,100 @@
+/**
+ * Build a component's light-DOM children from a data property.
+ *
+ * Compound families in this system are composed by hand: a table is a table
+ * wrapping a header wrapping a row wrapping cells, five levels deep, and
+ * `docs/kb/01-components.md` warns that skipping a level renders but is subtly
+ * wrong. That is a lot of ceremony for "here are my columns and rows", and it is
+ * the single most error-prone thing an agent generates.
+ *
+ * So the flattened props build that composition for you. They build it in the
+ * **light DOM**, not the shadow root, and that is the whole trick: the result is
+ * byte-for-byte the DOM you would have written by hand, so every existing
+ * `::slotted()` rule, every behaviour, and every consumer keeps working. The
+ * flattened API is sugar, never a second rendering path.
+ *
+ * Elements this creates are marked, and only marked elements are ever touched —
+ * hand-written children are left exactly where they are.
+ */
+/** Marks an element as owned by a data property rather than by the author. */
+export const GENERATED_ATTR = 'data-cre8-generated';
+function applyProps(el, props = {}) {
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined || value === null || value === false) {
+            el.removeAttribute(key);
+            continue;
+        }
+        if (value === true) {
+            el.setAttribute(key, '');
+            continue;
+        }
+        if (typeof value === 'object') {
+            // Arrays and objects cannot survive an attribute; hand them over directly.
+            el[key] = value;
+            continue;
+        }
+        el.setAttribute(key, String(value));
+    }
+}
+/**
+ * Reconcile in place rather than rebuilding.
+ *
+ * Rebuilding would be three lines shorter and would throw away element identity
+ * on every data change — losing focus, scroll position, and any animation in
+ * flight, which is exactly what a live-updating table must not do. So an
+ * existing generated element whose tag still matches is reused and updated.
+ */
+function reconcile(parent, specs, doc) {
+    const generated = [...parent.children].filter((child) => child.hasAttribute(GENERATED_ATTR));
+    specs.forEach((spec, index) => {
+        let el = generated[index];
+        if (!el || el.tagName.toLowerCase() !== spec.tag.toLowerCase()) {
+            const created = doc.createElement(spec.tag);
+            created.setAttribute(GENERATED_ATTR, '');
+            if (el)
+                parent.replaceChild(created, el);
+            else
+                parent.appendChild(created);
+            el = created;
+        }
+        // Clear props this element no longer has, so a removed value does not stick.
+        for (const attr of [...el.attributes]) {
+            if (attr.name === GENERATED_ATTR || attr.name === 'slot')
+                continue;
+            if (!spec.props || !(attr.name in spec.props))
+                el.removeAttribute(attr.name);
+        }
+        applyProps(el, spec.props);
+        if (spec.slot)
+            el.setAttribute('slot', spec.slot);
+        else
+            el.removeAttribute('slot');
+        if (spec.children) {
+            reconcile(el, spec.children, doc);
+        }
+        else if (spec.text !== undefined) {
+            if (el.textContent !== spec.text)
+                el.textContent = spec.text;
+        }
+    });
+    // Anything generated beyond the new length is gone.
+    for (let i = specs.length; i < generated.length; i++)
+        generated[i].remove();
+}
+/**
+ * Make `host`'s generated light children match `specs`.
+ *
+ * Passing `null` removes them, which is how clearing a data property hands the
+ * component back to hand-written children.
+ */
+export function syncLightChildren(host, specs) {
+    const doc = host.ownerDocument;
+    if (!doc)
+        return;
+    reconcile(host, specs ?? [], doc);
+}
+/** True when the author has put their own children in — data props defer to none. */
+export function hasAuthoredChildren(host) {
+    return [...host.children].some((child) => !child.hasAttribute(GENERATED_ATTR));
+}
+//# sourceMappingURL=light-children.js.map

package/lib/components/utils/light-children.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-children.js","sourceRoot":"","sources":["../../../components/utils/light-children.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Build a component's light-DOM children from a data property.\n *\n * Compound families in this system are composed by hand: a table is a table\n * wrapping a header wrapping a row wrapping cells, five levels deep, and\n * `docs/kb/01-components.md` warns that skipping a level renders but is subtly\n * wrong. That is a lot of ceremony for \"here are my columns and rows\", and it is\n * the single most error-prone thing an agent generates.\n *\n * So the flattened props build that composition for you. They build it in the\n * **light DOM**, not the shadow root, and that is the whole trick: the result is\n * byte-for-byte the DOM you would have written by hand, so every existing\n * `::slotted()` rule, every behaviour, and every consumer keeps working. The\n * flattened API is sugar, never a second rendering path.\n *\n * Elements this creates are marked, and only marked elements are ever touched —\n * hand-written children are left exactly where they are.\n */\n\n/** Marks an element as owned by a data property rather than by the author. */\nexport const GENERATED_ATTR = 'data-cre8-generated';\n\nexport interface ChildSpec {\n  tag: string;\n  /** Set as properties when the value is not a string, as attributes otherwise. */\n  props?: Record<string, unknown>;\n  /** Text content. Mutually exclusive with `children`. */\n  text?: string;\n  /** `slot` attribute to place this child in a named slot of its parent. */\n  slot?: string;\n  children?: ChildSpec[];\n}\n\nfunction applyProps(el: HTMLElement, props: Record<string, unknown> = {}): void {\n  for (const [key, value] of Object.entries(props)) {\n    if (value === undefined || value === null || value === false) {\n      el.removeAttribute(key);\n      continue;\n    }\n    if (value === true) {\n      el.setAttribute(key, '');\n      continue;\n    }\n    if (typeof value === 'object') {\n      // Arrays and objects cannot survive an attribute; hand them over directly.\n      (el as unknown as Record<string, unknown>)[key] = value;\n      continue;\n    }\n    el.setAttribute(key, String(value));\n  }\n}\n\n/**\n * Reconcile in place rather than rebuilding.\n *\n * Rebuilding would be three lines shorter and would throw away element identity\n * on every data change — losing focus, scroll position, and any animation in\n * flight, which is exactly what a live-updating table must not do. So an\n * existing generated element whose tag still matches is reused and updated.\n */\nfunction reconcile(parent: Element, specs: ChildSpec[], doc: Document): void {\n  const generated = [...parent.children].filter((child) => child.hasAttribute(GENERATED_ATTR));\n\n  specs.forEach((spec, index) => {\n    let el = generated[index] as HTMLElement | undefined;\n\n    if (!el || el.tagName.toLowerCase() !== spec.tag.toLowerCase()) {\n      const created = doc.createElement(spec.tag);\n      created.setAttribute(GENERATED_ATTR, '');\n      if (el) parent.replaceChild(created, el);\n      else parent.appendChild(created);\n      el = created;\n    }\n\n    // Clear props this element no longer has, so a removed value does not stick.\n    for (const attr of [...el.attributes]) {\n      if (attr.name === GENERATED_ATTR || attr.name === 'slot') continue;\n      if (!spec.props || !(attr.name in spec.props)) el.removeAttribute(attr.name);\n    }\n    applyProps(el, spec.props);\n\n    if (spec.slot) el.setAttribute('slot', spec.slot);\n    else el.removeAttribute('slot');\n\n    if (spec.children) {\n      reconcile(el, spec.children, doc);\n    } else if (spec.text !== undefined) {\n      if (el.textContent !== spec.text) el.textContent = spec.text;\n    }\n  });\n\n  // Anything generated beyond the new length is gone.\n  for (let i = specs.length; i < generated.length; i++) generated[i].remove();\n}\n\n/**\n * Make `host`'s generated light children match `specs`.\n *\n * Passing `null` removes them, which is how clearing a data property hands the\n * component back to hand-written children.\n */\nexport function syncLightChildren(host: HTMLElement, specs: ChildSpec[] | null | undefined): void {\n  const doc = host.ownerDocument;\n  if (!doc) return;\n  reconcile(host, specs ?? [], doc);\n}\n\n/** True when the author has put their own children in — data props defer to none. */\nexport function hasAuthoredChildren(host: HTMLElement): boolean {\n  return [...host.children].some((child) => !child.hasAttribute(GENERATED_ATTR));\n}\n"]}

package/lib/design-tokens/brands/cre8/css/tokens_brand.css

@@ -1,5 +1,5 @@
 /**
- * evernorth: all tokens
+ * cre8: all tokens
  */
 
 :root {

package/lib/directives/if-truthy.d.ts

@@ -2,7 +2,7 @@ import { noChange } from 'lit';
 import { Directive, PartInfo, AttributePart, DirectiveParameters } from 'lit-html/directive.js';
 declare class IfTruthyDirective extends Directive {
     constructor(partInfo: PartInfo);
-    update(part: AttributePart, [value]: DirectiveParameters<this>): typeof noChange | string[];
+    update(part: AttributePart, [value]: DirectiveParameters<this>): string[] | typeof noChange;
     render([value]: string[]): string;
 }
 export declare const ifTruthy: (values_0: string[]) => import("lit-html/directive").DirectiveResult<typeof IfTruthyDirective>;

package/lib/icons/cre8-icons.svg

@@ -104,7 +104,7 @@
 <path d="M12 1.875C9.99747 1.875 8.0399 2.46882 6.37486 3.58137C4.70981 4.69392 3.41206 6.27523 2.64572 8.12533C1.87939 9.97543 1.67888 12.0112 2.06955 13.9753C2.46023 15.9393 3.42454 17.7435 4.84055 19.1595C6.25656 20.5755 8.06066 21.5398 10.0247 21.9305C11.9888 22.3211 14.0246 22.1206 15.8747 21.3543C17.7248 20.5879 19.3061 19.2902 20.4186 17.6251C21.5312 15.9601 22.125 14.0025 22.125 12C22.122 9.3156 21.0543 6.74199 19.1562 4.84383C17.258 2.94567 14.6844 1.87798 12 1.875ZM12 19.875C10.4425 19.875 8.91993 19.4131 7.62489 18.5478C6.32985 17.6825 5.32049 16.4526 4.72445 15.0136C4.12841 13.5747 3.97246 11.9913 4.27632 10.4637C4.58018 8.93606 5.3302 7.53287 6.43154 6.43153C7.53288 5.3302 8.93607 4.58017 10.4637 4.27632C11.9913 3.97246 13.5747 4.12841 15.0136 4.72445C16.4526 5.32049 17.6825 6.32985 18.5478 7.62488C19.4131 8.91992 19.875 10.4425 19.875 12C19.8728 14.0879 19.0424 16.0896 17.566 17.566C16.0896 19.0424 14.0879 19.8728 12 19.875ZM10.875 12.375V7.5C10.875 7.20163 10.9935 6.91548 11.2045 6.7045C11.4155 6.49353 11.7016 6.375 12 6.375C12.2984 6.375 12.5845 6.49353 12.7955 6.7045C13.0065 6.91548 13.125 7.20163 13.125 7.5V12.375C13.125 12.6734 13.0065 12.9595 12.7955 13.1705C12.5845 13.3815 12.2984 13.5 12 13.5C11.7016 13.5 11.4155 13.3815 11.2045 13.1705C10.9935 12.9595 10.875 12.6734 10.875 12.375ZM13.5 16.125C13.5 16.4217 13.412 16.7117 13.2472 16.9584C13.0824 17.205 12.8481 17.3973 12.574 17.5108C12.2999 17.6244 11.9983 17.6541 11.7074 17.5962C11.4164 17.5383 11.1491 17.3954 10.9393 17.1857C10.7296 16.9759 10.5867 16.7086 10.5288 16.4176C10.4709 16.1267 10.5007 15.8251 10.6142 15.551C10.7277 15.2769 10.92 15.0426 11.1666 14.8778C11.4133 14.713 11.7033 14.625 12 14.625C12.3978 14.625 12.7794 14.783 13.0607 15.0643C13.342 15.3456 13.5 15.7272 13.5 16.125Z"/>
 
 </symbol>
-<symbol id="express-scripts" viewBox="0 0 45 24">
+<symbol id="pharmacy" viewBox="0 0 45 24">
 <path d="M6.5 6.03516V18.0139H15.0511V16.3152H8.33659V12.8007H13.817V11.1459H8.33659V7.68992H14.8014V6.03516H6.5Z"/>
 <path d="M31.2126 7.69285H33.8132C35.6351 7.69285 36.6489 8.5422 36.6489 10.0652C36.6489 11.6614 35.6939 12.5107 33.9014 12.5107H31.2126V7.69285ZM36.4285 6.53598C35.7086 6.19916 34.8564 6.02344 33.8132 6.02344H29.3613V18.0168H31.2126V14.1508H33.9161C35.4735 14.1508 36.6636 13.7701 37.4423 12.9793C38.1476 12.2764 38.5002 11.2953 38.5002 10.0505C38.5002 8.42505 37.7802 7.19495 36.4285 6.53598Z"/>
 <path d="M26.7284 6.00542L22.6974 10.0231L24.3596 11.6798L28.3907 7.66218L26.7284 6.00542Z"/>

package/lib/light-children-TlEXev5S.js

@@ -0,0 +1,39 @@
+const a = "data-cre8-generated";
+function s(n, l = {}) {
+  for (const [i, o] of Object.entries(l)) {
+    if (o == null || o === !1) {
+      n.removeAttribute(i);
+      continue;
+    }
+    if (o === !0) {
+      n.setAttribute(i, "");
+      continue;
+    }
+    if (typeof o == "object") {
+      n[i] = o;
+      continue;
+    }
+    n.setAttribute(i, String(o));
+  }
+}
+function f(n, l, i) {
+  const o = [...n.children].filter((t) => t.hasAttribute(a));
+  l.forEach((t, u) => {
+    let e = o[u];
+    if (!e || e.tagName.toLowerCase() !== t.tag.toLowerCase()) {
+      const r = i.createElement(t.tag);
+      r.setAttribute(a, ""), e ? n.replaceChild(r, e) : n.appendChild(r), e = r;
+    }
+    for (const r of [...e.attributes])
+      r.name === a || r.name === "slot" || (!t.props || !(r.name in t.props)) && e.removeAttribute(r.name);
+    s(e, t.props), t.slot ? e.setAttribute("slot", t.slot) : e.removeAttribute("slot"), t.children ? f(e, t.children, i) : t.text !== void 0 && e.textContent !== t.text && (e.textContent = t.text);
+  });
+  for (let t = l.length; t < o.length; t++) o[t].remove();
+}
+function c(n, l) {
+  const i = n.ownerDocument;
+  i && f(n, l ?? [], i);
+}
+export {
+  c as s
+};

package/lib/scripts/generate-react-wrappers.d.ts

@@ -1,2 +1,9 @@
-export {};
+/**
+ * The flattened data type a prop refers to, if any — `Cre8TagData[]` → `Cre8TagData`.
+ *
+ * The manifest writes an optional property's type as `Cre8TagData[] | undefined`,
+ * so the `| undefined` has to come off before matching. Missing that is why the
+ * first cut of this silently produced `any` for every one of them.
+ */
+export declare function flattenedTypeOf(type: string | undefined): string | null;
 //# sourceMappingURL=generate-react-wrappers.d.ts.map

package/lib/scripts/generate-react-wrappers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-react-wrappers.d.ts","sourceRoot":"","sources":["../../scripts/generate-react-wrappers.ts"],"names":[],"mappings":""}
+{"version":3,"file":"generate-react-wrappers.d.ts","sourceRoot":"","sources":["../../scripts/generate-react-wrappers.ts"],"names":[],"mappings":"AAwGA;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAQvE"}

package/lib/scripts/generate-react-wrappers.js

@@ -36,9 +36,44 @@ function toPascalCase(str) {
         .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
         .join('');
 }
+/**
+ * Types the wrapper re-exports rather than flattening to `any`.
+ *
+ * The flattened compound APIs (`columns`, `rows`, `items`, `steps`, `tags`) are
+ * the whole reason a React consumer would reach for them, and a prop typed
+ * `any` gives no autocomplete and catches no mistakes — which for a data-driven
+ * table is most of the value. These interfaces are exported from the component
+ * module the element class already comes from, so importing them is free.
+ */
+const FLATTENED_DATA_TYPES = new Set([
+    'Cre8TableColumn', 'Cre8TableRowData', 'Cre8TabItemData', 'Cre8AccordionItemData',
+    'Cre8ListItemData', 'Cre8LinkData', 'Cre8BreadcrumbData', 'Cre8TagData',
+    'Cre8CheckboxItemData', 'Cre8RadioItemData', 'Cre8ProgressStepData', 'Cre8DropdownItemData',
+]);
+/**
+ * The flattened data type a prop refers to, if any — `Cre8TagData[]` → `Cre8TagData`.
+ *
+ * The manifest writes an optional property's type as `Cre8TagData[] | undefined`,
+ * so the `| undefined` has to come off before matching. Missing that is why the
+ * first cut of this silently produced `any` for every one of them.
+ */
+export function flattenedTypeOf(type) {
+    if (!type)
+        return null;
+    const bare = type
+        .split('|')
+        .map((part) => part.trim())
+        .find((part) => part !== 'undefined' && part !== 'null');
+    const match = bare ? /^(Cre8[A-Za-z]+)\[\]$/.exec(bare) : null;
+    return match && FLATTENED_DATA_TYPES.has(match[1]) ? match[1] : null;
+}
 function getReactPropType(type) {
     if (!type)
         return 'any';
+    // Keep the flattened data types intact; they are the point of the React layer.
+    const flattened = flattenedTypeOf(type);
+    if (flattened)
+        return `${flattened}[]`;
     // Handle truncated types (e.g., "... 5 more ...")
     if (type.includes('...') && type.includes('more')) {
         return 'string';
@@ -128,10 +163,19 @@ function generateReactWrapper(tag) {
         }
     }
     const allProps = [...propsLines, ...eventProps].join('\n');
+    const dataTypes = [
+        ...new Set((tag.attributes ?? [])
+            .map((attr) => flattenedTypeOf(attr.type))
+            .filter((name) => Boolean(name))),
+    ];
+    const dataTypeImport = dataTypes.length
+        ? `\nexport type { ${dataTypes.join(', ')} } from '@tmorrow/cre8-wc/lib/components/${importPath}';`
+        : '';
     // Generate the component
     return `import { createComponent } from '@lit/react';
 import { ${elementClassName} as ${elementClassName}Element } from '@tmorrow/cre8-wc/lib/components/${importPath}';
-import React from 'react';
+import type { ${dataTypes.join(', ')} } from '@tmorrow/cre8-wc/lib/components/${importPath}';
+import React from 'react';${dataTypeImport}`.replace(dataTypes.length ? '' : `import type {  } from '@tmorrow/cre8-wc/lib/components/${importPath}';\n`, '') + `
 
 export interface ${componentName}Props {
 ${allProps}