npm - @limetech/lime-elements - Versions diffs - 37.0.0 → 37.1.0-next.10 - Mend

@limetech/lime-elements 37.0.0 → 37.1.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/dist/collection/components/action-bar/action-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ActionBarItem } from './action-bar.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport { isItem } from './isItem';\n\n/*\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n * @exampleComponent limel-example-action-bar\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @private\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n }}\n >\n <div class=\"items\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n />\n );\n };\n\n private renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting\n );\n\n if (this.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.firstRender = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem)\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item')\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem)\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n"]}
1	+ {"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ActionBarItem } from './action-bar.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport { isItem } from './isItem';\n\n/*\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n * @exampleComponent limel-example-action-bar\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n }}\n >\n <div class=\"items\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n />\n );\n };\n\n private renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting\n );\n\n if (this.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.firstRender = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem)\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item')\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem)\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n"]}

package/dist/collection/components/button/button.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { makeEnterClickable, removeEnterClickable, } from '../../util/makeEnterClickable';
 /**
  * @exampleComponent limel-example-button-basic
  * @exampleComponent limel-example-button-primary
@@ -23,6 +24,12 @@ export class Button {
     this.loadingFailed = false;
     this.justLoaded = false;
   }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    removeEnterClickable(this.host);
+  }
   render() {
     return (h("button", { class: {
         'mdc-button': true,
@@ -212,6 +219,7 @@ export class Button {
       "justLoaded": {}
     };
   }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "loading",

package/dist/collection/components/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAEjE~~;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,MAAM;;;mBAWE,KAAK;oBAMJ,KAAK;;oBAYL,KAAK;mBAON,KAAK;yBAOC,KAAK;sBAGP,KAAK;;~~EAInB~~,MAAM;IACT,OAAO,CACH,cACI,KAAK,EAAE;QACH,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;QACrD,aAAa,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa;QACpD,sBAAsB,EAAE,IAAI,CAAC,QAAQ;OACxC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MAEtC,IAAI,CAAC,UAAU,EAAE;MAClB,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ;MACzD,qBAAe,WAAW,EAAE,KAAK,GAAI;MACrC,WAAK,OAAO,EAAC,WAAW,IAAE,IAAI,CAAC,kBAAkB,EAAE,CAAO,CACrD,CACZ,CAAC;EACN,CAAC;EAGS,cAAc,CAAC,QAAiB,EAAE,QAAiB;IACzD,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE;MACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,MAAM,OAAO,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MAC5B,CAAC,EAAE,OAAO,CAAC,CAAC;KACf;SAAM,IAAI,QAAQ,EAAE;MACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MACxB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC/C;EACL,CAAC;EAEO,kBAAkB;IACtB,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,OAAO;QACH,YAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAQ;QAC3C,YAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAQ;OAC9C,CAAC;KACL;IAED,OAAO;MACH,YAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAQ;MAC5C,YAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAQ;KAC/C,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,IAAI,iBAAiB,GAAG,EAAE,CAAC;IAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,iBAAiB,GAAG,UAAU,CAAC;KAClC;IAED,OAAO,CACH,SAAG,KAAK,EAAE,oBAAoB,iBAAiB,EAAE;MAC7C,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC/B,CACP,CAAC;EACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n/*\n @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n /\n@Component({\n tag: 'limel-button',\n shadow: true,\n styleUrl: 'button.scss',\n})\nexport class Button {\n /\n The text to show on the button.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to make the button primary.\n /\n @Prop({ reflect: true })\n public primary = false;\n\n /\n Set to `true` to make the button outlined.\n /\n @Prop({ reflect: true })\n public outlined = false;\n\n /\n Set icon for the button\n /\n @Prop({ reflect: true })\n public icon: string;\n\n /\n Set to `true` to disable the button.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Set to `true` to put the button in the `loading` state.\n * This also disables the button.\n /\n @Prop({ reflect: true })\n public loading = false;\n\n /\n Set to `true` to indicate failure instead of success when the button is\n * no longer in the `loading` state.\n */\n @Prop({ reflect: true })\n public loadingFailed = false;\n\n @State()\n private justLoaded = false;\n\n private justLoadedTimeout?: number;\n\n public render() {\n return (\n <button\n class={{\n 'mdc-button': true,\n loading: this.loading,\n 'just-loaded': this.justLoaded && !this.loadingFailed,\n 'just-failed': this.justLoaded && this.loadingFailed,\n 'mdc-button--outlined': this.outlined,\n }}\n disabled={this.disabled \|\| this.loading}\n >\n {this.renderIcon()}\n <span class=\"label mdc-button__label\">{this.label}</span>\n <limel-spinner limeBranded={false} />\n <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n </button>\n );\n }\n\n @Watch('loading')\n protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n if (oldValue && !newValue) {\n this.justLoaded = true;\n const TIMEOUT = 2000;\n this.justLoadedTimeout = window.setTimeout(() => {\n this.justLoaded = false;\n }, TIMEOUT);\n } else if (newValue) {\n this.justLoaded = false;\n window.clearTimeout(this.justLoadedTimeout);\n }\n }\n\n private renderLoadingIcons() {\n if (this.loadingFailed) {\n return [\n <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\"></line>,\n <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\"></line>,\n ];\n }\n\n return [\n <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\"></line>,\n <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\"></line>,\n ];\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n let withoutLabelClass = '';\n if (!this.label) {\n withoutLabelClass = 'no-label';\n }\n\n return (\n <i class={`mdc-button__icon ${withoutLabelClass}`}>\n <limel-icon name={this.icon} />\n </i>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/makeEnterClickable';\n\n/*\n @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n /\n@Component({\n tag: 'limel-button',\n shadow: true,\n styleUrl: 'button.scss',\n})\nexport class Button {\n /\n The text to show on the button.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to make the button primary.\n /\n @Prop({ reflect: true })\n public primary = false;\n\n /\n Set to `true` to make the button outlined.\n /\n @Prop({ reflect: true })\n public outlined = false;\n\n /\n Set icon for the button\n /\n @Prop({ reflect: true })\n public icon: string;\n\n /\n Set to `true` to disable the button.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Set to `true` to put the button in the `loading` state.\n * This also disables the button.\n /\n @Prop({ reflect: true })\n public loading = false;\n\n /\n Set to `true` to indicate failure instead of success when the button is\n * no longer in the `loading` state.\n */\n @Prop({ reflect: true })\n public loadingFailed = false;\n\n @State()\n private justLoaded = false;\n\n @Element()\n private host: HTMLElement;\n\n private justLoadedTimeout?: number;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <button\n class={{\n 'mdc-button': true,\n loading: this.loading,\n 'just-loaded': this.justLoaded && !this.loadingFailed,\n 'just-failed': this.justLoaded && this.loadingFailed,\n 'mdc-button--outlined': this.outlined,\n }}\n disabled={this.disabled \|\| this.loading}\n >\n {this.renderIcon()}\n <span class=\"label mdc-button__label\">{this.label}</span>\n <limel-spinner limeBranded={false} />\n <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n </button>\n );\n }\n\n @Watch('loading')\n protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n if (oldValue && !newValue) {\n this.justLoaded = true;\n const TIMEOUT = 2000;\n this.justLoadedTimeout = window.setTimeout(() => {\n this.justLoaded = false;\n }, TIMEOUT);\n } else if (newValue) {\n this.justLoaded = false;\n window.clearTimeout(this.justLoadedTimeout);\n }\n }\n\n private renderLoadingIcons() {\n if (this.loadingFailed) {\n return [\n <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\"></line>,\n <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\"></line>,\n ];\n }\n\n return [\n <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\"></line>,\n <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\"></line>,\n ];\n }\n\n private renderIcon(): HTMLElement {\n if (!this.icon) {\n return;\n }\n\n let withoutLabelClass = '';\n if (!this.label) {\n withoutLabelClass = 'no-label';\n }\n\n return (\n <i class={`mdc-button__icon ${withoutLabelClass}`}>\n <limel-icon name={this.icon} />\n </i>\n );\n }\n}\n"]}

