@tmorrow/cre8-wc 2.0.3 → 2.0.5

package/lib/components/tooltip/tooltip.js

@@ -43,6 +43,9 @@ 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`.
  */
 export class Cre8Tooltip extends Cre8Element {
     constructor() {

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\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  @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 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"]}

package/lib/design-tokens/brands/claude-terracotta/css/tokens_brand.css

@@ -0,0 +1,85 @@
+:root {
+  /* ─── Background & Surface ─────────────────────────────────── */
+  --cre8-background-default:    #FFFFFF;
+  --cre8-background-subtle:     #FBF6F3;
+  --cre8-background-strong:     #F2E8E2;
+  --cre8-background-inverse:    #1A1208;
+  --cre8-surface-default:       #FFFFFF;
+  --cre8-surface-elevated:      #FFFAF8;
+
+  /* ─── Content (text) ───────────────────────────────────────── */
+  --cre8-content-default:       #1A1208;
+  --cre8-content-muted:         #8A7A72;
+  --cre8-content-inverse:       #FFFFFF;
+  --cre8-content-link:          #9E3A15;
+
+  /* ─── Borders ──────────────────────────────────────────────── */
+  --cre8-border-subtle:         #F0E2D9;
+  --cre8-border-default:        #D9C4B8;
+  --cre8-border-strong:         #7A5D52;
+  --cre8-border-inverse:        #B09080;
+
+  /* ─── Accent / Brand ───────────────────────────────────────── */
+  --cre8-accent-primary:        #C85F2F;
+  --cre8-accent-primary-hover:  #A84D24;
+  --cre8-accent-primary-active: #8C3F1C;
+  --cre8-accent-primary-subtle: rgba(200, 95, 47, 0.10);
+  --cre8-accent-secondary:      #1A1208;
+  --cre8-focus-ring:            #C85F2F;
+
+  /* ─── Status (brand-neutral, same as cre8-teal) ────────────── */
+  --cre8-status-info:           #1963E1;
+  --cre8-status-success:        #1E9E5A;
+  --cre8-status-warning:        #E08A1F;
+  --cre8-status-error:          #D02525;
+  --cre8-status-error-dark:     #AA1313;
+  --cre8-status-error-darkest:  #7A0000;
+  --cre8-overlay:               rgba(0, 0, 0, 0.20);
+
+  /* ─── Spacing (same across all skins) ─────────────────────── */
+  --cre8-spacing-2xs:  2px;
+  --cre8-spacing-xs:   4px;
+  --cre8-spacing-sm:   8px;
+  --cre8-spacing-md:   12px;
+  --cre8-spacing-lg:   16px;
+  --cre8-spacing-xl:   24px;
+  --cre8-spacing-2xl:  32px;
+  --cre8-spacing-3xl:  48px;
+  --cre8-spacing-4xl:  64px;
+  --cre8-spacing-5xl:  96px;
+
+  /* ─── Radius ───────────────────────────────────────────────── */
+  --cre8-radius-none:  0px;
+  --cre8-radius-sm:    4px;
+  --cre8-radius-md:    8px;
+  --cre8-radius-lg:    12px;
+  --cre8-radius-xl:    16px;
+  --cre8-radius-2xl:   24px;
+  --cre8-radius-full:  9999px;
+
+  /* ─── Typography — Font Size ───────────────────────────────── */
+  --cre8-font-size-xs:   12px;
+  --cre8-font-size-sm:   14px;
+  --cre8-font-size-md:   16px;
+  --cre8-font-size-lg:   18px;
+  --cre8-font-size-xl:   20px;
+  --cre8-font-size-2xl:  24px;
+  --cre8-font-size-3xl:  32px;
+  --cre8-font-size-4xl:  40px;
+  --cre8-font-size-5xl:  56px;
+  --cre8-font-size-6xl:  72px;
+
+  /* ─── Typography — Font Weight ─────────────────────────────── */
+  --cre8-font-weight-regular:   400;
+  --cre8-font-weight-medium:    500;
+  --cre8-font-weight-semibold:  600;
+  --cre8-font-weight-bold:      700;
+
+  /* ─── Typography — Font Family ─────────────────────────────── */
+  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;
+  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+  /* ─── Typography — Line Height ─────────────────────────────── */
+  --cre8-line-height-tight:  1.2;
+  --cre8-line-height-normal: 1.5;
+}

package/lib/design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.css

@@ -0,0 +1 @@
+@import './tokens_brand.css';

package/lib/design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.module.d.ts

@@ -0,0 +1,3 @@
+declare const claudeTerracotta: import("lit").CSSResult;
+export default claudeTerracotta;
+//# sourceMappingURL=tokens_claude-terracotta.module.d.ts.map

package/lib/design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens_claude-terracotta.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,yBAsFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.module.js

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+const claudeTerracotta = css `
+:root {
+  /* ─── Background & Surface ─────────────────────────────────── */
+  --cre8-background-default:    #FFFFFF;
+  --cre8-background-subtle:     #FBF6F3;
+  --cre8-background-strong:     #F2E8E2;
+  --cre8-background-inverse:    #1A1208;
+  --cre8-surface-default:       #FFFFFF;
+  --cre8-surface-elevated:      #FFFAF8;
+
+  /* ─── Content (text) ───────────────────────────────────────── */
+  --cre8-content-default:       #1A1208;
+  --cre8-content-muted:         #8A7A72;
+  --cre8-content-inverse:       #FFFFFF;
+  --cre8-content-link:          #9E3A15;
+
+  /* ─── Borders ──────────────────────────────────────────────── */
+  --cre8-border-subtle:         #F0E2D9;
+  --cre8-border-default:        #D9C4B8;
+  --cre8-border-strong:         #7A5D52;
+  --cre8-border-inverse:        #B09080;
+
+  /* ─── Accent / Brand ───────────────────────────────────────── */
+  --cre8-accent-primary:        #C85F2F;
+  --cre8-accent-primary-hover:  #A84D24;
+  --cre8-accent-primary-active: #8C3F1C;
+  --cre8-accent-primary-subtle: rgba(200, 95, 47, 0.10);
+  --cre8-accent-secondary:      #1A1208;
+  --cre8-focus-ring:            #C85F2F;
+
+  /* ─── Status (brand-neutral, same as cre8-teal) ────────────── */
+  --cre8-status-info:           #1963E1;
+  --cre8-status-success:        #1E9E5A;
+  --cre8-status-warning:        #E08A1F;
+  --cre8-status-error:          #D02525;
+  --cre8-status-error-dark:     #AA1313;
+  --cre8-status-error-darkest:  #7A0000;
+  --cre8-overlay:               rgba(0, 0, 0, 0.20);
+
+  /* ─── Spacing (same across all skins) ─────────────────────── */
+  --cre8-spacing-2xs:  2px;
+  --cre8-spacing-xs:   4px;
+  --cre8-spacing-sm:   8px;
+  --cre8-spacing-md:   12px;
+  --cre8-spacing-lg:   16px;
+  --cre8-spacing-xl:   24px;
+  --cre8-spacing-2xl:  32px;
+  --cre8-spacing-3xl:  48px;
+  --cre8-spacing-4xl:  64px;
+  --cre8-spacing-5xl:  96px;
+
+  /* ─── Radius ───────────────────────────────────────────────── */
+  --cre8-radius-none:  0px;
+  --cre8-radius-sm:    4px;
+  --cre8-radius-md:    8px;
+  --cre8-radius-lg:    12px;
+  --cre8-radius-xl:    16px;
+  --cre8-radius-2xl:   24px;
+  --cre8-radius-full:  9999px;
+
+  /* ─── Typography — Font Size ───────────────────────────────── */
+  --cre8-font-size-xs:   12px;
+  --cre8-font-size-sm:   14px;
+  --cre8-font-size-md:   16px;
+  --cre8-font-size-lg:   18px;
+  --cre8-font-size-xl:   20px;
+  --cre8-font-size-2xl:  24px;
+  --cre8-font-size-3xl:  32px;
+  --cre8-font-size-4xl:  40px;
+  --cre8-font-size-5xl:  56px;
+  --cre8-font-size-6xl:  72px;
+
+  /* ─── Typography — Font Weight ─────────────────────────────── */
+  --cre8-font-weight-regular:   400;
+  --cre8-font-weight-medium:    500;
+  --cre8-font-weight-semibold:  600;
+  --cre8-font-weight-bold:      700;
+
+  /* ─── Typography — Font Family ─────────────────────────────── */
+  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;
+  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+  /* ─── Typography — Line Height ─────────────────────────────── */
+  --cre8-line-height-tight:  1.2;
+  --cre8-line-height-normal: 1.5;
+}
+`;
+export default claudeTerracotta;
+//# sourceMappingURL=tokens_claude-terracotta.module.js.map

package/lib/design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens_claude-terracotta.module.js","sourceRoot":"","sources":["../../../../../design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsF3B,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst claudeTerracotta = css`\n:root {\n  /* ─── Background & Surface ─────────────────────────────────── */\n  --cre8-background-default:    #FFFFFF;\n  --cre8-background-subtle:     #FBF6F3;\n  --cre8-background-strong:     #F2E8E2;\n  --cre8-background-inverse:    #1A1208;\n  --cre8-surface-default:       #FFFFFF;\n  --cre8-surface-elevated:      #FFFAF8;\n\n  /* ─── Content (text) ───────────────────────────────────────── */\n  --cre8-content-default:       #1A1208;\n  --cre8-content-muted:         #8A7A72;\n  --cre8-content-inverse:       #FFFFFF;\n  --cre8-content-link:          #9E3A15;\n\n  /* ─── Borders ──────────────────────────────────────────────── */\n  --cre8-border-subtle:         #F0E2D9;\n  --cre8-border-default:        #D9C4B8;\n  --cre8-border-strong:         #7A5D52;\n  --cre8-border-inverse:        #B09080;\n\n  /* ─── Accent / Brand ───────────────────────────────────────── */\n  --cre8-accent-primary:        #C85F2F;\n  --cre8-accent-primary-hover:  #A84D24;\n  --cre8-accent-primary-active: #8C3F1C;\n  --cre8-accent-primary-subtle: rgba(200, 95, 47, 0.10);\n  --cre8-accent-secondary:      #1A1208;\n  --cre8-focus-ring:            #C85F2F;\n\n  /* ─── Status (brand-neutral, same as cre8-teal) ────────────── */\n  --cre8-status-info:           #1963E1;\n  --cre8-status-success:        #1E9E5A;\n  --cre8-status-warning:        #E08A1F;\n  --cre8-status-error:          #D02525;\n  --cre8-status-error-dark:     #AA1313;\n  --cre8-status-error-darkest:  #7A0000;\n  --cre8-overlay:               rgba(0, 0, 0, 0.20);\n\n  /* ─── Spacing (same across all skins) ─────────────────────── */\n  --cre8-spacing-2xs:  2px;\n  --cre8-spacing-xs:   4px;\n  --cre8-spacing-sm:   8px;\n  --cre8-spacing-md:   12px;\n  --cre8-spacing-lg:   16px;\n  --cre8-spacing-xl:   24px;\n  --cre8-spacing-2xl:  32px;\n  --cre8-spacing-3xl:  48px;\n  --cre8-spacing-4xl:  64px;\n  --cre8-spacing-5xl:  96px;\n\n  /* ─── Radius ───────────────────────────────────────────────── */\n  --cre8-radius-none:  0px;\n  --cre8-radius-sm:    4px;\n  --cre8-radius-md:    8px;\n  --cre8-radius-lg:    12px;\n  --cre8-radius-xl:    16px;\n  --cre8-radius-2xl:   24px;\n  --cre8-radius-full:  9999px;\n\n  /* ─── Typography — Font Size ───────────────────────────────── */\n  --cre8-font-size-xs:   12px;\n  --cre8-font-size-sm:   14px;\n  --cre8-font-size-md:   16px;\n  --cre8-font-size-lg:   18px;\n  --cre8-font-size-xl:   20px;\n  --cre8-font-size-2xl:  24px;\n  --cre8-font-size-3xl:  32px;\n  --cre8-font-size-4xl:  40px;\n  --cre8-font-size-5xl:  56px;\n  --cre8-font-size-6xl:  72px;\n\n  /* ─── Typography — Font Weight ─────────────────────────────── */\n  --cre8-font-weight-regular:   400;\n  --cre8-font-weight-medium:    500;\n  --cre8-font-weight-semibold:  600;\n  --cre8-font-weight-bold:      700;\n\n  /* ─── Typography — Font Family ─────────────────────────────── */\n  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;\n  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;\n\n  /* ─── Typography — Line Height ─────────────────────────────── */\n  --cre8-line-height-tight:  1.2;\n  --cre8-line-height-normal: 1.5;\n}\n`;\n\nexport default claudeTerracotta;\n"]}

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

@@ -430,6 +430,7 @@
   --cre8-text-decoration-underline: underline;
   --cre8-paragraph-indent-0: 0px;
   --cre8-border-radius-small: 12px;
+  --cre8-border-radius-checkbox: 4px;
   --cre8-border-radius-default: 900px;
   --cre8-border-radius-large: 24px;
   --cre8-border-radius-round: 900px;

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

@@ -0,0 +1,87 @@
+/* packages/cre8-wc/design-tokens/brands/cre8-teal/css/tokens_brand.css */
+
+:root {
+  /* ─── Background & Surface ─────────────────────────────────── */
+  --cre8-background-default:    #FFFFFF;
+  --cre8-background-subtle:     #F5F5F5;
+  --cre8-background-strong:     #EAEAEA;
+  --cre8-background-inverse:    #1A1A1A;
+  --cre8-surface-default:       #FFFFFF;
+  --cre8-surface-elevated:      #FFFFFF;
+
+  /* ─── Content (text) ───────────────────────────────────────── */
+  --cre8-content-default:       #1A1A1A;
+  --cre8-content-muted:         #949494;
+  --cre8-content-inverse:       #FFFFFF;
+  --cre8-content-link:          #1963E1;
+
+  /* ─── Borders ──────────────────────────────────────────────── */
+  --cre8-border-subtle:         #EAEAEA;
+  --cre8-border-default:        #D5D5D5;
+  --cre8-border-strong:         #6C6C6C;
+  --cre8-border-inverse:        #ABABAB;
+
+  /* ─── Accent / Brand ───────────────────────────────────────── */
+  --cre8-accent-primary:        #0EA5A8;
+  --cre8-accent-primary-hover:  #0B8588;
+  --cre8-accent-primary-active: #086E70;
+  --cre8-accent-primary-subtle: rgba(14, 165, 168, 0.10);
+  --cre8-accent-secondary:      #1A1A1A;
+  --cre8-focus-ring:            #0EA5A8;
+
+  /* ─── Status ───────────────────────────────────────────────── */
+  --cre8-status-info:           #1963E1;
+  --cre8-status-success:        #1E9E5A;
+  --cre8-status-warning:        #E08A1F;
+  --cre8-status-error:          #D02525;
+  --cre8-status-error-dark:     #AA1313;
+  --cre8-status-error-darkest:  #7A0000;
+  --cre8-overlay:               rgba(0, 0, 0, 0.20);
+
+  /* ─── Spacing ──────────────────────────────────────────────── */
+  --cre8-spacing-2xs:  2px;
+  --cre8-spacing-xs:   4px;
+  --cre8-spacing-sm:   8px;
+  --cre8-spacing-md:   12px;
+  --cre8-spacing-lg:   16px;
+  --cre8-spacing-xl:   24px;
+  --cre8-spacing-2xl:  32px;
+  --cre8-spacing-3xl:  48px;
+  --cre8-spacing-4xl:  64px;
+  --cre8-spacing-5xl:  96px;
+
+  /* ─── Radius ───────────────────────────────────────────────── */
+  --cre8-radius-none:  0px;
+  --cre8-radius-sm:    4px;
+  --cre8-radius-md:    8px;
+  --cre8-radius-lg:    12px;
+  --cre8-radius-xl:    16px;
+  --cre8-radius-2xl:   24px;
+  --cre8-radius-full:  9999px;
+
+  /* ─── Typography — Font Size ───────────────────────────────── */
+  --cre8-font-size-xs:   12px;
+  --cre8-font-size-sm:   14px;
+  --cre8-font-size-md:   16px;
+  --cre8-font-size-lg:   18px;
+  --cre8-font-size-xl:   20px;
+  --cre8-font-size-2xl:  24px;
+  --cre8-font-size-3xl:  32px;
+  --cre8-font-size-4xl:  40px;
+  --cre8-font-size-5xl:  56px;
+  --cre8-font-size-6xl:  72px;
+
+  /* ─── Typography — Font Weight ─────────────────────────────── */
+  --cre8-font-weight-regular:   400;
+  --cre8-font-weight-medium:    500;
+  --cre8-font-weight-semibold:  600;
+  --cre8-font-weight-bold:      700;
+
+  /* ─── Typography — Font Family ─────────────────────────────── */
+  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;
+  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+  /* ─── Typography — Line Height ─────────────────────────────── */
+  --cre8-line-height-tight:  1.2;
+  --cre8-line-height-normal: 1.5;
+}

package/lib/design-tokens/brands/cre8-teal/css/tokens_cre8-teal.css

@@ -0,0 +1 @@
+@import './tokens_brand.css';

package/lib/design-tokens/brands/cre8-teal/css/tokens_cre8-teal.module.d.ts

@@ -0,0 +1,3 @@
+declare const cre8Teal: import("lit").CSSResult;
+export default cre8Teal;
+//# sourceMappingURL=tokens_cre8-teal.module.d.ts.map

package/lib/design-tokens/brands/cre8-teal/css/tokens_cre8-teal.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens_cre8-teal.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/cre8-teal/css/tokens_cre8-teal.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,QAAQ,yBAsFb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/design-tokens/brands/cre8-teal/css/tokens_cre8-teal.module.js

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+const cre8Teal = css `
+:root {
+  /* ─── Background & Surface ─────────────────────────────────── */
+  --cre8-background-default:    #FFFFFF;
+  --cre8-background-subtle:     #F5F5F5;
+  --cre8-background-strong:     #EAEAEA;
+  --cre8-background-inverse:    #1A1A1A;
+  --cre8-surface-default:       #FFFFFF;
+  --cre8-surface-elevated:      #FFFFFF;
+
+  /* ─── Content (text) ───────────────────────────────────────── */
+  --cre8-content-default:       #1A1A1A;
+  --cre8-content-muted:         #949494;
+  --cre8-content-inverse:       #FFFFFF;
+  --cre8-content-link:          #1963E1;
+
+  /* ─── Borders ──────────────────────────────────────────────── */
+  --cre8-border-subtle:         #EAEAEA;
+  --cre8-border-default:        #D5D5D5;
+  --cre8-border-strong:         #6C6C6C;
+  --cre8-border-inverse:        #ABABAB;
+
+  /* ─── Accent / Brand ───────────────────────────────────────── */
+  --cre8-accent-primary:        #0EA5A8;
+  --cre8-accent-primary-hover:  #0B8588;
+  --cre8-accent-primary-active: #086E70;
+  --cre8-accent-primary-subtle: rgba(14, 165, 168, 0.10);
+  --cre8-accent-secondary:      #1A1A1A;
+  --cre8-focus-ring:            #0EA5A8;
+
+  /* ─── Status ───────────────────────────────────────────────── */
+  --cre8-status-info:           #1963E1;
+  --cre8-status-success:        #1E9E5A;
+  --cre8-status-warning:        #E08A1F;
+  --cre8-status-error:          #D02525;
+  --cre8-status-error-dark:     #AA1313;
+  --cre8-status-error-darkest:  #7A0000;
+  --cre8-overlay:               rgba(0, 0, 0, 0.20);
+
+  /* ─── Spacing ──────────────────────────────────────────────── */
+  --cre8-spacing-2xs:  2px;
+  --cre8-spacing-xs:   4px;
+  --cre8-spacing-sm:   8px;
+  --cre8-spacing-md:   12px;
+  --cre8-spacing-lg:   16px;
+  --cre8-spacing-xl:   24px;
+  --cre8-spacing-2xl:  32px;
+  --cre8-spacing-3xl:  48px;
+  --cre8-spacing-4xl:  64px;
+  --cre8-spacing-5xl:  96px;
+
+  /* ─── Radius ───────────────────────────────────────────────── */
+  --cre8-radius-none:  0px;
+  --cre8-radius-sm:    4px;
+  --cre8-radius-md:    8px;
+  --cre8-radius-lg:    12px;
+  --cre8-radius-xl:    16px;
+  --cre8-radius-2xl:   24px;
+  --cre8-radius-full:  9999px;
+
+  /* ─── Typography — Font Size ───────────────────────────────── */
+  --cre8-font-size-xs:   12px;
+  --cre8-font-size-sm:   14px;
+  --cre8-font-size-md:   16px;
+  --cre8-font-size-lg:   18px;
+  --cre8-font-size-xl:   20px;
+  --cre8-font-size-2xl:  24px;
+  --cre8-font-size-3xl:  32px;
+  --cre8-font-size-4xl:  40px;
+  --cre8-font-size-5xl:  56px;
+  --cre8-font-size-6xl:  72px;
+
+  /* ─── Typography — Font Weight ─────────────────────────────── */
+  --cre8-font-weight-regular:   400;
+  --cre8-font-weight-medium:    500;
+  --cre8-font-weight-semibold:  600;
+  --cre8-font-weight-bold:      700;
+
+  /* ─── Typography — Font Family ─────────────────────────────── */
+  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;
+  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+  /* ─── Typography — Line Height ─────────────────────────────── */
+  --cre8-line-height-tight:  1.2;
+  --cre8-line-height-normal: 1.5;
+}
+`;
+export default cre8Teal;
+//# sourceMappingURL=tokens_cre8-teal.module.js.map

package/lib/design-tokens/brands/cre8-teal/css/tokens_cre8-teal.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens_cre8-teal.module.js","sourceRoot":"","sources":["../../../../../design-tokens/brands/cre8-teal/css/tokens_cre8-teal.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFnB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst cre8Teal = css`\n:root {\n  /* ─── Background & Surface ─────────────────────────────────── */\n  --cre8-background-default:    #FFFFFF;\n  --cre8-background-subtle:     #F5F5F5;\n  --cre8-background-strong:     #EAEAEA;\n  --cre8-background-inverse:    #1A1A1A;\n  --cre8-surface-default:       #FFFFFF;\n  --cre8-surface-elevated:      #FFFFFF;\n\n  /* ─── Content (text) ───────────────────────────────────────── */\n  --cre8-content-default:       #1A1A1A;\n  --cre8-content-muted:         #949494;\n  --cre8-content-inverse:       #FFFFFF;\n  --cre8-content-link:          #1963E1;\n\n  /* ─── Borders ──────────────────────────────────────────────── */\n  --cre8-border-subtle:         #EAEAEA;\n  --cre8-border-default:        #D5D5D5;\n  --cre8-border-strong:         #6C6C6C;\n  --cre8-border-inverse:        #ABABAB;\n\n  /* ─── Accent / Brand ───────────────────────────────────────── */\n  --cre8-accent-primary:        #0EA5A8;\n  --cre8-accent-primary-hover:  #0B8588;\n  --cre8-accent-primary-active: #086E70;\n  --cre8-accent-primary-subtle: rgba(14, 165, 168, 0.10);\n  --cre8-accent-secondary:      #1A1A1A;\n  --cre8-focus-ring:            #0EA5A8;\n\n  /* ─── Status ───────────────────────────────────────────────── */\n  --cre8-status-info:           #1963E1;\n  --cre8-status-success:        #1E9E5A;\n  --cre8-status-warning:        #E08A1F;\n  --cre8-status-error:          #D02525;\n  --cre8-status-error-dark:     #AA1313;\n  --cre8-status-error-darkest:  #7A0000;\n  --cre8-overlay:               rgba(0, 0, 0, 0.20);\n\n  /* ─── Spacing ──────────────────────────────────────────────── */\n  --cre8-spacing-2xs:  2px;\n  --cre8-spacing-xs:   4px;\n  --cre8-spacing-sm:   8px;\n  --cre8-spacing-md:   12px;\n  --cre8-spacing-lg:   16px;\n  --cre8-spacing-xl:   24px;\n  --cre8-spacing-2xl:  32px;\n  --cre8-spacing-3xl:  48px;\n  --cre8-spacing-4xl:  64px;\n  --cre8-spacing-5xl:  96px;\n\n  /* ─── Radius ───────────────────────────────────────────────── */\n  --cre8-radius-none:  0px;\n  --cre8-radius-sm:    4px;\n  --cre8-radius-md:    8px;\n  --cre8-radius-lg:    12px;\n  --cre8-radius-xl:    16px;\n  --cre8-radius-2xl:   24px;\n  --cre8-radius-full:  9999px;\n\n  /* ─── Typography — Font Size ───────────────────────────────── */\n  --cre8-font-size-xs:   12px;\n  --cre8-font-size-sm:   14px;\n  --cre8-font-size-md:   16px;\n  --cre8-font-size-lg:   18px;\n  --cre8-font-size-xl:   20px;\n  --cre8-font-size-2xl:  24px;\n  --cre8-font-size-3xl:  32px;\n  --cre8-font-size-4xl:  40px;\n  --cre8-font-size-5xl:  56px;\n  --cre8-font-size-6xl:  72px;\n\n  /* ─── Typography — Font Weight ─────────────────────────────── */\n  --cre8-font-weight-regular:   400;\n  --cre8-font-weight-medium:    500;\n  --cre8-font-weight-semibold:  600;\n  --cre8-font-weight-bold:      700;\n\n  /* ─── Typography — Font Family ─────────────────────────────── */\n  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;\n  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;\n\n  /* ─── Typography — Line Height ─────────────────────────────── */\n  --cre8-line-height-tight:  1.2;\n  --cre8-line-height-normal: 1.5;\n}\n`;\n\nexport default cre8Teal;\n"]}

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

@@ -0,0 +1,20 @@
+/**
+ * Generate React MCP Manifest from the Web Component MCP manifest.
+ *
+ * Reads mcp-manifest.json (generated by generate-mcp-manifest.ts) and
+ * transforms it into react-manifest.json, which the cre8-mcp server
+ * resolves via `@tmorrow/cre8-wc/react-manifest.json` when tools are
+ * called with `format: "react"`.
+ *
+ * Naming rules intentionally mirror scripts/generate-react-wrappers.ts
+ * and the cre8-mcp server's own web→react tag conversion:
+ *   - cre8-button        → Cre8Button
+ *   - kebab-case attrs   → camelCase props
+ *   - events             → on<EventName> callback props
+ *   - slots              → children?: React.ReactNode
+ *
+ * Run after build:mcp-manifest:
+ *   npx tsx scripts/generate-react-manifest.ts
+ */
+export {};
+//# sourceMappingURL=generate-react-manifest.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generate-react-manifest.d.ts","sourceRoot":"","sources":["../../scripts/generate-react-manifest.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG"}