@crowdstrike/glide-core 0.26.0 → 0.27.0

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 (105) hide show
  1. package/dist/accordion.d.ts +2 -2
  2. package/dist/accordion.js +1 -1
  3. package/dist/button-group.button.d.ts +2 -2
  4. package/dist/button-group.button.js +1 -1
  5. package/dist/button-group.d.ts +3 -3
  6. package/dist/button-group.js +1 -1
  7. package/dist/button.d.ts +2 -2
  8. package/dist/button.js +1 -1
  9. package/dist/checkbox-group.d.ts +3 -3
  10. package/dist/checkbox-group.js +9 -9
  11. package/dist/checkbox.d.ts +2 -3
  12. package/dist/checkbox.js +3 -3
  13. package/dist/checkbox.styles.js +8 -16
  14. package/dist/drawer.d.ts +2 -2
  15. package/dist/drawer.js +1 -1
  16. package/dist/dropdown.d.ts +8 -13
  17. package/dist/dropdown.js +53 -55
  18. package/dist/dropdown.option.d.ts +2 -3
  19. package/dist/dropdown.option.js +1 -1
  20. package/dist/dropdown.option.styles.js +16 -79
  21. package/dist/dropdown.styles.js +10 -29
  22. package/dist/form-controls-layout.d.ts +3 -3
  23. package/dist/form-controls-layout.js +1 -1
  24. package/dist/icon-button.d.ts +2 -2
  25. package/dist/icon-button.js +1 -1
  26. package/dist/icon-button.styles.js +29 -0
  27. package/dist/inline-alert.d.ts +2 -2
  28. package/dist/inline-alert.js +1 -1
  29. package/dist/input.d.ts +2 -2
  30. package/dist/input.js +2 -2
  31. package/dist/label.d.ts +2 -2
  32. package/dist/label.js +1 -1
  33. package/dist/label.styles.js +5 -1
  34. package/dist/library/assert-slot.d.ts +1 -1
  35. package/dist/library/assert-slot.test.js +22 -22
  36. package/dist/library/expect-window-error.js +1 -1
  37. package/dist/library/final.test.js +9 -9
  38. package/dist/library/localize.d.ts +2 -1
  39. package/dist/library/localize.test.js +6 -6
  40. package/dist/library/required.test.js +5 -5
  41. package/dist/library/unique-id.d.ts +2 -0
  42. package/dist/library/unique-id.js +1 -0
  43. package/dist/link.d.ts +2 -3
  44. package/dist/link.js +1 -1
  45. package/dist/link.styles.js +1 -1
  46. package/dist/menu.button.d.ts +2 -2
  47. package/dist/menu.button.js +1 -1
  48. package/dist/menu.d.ts +3 -9
  49. package/dist/menu.js +1 -1
  50. package/dist/menu.link.d.ts +2 -2
  51. package/dist/menu.link.js +1 -1
  52. package/dist/menu.options.d.ts +3 -4
  53. package/dist/menu.options.js +1 -1
  54. package/dist/menu.options.styles.js +6 -19
  55. package/dist/modal.d.ts +6 -6
  56. package/dist/modal.icon-button.d.ts +2 -2
  57. package/dist/modal.icon-button.js +1 -1
  58. package/dist/modal.js +1 -1
  59. package/dist/popover.d.ts +2 -2
  60. package/dist/popover.js +1 -1
  61. package/dist/radio-group.d.ts +3 -3
  62. package/dist/radio-group.js +6 -6
  63. package/dist/radio-group.radio.d.ts +2 -2
  64. package/dist/radio-group.radio.js +1 -1
  65. package/dist/spinner.d.ts +2 -2
  66. package/dist/spinner.js +1 -1
  67. package/dist/split-button.d.ts +4 -10
  68. package/dist/split-button.js +1 -1
  69. package/dist/split-button.primary-button.d.ts +2 -2
  70. package/dist/split-button.primary-button.js +1 -1
  71. package/dist/split-button.primary-button.styles.js +4 -14
  72. package/dist/split-button.primary-link.d.ts +2 -2
  73. package/dist/split-button.primary-link.js +1 -1
  74. package/dist/split-button.secondary-button.d.ts +3 -4
  75. package/dist/split-button.secondary-button.js +1 -1
  76. package/dist/split-button.secondary-button.styles.js +4 -15
  77. package/dist/tab.d.ts +12 -4
  78. package/dist/tab.group.d.ts +4 -5
  79. package/dist/tab.group.js +1 -1
  80. package/dist/tab.group.styles.js +14 -16
  81. package/dist/tab.js +1 -1
  82. package/dist/tab.panel.d.ts +12 -5
  83. package/dist/tab.panel.js +1 -1
  84. package/dist/tag.d.ts +2 -4
  85. package/dist/tag.js +1 -1
  86. package/dist/tag.styles.js +7 -52
  87. package/dist/textarea.d.ts +2 -2
  88. package/dist/textarea.js +7 -7
  89. package/dist/textarea.styles.js +2 -1
  90. package/dist/toast.d.ts +3 -3
  91. package/dist/toast.js +1 -1
  92. package/dist/toast.toasts.d.ts +9 -9
  93. package/dist/toast.toasts.js +17 -17
  94. package/dist/toggle.d.ts +2 -2
  95. package/dist/toggle.js +1 -1
  96. package/dist/tooltip.container.d.ts +2 -2
  97. package/dist/tooltip.container.js +1 -1
  98. package/dist/tooltip.d.ts +3 -3
  99. package/dist/tooltip.js +1 -1
  100. package/dist/translations/en.js +1 -1
  101. package/dist/translations/fr.d.ts +1 -1
  102. package/dist/translations/fr.js +1 -1
  103. package/dist/translations/ja.d.ts +1 -1
  104. package/dist/translations/ja.js +1 -1
  105. package/package.json +4 -4
