@crowdstrike/glide-core 0.19.5 → 0.20.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 (139) hide show
  1. package/README.md +7 -26
  2. package/dist/accordion.d.ts +13 -4
  3. package/dist/accordion.js +1 -1
  4. package/dist/button-group.button.d.ts +16 -3
  5. package/dist/button-group.button.js +1 -1
  6. package/dist/button-group.d.ts +16 -5
  7. package/dist/button-group.js +1 -1
  8. package/dist/button.d.ts +16 -3
  9. package/dist/button.js +1 -1
  10. package/dist/checkbox-group.d.ts +49 -6
  11. package/dist/checkbox-group.js +16 -5
  12. package/dist/checkbox-group.styles.js +1 -1
  13. package/dist/checkbox.d.ts +50 -8
  14. package/dist/checkbox.js +22 -9
  15. package/dist/checkbox.styles.js +1 -1
  16. package/dist/drawer.d.ts +13 -3
  17. package/dist/drawer.js +1 -1
  18. package/dist/drawer.styles.js +6 -1
  19. package/dist/dropdown.d.ts +78 -11
  20. package/dist/dropdown.js +83 -55
  21. package/dist/dropdown.option.d.ts +31 -4
  22. package/dist/dropdown.option.js +1 -1
  23. package/dist/dropdown.option.styles.js +1 -1
  24. package/dist/dropdown.styles.js +14 -12
  25. package/dist/form-controls-layout.d.ts +10 -2
  26. package/dist/form-controls-layout.js +1 -1
  27. package/dist/icon-button.d.ts +12 -2
  28. package/dist/icon-button.js +1 -1
  29. package/dist/icon-button.styles.js +8 -8
  30. package/dist/icons/checked.js +1 -1
  31. package/dist/icons/chevron.js +1 -1
  32. package/dist/icons/magnifying-glass.js +1 -1
  33. package/dist/icons/pencil.js +1 -1
  34. package/dist/icons/severity-critical.d.ts +2 -0
  35. package/dist/icons/severity-critical.js +1 -0
  36. package/dist/icons/severity-informational.d.ts +2 -0
  37. package/dist/icons/severity-informational.js +1 -0
  38. package/dist/icons/severity-medium.d.ts +2 -0
  39. package/dist/icons/severity-medium.js +1 -0
  40. package/dist/icons/x.js +1 -1
  41. package/dist/inline-alert.d.ts +9 -10
  42. package/dist/inline-alert.js +1 -1
  43. package/dist/inline-alert.styles.js +3 -3
  44. package/dist/input.d.ts +53 -12
  45. package/dist/input.js +32 -13
  46. package/dist/input.styles.js +6 -3
  47. package/dist/label.d.ts +13 -7
  48. package/dist/label.js +1 -1
  49. package/dist/label.styles.js +10 -14
  50. package/dist/library/assert-slot.d.ts +2 -3
  51. package/dist/library/assert-slot.js +1 -1
  52. package/dist/library/assert-slot.test.js +10 -21
  53. package/dist/library/expect-unhandled-rejection.d.ts +1 -1
  54. package/dist/library/final.d.ts +3 -0
  55. package/dist/library/final.js +1 -0
  56. package/dist/library/final.test.d.ts +1 -0
  57. package/dist/library/final.test.js +44 -0
  58. package/dist/library/form-control.d.ts +7 -8
  59. package/dist/library/get-parent-class-name.d.ts +3 -0
  60. package/dist/library/get-parent-class-name.js +1 -0
  61. package/dist/library/localize.test.js +9 -12
  62. package/dist/library/on-resize.d.ts +12 -0
  63. package/dist/library/on-resize.js +1 -0
  64. package/dist/library/required.d.ts +2 -0
  65. package/dist/library/required.js +1 -0
  66. package/dist/library/required.test.d.ts +1 -0
  67. package/dist/library/required.test.js +47 -0
  68. package/dist/menu.button.d.ts +10 -1
  69. package/dist/menu.button.js +1 -1
  70. package/dist/menu.button.styles.js +3 -3
  71. package/dist/menu.d.ts +23 -7
  72. package/dist/menu.js +1 -1
  73. package/dist/menu.link.d.ts +11 -1
  74. package/dist/menu.link.js +1 -1
  75. package/dist/menu.link.styles.js +3 -3
  76. package/dist/menu.options.d.ts +8 -2
  77. package/dist/menu.options.js +1 -1
  78. package/dist/menu.options.styles.js +7 -7
  79. package/dist/modal.d.ts +19 -6
  80. package/dist/modal.icon-button.d.ts +7 -3
  81. package/dist/modal.icon-button.js +1 -1
  82. package/dist/modal.icon-button.styles.js +1 -1
  83. package/dist/modal.js +1 -1
  84. package/dist/modal.styles.js +26 -8
  85. package/dist/popover.d.ts +20 -3
  86. package/dist/popover.js +1 -1
  87. package/dist/popover.styles.js +6 -6
  88. package/dist/radio-group.d.ts +48 -6
  89. package/dist/radio-group.js +15 -6
  90. package/dist/radio-group.radio.d.ts +26 -2
  91. package/dist/radio-group.radio.js +1 -1
  92. package/dist/split-button.d.ts +15 -5
  93. package/dist/split-button.js +1 -1
  94. package/dist/split-button.primary-button.d.ts +10 -1
  95. package/dist/split-button.primary-button.js +1 -1
  96. package/dist/split-button.primary-link.d.ts +8 -1
  97. package/dist/split-button.primary-link.js +1 -1
  98. package/dist/split-button.secondary-button.d.ts +9 -1
  99. package/dist/split-button.secondary-button.js +1 -1
  100. package/dist/split-button.secondary-button.styles.js +2 -2
  101. package/dist/styles/variables.css +1 -1
  102. package/dist/tab.d.ts +16 -5
  103. package/dist/tab.group.d.ts +14 -15
  104. package/dist/tab.group.js +1 -1
  105. package/dist/tab.group.styles.js +8 -3
  106. package/dist/tab.js +1 -1
  107. package/dist/tab.panel.d.ts +11 -5
  108. package/dist/tab.panel.js +1 -1
  109. package/dist/tab.panel.styles.js +9 -2
  110. package/dist/tag.d.ts +11 -2
  111. package/dist/tag.js +1 -1
  112. package/dist/tag.styles.js +4 -4
  113. package/dist/textarea.d.ts +46 -6
  114. package/dist/textarea.js +12 -4
  115. package/dist/toasts.d.ts +18 -16
  116. package/dist/toasts.js +1 -1
  117. package/dist/toasts.toast.d.ts +11 -5
  118. package/dist/toasts.toast.js +1 -1
  119. package/dist/toasts.toast.styles.js +1 -1
  120. package/dist/toggle.d.ts +13 -4
  121. package/dist/toggle.js +1 -1
  122. package/dist/toggle.styles.js +3 -3
  123. package/dist/tooltip.container.d.ts +11 -2
  124. package/dist/tooltip.container.js +1 -1
  125. package/dist/tooltip.d.ts +40 -3
  126. package/dist/tooltip.js +1 -1
  127. package/dist/tooltip.styles.js +7 -7
  128. package/dist/tree.d.ts +7 -1
  129. package/dist/tree.item.d.ts +30 -12
  130. package/dist/tree.item.icon-button.d.ts +7 -2
  131. package/dist/tree.item.icon-button.js +1 -1
  132. package/dist/tree.item.icon-button.styles.js +3 -3
  133. package/dist/tree.item.js +1 -1
  134. package/dist/tree.item.menu.d.ts +9 -3
  135. package/dist/tree.item.menu.js +1 -1
  136. package/dist/tree.item.menu.styles.js +3 -3
  137. package/dist/tree.item.styles.js +10 -5
  138. package/dist/tree.js +1 -1
  139. package/package.json +81 -54
