@crowdstrike/glide-core 0.26.1 → 0.28.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 (114) 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 +17 -22
  17. package/dist/dropdown.js +102 -107
  18. package/dist/dropdown.option.d.ts +9 -9
  19. package/dist/dropdown.option.js +1 -1
  20. package/dist/dropdown.option.styles.js +16 -79
  21. package/dist/dropdown.styles.js +57 -74
  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/icons/checked.js +1 -1
  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/input.styles.js +9 -7
  32. package/dist/label.d.ts +2 -2
  33. package/dist/label.js +1 -1
  34. package/dist/label.styles.js +5 -1
  35. package/dist/library/assert-slot.d.ts +1 -1
  36. package/dist/library/assert-slot.test.js +22 -22
  37. package/dist/library/expect-window-error.js +1 -1
  38. package/dist/library/final.test.js +9 -9
  39. package/dist/library/form-control.d.ts +1 -1
  40. package/dist/library/localize.d.ts +5 -0
  41. package/dist/library/localize.test.js +6 -6
  42. package/dist/library/required.test.js +5 -5
  43. package/dist/library/unique-id.d.ts +2 -0
  44. package/dist/library/unique-id.js +1 -0
  45. package/dist/link.d.ts +2 -3
  46. package/dist/link.js +1 -1
  47. package/dist/link.styles.js +1 -1
  48. package/dist/menu.button.d.ts +2 -2
  49. package/dist/menu.button.js +1 -1
  50. package/dist/menu.button.styles.js +3 -3
  51. package/dist/menu.d.ts +3 -9
  52. package/dist/menu.js +1 -1
  53. package/dist/menu.link.d.ts +2 -2
  54. package/dist/menu.link.js +1 -1
  55. package/dist/menu.link.styles.js +3 -3
  56. package/dist/menu.options.d.ts +3 -4
  57. package/dist/menu.options.js +1 -1
  58. package/dist/menu.options.styles.js +3 -20
  59. package/dist/modal.d.ts +6 -6
  60. package/dist/modal.icon-button.d.ts +2 -2
  61. package/dist/modal.icon-button.js +1 -1
  62. package/dist/modal.js +1 -1
  63. package/dist/popover.d.ts +2 -2
  64. package/dist/popover.js +1 -1
  65. package/dist/radio-group.d.ts +3 -3
  66. package/dist/radio-group.js +6 -6
  67. package/dist/radio-group.radio.d.ts +2 -2
  68. package/dist/radio-group.radio.js +1 -1
  69. package/dist/slider.d.ts +116 -0
  70. package/dist/slider.js +168 -0
  71. package/dist/slider.styles.d.ts +2 -0
  72. package/dist/slider.styles.js +168 -0
  73. package/dist/spinner.d.ts +2 -2
  74. package/dist/spinner.js +1 -1
  75. package/dist/split-button.d.ts +4 -10
  76. package/dist/split-button.js +1 -1
  77. package/dist/split-button.primary-button.d.ts +2 -2
  78. package/dist/split-button.primary-button.js +1 -1
  79. package/dist/split-button.primary-button.styles.js +4 -14
  80. package/dist/split-button.primary-link.d.ts +2 -2
  81. package/dist/split-button.primary-link.js +1 -1
  82. package/dist/split-button.secondary-button.d.ts +3 -4
  83. package/dist/split-button.secondary-button.js +1 -1
  84. package/dist/split-button.secondary-button.styles.js +4 -15
  85. package/dist/styles/variables.css +1 -1
  86. package/dist/tab.d.ts +12 -4
  87. package/dist/tab.group.d.ts +4 -5
  88. package/dist/tab.group.js +1 -1
  89. package/dist/tab.group.styles.js +14 -16
  90. package/dist/tab.js +1 -1
  91. package/dist/tab.panel.d.ts +12 -5
  92. package/dist/tab.panel.js +1 -1
  93. package/dist/tag.d.ts +2 -4
  94. package/dist/tag.js +1 -1
  95. package/dist/tag.styles.js +7 -52
  96. package/dist/textarea.d.ts +2 -2
  97. package/dist/textarea.js +7 -7
  98. package/dist/textarea.styles.js +17 -2
  99. package/dist/toast.d.ts +3 -3
  100. package/dist/toast.js +1 -1
  101. package/dist/toast.toasts.d.ts +9 -9
  102. package/dist/toast.toasts.js +17 -17
  103. package/dist/toggle.d.ts +2 -2
  104. package/dist/toggle.js +1 -1
  105. package/dist/tooltip.container.d.ts +2 -2
  106. package/dist/tooltip.container.js +1 -1
  107. package/dist/tooltip.d.ts +3 -3
  108. package/dist/tooltip.js +1 -1
  109. package/dist/translations/en.js +1 -1
  110. package/dist/translations/fr.d.ts +1 -1
  111. package/dist/translations/fr.js +1 -1
  112. package/dist/translations/ja.d.ts +1 -1
  113. package/dist/translations/ja.js +1 -1
  114. package/package.json +19 -18
@@ -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;
@@ -1,18 +1,17 @@
1
- import './checkbox.js';
2
1
  import './icon-button.js';
3
2
  import './label.js';