@@ -1,7 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
2
  declare global {
3
3
  interface HTMLElementTagNameMap {
4
- 'glide-core-accordion': GlideCoreAccordion;
4
+ 'glide-core-accordion': Accordion;
5
5
  }
6
6
  }
7
7
  /**
@@ -17,7 +17,7 @@ declare global {
17
17
  *
18
18
  * @fires {Event} toggle
19
19
  */
20
- export default class GlideCoreAccordion extends LitElement {
20
+ export default class Accordion extends LitElement {
21
21
  #private;
22
22
  static shadowRootOptions: ShadowRootInit;
23
23
  static styles: import("lit").CSSResult[];
package/dist/accordion.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,s){var i,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(n=(l<3?i(n):l>3?i(t,o,n):i(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&t&&this.#t.value)return this.#t.value.open=e,void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(e&&t)this.updateComplete.then((()=>{if(this.#t.value&&this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#t.value.open=!0,this.#e.value.animate({height:["0px",this.#e.value.offsetHeight-e+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}).addEventListener("finish",(()=>{this.#t.value&&this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))}}));else if(t&&(this.isClosing=!0,this.#e.value)){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#e.value.animate({height:[this.#e.value.offsetHeight-e+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{this.#t.value&&(this.#t.value.open=!1,this.isClosing=!1,this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}))}}click(){this.#l.value?.click()}render(){return html`<details class="component" ${ref(this.#t)}><summary class="${classMap({summary:!0,active:this.open||this.isClosing,open:this.open})}" data-test="summary" @click="${this.#n}" ${ref(this.#l)}>${chevronIcon}<div class="label-container"><slot class="prefix-icon-slot" name="prefix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot><span class="label">${this.label}</span></div><slot class="${classMap({"suffix-icons-slot":!0,icons:this.hasSuffixIcons})}" name="suffix-icons" @slotchange="${this.#r}" ${ref(this.#i)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" ${assertSlot()} ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#i;#l;#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#i.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0}),required],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreAccordion.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"version",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],GlideCoreAccordion.prototype,"isClosing",void 0),GlideCoreAccordion=__decorate([customElement("glide-core-accordion"),final],GlideCoreAccordion);export default GlideCoreAccordion;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,s){var i,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(n=(l<3?i(n):l>3?i(t,o,n):i(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Accordion=class Accordion extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&t&&this.#t.value)return this.#t.value.open=e,void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(e&&t)this.updateComplete.then((()=>{if(this.#t.value&&this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#t.value.open=!0,this.#e.value.animate({height:["0px",this.#e.value.offsetHeight-e+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}).addEventListener("finish",(()=>{this.#t.value&&this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))}}));else if(t&&(this.isClosing=!0,this.#e.value)){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#e.value.animate({height:[this.#e.value.offsetHeight-e+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{this.#t.value&&(this.#t.value.open=!1,this.isClosing=!1,this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}))}}click(){this.#l.value?.click()}render(){return html`<details class="component" ${ref(this.#t)}><summary class="${classMap({summary:!0,active:this.open||this.isClosing,open:this.open})}" data-test="summary" @click="${this.#n}" ${ref(this.#l)}>${chevronIcon}<div class="label-container"><slot class="prefix-icon-slot" name="prefix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot><span class="label">${this.label}</span></div><slot class="${classMap({"suffix-icons-slot":!0,icons:this.hasSuffixIcons})}" name="suffix-icons" @slotchange="${this.#r}" ${ref(this.#i)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" ${assertSlot()} ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#i;#l;#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#i.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0}),required],Accordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Accordion.prototype,"open",null),__decorate([property({reflect:!0})],Accordion.prototype,"version",void 0),__decorate([state()],Accordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],Accordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],Accordion.prototype,"isClosing",void 0),Accordion=__decorate([customElement("glide-core-accordion"),final],Accordion);export default Accordion;
@@ -1,7 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
2
  declare global {
3
3
  interface HTMLElementTagNameMap {
4
- 'glide-core-button-group-button': GlideCoreButtonGroupButton;
4
+ 'glide-core-button-group-button': ButtonGroupButton;
5
5
  }
6
6
  }
7
7
  /**
@@ -17,7 +17,7 @@ declare global {
17
17
  *
18
18
  * @fires {Event} selected
19
19
  */
20
- export default class GlideCoreButtonGroupButton extends LitElement {
20
+ export default class ButtonGroupButton extends LitElement {
21
21
  #private;
22
22
  static shadowRootOptions: ShadowRootInit;
23
23
  static styles: import("lit").CSSResult[];
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(e){this.#o=e,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" data-test="radio" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#t)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#e;#t;#o;#r(){const e=this.#t.value?.assignedNodes();this.hasIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"version",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"hasIcon",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button"),final],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;
1
+ var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let ButtonGroupButton=class ButtonGroupButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#t=createRef(),this.#e=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(t){this.#o=t,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#t.value?.click()}focus(t){this.#t.value?.focus(t)}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" data-test="radio" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#e)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#t;#e;#o;#r(){const t=this.#e.value?.assignedNodes();this.hasIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],ButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],ButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],ButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],ButtonGroupButton.prototype,"value",void 0),__decorate([property()],ButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],ButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],ButtonGroupButton.prototype,"version",void 0),__decorate([state()],ButtonGroupButton.prototype,"hasIcon",void 0),ButtonGroupButton=__decorate([customElement("glide-core-button-group-button"),final],ButtonGroupButton);export default ButtonGroupButton;
@@ -1,7 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
2
  declare global {
3
3
  interface HTMLElementTagNameMap {
4
- 'glide-core-button-group': GlideCoreButtonGroup;
4
+ 'glide-core-button-group': ButtonGroup;
5
5
  }
6
6
  }
7
7
  /**
@@ -12,9 +12,9 @@ declare global {
12
12
  * @readonly
13
13
  * @attr {string} [version]
14
14
  *
15
- * @slot {GlideCoreButtonGroupButton}
15
+ * @slot {ButtonGroupButton}
16
16
  */
17
- export default class GlideCoreButtonGroup extends LitElement {
17
+ export default class ButtonGroup extends LitElement {
18
18
  #private;
19
19
  static shadowRootOptions: ShadowRootInit;
20
20
  static styles: import("lit").CSSResult[];
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,l=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(l=(n<3?i(l):n>3?i(e,o,l):i(e,o))||l);return n>3&&l&&Object.defineProperty(e,o,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#t=t}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#i}" @keydown="${this.#n}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${assertSlot([GlideCoreButtonGroupButton])} ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#i(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}#n(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.at(-1);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#r.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.at(0);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#r)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButtonGroup.prototype,"orientation",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"version",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group"),final],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
1
+ var __decorate=this&&this.__decorate||function(t,e,o,r){var n,i=arguments.length,l=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(l=(i<3?n(l):i>3?n(e,o,l):n(e,o))||l);return i>3&&l&&Object.defineProperty(e,o,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import ButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let ButtonGroup=class ButtonGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#e="horizontal"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#e}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#e=t}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#n}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${assertSlot([ButtonGroupButton])} ${ref(this.#t)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){if(this.#r.filter((({selected:t})=>t)).length>1)throw new Error("Only one selected Button Group Button is allowed.");if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#n(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof ButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.at(-1);o instanceof ButtonGroupButton&&o.privateSelect();break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#r.at(0);for(;o instanceof ButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.at(0);o instanceof ButtonGroupButton&&o.privateSelect();break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}}#l(t){if(t.target instanceof ButtonGroupButton&&t.target.selected){for(const e of this.#r)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0}),required],ButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],ButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0,useDefault:!0})],ButtonGroup.prototype,"orientation",null),__decorate([property({reflect:!0})],ButtonGroup.prototype,"version",void 0),ButtonGroup=__decorate([customElement("glide-core-button-group"),final],ButtonGroup);export default ButtonGroup;
package/dist/button.d.ts CHANGED
@@ -2,7 +2,7 @@ import './tooltip.js';
2
2
  import { LitElement } from 'lit';
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
5
- 'glide-core-button': GlideCoreButton;
5
+ 'glide-core-button': Button;
6
6
  }
7
7
  }
8
8
  /**
@@ -25,7 +25,7 @@ declare global {
25
25
  * @readonly
26
26
  * @prop {HTMLFormElement | null} form
27
27
  */
28
- export default class GlideCoreButton extends LitElement {
28
+ export default class Button extends LitElement {
29
29
  #private;
30
30
  static formAssociated: boolean;
31
31
  static shadowRootOptions: ShadowRootInit;
package/dist/button.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}get form(){return this.#o.form}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" data-test="button" slot="target" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#s)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#a}" ${ref(this.#l)}></slot></button></glide-core-tooltip>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=null,this.#e=createRef(),this.#s=createRef(),this.#l=createRef(),this.#o=this.attachInternals()}#t;#e;#o;#s;#l;#i(t){this.disabled?t.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(t&&t.length>0)}#a(){const t=this.#l.value?.assignedNodes();this.hasSuffixIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButton.prototype,"label",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],GlideCoreButton.prototype,"ariaDescription",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button"),final],GlideCoreButton);export default GlideCoreButton;
1
+ var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var n=t.length-1;n>=0;n--)(r=t[n])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Button=class Button extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}get form(){return this.#o.form}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" data-test="button" slot="target" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#s)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#a}" ${ref(this.#n)}></slot></button></glide-core-tooltip>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=null,this.#e=createRef(),this.#s=createRef(),this.#n=createRef(),this.#o=this.attachInternals()}#t;#e;#o;#s;#n;#i(t){this.disabled?t.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(t&&t.length>0)}#a(){const t=this.#n.value?.assignedNodes();this.hasSuffixIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],Button.prototype,"label",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],Button.prototype,"ariaDescription",null),__decorate([property({type:Boolean,reflect:!0})],Button.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"size",void 0),__decorate([property({reflect:!0})],Button.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"type",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"value",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"variant",void 0),__decorate([property({reflect:!0})],Button.prototype,"version",void 0),__decorate([state()],Button.prototype,"hasPrefixIcon",void 0),__decorate([state()],Button.prototype,"hasSuffixIcon",void 0),Button=__decorate([customElement("glide-core-button"),final],Button);export default Button;
@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
3
3
  import type FormControl from './library/form-control.js';
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
- 'glide-core-checkbox-group': GlideCoreCheckboxGroup;
6
+ 'glide-core-checkbox-group': CheckboxGroup;
7
7
  }
8
8
  }
9
9
  /**
@@ -20,7 +20,7 @@ declare global {
20
20
  * @readonly
21
21
  * @attr {string} [version]
22
22
  *
23
- * @slot {GlideCoreCheckbox}
23
+ * @slot {Checkbox}
24
24
  * @slot {Element | string} [description] - Additional information or context
25
25
  *
26
26
  * @fires {Event} invalid
@@ -49,7 +49,7 @@ declare global {
49
49
  * @param {ValidityStateFlags} [flags]
50
50
  * @param {string} [message]
51
51
  */
52
- export default class GlideCoreCheckboxGroup extends LitElement implements FormControl {
52
+ export default class CheckboxGroup extends LitElement implements FormControl {
53
53
  #private;
54
54
  static formAssociated: boolean;
55
55
  static shadowRootOptions: ShadowRootInit;
@@ -1,4 +1,4 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./label.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#s}set value(e){this.#s=e;for(const t of this.#t){e.some((e=>""!==e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;const e=this.#t.every((({checked:e})=>!e));for(const t of this.#t)t.addEventListener("blur",this.#a.bind(this)),e&&(t.checked=this.value.includes(t.value),t.checked&&!this.disabled&&(t.disabled=!1))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#o.validity.valueMissing&&e&&this.#o.setValidity({}),this.required||!this.#o.validity.valueMissing||e||this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
1
+ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length,r=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(r=(a<3?o(r):a>3?o(t,i,r):o(t,i))||r);return a>3&&r&&Object.defineProperty(t,i,r),r};import"./label.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import Checkbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let CheckboxGroup=class CheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#s.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#o}set value(e){this.#o=e;for(const t of this.#t){e.some((e=>""!==e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#s.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#a)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;const e=this.#t.every((({checked:e})=>!e));for(const t of this.#t)t.addEventListener("blur",this.#r.bind(this)),e&&(t.checked=this.value.includes(t.value),t.checked&&!this.disabled&&(t.disabled=!1))}get form(){return this.#s.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#s.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#s.validity.valueMissing&&e&&this.#s.setValidity({}),this.required||!this.#s.validity.valueMissing||e||this.#s.setValidity({});for(const e of this.#t)e.setValidity(this.#s.validity," "),e.requestUpdate();return this.#s.validity}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
2
2
  class="component"
3
3
  data-test="component"
4
4
  ${ref(this.#l)}
@@ -10,7 +10,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
10
10
  tooltip=${ifDefined(this.tooltip)}
11
11
  ?hide=${this.hideLabel}
12
12
  ?disabled=${this.disabled}
13
- ?error=${this.#d}
13
+ ?error=${this.#n}
14
14
  ?required=${this.required}
15
15
  >
16
16
  <label id="label">${this.label}</label>
@@ -20,19 +20,19 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
20
20
  aria-labelledby="label description"
21
21
  role="group"
22
22
  slot="control"
23
- class=${classMap({"checkbox-container":!0,invalid:this.#d})}
23
+ class=${classMap({"checkbox-container":!0,invalid:this.#n})}
24
24
  >
25
25
  <slot
26
26
  class="default-slot"
27
- @private-checked-change=${this.#n}
27
+ @private-checked-change=${this.#d}
28
28
  @private-disabled-change=${this.#c}
29
29
  @private-value-change=${this.#h}
30
30
  @slotchange=${this.#p}
31
- ${assertSlot([GlideCoreCheckbox])}
31
+ ${assertSlot([Checkbox])}
32
32
  ${ref(this.#u)}
33
33
  >
34
34
  <!--
35
- @type {GlideCoreCheckbox}
35
+ @type {Checkbox}
36
36
  @required
37
37
  -->
38
38
  </slot>
@@ -40,7 +40,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
40
40
 
41
41
  <div id="description" slot="description">
42
42
  <slot
43
- class=${classMap({description:!0,hidden:Boolean(this.#d&&this.validityMessage)})}
43
+ class=${classMap({description:!0,hidden:Boolean(this.#n&&this.validityMessage)})}
44
44
  name="description"
45
45
  >
46
46
  <!--
@@ -49,9 +49,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
49
49
  -->
50
50
  </slot>
51
51
 
52
- ${when(this.#d&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
52
+ ${when(this.#n&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
53
53
  >${unsafeHTML(this.validityMessage)}</span
54
54
  >`))}
55
55
  </div>
56
56
  </glide-core-private-label>
57
- </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#l.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#u=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#u;#o;#e;#i;#s;get#t(){return this.#u.value?this.#u.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#f(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#f()}#n(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.#s=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.#s=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#c(e){if(e.target instanceof GlideCoreCheckbox&&e.target.disabled&&e.target.checked){const t=this.#s.lastIndexOf(e.target.value);this.#s.splice(t,t+1)}else e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value&&this.#s.push(e.target.value)}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){for(const e of this.#t)e.privateVariant="minimal";this.#s=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0}),required],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreCheckboxGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
57
+ </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#s.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#s.setValidity({customError:!1},"",this.#l.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#s.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#u=createRef(),this.#e=!1,this.#i=!1,this.#o=[],this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#s=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#u;#s;#e;#i;#o;get#t(){return this.#u.value?this.#u.value.assignedElements().filter((e=>e instanceof Checkbox)):[]}#a;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#f(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#r(e){const t=e.relatedTarget;t&&t instanceof Checkbox&&this.#t.includes(t)||this.#f()}#d(e){e.target instanceof Checkbox&&e.target.checked&&e.target.value?this.#o=[...this.value,e.target.value]:e.target instanceof Checkbox&&!e.target.checked&&(this.#o=this.value.filter((t=>e.target instanceof Checkbox&&t!==e.target.value)))}#c(e){if(e.target instanceof Checkbox&&e.target.disabled&&e.target.checked){const t=this.#o.lastIndexOf(e.target.value);this.#o.splice(t,t+1)}else e.target instanceof Checkbox&&e.target.checked&&e.target.value&&this.#o.push(e.target.value)}#h(e){e.target instanceof Checkbox&&e.target.checked&&e.detail.new?this.value=this.#o.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof Checkbox&&e.target.checked&&(this.value=this.#o.filter((t=>t!==e.detail.old)))}#p(){for(const e of this.#t)e.privateVariant="minimal";this.#o=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0}),required],CheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],CheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],CheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],CheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],CheckboxGroup.prototype,"orientation",void 0),__decorate([property()],CheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],CheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"tooltip",void 0),__decorate([property({type:Array})],CheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"version",void 0),__decorate([state()],CheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],CheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],CheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],CheckboxGroup.prototype,"validityMessage",void 0),CheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],CheckboxGroup);export default CheckboxGroup;
@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
4
4
  import type FormControl from './library/form-control.js';
5
5
  declare global {
6
6
  interface HTMLElementTagNameMap {
7
- 'glide-core-checkbox': GlideCoreCheckbox;
7
+ 'glide-core-checkbox': Checkbox;
8
8
  }
9
9
  }
10
10
  /**
@@ -53,7 +53,7 @@ declare global {
53
53
  * @param {ValidityStateFlags} [flags]
54
54
  * @param {string} [message]
55
55
  */
56
- export default class GlideCoreCheckbox extends LitElement implements FormControl {
56
+ export default class Checkbox extends LitElement implements FormControl {
57
57
  #private;
58
58
  static formAssociated: boolean;
59
59
  static shadowRootOptions: ShadowRootInit;
@@ -81,7 +81,6 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
81
81
  privateLabelTooltipOffset: number;
82
82
  privateShowLabelTooltip: boolean;
83
83
  privateDisableLabelTooltip: boolean;
84
- privateSize: 'large' | 'small';
85
84
  privateSplit?: 'left' | 'middle' | 'right';
86
85
  privateVariant?: 'minimal';
87
86
  required: boolean;
package/dist/checkbox.js CHANGED
@@ -1,7 +1,7 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get checked(){return this.#i}set checked(e){const t=e!==this.#i;this.#i=e,t&&this.dispatchEvent(new Event("private-checked-change",{bubbles:!0}))}get disabled(){return this.#s}set disabled(e){this.#s=e,this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get value(){return this.#a}set value(e){const t=this.#a;this.#a=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#r.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#l=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#l.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#n),this.#l?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.value),this.#r.validity):this.required&&this.#r.validity.valueMissing&&this.checked?(this.#r.setValidity({}),this.#r.validity):(this.required||!this.#r.validity.valueMissing||this.checked||this.#r.setValidity({}),this.#r.validity)}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#n)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
1
+ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Checkbox=class Checkbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get checked(){return this.#i}set checked(e){const t=e!==this.#i;this.#i=e,t&&this.dispatchEvent(new Event("private-checked-change",{bubbles:!0}))}get disabled(){return this.#s}set disabled(e){this.#s=e,this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get value(){return this.#a}set value(e){const t=this.#a;this.#a=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#r.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#l=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#l.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#n),this.#l?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.value),this.#r.validity):this.required&&this.#r.validity.valueMissing&&this.checked?(this.#r.setValidity({}),this.#r.validity):(this.required||!this.#r.validity.valueMissing||this.checked||this.#r.setValidity({}),this.#r.validity)}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#n)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
2
2
  ${when("minimal"===this.privateVariant,(()=>html`
3
3
  <label
4
- class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
4
+ class="label-and-input-and-checkbox"
5
5
  part="private-label-and-input-and-checkbox"
6
6
  >
7
7
  <div
@@ -127,7 +127,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
127
127
  >`))}
128
128
  </div>
129
129
  </glide-core-private-label>`))}
130
- </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#i=!1,this.#s=!1,this.#p=createRef(),this.#a="",this.#n=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#r;#l;#i;#s;#e;#p;#a;#n;get#d(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#b(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#h(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#p.value&&(this.isLabelOverflow=this.#p.value.scrollWidth>this.#p.value.clientWidth)}};__decorate([property({reflect:!0}),required],GlideCoreCheckbox.prototype,"label",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",null),__decorate([property({attribute:"private-internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,useDefault:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"version",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox"),final],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
130
+ </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#i=!1,this.#s=!1,this.#p=createRef(),this.#a="",this.#n=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#r;#l;#i;#s;#e;#p;#a;#n;get#d(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#b(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#h(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#p.value&&(this.isLabelOverflow=this.#p.value.scrollWidth>this.#p.value.clientWidth)}};__decorate([property({reflect:!0}),required],Checkbox.prototype,"label",null),__decorate([property({type:Boolean})],Checkbox.prototype,"checked",null),__decorate([property({attribute:"private-internally-inert",type:Boolean})],Checkbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],Checkbox.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],Checkbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],Checkbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0,useDefault:!0})],Checkbox.prototype,"orientation",void 0),__decorate([property({reflect:!0,useDefault:!0})],Checkbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,useDefault:!0,type:Number})],Checkbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],Checkbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],Checkbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property()],Checkbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],Checkbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],Checkbox.prototype,"required",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"value",null),__decorate([property({type:Boolean})],Checkbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"version",void 0),__decorate([state()],Checkbox.prototype,"isBlurring",void 0),__decorate([state()],Checkbox.prototype,"isCheckingValidity",void 0),__decorate([state()],Checkbox.prototype,"isLabelOverflow",void 0),__decorate([state()],Checkbox.prototype,"validityMessage",void 0),Checkbox=__decorate([customElement("glide-core-checkbox"),final],Checkbox);export default Checkbox;const icons={indeterminate:html`
131
131
  <svg
132
132
  aria-hidden="true"
133
133
  style=${styleMap({height:"0.875rem",width:"0.875rem"})}
@@ -4,22 +4,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
4
4
  `,css`
5
5
  .label-and-input-and-checkbox {
6
6
  align-items: center;
7
+ column-gap: var(--glide-core-spacing-base-sm);
7
8
  display: flex;
9
+ font-family: var(--glide-core-typography-family-primary);
10
+ font-size: var(--glide-core-typography-size-body-default);
11
+ font-weight: var(--glide-core-typography-weight-regular);
8
12
  line-height: 100%;
9
-
10
- &.large {
11
- column-gap: var(--glide-core-spacing-base-sm);
12
- font-family: var(--glide-core-typography-family-primary);
13
- font-size: var(--glide-core-typography-size-body-default);
14
- font-weight: var(--glide-core-typography-weight-regular);
15
- }
16
-
17
- &.small {
18
- column-gap: var(--glide-core-spacing-base-xs);
19
- font-family: var(--glide-core-typography-family-primary);
20
- font-size: var(--glide-core-typography-size-body-small);
21
- font-weight: var(--glide-core-typography-weight-regular);
22
- }
23
13
  }
24
14
 
25
15
  .input-and-checkbox-and-summary {
@@ -209,8 +199,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
209
199
  }
210
200
  }
211
201
 
212
- .summary.disabled {
213
- color: var(--glide-core-color-interactive-text-default--disabled);
202
+ .summary {
203
+ &.disabled {
204
+ color: var(--glide-core-color-interactive-text-default--disabled);
205
+ }
214
206
  }
215
207
 
216
208
  .validity-message {
package/dist/drawer.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
2
  declare global {
3
3
  interface HTMLElementTagNameMap {
4
- 'glide-core-drawer': GlideCoreDrawer;
4
+ 'glide-core-drawer': Drawer;
5
5
  }
6
6
  }
7
7
  /**
@@ -18,7 +18,7 @@ declare global {
18
18
  *
19
19
  * @fires {Event} toggle
20
20
  */
21
- export default class GlideCoreDrawer extends LitElement {
21
+ export default class Drawer extends LitElement {
22
22
  #private;
23
23
  static shadowRootOptions: ShadowRootInit;
24
24
  static styles: import("lit").CSSResult[];
package/dist/drawer.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,s=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(n<3?r(s):n>3?r(t,o,s):r(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./drawer.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.pinned=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#o&&t?(this.#i?.cancel(),this.#e?.value?.classList?.add("open"),this.#r=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:o,fill:"forwards",easing:"ease-in",composite:"add"}),this.#r?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#r?.cancel(),this.#i=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:o,fill:"forwards",composite:"add"}),this.#i?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){this.#o&&(this.#e?.value?.classList?.add("open"),this.#r=this.#e?.value?.animate({transform:"translateX(0)"},{duration:0,fill:"forwards"}),this.#e?.value?.animate({opacity:1},{duration:0,fill:"forwards",composite:"add"}))}render(){return html`<aside aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,pinned:this.pinned})}" data-test="component" tabindex="-1" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#t)}></slot></aside>`}#i;#e;#t;#o;#r};__decorate([property({reflect:!0}),required],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDrawer.prototype,"version",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer"),final],GlideCoreDrawer);export default GlideCoreDrawer;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var n,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(r<3?n(s):r>3?n(t,o,s):n(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./drawer.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Drawer=class Drawer extends LitElement{constructor(){super(...arguments),this.pinned=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#o&&t?(this.#i?.cancel(),this.#e?.value?.classList?.add("open"),this.#n=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:o,fill:"forwards",easing:"ease-in",composite:"add"}),this.#n?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#n?.cancel(),this.#i=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:o,fill:"forwards",composite:"add"}),this.#i?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){this.#o&&(this.#e?.value?.classList?.add("open"),this.#n=this.#e?.value?.animate({transform:"translateX(0)"},{duration:0,fill:"forwards"}),this.#e?.value?.animate({opacity:1},{duration:0,fill:"forwards",composite:"add"}))}render(){return html`<aside aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,pinned:this.pinned})}" data-test="component" tabindex="-1" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#t)}></slot></aside>`}#i;#e;#t;#o;#n};__decorate([property({reflect:!0}),required],Drawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Drawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],Drawer.prototype,"open",null),__decorate([property({reflect:!0})],Drawer.prototype,"version",void 0),Drawer=__decorate([customElement("glide-core-drawer"),final],Drawer);export default Drawer;
@@ -3,11 +3,11 @@ import './icon-button.js';
3
3
  import './label.js';
4
4
  import './tooltip.js';
5
5
  import { LitElement } from 'lit';
6
- import GlideCoreDropdownOption from './dropdown.option.js';
6
+ import DropdownOption from './dropdown.option.js';
7
7
  import type FormControl from './library/form-control.js';
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
- 'glide-core-dropdown': GlideCoreDropdown;
10
+ 'glide-core-dropdown': Dropdown;
11
11
  }
12
12
  }
13
13
  /**
@@ -25,7 +25,6 @@ declare global {
25
25
  * @attr {boolean} [readonly=false]
26
26
  * @attr {boolean} [required=false]
27
27
  * @attr {boolean} [select-all=false]
28
- * @attr {'large'|'small'} [size='large']
29
28
  * @attr {string} [tooltip]
30
29
  * @attr {string[]} [value=[]]
31
30
  * @attr {'quiet'} [variant]
@@ -33,7 +32,7 @@ declare global {
33
32
  * @readonly
34
33
  * @attr {string} [version]
35
34
  *
36
- * @slot {GlideCoreDropdownOption}
35
+ * @slot {DropdownOption}
37
36
  * @slot {Element | string} [description] - Additional information or context
38
37
  * @slot {Element} [icon:value] - Icons for the selected option or options. Slot one icon per Dropdown Option. `<value>` should be equal to the `value` of each Dropdown Option.
39
38
  *
@@ -54,7 +53,7 @@ declare global {
54
53
  *
55
54
  * @method filter
56
55
  * @param {string} query
57
- * @returns Promise<GlideCoreDropdownOption[]>
56
+ * @returns Promise<DropdownOption[] | undefined | void>
58
57
  *
59
58
  * @method formAssociatedCallback
60
59
  * @method formResetCallback
@@ -71,7 +70,7 @@ declare global {
71
70
  * @param {ValidityStateFlags} [flags]
72
71
  * @param {string} [message]
73
72
  */
74
- export default class GlideCoreDropdown extends LitElement implements FormControl {
73
+ export default class Dropdown extends LitElement implements FormControl {
75
74
  #private;
76
75
  static formAssociated: boolean;
77
76
  static shadowRootOptions: ShadowRootInit;
@@ -107,11 +106,6 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
107
106
  */
108
107
  get multiple(): boolean;
109
108
  set multiple(isMultiple: boolean);
110
- /**
111
- * @default 'large'
112
- */
113
- get size(): 'large' | 'small';
114
- set size(size: 'large' | 'small');
115
109
  tooltip?: string;
116
110
  /**
117
111
  * @default []
@@ -131,7 +125,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
131
125
  connectedCallback(): void;
132
126
  createRenderRoot(): ShadowRoot;
133
127
  disconnectedCallback(): void;
134
- filter(query: string): Promise<GlideCoreDropdownOption[]>;
128
+ filter(query: string): Promise<DropdownOption[] | undefined | void>;
135
129
  firstUpdated(): void;
136
130
  focus(options?: FocusOptions): void;
137
131
  get form(): HTMLFormElement | null;
@@ -145,6 +139,8 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
145
139
  setValidity(flags?: ValidityStateFlags, message?: string): void;
146
140
  constructor();
147
141
  private ariaActivedescendant;
142
+ private hasNoAvailableOptions;
143
+ private hasNoMatchingOptions;
148
144
  private inputValue;
149
145
  private isBlurring;
150
146
  private isCheckingValidity;
@@ -155,7 +151,6 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
155
151
  private isInputTooltipOpen;
156
152
  private isInternalLabelOverflow;
157
153
  private isInternalLabelTooltipOpen;
158
- private isNoResults;
159
154
  private isReportValidityOrSubmit;
160
155
  private isShowSingleSelectIcon;
161
156
  private itemCount;