@@ -35,7 +35,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
35
35
 
36
36
  &.added {
37
37
  @media (prefers-reduced-motion: no-preference) {
38
- animation: fade-in var(--animation-duration) ease-in-out;
38
+ animation: fade-in var(--private-animation-duration) ease-in-out;
39
39
  }
40
40
  }
41
41
 
@@ -45,7 +45,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
45
45
 
46
46
  &.removed {
47
47
  @media (prefers-reduced-motion: no-preference) {
48
- animation-duration: var(--animation-duration);
48
+ animation-duration: var(--private-animation-duration);
49
49
  animation-fill-mode: forwards;
50
50
  animation-name: fade-out;
51
51
  animation-timing-function: ease-in-out;
@@ -162,13 +162,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
162
162
  }
163
163
 
164
164
  &.medium {
165
- --size: 0.75rem;
165
+ --private-size: 0.75rem;
166
166
 
167
167
  margin-inline-start: 0.375rem;
168
168
  }
169
169
 
170
170
  &.small {
171
- --size: 0.625rem;
171
+ --private-size: 0.625rem;
172
172
 
173
173
  margin-inline-start: var(--glide-core-spacing-xxs);
174
174
  }
@@ -7,11 +7,53 @@ declare global {
7
7
  }
8
8
  }