4
3
  import './tooltip.js';
5
4
  import { LitElement } from 'lit';
6
- import GlideCoreDropdownOption from './dropdown.option.js';
5
+ import DropdownOption from './dropdown.option.js';
7
6
  import type FormControl from './library/form-control.js';
8
7
  declare global {
9
8
  interface HTMLElementTagNameMap {
10
- 'glide-core-dropdown': GlideCoreDropdown;
9
+ 'glide-core-dropdown': Dropdown;
11
10
  }
12
11
  }
13
12
  /**
14
13
  * @attr {string} label
15
- * @attr {string} [add-button-label]
14
+ * @attr {boolean} [add-button=false]
16
15
  * @attr {boolean} [disabled=false]
17
16
  * @attr {boolean} [filterable=false]
18
17
  * @attr {boolean} [hide-label=false]
@@ -25,7 +24,6 @@ declare global {
25
24
  * @attr {boolean} [readonly=false]
26
25
  * @attr {boolean} [required=false]
27
26
  * @attr {boolean} [select-all=false]
28
- * @attr {'large'|'small'} [size='large']
29
27
  * @attr {string} [tooltip]
30
28
  * @attr {string[]} [value=[]]
31
29
  * @attr {'quiet'} [variant]
@@ -33,11 +31,11 @@ declare global {
33
31
  * @readonly
34
32
  * @attr {string} [version]
35
33
  *
36
- * @slot {GlideCoreDropdownOption}
34
+ * @slot {DropdownOption}
37
35
  * @slot {Element | string} [description] - Additional information or context
38
- * @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.
36
+ * @slot {Element} [icon:value] - Icons for the selected Dropdown Option(s). Slot one icon per Dropdown Option. `<value>` should be equal to the `value` of each Dropdown Option.
39
37
  *
40
- * @fires {Event} add
38
+ * @fires {CustomEvent} add
41
39
  * @fires {Event} change
42
40
  * @fires {Event} input
43
41
  * @fires {Event} invalid
@@ -54,7 +52,7 @@ declare global {
54
52
  *
55
53
  * @method filter
56
54
  * @param {string} query
57
- * @returns Promise<GlideCoreDropdownOption[] | undefined | void>
55
+ * @returns Promise<DropdownOption[] | undefined | void>
58
56
  *
59
57
  * @method formAssociatedCallback
60
58
  * @method formResetCallback
@@ -71,13 +69,13 @@ declare global {
71
69
  * @param {ValidityStateFlags} [flags]
72
70
  * @param {string} [message]
73
71
  */
74
- export default class GlideCoreDropdown extends LitElement implements FormControl {
72
+ export default class Dropdown extends LitElement implements FormControl {
75
73
  #private;
76
74
  static formAssociated: boolean;
77
75
  static shadowRootOptions: ShadowRootInit;
78
76
  static styles: import("lit").CSSResult[];
79
77
  label?: string;
80
- addButtonLabel?: string;
78
+ addButton: boolean;
81
79
  /**
82
80
  * @default false
83
81
  */
@@ -107,11 +105,6 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
107
105
  */
108
106
  get multiple(): boolean;
109
107
  set multiple(isMultiple: boolean);
110
- /**
111
- * @default 'large'
112
- */
113
- get size(): 'large' | 'small';
114
- set size(size: 'large' | 'small');
115
108
  tooltip?: string;
116
109
  /**
117
110
  * @default []
@@ -121,17 +114,17 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
121
114
  variant?: 'quiet';
122
115
  readonly version: string;
123
116
  private get activeOption();
117
+ private get areAllOptionsSelected();
118
+ private get areSomeOptionsSelected();
124
119
  checkValidity(): boolean;
125
120
  click(): void;
126
121
  private get selectedOptions();
127
- private get lastSelectedOption();
128
- private get isAllSelected();
129
- private get isSomeSelected();
122
+ private get lastSelectedAndEnabledOption();
130
123
  private get internalLabel();
131
124
  connectedCallback(): void;
132
125
  createRenderRoot(): ShadowRoot;
133
126
  disconnectedCallback(): void;
134
- filter(query: string): Promise<GlideCoreDropdownOption[] | undefined | void>;
127
+ filter(query: string): Promise<DropdownOption[] | undefined | void>;
135
128
  firstUpdated(): void;
136
129
  focus(options?: FocusOptions): void;
137
130
  get form(): HTMLFormElement | null;
@@ -148,14 +141,16 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
148
141
  private hasNoAvailableOptions;
149
142
  private hasNoMatchingOptions;
150
143
  private inputValue;
144
+ private isAddButtonActive;
145
+ private isAddButtonVisible;
151
146
  private isBlurring;
152
147
  private isCheckingValidity;
153
148
  private isCommunicateItemCountToScreenreaders;
154
149
  private isFilterable;
155
150
  private isFiltering;
156
- private isInputOverflow;
151
+ private isInputOverflowing;
157
152
  private isInputTooltipOpen;
158
- private isInternalLabelOverflow;
153
+ private isInternalLabelOverflowing;
159
154
  private isInternalLabelTooltipOpen;
160
155
  private isReportValidityOrSubmit;
161
156
  private isShowSingleSelectIcon;