package/dist/collection/components/checkbox/checkbox.js CHANGED Viewed

@@ -4,12 +4,29 @@ import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { CheckboxTemplate } from './checkbox.template';
 /**
+ * The Checkbox component is a classic and essential element in UI design that allows
+ * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+ * select one or more items from a list of choices.
+ *
+ * ## States of a Checkbox
+ * When a user clicks or taps on the box, it toggles between two states:
+ * Checked and Unchecked.
+ *
+ * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+ * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+ *
+ * The Indeterminate state is typically used when dealing with checkbox groups
+ * that have hierarchical relationships or when the group contains sub-items.
+ * This state is used to indicate that that some, but not all, of the items in a group are selected.
+ *
+ * <limel-example-switch-vs-checkbox />
  * @exampleComponent limel-example-checkbox
  * @exampleComponent limel-example-checkbox-helper-text
  */
 export class Checkbox {
   constructor() {
     this.id = createRandomString();
+    this.helperTextId = createRandomString();
     this.initialize = () => {
       const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
       if (!element) {
@@ -59,7 +76,7 @@ export class Checkbox {
     }
   }
   render() {
-    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
+    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
   }
   static get is() { return "limel-checkbox"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD~~;;;GAGG~~;AAMH,MAAM,OAAO,QAAQ;;IA4DT,OAAE,GAAW,kBAAkB,EAAE,CAAC;~~IAuDlC~~,eAAU,GAAG,GAAG,EAAE;MACtB,MAAM,OAAO,GACT,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;MACnE,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;OACV;MAED,IAAI,CAAC,SAAS,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;MAC9D,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;IAC5C,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,OAAO,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxE,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;MAChC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC,CAAC;~~oBAjIgB~~,KAAK;oBAQL,KAAK;;;mBAkBN,KAAK;yBAMC,KAAK;oBAMD,KAAK;oBAGb,KAAK;;~~EAgBd~~,mBAAmB,CAAC,QAAiB;IAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;EACxC,CAAC;EAGS,yBAAyB,CAAC,QAAiB;IACjD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IACxC,IAAI,CAAC,WAAW,CAAC,aAAa,GAAG,QAAQ,CAAC;EAC9C,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,oBAAoB;;IACvB,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,EAAE,CAAC;IAC5B,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;IAE1B,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,IAAI,eAAe,EAAE;MACjB,eAAe,CAAC,SAAS,CAAC,MAAM,CAC5B,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,4BAA4B,EACvC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,4BAA4B,CAC1C,CAAC;KACL;EACL,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,gBAAgB,IACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,GACb,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBJ","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/*\n @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n /\n@Component({\n tag: 'limel-checkbox',\n shadow: true,\n styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n /\n Disables the checkbox when `true`. Works exactly the same as `readonly`.\n * If either property is `true`, the checkbox will be disabled.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n * But shows no visual sign indicating that the checkbox is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The checkbox label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the checkbox\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The value of the checkbox. Set to `true` to make the checkbox checked.\n /\n @Prop({ reflect: true })\n public checked = false;\n\n /\n Enables indeterminate state. Set to `true` to signal indeterminate check.\n /\n @Prop({ reflect: true })\n public indeterminate = false;\n\n /\n Set to `true` to indicate that the checkbox must be checked.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n @State()\n private modified = false;\n\n /\n Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private limelCheckbox: HTMLLimelCheckboxElement;\n\n private formField: MDCFormField;\n private mdcCheckbox: MDCCheckbox;\n private id: string = createRandomString();\n\n @Watch('checked')\n protected handleCheckedChange(newValue: boolean) {\n this.mdcCheckbox.checked = newValue;\n }\n\n @Watch('indeterminate')\n protected handleIndeterminateChange(newValue: boolean) {\n this.mdcCheckbox.checked = this.checked;\n this.mdcCheckbox.indeterminate = newValue;\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n this.mdcCheckbox?.destroy();\n this.formField?.destroy();\n\n const checkboxElement = this.getCheckboxElement();\n if (checkboxElement) {\n checkboxElement.classList.remove(\n cssClasses.ANIM_CHECKED_INDETERMINATE,\n cssClasses.ANIM_CHECKED_UNCHECKED,\n cssClasses.ANIM_INDETERMINATE_CHECKED,\n cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n cssClasses.ANIM_UNCHECKED_CHECKED,\n cssClasses.ANIM_UNCHECKED_INDETERMINATE\n );\n }\n }\n\n public render() {\n return (\n <CheckboxTemplate\n disabled={this.disabled \|\| this.readonly}\n label={this.label}\n helperText={this.helperText}\n checked={this.checked \|\| this.indeterminate}\n indeterminate={this.indeterminate}\n required={this.required}\n readonly={this.readonly}\n invalid={this.required && this.modified && !this.checked}\n onChange={this.onChange}\n id={this.id}\n />\n );\n }\n\n private initialize = () => {\n const element =\n this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n if (!element) {\n return;\n }\n\n this.formField = new MDCFormField(element);\n this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n this.formField.input = this.mdcCheckbox;\n };\n\n private getCheckboxElement = () => {\n return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n };\n\n private onChange = (event: Event) => {\n event.stopPropagation();\n this.change.emit(this.mdcCheckbox.checked);\n this.modified = true;\n };\n}\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/*\n The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n \n ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n \n However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n \n The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n \n <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n /\n@Component({\n tag: 'limel-checkbox',\n shadow: true,\n styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n /\n Disables the checkbox when `true`. Works exactly the same as `readonly`.\n * If either property is `true`, the checkbox will be disabled.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n * But shows no visual sign indicating that the checkbox is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The checkbox label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the checkbox\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The value of the checkbox. Set to `true` to make the checkbox checked.\n /\n @Prop({ reflect: true })\n public checked = false;\n\n /\n Enables indeterminate state. Set to `true` to signal indeterminate check.\n /\n @Prop({ reflect: true })\n public indeterminate = false;\n\n /\n Set to `true` to indicate that the checkbox must be checked.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n @State()\n private modified = false;\n\n /\n Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private limelCheckbox: HTMLLimelCheckboxElement;\n\n private formField: MDCFormField;\n private mdcCheckbox: MDCCheckbox;\n private id: string = createRandomString();\n private helperTextId: string = createRandomString();\n\n @Watch('checked')\n protected handleCheckedChange(newValue: boolean) {\n this.mdcCheckbox.checked = newValue;\n }\n\n @Watch('indeterminate')\n protected handleIndeterminateChange(newValue: boolean) {\n this.mdcCheckbox.checked = this.checked;\n this.mdcCheckbox.indeterminate = newValue;\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n this.mdcCheckbox?.destroy();\n this.formField?.destroy();\n\n const checkboxElement = this.getCheckboxElement();\n if (checkboxElement) {\n checkboxElement.classList.remove(\n cssClasses.ANIM_CHECKED_INDETERMINATE,\n cssClasses.ANIM_CHECKED_UNCHECKED,\n cssClasses.ANIM_INDETERMINATE_CHECKED,\n cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n cssClasses.ANIM_UNCHECKED_CHECKED,\n cssClasses.ANIM_UNCHECKED_INDETERMINATE\n );\n }\n }\n\n public render() {\n return (\n <CheckboxTemplate\n disabled={this.disabled \|\| this.readonly}\n label={this.label}\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n checked={this.checked \|\| this.indeterminate}\n indeterminate={this.indeterminate}\n required={this.required}\n readonly={this.readonly}\n invalid={this.required && this.modified && !this.checked}\n onChange={this.onChange}\n id={this.id}\n />\n );\n }\n\n private initialize = () => {\n const element =\n this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n if (!element) {\n return;\n }\n\n this.formField = new MDCFormField(element);\n this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n this.formField.input = this.mdcCheckbox;\n };\n\n private getCheckboxElement = () => {\n return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n };\n\n private onChange = (event: Event) => {\n event.stopPropagation();\n this.change.emit(this.mdcCheckbox.checked);\n this.modified = true;\n };\n}\n"]}

package/dist/collection/components/checkbox/checkbox.template.js CHANGED Viewed

@@ -12,20 +12,20 @@ export const CheckboxTemplate = (props) => {
         'mdc-checkbox--required': props.required,
         'mdc-checkbox--indeterminate': props.indeterminate,
         'lime-checkbox--readonly': props.readonly,
-      } }, h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange }, inputProps)), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" }))), h("label", { class: {
+      } }, h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-controls": props.helperTextId, "aria-describedby": props.helperTextId }, inputProps)), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" }))), h("label", { class: {
         'mdc-checkbox--invalid': props.invalid,
         'mdc-checkbox--disabled': props.disabled,
         'mdc-checkbox--required': props.required,
         'mdc-checkbox--indeterminate': props.indeterminate,
         'lime-checkbox--readonly': props.readonly,
       }, htmlFor: props.id }, props.label)),
-    h(HelperText, { text: props.helperText }),
+    h(HelperText, { text: props.helperText, helperTextId: props.helperTextId }),
   ];
 };
 const HelperText = (props) => {
   if (typeof props.text !== 'string') {
     return;
   }
-  return h("limel-helper-line", { helperText: props.text.trim() });
+  return (h("limel-helper-line", { helperText: props.text.trim(), helperTextId: props.helperTextId }));
 };
 //# sourceMappingURL=checkbox.template.js.map

package/dist/collection/components/checkbox/checkbox.template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAevD~~,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,~~IACpB~~,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,~~IAAC~~,IAAI,EAAE,KAAK,CAAC,UAAU,~~GAAI~~;~~GACzC~~,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,~~GAA0C~~,CAAC,KAAK,EAAE,EAAE;~~EAChE~~,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,~~yBAAmB~~,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,~~GAAI~~,CAAC;~~AAChE~~,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n readonly?: boolean;\n indeterminate?: boolean;\n required?: boolean;\n invalid?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n helperText?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n props\n) => {\n const inputProps = {};\n if (props.indeterminate) {\n inputProps['data-indeterminate'] = 'true';\n }\n\n return [\n <div class=\"mdc-form-field \">\n <div\n class={{\n 'mdc-checkbox': true,\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n >\n <input\n type=\"checkbox\"\n class=\"mdc-checkbox__native-control\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled \|\| props.readonly}\n required={props.required}\n onChange={props.onChange}\n {...inputProps}\n />\n <div class=\"mdc-checkbox__background\">\n <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n <path\n class=\"mdc-checkbox__checkmark-path\"\n fill=\"none\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n />\n </svg>\n <div class=\"mdc-checkbox__mixedmark\" />\n </div>\n </div>\n <label\n class={{\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n htmlFor={props.id}\n >\n {props.label}\n </label>\n </div>,\n <HelperText text={props.helperText} />,\n ];\n};\n\nconst HelperText: FunctionalComponent<{ text: string }> = (props) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return <limel-helper-line helperText={props.text.trim()} ~~/>;\~~n};\n"]}
1	+ {"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAgBvD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC;GACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAGX,CAAC,KAAK,EAAE,EAAE;EACX,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,CACH,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n readonly?: boolean;\n indeterminate?: boolean;\n required?: boolean;\n invalid?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n helperText?: string;\n helperTextId?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n props\n) => {\n const inputProps = {};\n if (props.indeterminate) {\n inputProps['data-indeterminate'] = 'true';\n }\n\n return [\n <div class=\"mdc-form-field \">\n <div\n class={{\n 'mdc-checkbox': true,\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n >\n <input\n type=\"checkbox\"\n class=\"mdc-checkbox__native-control\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled \|\| props.readonly}\n required={props.required}\n onChange={props.onChange}\n aria-controls={props.helperTextId}\n aria-describedby={props.helperTextId}\n {...inputProps}\n />\n <div class=\"mdc-checkbox__background\">\n <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n <path\n class=\"mdc-checkbox__checkmark-path\"\n fill=\"none\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n />\n </svg>\n <div class=\"mdc-checkbox__mixedmark\" />\n </div>\n </div>\n <label\n class={{\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n htmlFor={props.id}\n >\n {props.label}\n </label>\n </div>,\n <HelperText\n text={props.helperText}\n helperTextId={props.helperTextId}\n />,\n ];\n};\n\nconst HelperText: FunctionalComponent<{\n helperTextId: string;\n text: string;\n}> = (props) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={props.text.trim()}\n helperTextId={props.helperTextId}\n />\n );\n};\n"]}

package/dist/collection/components/collapsible-section/collapsible-section.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/makeEnterClickable';
 /**
  * @slot - Content to put inside the collapsible section
  * @exampleComponent limel-example-collapsible-section
@@ -41,6 +42,14 @@ export class CollapsibleSection {
     this.header = undefined;
     this.actions = undefined;
   }
+  componentDidRender() {
+    const button = this.host.shadowRoot.querySelector('.open-close-toggle');
+    makeEnterClickable(button);
+  }
+  disconnectedCallback() {
+    const button = this.host.shadowRoot.querySelector('.open-close-toggle');
+    removeEnterClickable(button);
+  }
   render() {
     return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
   }
@@ -168,5 +177,6 @@ export class CollapsibleSection {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=collapsible-section.js.map

package/dist/collection/components/collapsible-section/collapsible-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,KAAK,~~EAAgB~~,CAAC,~~EAAE~~,IAAI,~~EAAE~~,MAAM,eAAe,CAAC;~~AACxE~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;~~AAGvE~~;;;;;;;GAOG;AAMH,MAAM,OAAO,kBAAkB;;~~IA6DnB~~,YAAO,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,OAAO,CACH,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,CACT,CAAC;IACN,CAAC,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;MAC5C,OAAO,CACH,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,CACL,CAAC;IACN,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MAClE,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;~~kBAlGuB~~,KAAK;;;;~~EAgCvB~~,MAAM;IACT,OAAO,CACH,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MAC1C;QACI,cAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;QAC3D,WAAK,KAAK,EAAC,aAAa;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB;QACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX;QACL,WAAK,KAAK,EAAC,cAAc,GAAG;QAC3B,IAAI,CAAC,aAAa,EAAE,CAChB;MACT,WAAK,KAAK,EAAC,MAAM;QACb,eAAQ,CACN,CACA,CACb,CAAC;EACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CA6CJ","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\n\n/*\n @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n /\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /\n `true` if the section is expanded, `false` if collapsed.\n /\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /\n Text to display in the header of the section\n /\n @Prop({ reflect: true })\n public header: string;\n\n /\n Actions to place to the far right inside the header\n /\n @Prop()\n public actions: Action[];\n\n /\n Emitted when the section is expanded\n /\n @Event()\n private open: EventEmitter<void>;\n\n /\n Emitted when the section is collapsed\n /\n @Event()\n private close: EventEmitter<void>;\n\n /\n Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n public render() {\n return (\n <section class={`${this.isOpen ? 'open' : ''}`}>\n <header>\n <button class=\"open-close-toggle\" onClick={this.onClick} />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderActions()}\n </header>\n <div class=\"body\">\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"]}
1	+ {"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n Element,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/makeEnterClickable';\n\n/*\n @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n /\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /\n `true` if the section is expanded, `false` if collapsed.\n /\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /\n Text to display in the header of the section\n /\n @Prop({ reflect: true })\n public header: string;\n\n /\n Actions to place to the far right inside the header\n /\n @Prop()\n public actions: Action[];\n\n /\n Emitted when the section is expanded\n /\n @Event()\n private open: EventEmitter<void>;\n\n /\n Emitted when the section is collapsed\n /\n @Event()\n private close: EventEmitter<void>;\n\n /\n Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @Element()\n private host: HTMLElement;\n\n public componentDidRender() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle'\n ) as HTMLElement;\n\n makeEnterClickable(button);\n }\n\n public disconnectedCallback() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle'\n ) as HTMLElement;\n\n removeEnterClickable(button);\n }\n\n public render() {\n return (\n <section class={`${this.isOpen ? 'open' : ''}`}>\n <header>\n <button class=\"open-close-toggle\" onClick={this.onClick} />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderActions()}\n </header>\n <div class=\"body\">\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"]}

package/dist/collection/components/color-picker/color-picker-palette.css CHANGED Viewed

@@ -582,6 +582,14 @@
   grid-template-columns: repeat(20, 1fr) auto;
 }
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.
@@ -638,6 +646,35 @@
   grid-template-columns: auto 1fr;
 }
+.picker-trigger {
+  all: unset;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:focus {
+  outline: none;
+}
+.picker-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
 .chosen-color-preview,
 .picker-trigger {
   box-sizing: border-box;
@@ -666,27 +703,6 @@
   z-index: 1;
 }
-.picker-trigger {
-  border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-normal);
-}
-.picker-trigger:hover {
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-hovered);
-}
-.picker-trigger:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
-}
-.picker-trigger:after {
-  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
-}
 :host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
   cursor: default;
   box-shadow: var(--button-shadow-normal);
@@ -725,9 +741,18 @@
 }
 .swatch:not(.hue) {
+  border: none;
+  aspect-ratio: 1;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   cursor: pointer;
 }
+.swatch:not(.hue):focus {
+  outline: none;
+}
+.swatch:not(.hue):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .swatch:not(.hue):hover {
   box-shadow: var(--button-shadow-hovered);
 }

package/dist/collection/components/color-picker/color-picker-palette.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class Palette {
         [colorName]: true,
         'swatch--selected': this.value === getCssColor(color, brightness),
       };
-      return (h("div", { class: classList, onClick: this.handleClick(color, brightness), tabindex: "0" }));
+      return (h("button", { class: classList, onClick: this.handleClick(color, brightness) }));
     };
     this.handleChange = (event) => {
       event.stopPropagation();

package/dist/collection/components/color-picker/color-picker-palette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,OAAO;;IAiDR,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;MACtD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,UAAkB,EAAE,EAAE;MAC7D,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,CAAC,EAAE,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,OAAO,CACH,~~WACI~~,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,~~EAC5C~~,~~QAAQ~~,~~EAAC,GAAG,GACT,CACV,~~CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MACzD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;;;;;;~~EAnDC~~,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB;QAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB;QACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAoCJ~~","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: true,\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <~~div~~\n class={classList}\n onClick={this.handleClick(color, brightness)}\n ~~tabindex=\"0\"\n~~ ~~></div>\~~n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"]}
1	+ {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,OAAO;;IAiDR,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;MACtD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,UAAkB,EAAE,EAAE;MAC7D,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,CAAC,EAAE,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,OAAO,CACH,cACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,CACL,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MACzD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB;QAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB;QACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCJ","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: true,\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"]}

package/dist/collection/components/color-picker/color-picker.css CHANGED Viewed

@@ -54,6 +54,35 @@
   grid-template-columns: auto 1fr;
 }
+.picker-trigger {
+  all: unset;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:focus {
+  outline: none;
+}
+.picker-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
 .chosen-color-preview,
 .picker-trigger {
   box-sizing: border-box;
@@ -82,27 +111,6 @@
   z-index: 1;
 }
-.picker-trigger {
-  border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-normal);
-}
-.picker-trigger:hover {
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-hovered);
-}
-.picker-trigger:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
-}
-.picker-trigger:after {
-  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
-}
 :host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
   cursor: default;
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/color-picker/color-picker.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class ColorPicker {
     };
     this.renderPickerTrigger = () => {
       const background = this.value ? { '--background': this.value } : {};
-      return (h("div", { class: "picker-trigger", slot: "trigger", style: background, role: "button", tabindex: "0", onClick: this.openPopover, id: "tooltip-button" }));
+      return (h("button", { class: "picker-trigger", slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button" }));
     };
     this.openPopover = (event) => {
       event.stopPropagation();

package/dist/collection/components/color-picker/color-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAG/E;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,WAAW;;IAgEZ,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,OAAO,CACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;QAE3B,IAAI,CAAC,mBAAmB,EAAE;QAC3B,kCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,CACnB,CAAC;IACN,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;MAEpE,OAAO,CACH,~~WACI~~,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,~~QAAQ,EAAC,GAAG,EACZ,~~OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;~~kBAnFe~~,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,mBAAmB,EAAE;QAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAiEJ~~","sourcesContent":["/* eslint-disable multiline-ternary /\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/\n This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n \n The color picker can also show you a preview of any valid color name or color value.\n \n :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n /\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /\n Name or code of the chosen color\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n The label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Displayed as tooltips when picker is hovered.\n /\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Set to `true` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n class=\"chosen-color-input\"\n />\n </div>,\n ];\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <~~div~~\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n ~~tabindex=\"0\"\n~~ onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
1	+ {"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAG/E;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,WAAW;;IAgEZ,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,OAAO,CACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;QAE3B,IAAI,CAAC,mBAAmB,EAAE;QAC3B,kCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,CACnB,CAAC;IACN,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;MAEpE,OAAO,CACH,cACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;kBAlFe,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,mBAAmB,EAAE;QAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEJ","sourcesContent":["/* eslint-disable multiline-ternary /\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/\n This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n \n The color picker can also show you a preview of any valid color name or color value.\n \n :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n /\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /\n Name or code of the chosen color\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n The label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Displayed as tooltips when picker is hovered.\n /\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Set to `true` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n class=\"chosen-color-input\"\n />\n </div>,\n ];\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}

package/dist/collection/components/form/fields/schema-field.js CHANGED Viewed

@@ -32,7 +32,19 @@ const shouldChangeToUndefined = (value, schema) => {
 };
 const hasCustomComponent = (schema) => {
   var _a, _b;
-  return Boolean((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name);
+  const name = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name;
+  if (!name) {
+    return false;
+  }
+  try {
+    verifyCustomComponentIsDefined(name);
+  }
+  catch (_c) {
+    // eslint-disable-next-line no-console
+    console.warn(`Custom component ${name} not defined`);
+    return false;
+  }
+  return true;
 };
 const verifyCustomComponentIsDefined = (elementName) => {
   const supportsCustomElements = 'customElements' in window;