9
9
  /**
10
- * @event change
11
- * @event input
12
- * @event invalid
10
+ * @attr {string} label
11
+ * @attr {'on'|'off'|'none'|'sentences'|'words'|'characters'} [autocapitalize='on']
12
+ * @attr {'on'|'off'} [autocomplete='on']
13
+ * @attr {boolean} [disabled=false]
14
+ * @attr {boolean} [hide-label=false]
15
+ * @attr {number} [maxlength]
16
+ * @attr {string} [name='']
17
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
18
+ * @attr {string} [placeholder='']
19
+ * @attr {boolean} [readonly=false]
20
+ * @attr {boolean} [required=false]
21
+ * @attr {number} [rows=2]
22
+ * @attr {boolean} [spellcheck=false]
23
+ * @attr {string} [tooltip]
24
+ * @attr {string} [value='']
13
25
  *
14
- * @slot description - Additional information or context.
26
+ * @readonly
27
+ * @attr {0.19.5} [version]
28
+ *
29
+ * @slot {Element | string} [description] - Additional information or context
30
+ *
31
+ * @fires {Event} change
32
+ * @fires {Event} invalid
33
+ *
34
+ * @readonly
35
+ * @prop {HTMLFormElement | null} form
36
+ *
37
+ * @readonly
38
+ * @prop {ValidityState} validity
39
+ *
40
+ * @method checkValidity
41
+ * @returns boolean
42
+ *
43
+ * @method formAssociatedCallback
44
+ * @method formResetCallback
45
+ *
46
+ * @method reportValidity
47
+ * @returns boolean
48
+ *
49
+ * @method resetValidityFeedback
50
+ *
51
+ * @method setCustomValidity
52
+ * @param {string} message
53
+ *
54
+ * @method setValidity
55
+ * @param {ValidityStateFlags} [flags]
56
+ * @param {string} [message]
15
57
  */
16
58
  export default class GlideCoreTextarea extends LitElement implements FormControl {
17
59
  #private;
@@ -35,12 +77,10 @@ export default class GlideCoreTextarea extends LitElement implements FormControl
35
77
  privateSplit?: 'left' | 'middle';
36
78
  tooltip?: string;
37
79
  readonly version: string;
38
- blur(): void;
39
80
  checkValidity(): boolean;
40
81
  disconnectedCallback(): void;
41
82
  get form(): HTMLFormElement | null;
42
83
  get validity(): ValidityState;
43
- get willValidate(): boolean;
44
84
  formAssociatedCallback(): void;
45
85
  formResetCallback(): void;
46
86
  render(): import("lit").TemplateResult<1>;
package/dist/textarea.js CHANGED
@@ -1,4 +1,5 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{html,LitElement,nothing}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{LocalizeController}from"./library/localize.js";import styles from"./textarea.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#t.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get form(){return this.#t.form}get validity(){return!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label
1
+ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{html,LitElement,nothing}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{LocalizeController}from"./library/localize.js";import styles from"./textarea.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#t)}get form(){return this.#e.form}get validity(){return!this.required||this.value||this.disabled?this.required&&this.#e.validity.valueMissing&&this.value?(this.#e.setValidity({}),this.#e.validity):(this.required||!this.#e.validity.valueMissing||this.value||this.#e.setValidity({}),this.#e.validity):(this.#e.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#i.value),this.#e.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#t)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label
2
+ label=${ifDefined(this.label)}
2
3
  split=${ifDefined(this.privateSplit??void 0)}
3
4
  tooltip=${ifDefined(this.tooltip)}
4
5
  orientation=${this.orientation}
@@ -14,6 +15,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
14
15
  aria-describedby="meta"
15
16
  aria-invalid=${this.#a||this.#r}
16
17
  class=${classMap({error:this.#a||this.#r})}
18
+ data-test="textarea"
17
19
  id="textarea"
18
20
  name=${ifDefined(this.name)}
19
21
  placeholder=${ifDefined(this.placeholder)}
@@ -25,7 +27,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
25
27
  ?required=${this.required}
26
28
  ?readonly=${this.readonly}
27
29
  ?disabled=${this.disabled}
28
- ${ref(this.#e)}
30
+ ${ref(this.#i)}
29
31
  @blur=${this.#o}
30
32
  @change=${this.#s}
31
33
  @input=${this.#l}
@@ -38,7 +40,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
38
40
  <slot
39
41
  class=${classMap({description:!0,hidden:Boolean(this.#a&&this.validityMessage)})}
40
42
  name="description"
41
- ></slot>
43
+ >
44
+ <!--
45
+ Additional information or context
46
+ @type {Element | string}
47
+ -->
48
+ </slot>
42
49
 
43
50
  ${when(this.#a&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
44
51
  >${unsafeHTML(this.validityMessage)}</span
@@ -50,9 +57,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
50
57
  <span aria-hidden="true" data-test="character-count-text">
51
58
  ${this.#n.term("displayedCharacterCount",this.#h,this.maxlength)}
52
59
  </span>
60
+
53
61
  <span class="hidden" data-test="character-count-announcement"
54
62
  >${this.#n.term("announcedCharacterCount",this.#h,this.maxlength)}</span
55
63
  >
56
64
  </div>`:nothing}
57
65
  </div></glide-core-private-label
58
- >`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(e,t){this.validityMessage=t,this.#t.setValidity(e," ",this.#e.value)}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#n;#e;#i;get#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#h(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#h>this.maxlength)}#o(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#s(e){this.#e.value&&(this.value=this.#e.value.value),this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}#l(){this.#e.value&&(this.value=this.#e.value.value)}#d(e){"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.form?.requestSubmit()}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"version",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
66
+ >`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#e.setValidity({customError:!1},"",this.#i.value):this.#e.setValidity({customError:!0,valueMissing:this.#e.validity.valueMissing}," ",this.#i.value)}setValidity(e,t){this.validityMessage=t,this.#e.setValidity(e," ",this.#i.value)}constructor(){super(),this.value="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=new LocalizeController(this),this.#i=createRef(),this.#t=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#n;#i;#t;get#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#h(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#h>this.maxlength)}#o(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#s(){this.#i.value&&(this.value=this.#i.value.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#l(){this.#i.value&&(this.value=this.#i.value.value)}#d(e){"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.form?.requestSubmit()}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0}),required],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"version",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea"),final],GlideCoreTextarea);export default GlideCoreTextarea;
package/dist/toasts.d.ts CHANGED
@@ -1,31 +1,33 @@
1
- import './toasts.toast.js';
2
1
  import { LitElement } from 'lit';
2
+ import GlideCoreToast from './toasts.toast.js';
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
5
5
  'glide-core-toasts': GlideCoreToasts;
6
6
  }
7
7
  }
8
- export interface Toast {
9
- label: string;
10
- description: string;
11
- variant: 'error' | 'informational' | 'success';
12
- duration?: number;
13
- }
8
+ /**
9
+ * @readonly
10
+ * @attr {0.19.5} [version]
11
+ *
12
+ * @method add
13
+ * @param {{
14
+ * label: string;
15
+ * description: string;
16
+ * variant: 'error' | 'informational' | 'success';
17
+ * duration?: number; // Defaults to 5000. Set to `Infinity` to make the toast persist until dismissed.
18
+ * }} toast
19
+ * @returns GlideCoreToast
20
+ */
14
21
  export default class GlideCoreToasts extends LitElement {
15
22
  #private;
16
23
  static shadowRootOptions: ShadowRootInit;
17
24
  static styles: import("lit").CSSResult[];
18
25
  readonly version: string;
19
- /**
20
- * @param {number} [toast.duration=5000]
21
- * Optional: Number of milliseconds before the Toast auto-hides.
22
- * Minimum: `5000`. Default: `5000`. For a Toast that never auto-hides, set to `Infinity`
23
- * */
24
- add(toast: Toast): import("./toasts.toast.js").default & {
25
- variant: "error" | "informational" | "success";
26
+ add(toast: {
26
27
  label: string;
27
28
  description: string;
28
- duration: number | undefined;
29
- };
29
+ variant: 'error' | 'informational' | 'success';
30
+ duration?: number;
31
+ }): GlideCoreToast;
30
32
  render(): import("lit").TemplateResult<1>;
31
33
  }
package/dist/toasts.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import"./toasts.toast.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return this.#e.value&&(this.#e.value.popover="manual",this.#e.value.showPopover(),this.#e.value.append(i)),i.addEventListener("close",(()=>{i.remove(),0===this.#e.value?.querySelectorAll("glide-core-toast").length&&this.#e.value?.hidePopover()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreToasts.prototype,"version",void 0),GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import GlideCoreToast from"./toasts.toast.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return this.#e.value&&(this.#e.value.popover="manual",this.#e.value.showPopover(),this.#e.value.append(i)),i.addEventListener("close",(()=>{i.remove(),0===this.#e.value?.querySelectorAll("glide-core-toast").length&&this.#e.value?.hidePopover()}),{once:!0}),i}render(){return html`<div class="component" data-test="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreToasts.prototype,"version",void 0),GlideCoreToasts=__decorate([customElement("glide-core-toasts"),final],GlideCoreToasts);export default GlideCoreToasts;
@@ -1,23 +1,29 @@
1
1
  import './icon-button.js';
2
- import './tooltip.js';
3
2
  import { LitElement } from 'lit';
4
- import type { Toast } from './toasts.js';
5
3
  declare global {
6
4
  interface HTMLElementTagNameMap {
7
5
  'glide-core-toast': GlideCoreToast;
8
6
  }
9
7
  }
10
8
  /**
11
- * @private
12
- * */
9
+ * @attr {string} [description]
10
+ * @attr {number} [duration=5000]
11
+ * @attr {string} [label]
12
+ * @attr {'error'|'informational'|'success'} [variant]
13
+ *
14
+ * @fires {Event} close
15
+ *
16
+ * @method close
17
+ * @method open
18
+ */
13
19
  export default class GlideCoreToast extends LitElement {
14
20
  #private;
15
21
  static shadowRootOptions: ShadowRootInit;
16
22
  static styles: import("lit").CSSResult[];
17
23
  label?: string;
18
24
  description?: string;
19
- variant?: Toast['variant'];
20
25
  duration?: number | undefined;
26
+ variant?: 'error' | 'informational' | 'success';
21
27
  close(): void;
22
28
  firstUpdated(): void;
23
29
  open(): void;
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import"./tooltip.js";import{html,LitElement}from"lit";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LocalizeController}from"./library/localize.js";import styles from"./toasts.toast.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}close(){const e=this.#e?.value;e?.addEventListener("transitionend",(()=>{e?.classList?.remove("open"),e?.classList?.remove("closing"),e?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),e?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,error:"error"===this.variant,informational:"informational"===this.variant,success:"success"===this.variant})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}>${choose(this.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}<div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#o}">${xIcon}</glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#o(){this.close()}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;const icons={error:html`<svg aria-hidden="true" class="icon error" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z" fill="currentColor"/></svg>`,success:html`<svg aria-hidden="true" class="icon success" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z" fill="currentColor"/></svg>`,warningInformational:html`<svg aria-hidden="true" class="icon warning-informational" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z" fill="currentColor"/></svg>`};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LocalizeController}from"./library/localize.js";import styles from"./toasts.toast.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}close(){this.#e.value?.addEventListener("transitionend",(()=>{this.#e.value?.classList.remove("open","closing"),this.#e.value?.classList.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),this.#e.value?.classList.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div aria-labelledby="label description" class="${classMap({component:!0,error:"error"===this.variant,informational:"informational"===this.variant,success:"success"===this.variant})}" data-test="component" role="alert" ${ref(this.#e)}>${choose(this.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}<div class="label" id="label">${this.label}</div><glide-core-icon-button class="close-button" data-test="close-button" label="${this.#t.term("close")}" variant="tertiary" @click="${this.#o}">${xIcon}</glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#o(){this.close()}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast"),final],GlideCoreToast);export default GlideCoreToast;const icons={error:html`<svg aria-hidden="true" class="icon error" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z" fill="currentColor"/></svg>`,success:html`<svg aria-hidden="true" class="icon success" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z" fill="currentColor"/></svg>`,warningInformational:html`<svg aria-hidden="true" class="icon warning-informational" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z" fill="currentColor"/></svg>`};
@@ -62,7 +62,7 @@ import{css}from"lit";export default[css`
62
62
  }
63
63
 
64
64
  .close-button {
65
- --icon-color: var(--glide-core-icon-default2);
65
+ --private-icon-color: var(--glide-core-icon-default2);
66
66
 
67
67
  grid-column: 3;
68
68
  }
package/dist/toggle.d.ts CHANGED
@@ -6,10 +6,20 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @event change
10
- * @event input
9
+ * @attr {string} label
10
+ * @attr {boolean} [checked=false]
11
+ * @attr {boolean} [disabled=false]
12
+ * @attr {boolean} [hide-label=false]
13
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
14
+ * @attr {string} [summary]
15
+ * @attr {string} [tooltip]
11
16
  *
12
- * @slot description - Additional information or context.
17
+ * @readonly
18
+ * @attr {0.19.5} [version]
19
+ *
20
+ * @slot {Element | string} [description] - Additional information or context
21
+ *
22
+ * @fires {Event} change
13
23
  */
14
24
  export default class GlideCoreToggle extends LitElement {
15
25
  #private;
@@ -20,7 +30,6 @@ export default class GlideCoreToggle extends LitElement {
20
30
  hideLabel: boolean;
21
31
  label?: string;
22
32
  orientation: 'horizontal' | 'vertical';
23
- name?: string;
24
33
  privateSplit?: 'left' | 'middle';
25
34
  summary?: string;
26
35
  tooltip?: string;
package/dist/toggle.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<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 d=e.length-1;d>=0;d--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{html,LitElement}from"lit";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"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" tooltip="${ifDefined(this.tooltip)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"version",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<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 d=e.length-1;d>=0;d--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import styles from"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label label="${ifDefined(this.label)}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" tooltip="${ifDefined(this.tooltip)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div>${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}<slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0}),required],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"version",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle"),final],GlideCoreToggle);export default GlideCoreToggle;
@@ -8,7 +8,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
8
8
  }
9
9
 
10
10
  .toggle-and-input {
11
- --inline-size: 1.5rem;
11
+ --private-inline-size: 1.5rem;
12
12
 
13
13
  align-items: center;
14
14
  background-color: var(--glide-core-surface-selected-disabled);
@@ -17,7 +17,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
17
17
  border-radius: var(--glide-core-spacing-sm);
18
18
  display: flex;
19
19
  flex-shrink: 0; /* Don't shrink when the summary wraps. */
20
- inline-size: var(--inline-size);
20
+ inline-size: var(--private-inline-size);
21
21
  justify-content: center;
22
22
  position: relative;
23
23
 
@@ -58,7 +58,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
58
58
  inline-size: 0.875rem;
59
59
  inset-inline-end: 0;
60
60
  position: absolute;
61
- transform: translateX(calc(var(--inline-size) * -1 + 100%));
61
+ transform: translateX(calc(var(--private-inline-size) * -1 + 100%));
62
62
  transition: 150ms transform;
63
63
  }
64
64
  }
@@ -1,18 +1,27 @@
1
1
  import { LitElement } from 'lit';
2
- import { type Placement } from '@floating-ui/dom';
3
2
  declare global {
4
3
  interface HTMLElementTagNameMap {
5
4
  'glide-core-private-tooltip-container': GlideCoreTooltipContainer;
6
5
  }
7
6
  }
7
+ /**
8
+ * @attr {boolean} [disabled=false]
9
+ * @attr {string} [label]
10
+ * @attr {'bottom'|'left'|'right'|'top'} [placement]
11
+ * @attr {boolean} [screenreader-hidden=false]
12
+ * @attr {string[]} [shortcut=[]]
13
+ */
8
14
  export default class GlideCoreTooltipContainer extends LitElement {
9
15
  #private;
10
16
  static shadowRootOptions: ShadowRootInit;
11
17
  static styles: import("lit").CSSResult[];
18
+ /**
19
+ * @default false
20
+ */
12
21
  get disabled(): boolean;
13
22
  set disabled(isDisabled: boolean);
14
23
  label?: string;
15
- placement?: Placement;
24
+ placement?: 'bottom' | 'left' | 'right' | 'top';
16
25
  screenreaderHidden: boolean;
17
26
  shortcut: string[];
18
27
  connectedCallback(): void;
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,l=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var d=e.length-1;d>=0;d--)(i=e[d])&&(l=(s<3?i(l):s>3?i(t,o,l):i(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import{classMap}from"lit/directives/class-map.js";import{}from"@floating-ui/dom";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTooltipContainer=class GlideCoreTooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.role=e||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=nanoid(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0,reversed:"left"===this.placement})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,reversed:"left"===this.placement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#e};__decorate([property({type:Boolean})],GlideCoreTooltipContainer.prototype,"disabled",null),__decorate([property()],GlideCoreTooltipContainer.prototype,"label",void 0),__decorate([property()],GlideCoreTooltipContainer.prototype,"placement",void 0),__decorate([property({type:Boolean})],GlideCoreTooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],GlideCoreTooltipContainer.prototype,"shortcut",void 0),GlideCoreTooltipContainer=__decorate([customElement("glide-core-private-tooltip-container")],GlideCoreTooltipContainer);export default GlideCoreTooltipContainer;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,l=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(l=(s<3?i(l):s>3?i(t,o,l):i(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreTooltipContainer=class GlideCoreTooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.role=e||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=nanoid(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0,reversed:"left"===this.placement})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,reversed:"left"===this.placement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#e};__decorate([property({type:Boolean})],GlideCoreTooltipContainer.prototype,"disabled",null),__decorate([property()],GlideCoreTooltipContainer.prototype,"label",void 0),__decorate([property()],GlideCoreTooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],GlideCoreTooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],GlideCoreTooltipContainer.prototype,"shortcut",void 0),GlideCoreTooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],GlideCoreTooltipContainer);export default GlideCoreTooltipContainer;
package/dist/tooltip.d.ts CHANGED
@@ -6,25 +6,62 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @event toggle
9
+ * @attr {string} label
10
+ * @attr {boolean} [disabled=false]
11
+ * @attr {number} [offset=4]
12
+ * @attr {boolean} [open=false]
13
+ * @attr {'bottom'|'left'|'right'|'top'} [placement] - The placement of the tooltip relative to its target. Automatic placement will take over if the tooltip is cut off by the viewport.
14
+ * @attr {boolean} [screenreader-hidden=false]
15
+ * @attr {string[]} [shortcut=[]]
10
16
  *
11
- * @slot target - The element to which the tooltip will anchor.
17
+ * @readonly
18
+ * @attr {0.19.5} [version]
19
+ *
20
+ * @slot {GlideCoreTooltipContainer} [private]
21
+ * @slot {Element} target - The element to which the tooltip will anchor. Can be any element with an implicit or explicit ARIA role.
22
+ *
23
+ * @fires {Event} toggle
12
24
  */
13
25
  export default class GlideCoreTooltip extends LitElement {
14
26
  #private;
15
27
  static shadowRootOptions: ShadowRootInit;
16
28
  static styles: import("lit").CSSResult[];
29
+ /**
30
+ * @default false
31
+ */
17
32
  get disabled(): boolean;
18
33
  set disabled(isDisabled: boolean);
19
- get label(): string;
34
+ /**
35
+ * @default undefined
36
+ */
37
+ get label(): string | undefined;
20
38
  set label(label: string);
39
+ /**
40
+ * @default 4
41
+ */
21
42
  get offset(): number;
22
43
  set offset(offset: number);
44
+ /**
45
+ * @default false
46
+ */
23
47
  get open(): boolean;
48
+ /**
49
+ * @default false
50
+ */
24
51
  set open(isOpen: boolean);
52
+ /**
53
+ * The placement of the tooltip relative to its target. Automatic placement will
54
+ * take over if the tooltip is cut off by the viewport.
55
+ */
25
56
  placement?: 'bottom' | 'left' | 'right' | 'top';
57
+ /**
58
+ * @default false
59
+ */
26
60
  get screenreaderHidden(): boolean;
27
61
  set screenreaderHidden(isHidden: boolean);
62
+ /**
63
+ * @default []
64
+ */
28
65
  get shortcut(): string[];
29
66
  set shortcut(shortcut: string[]);
30
67
  readonly version: string;
package/dist/tooltip.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r="",this.#s=[],this.#l=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#d();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get label(){return this.#r}set label(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#s}set shortcut(e){this.#s=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#a.value&&(this.#a.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#u}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" @focusin="${this.#f}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#l)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#r;#c;#h;#s;#l;#a;#w(){clearTimeout(this.#p)}#d(){this.#a.value?.hidePopover(),this.#y?.()}#u(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#a.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#l.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#f(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#a.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#l.value&&this.#a.value&&(this.#y=autoUpdate(this.#l.value,this.#a.value,(()=>{(async()=>{if(this.#l.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"version",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<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=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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"./tooltip.styles.js";import"./tooltip.container.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 GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#a():this.#n();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get label(){return this.#d}set label(e){this.#d=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#a(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#s.value&&(this.#s.value.popover="manual"),this.open&&!this.disabled&&this.#a();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#y}" ${assertSlot()} ${ref(this.#l)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#s)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#b;#p;#t;#o;#i;#d;#c;#h;#r;#l;#s;#w(){clearTimeout(this.#p)}#n(){this.#s.value?.hidePopover(),this.#b?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#s.value?.dataset.openDelay))}#y(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#l.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#u(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#s.value?.dataset.closeDelay))}#a(){this.disabled||(this.#b?.(),this.#l.value&&this.#s.value&&(this.#b=autoUpdate(this.#l.value,this.#s.value,(()=>{(async()=>{if(this.#l.value&&this.#s.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.value,this.#s.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#s.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#s.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0}),required],GlideCoreTooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"version",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip"),final],GlideCoreTooltip);export default GlideCoreTooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
@@ -3,7 +3,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
3
3
  ${focusOutline(".target-slot:focus-visible")}
4
4
  `,css`
5
5
  :host {
6
- // https://github.com/CrowdStrike/glide-core/pull/307/files#r1718545771
6
+ /* https://github.com/CrowdStrike/glide-core/pull/307/files#r1718545771 */
7
7
  display: inline-block;
8
8
  }
9
9
 
@@ -74,8 +74,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
74
74
  }
75
75
 
76
76
  .arrow {
77
- --arrow-height: 0.375rem;
78
- --arrow-width: 0.625rem;
77
+ --private-arrow-height: 0.375rem;
78
+ --private-arrow-width: 0.625rem;
79
79
 
80
80
  color: var(--glide-core-surface-base-dark);
81
81
  display: flex;
@@ -83,14 +83,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
83
83
 
84
84
  &.top,
85
85
  &.bottom {
86
- block-size: var(--arrow-height);
87
- inline-size: var(--arrow-width);
86
+ block-size: var(--private-arrow-height);
87
+ inline-size: var(--private-arrow-width);
88
88
  }
89
89
 
90
90
  &.right,
91
91
  &.left {
92
- block-size: var(--arrow-width);
93
- inline-size: var(--arrow-height);
92
+ block-size: var(--private-arrow-width);
93
+ inline-size: var(--private-arrow-height);
94
94
  order: 2;
95
95
  }
96
96
  }
package/dist/tree.d.ts CHANGED
@@ -6,7 +6,13 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @slot - One or more of `<glide-core-tree-item>`.
9
+ * @readonly
10
+ * @attr {0.19.5} [version]
11
+ *
12
+ * @slot {GlideCoreTreeItem}
13
+ *
14
+ * @method selectItem
15
+ * @param {GlideCoreTreeItem} item
10
16
  */
11
17
  export default class GlideCoreTree extends LitElement {
12
18
  #private;