@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
@@ -5,13 +5,21 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
- * @slot - GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreRadioGroup | GlideCoreInput | GlideCoreTextArea.
8
+ * @attr {'left'|'middle'} [split='left']
9
+ *
10
+ * @readonly
11
+ * @attr {0.19.5} [version]
12
+ *
13
+ * @slot {GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreRadioGroup | GlideCoreInput | GlideCoreTextArea}
9
14
  */
10
15
  export default class GlideCoreFormControlsLayout extends LitElement {
11
16
  #private;
12
17
  static shadowRootOptions: ShadowRootInit;
13
18
  static styles: import("lit").CSSResult[];
14
- get split(): "left" | "middle";
19
+ /**
20
+ * @default 'left'
21
+ */
22
+ get split(): 'left' | 'middle';
15
23
  set split(split: 'left' | 'middle');
16
24
  readonly version: string;
17
25
  render(): import("lit").TemplateResult<1>;
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(o,e,t,r){var i,s=arguments.length,l=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(o,e,t,r);else for(var n=o.length-1;n>=0;n--)(i=o[n])&&(l=(s<3?i(l):s>3?i(e,t,l):i(e,t))||l);return s>3&&l&&Object.defineProperty(e,t,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 GlideCoreCheckbox from"./checkbox.js";import GlideCoreCheckboxGroup from"./checkbox-group.js";import GlideCoreDropdown from"./dropdown.js";import GlideCoreRadioGroup from"./radio-group.js";import GlideCoreInput from"./input.js";import GlideCoreTextArea from"./textarea.js";import styles from"./form-controls-layout.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreFormControlsLayout=class GlideCoreFormControlsLayout extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#o=createRef(),this.#e="left"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get split(){return this.#e}set split(o){if(this.#e=o,this.#o.value)for(const o of this.#o.value.assignedElements())"privateSplit"in o&&(o.privateSplit=this.split)}render(){return html`<div class="component"><slot @slotchange="${this.#t}" ${assertSlot([GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreRadioGroup,GlideCoreInput,GlideCoreTextArea])} ${ref(this.#o)}></slot></div>`}#o;#e;#t(){if(this.#o.value)for(const o of this.#o.value.assignedElements())if("privateSplit"in o&&(o.privateSplit=this.split),"orientation"in o&&"horizontal"!==o.orientation)throw new TypeError("Only horizontal controls are supported.")}};__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"split",null),__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"version",void 0),GlideCoreFormControlsLayout=__decorate([customElement("glide-core-form-controls-layout")],GlideCoreFormControlsLayout);export default GlideCoreFormControlsLayout;
1
+ var __decorate=this&&this.__decorate||function(o,e,t,r){var i,l=arguments.length,s=l<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(o,e,t,r);else for(var n=o.length-1;n>=0;n--)(i=o[n])&&(s=(l<3?i(s):l>3?i(e,t,s):i(e,t))||s);return l>3&&s&&Object.defineProperty(e,t,s),s};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 GlideCoreCheckbox from"./checkbox.js";import GlideCoreCheckboxGroup from"./checkbox-group.js";import GlideCoreDropdown from"./dropdown.js";import GlideCoreRadioGroup from"./radio-group.js";import GlideCoreInput from"./input.js";import GlideCoreTextArea from"./textarea.js";import styles from"./form-controls-layout.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreFormControlsLayout=class GlideCoreFormControlsLayout extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#o=createRef(),this.#e="left"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get split(){return this.#e}set split(o){if(this.#e=o,this.#o.value)for(const o of this.#o.value.assignedElements())"privateSplit"in o&&(o.privateSplit=this.split)}render(){return html`<div class="component"><slot @slotchange="${this.#t}" ${assertSlot([GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreRadioGroup,GlideCoreInput,GlideCoreTextArea])} ${ref(this.#o)}></slot></div>`}#o;#e;#t(){if(this.#o.value)for(const o of this.#o.value.assignedElements())if("privateSplit"in o&&(o.privateSplit=this.split),"orientation"in o&&"horizontal"!==o.orientation)throw new TypeError("Only horizontal controls are supported.")}};__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"split",null),__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"version",void 0),GlideCoreFormControlsLayout=__decorate([customElement("glide-core-form-controls-layout"),final],GlideCoreFormControlsLayout);export default GlideCoreFormControlsLayout;
@@ -5,7 +5,17 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
- * @slot - An icon.
8
+ * @attr {string} label
9
+ * @attr {string|null} [aria-controls=null]
10
+ * @attr {'true'|'false'|null} [aria-expanded=null]
11
+ * @attr {'true'|'false'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null} [aria-haspopup=null]
12
+ * @attr {boolean} [disabled=false]
13
+ * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
14
+ *
15
+ * @readonly
16
+ * @attr {0.19.5} [version]
17
+ *
18
+ * @slot {Element} - An icon
9
19
  */
10
20
  export default class GlideCoreIconButton extends LitElement {
11
21
  #private;
@@ -15,7 +25,7 @@ export default class GlideCoreIconButton extends LitElement {
15
25
  ariaExpanded: 'true' | 'false' | null;
16
26
  ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
17
27
  disabled: boolean;
18
- label: string;
28
+ label?: string;
19
29
  variant: 'primary' | 'secondary' | 'tertiary';
20
30
  readonly version: string;
21
31
  click(): void;
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,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"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.version=packageJson.version,this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#t.value?.click()}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}><slot ${assertSlot()} ${ref(this.#e)}></slot></button>`}#t;#e};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;
1
+ var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,n=a<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 s=t.length-1;s>=0;s--)(i=t[s])&&(n=(a<3?i(n):a>3?i(e,o,n):i(e,o))||n);return a>3&&n&&Object.defineProperty(e,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}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-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 GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.version=packageJson.version,this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#t.value?.click()}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}><slot ${assertSlot()} ${ref(this.#e)}></slot></button>`}#t;#e};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property(),required],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button"),final],GlideCoreIconButton);export default GlideCoreIconButton;
@@ -8,14 +8,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
8
8
 
9
9
  .component {
10
10
  align-items: center;
11
- block-size: var(--size, 1.625rem);
11
+ block-size: var(--private-size, 1.625rem);
12
12
  border-color: transparent;
13
13
  border-radius: 0.5rem;
14
14
  border-style: solid;
15
15
  border-width: 1px;
16
16
  cursor: pointer;
17
17
  display: inline-flex;
18
- inline-size: var(--size, 1.625rem);
18
+ inline-size: var(--private-size, 1.625rem);
19
19
  justify-content: center;
20
20
  padding-inline: 0;
21
21
  transition-duration: 150ms;
@@ -34,7 +34,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
34
34
  &.primary {
35
35
  background-color: var(--glide-core-surface-primary);
36
36
  border-color: transparent;
37
- color: var(--icon-color, var(--glide-core-icon-selected));
37
+ color: var(--private-icon-color, var(--glide-core-icon-selected));
38
38
 
39
39
  &:disabled {
40
40
  background-color: var(--glide-core-surface-base-gray-light);
@@ -59,7 +59,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
59
59
  &.secondary {
60
60
  background-color: transparent;
61
61
  border-color: transparent;
62
- color: var(--icon-color, var(--glide-core-icon-default));
62
+ color: var(--private-icon-color, var(--glide-core-icon-default));
63
63
 
64
64
  &:disabled {
65
65
  background-color: transparent;
@@ -81,10 +81,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
81
81
 
82
82
  &.tertiary {
83
83
  background-color: transparent;
84
- block-size: var(--size, 1rem);
84
+ block-size: var(--private-size, 1rem);
85
85
  border-color: transparent;
86
- color: var(--icon-color, var(--glide-core-icon-default));
87
- inline-size: var(--size, 1rem);
86
+ color: var(--private-icon-color, var(--glide-core-icon-default));
87
+ inline-size: var(--private-size, 1rem);
88
88
  padding: 0;
89
89
 
90
90
  &:focus-visible {
@@ -101,7 +101,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
101
101
 
102
102
  &:not(:active):hover:not(:disabled) {
103
103
  color: var(
104
- --hovered-icon-color,
104
+ --private-hovered-icon-color,
105
105
  var(--glide-core-icon-primary-hover)
106
106
  );
107
107
  }
@@ -1 +1 @@
1
- import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="${styleMap({height:"var(--size, 0.875rem)",width:"var(--size, 0.875rem)"})}"><path class="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="${styleMap({height:"var(--private-size, 0.875rem)",width:"var(--private-size, 0.875rem)"})}"><path class="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
@@ -1 +1 @@
1
- import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
@@ -1 +1 @@
1
- import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg class="search-icon" data-test="search-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="${styleMap({display:"block",height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg class="search-icon" data-test="search-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="${styleMap({display:"block",height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;
@@ -1 +1 @@
1
- import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" viewBox="0 0 14 14" fill="none" style="${styleMap({height:"var(--size, 0.875rem)",width:"var(--size, 0.875rem)"})}"><path d="M10.0244 5.95031L8.0395 3.96536M2.06587 11.924L3.74532 11.7374C3.95051 11.7146 4.0531 11.7032 4.149 11.6721C4.23407 11.6446 4.31504 11.6057 4.38969 11.5564C4.47384 11.501 4.54683 11.428 4.69281 11.282L11.5132 4.4616C12.0613 3.91347 12.0613 3.02478 11.5132 2.47665C10.965 1.92852 10.0763 1.92852 9.52821 2.47665L2.70786 9.29703C2.56188 9.44302 2.48889 9.51601 2.4334 9.60015C2.38417 9.67481 2.34526 9.75577 2.31772 9.84085C2.28667 9.93674 2.27527 10.0393 2.25247 10.2445L2.06587 11.924Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" viewBox="0 0 14 14" fill="none" style="${styleMap({height:"var(--private-size, 0.875rem)",width:"var(--private-size, 0.875rem)"})}"><path d="M10.0244 5.95031L8.0395 3.96536M2.06587 11.924L3.74532 11.7374C3.95051 11.7146 4.0531 11.7032 4.149 11.6721C4.23407 11.6446 4.31504 11.6057 4.38969 11.5564C4.47384 11.501 4.54683 11.428 4.69281 11.282L11.5132 4.4616C12.0613 3.91347 12.0613 3.02478 11.5132 2.47665C10.965 1.92852 10.0763 1.92852 9.52821 2.47665L2.70786 9.29703C2.56188 9.44302 2.48889 9.51601 2.4334 9.60015C2.38417 9.67481 2.34526 9.75577 2.31772 9.84085C2.28667 9.93674 2.27527 10.0393 2.25247 10.2445L2.06587 11.924Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
@@ -0,0 +1,2 @@
1
+ declare const _default: import("lit").TemplateResult<1>;
2
+ export default _default;
@@ -0,0 +1 @@
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.26864 0.790031C8.09143 0.753584 7.90865 0.753584 7.73144 0.790031C7.52659 0.832161 7.3435 0.934713 7.19794 1.01624L7.15826 1.03841L2.22493 3.77915L2.18284 3.8024C2.02875 3.88727 1.835 3.99398 1.68622 4.15543C1.55759 4.29502 1.46024 4.46046 1.40069 4.6407C1.33181 4.84916 1.33262 5.07035 1.33326 5.24627L1.33338 5.29435V10.7058L1.33326 10.7538C1.33262 10.9298 1.33181 11.1509 1.40069 11.3594C1.46024 11.5397 1.55759 11.7051 1.68622 11.8447C1.835 12.0061 2.02873 12.1128 2.18281 12.1977L2.22493 12.221L7.15826 14.9617L7.19793 14.9839C7.34349 15.0654 7.52659 15.1679 7.73144 15.2101C7.90865 15.2465 8.09143 15.2465 8.26864 15.2101C8.4735 15.1679 8.65659 15.0654 8.80215 14.9839L8.84182 14.9617L13.7752 12.221L13.8172 12.1977C13.9713 12.1128 14.1651 12.0061 14.3139 11.8447C14.4425 11.7051 14.5398 11.5397 14.5994 11.3594C14.6683 11.1509 14.6675 10.9298 14.6668 10.7538L14.6667 10.7058V5.29435L14.6668 5.24627C14.6675 5.07035 14.6683 4.84916 14.5994 4.6407C14.5398 4.46046 14.4425 4.29502 14.3139 4.15543C14.1651 3.99398 13.9713 3.88727 13.8172 3.8024L13.7752 3.77915L8.84182 1.03841L8.80215 1.01624C8.65659 0.934713 8.47349 0.832161 8.26864 0.790031ZM8.66671 5.33333C8.66671 4.96514 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96514 7.33337 5.33333V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33333ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67337 11.0349 8.67337 10.6667C8.67337 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`;
@@ -0,0 +1,2 @@
1
+ declare const _default: import("lit").TemplateResult<1>;
2
+ export default _default;
@@ -0,0 +1 @@
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666672C3.94987 0.666672 0.666626 3.94992 0.666626 8C0.666626 12.0501 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.0501 15.3333 8C15.3333 3.94992 12.05 0.666672 7.99996 0.666672ZM8.66663 5.33334C8.66663 4.96515 8.36815 4.66667 7.99996 4.66667C7.63177 4.66667 7.33329 4.96515 7.33329 5.33334V8C7.33329 8.36819 7.63177 8.66667 7.99996 8.66667C8.36815 8.66667 8.66663 8.36819 8.66663 8V5.33334ZM7.99996 10C7.63177 10 7.33329 10.2985 7.33329 10.6667C7.33329 11.0349 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0349 8.67329 10.6667C8.67329 10.2985 8.37482 10 8.00663 10H7.99996Z" fill="currentColor"/></svg>`;
@@ -0,0 +1,2 @@
1
+ declare const _default: import("lit").TemplateResult<1>;
2
+ export default _default;
@@ -0,0 +1 @@
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.54175 1.44697C8.19688 1.29362 7.80317 1.29362 7.45829 1.44697C7.19194 1.5654 7.01892 1.77402 6.89852 1.944C6.78014 2.11113 6.6534 2.33007 6.51402 2.57087L1.00258 12.0906C0.862641 12.3323 0.735472 12.5519 0.649245 12.7383C0.561611 12.9277 0.466542 13.1824 0.496841 13.473C0.536048 13.849 0.733076 14.1908 1.03889 14.4131C1.27522 14.585 1.54321 14.6303 1.75105 14.6493C1.95555 14.6681 2.20932 14.6681 2.48858 14.668H13.5114C13.7907 14.6681 14.0445 14.6681 14.249 14.6493C14.4568 14.6303 14.7248 14.585 14.9612 14.4131C15.267 14.1908 15.464 13.849 15.5032 13.473C15.5335 13.1824 15.4384 12.9277 15.3508 12.7383C15.2646 12.5519 15.1374 12.3323 14.9975 12.0907L9.48601 2.57085C9.34664 2.33006 9.2199 2.11112 9.10153 1.944C8.98113 1.77401 8.80811 1.5654 8.54175 1.44697ZM8.66671 6.33472C8.66671 5.96653 8.36823 5.66806 8.00004 5.66806C7.63185 5.66806 7.33337 5.96653 7.33337 6.33472V9.00139C7.33337 9.36958 7.63185 9.66805 8.00004 9.66805C8.36823 9.66805 8.66671 9.36958 8.66671 9.00139V6.33472ZM8.00004 11.0014C7.63185 11.0014 7.33337 11.2999 7.33337 11.6681C7.33337 12.0362 7.63185 12.3347 8.00004 12.3347H8.00671C8.3749 12.3347 8.67337 12.0362 8.67337 11.6681C8.67337 11.2999 8.3749 11.0014 8.00671 11.0014H8.00004Z" fill="currentColor"/></svg>`;
package/dist/icons/x.js CHANGED
@@ -1 +1 @@
1
- import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}" viewBox="0 0 20 20" fill="none"><path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}" viewBox="0 0 20 20" fill="none"><path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
@@ -6,25 +6,24 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @event remove
9
+ * @attr {boolean} [removable=false]
10
+ * @attr {'informational'|'medium'|'high'|'critical'} [variant='informational']
10
11
  *
11
- * @slot - The content of the Inline Alert.
12
+ * @readonly
13
+ * @attr {0.19.5} [version]
14
+ *
15
+ * @slot {Element | string} - The content of the alert
16
+ *
17
+ * @fires {Event} remove
12
18
  */
13
19
  export default class GlideCoreInlineAlert extends LitElement {
14
20
  #private;
15
21
  static shadowRootOptions: ShadowRootInit;
16
22
  static styles: import("lit").CSSResult[];
17
- variant: keyof typeof icons;
23
+ variant: 'informational' | 'medium' | 'high' | 'critical';
18
24
  removable?: boolean | undefined;
19
25
  readonly version: string;
20
26
  firstUpdated(): void;
21
27
  focus(): void;
22
28
  render(): import("lit").TemplateResult<1>;
23
29
  }
24
- declare const icons: {
25
- informational: import("lit").TemplateResult<1>;
26
- medium: import("lit").TemplateResult<1>;
27
- high: import("lit").TemplateResult<1>;
28
- critical: import("lit").TemplateResult<1>;
29
- };
30
- export {};
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,n=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(l<3?r(n):l>3?r(t,o,n):r(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import"./icon-button.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}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.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"./inline-alert.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#l}" @keydown="${this.#n}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#l(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#n(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert")],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666672C3.94987 0.666672 0.666626 3.94992 0.666626 8C0.666626 12.0501 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.0501 15.3333 8C15.3333 3.94992 12.05 0.666672 7.99996 0.666672ZM8.66663 5.33334C8.66663 4.96515 8.36815 4.66667 7.99996 4.66667C7.63177 4.66667 7.33329 4.96515 7.33329 5.33334V8C7.33329 8.36819 7.63177 8.66667 7.99996 8.66667C8.36815 8.66667 8.66663 8.36819 8.66663 8V5.33334ZM7.99996 10C7.63177 10 7.33329 10.2985 7.33329 10.6667C7.33329 11.0349 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0349 8.67329 10.6667C8.67329 10.2985 8.37482 10 8.00663 10H7.99996Z" fill="currentColor"/></svg>`,medium:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.54175 1.44697C8.19688 1.29362 7.80317 1.29362 7.45829 1.44697C7.19194 1.5654 7.01892 1.77402 6.89852 1.944C6.78014 2.11113 6.6534 2.33007 6.51402 2.57087L1.00258 12.0906C0.862641 12.3323 0.735472 12.5519 0.649245 12.7383C0.561611 12.9277 0.466542 13.1824 0.496841 13.473C0.536048 13.849 0.733076 14.1908 1.03889 14.4131C1.27522 14.585 1.54321 14.6303 1.75105 14.6493C1.95555 14.6681 2.20932 14.6681 2.48858 14.668H13.5114C13.7907 14.6681 14.0445 14.6681 14.249 14.6493C14.4568 14.6303 14.7248 14.585 14.9612 14.4131C15.267 14.1908 15.464 13.849 15.5032 13.473C15.5335 13.1824 15.4384 12.9277 15.3508 12.7383C15.2646 12.5519 15.1374 12.3323 14.9975 12.0907L9.48601 2.57085C9.34664 2.33006 9.2199 2.11112 9.10153 1.944C8.98113 1.77401 8.80811 1.5654 8.54175 1.44697ZM8.66671 6.33472C8.66671 5.96653 8.36823 5.66806 8.00004 5.66806C7.63185 5.66806 7.33337 5.96653 7.33337 6.33472V9.00139C7.33337 9.36958 7.63185 9.66805 8.00004 9.66805C8.36823 9.66805 8.66671 9.36958 8.66671 9.00139V6.33472ZM8.00004 11.0014C7.63185 11.0014 7.33337 11.2999 7.33337 11.6681C7.33337 12.0362 7.63185 12.3347 8.00004 12.3347H8.00671C8.3749 12.3347 8.67337 12.0362 8.67337 11.6681C8.67337 11.2999 8.3749 11.0014 8.00671 11.0014H8.00004Z" fill="currentColor"/></svg>`,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.26864 0.790031C8.09143 0.753584 7.90865 0.753584 7.73144 0.790031C7.52659 0.832161 7.3435 0.934713 7.19794 1.01624L7.15826 1.03841L2.22493 3.77915L2.18284 3.8024C2.02875 3.88727 1.835 3.99398 1.68622 4.15543C1.55759 4.29502 1.46024 4.46046 1.40069 4.6407C1.33181 4.84916 1.33262 5.07035 1.33326 5.24627L1.33338 5.29435V10.7058L1.33326 10.7538C1.33262 10.9298 1.33181 11.1509 1.40069 11.3594C1.46024 11.5397 1.55759 11.7051 1.68622 11.8447C1.835 12.0061 2.02873 12.1128 2.18281 12.1977L2.22493 12.221L7.15826 14.9617L7.19793 14.9839C7.34349 15.0654 7.52659 15.1679 7.73144 15.2101C7.90865 15.2465 8.09143 15.2465 8.26864 15.2101C8.4735 15.1679 8.65659 15.0654 8.80215 14.9839L8.84182 14.9617L13.7752 12.221L13.8172 12.1977C13.9713 12.1128 14.1651 12.0061 14.3139 11.8447C14.4425 11.7051 14.5398 11.5397 14.5994 11.3594C14.6683 11.1509 14.6675 10.9298 14.6668 10.7538L14.6667 10.7058V5.29435L14.6668 5.24627C14.6675 5.07035 14.6683 4.84916 14.5994 4.6407C14.5398 4.46046 14.4425 4.29502 14.3139 4.15543C14.1651 3.99398 13.9713 3.88727 13.8172 3.8024L13.7752 3.77915L8.84182 1.03841L8.80215 1.01624C8.65659 0.934713 8.47349 0.832161 8.26864 0.790031ZM8.66671 5.33333C8.66671 4.96514 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96514 7.33337 5.33333V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33333ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67337 11.0349 8.67337 10.6667C8.67337 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<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=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.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}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.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"./inline-alert.styles.js";import xIcon from"./icons/x.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#n}" @keydown="${this.#l}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};
@@ -34,13 +34,13 @@ import{css}from"lit";export default[css`
34
34
 
35
35
  &.added {
36
36
  @media (prefers-reduced-motion: no-preference) {
37
- animation: fade-in var(--animation-duration) ease-in-out;
37
+ animation: fade-in var(--private-animation-duration) ease-in-out;
38
38
  }
39
39
  }
40
40
 
41
41
  &.removed {
42
42
  @media (prefers-reduced-motion: no-preference) {
43
- animation-duration: var(--animation-duration);
43
+ animation-duration: var(--private-animation-duration);
44
44
  animation-fill-mode: forwards;
45
45
  animation-name: fade-out;
46
46
  animation-timing-function: ease-in-out;
@@ -96,7 +96,7 @@ import{css}from"lit";export default[css`
96
96
  }
97
97
 
98
98
  .removal-button {
99
- --icon-color: var(--glide-core-icon-default2);
99
+ --private-icon-color: var(--glide-core-icon-default2);
100
100
 
101
101
  align-self: flex-start;
102
102
  transition: color 200ms ease-in-out;
package/dist/input.d.ts CHANGED
@@ -7,23 +7,67 @@ declare global {
7
7
  'glide-core-input': GlideCoreInput;
8
8
  }
9
9
  }
10
- export declare const SUPPORTED_TYPES: readonly ["date", "email", "number", "password", "search", "tel", "text", "url"];
11
- type SupportedTypes = (typeof SUPPORTED_TYPES)[number];
12
10
  /**
13
- * @event change
14
- * @event input
15
- * @event invalid
11
+ * @attr {string} label
12
+ * @attr {'on'|'off'|'none'|'sentences'|'words'|'characters'} [autocapitalize='on']
13
+ * @attr {'on'|'off'} [autocomplete='on']
14
+ * @attr {boolean} [clearable=false]
15
+ * @attr {boolean} [disabled=false]
16
+ * @attr {boolean} [hide-label=false]
17
+ * @attr {number} [maxlength]
18
+ * @attr {string} [name='']
19
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
20
+ * @attr {boolean} [password-toggle=false] - For 'password' type, whether to show a button to toggle the password's visibility
21
+ * @attr {string} [pattern]
22
+ * @attr {string} [placeholder]
23
+ * @attr {boolean} [readonly=false]
24
+ * @attr {boolean} [required=false]
25
+ * @attr {boolean} [spellcheck=false]
26
+ * @attr {string} [tooltip]
27
+ * @attr {'date'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'} [type='text']
28
+ * @attr {string} [value='']
16
29
  *
17
- * @slot description - Additional information or context.
18
- * @slot prefix-icon - An optional icon before the input field.
19
- * @slot suffix-icon - An optional icon after the input field.
30
+ * @readonly
31
+ * @attr {0.19.5} [version]
32
+ *
33
+ * @slot {Element | string} [description] - Additional information or context
34
+ * @slot {Element} [prefix-icon] - An icon before the input field
35
+ * @slot {Element} [suffix-icon] - An icon after the input field
36
+ *
37
+ * @fires {Event} change
38
+ * @fires {Event} input
39
+ * @fires {Event} invalid
40
+ *
41
+ * @readonly
42
+ * @prop {HTMLFormElement | null} form
43
+ *
44
+ * @readonly
45
+ * @prop {ValidityState} validity
46
+ *
47
+ * @method checkValidity
48
+ * @returns boolean
49
+ *
50
+ * @method formAssociatedCallback
51
+ * @method formResetCallback
52
+ *
53
+ * @method reportValidity
54
+ * @returns boolean
55
+ *
56
+ * @method resetValidityFeedback
57
+ *
58
+ * @method setCustomValidity
59
+ * @param {string} message
60
+ *
61
+ * @method setValidity
62
+ * @param {ValidityStateFlags} [flags]
63
+ * @param {string} [message]
20
64
  */
21
65
  export default class GlideCoreInput extends LitElement implements FormControl {
22
66
  #private;
23
67
  static formAssociated: boolean;
24
68
  static shadowRootOptions: ShadowRootInit;
25
69
  static styles: import("lit").CSSResult[];
26
- type: SupportedTypes;
70
+ type: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
27
71
  name: string;
28
72
  value: string;
29
73
  label?: string;
@@ -46,8 +90,6 @@ export default class GlideCoreInput extends LitElement implements FormControl {
46
90
  tooltip?: string;
47
91
  get form(): HTMLFormElement | null;
48
92
  get validity(): ValidityState;
49
- get willValidate(): boolean;
50
- blur(): void;
51
93
  checkValidity(): boolean;
52
94
  disconnectedCallback(): void;
53
95
  formAssociatedCallback(): void;
@@ -65,4 +107,3 @@ export default class GlideCoreInput extends LitElement implements FormControl {
65
107
  private passwordVisible;
66
108
  private validityMessage?;
67
109
  }
68
- export {};
package/dist/input.js CHANGED
@@ -1,26 +1,33 @@
1
- var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";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{styleMap}from"lit/directives/style-map.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 magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";export const SUPPORTED_TYPES=["date","email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!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}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
1
+ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length,r=a<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(a<3?o(r):a>3?o(e,i,r):o(e,i))||r);return a>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";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{styleMap}from"lit/directives/style-map.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 magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!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)}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
2
2
  <glide-core-private-label
3
3
  class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
4
+ label=${ifDefined(this.label)}
4
5
  orientation=${this.orientation}
5
6
  split=${ifDefined(this.privateSplit??void 0)}
6
7
  tooltip=${ifDefined(this.tooltip)}
7
8
  ?disabled=${this.disabled}
8
- ?error=${this.#s||this.#a}
9
+ ?error=${this.#s||this.#o}
9
10
  ?hide=${this.hideLabel}
10
11
  ?required=${this.required}
11
12
  >
12
13
  <label for="input"> ${this.label} </label>
13
14
 
14
15
  <div
15
- class=${classMap({"input-container":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#s||this.#a})}
16
+ class=${classMap({"input-container":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#s||this.#o})}
16
17
  slot="control"
17
18
  >
18
- <slot name="prefix-icon"></slot>
19
+ <slot name="prefix-icon">
20
+ <!--
21
+ An icon before the input field
22
+ @type {Element}
23
+ -->
24
+ </slot>
19
25
 
20
26
  <input
21
27
  aria-describedby="meta"
22
- aria-invalid=${this.#s||this.#a}
28
+ aria-invalid=${this.#s||this.#o}
23
29
  class="input"
30
+ data-test="input"
24
31
  id="input"
25
32
  type=${"password"===this.type&&this.passwordVisible?"text":this.type}
26
33
  .value=${this.value}
@@ -31,7 +38,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
31
38
  ?required=${this.required}
32
39
  ?readonly=${this.readonly}
33
40
  ?disabled=${this.disabled}
34
- @focus=${this.#o}
41
+ @focus=${this.#a}
35
42
  @blur=${this.#r}
36
43
  @change=${this.#l}
37
44
  @input=${this.#n}
@@ -65,7 +72,14 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
65
72
  `:nothing}
66
73
 
67
74
  <div class="suffix-icon">
68
- ${"search"===this.type?magnifyingGlassIcon:html`<slot name="suffix-icon"></slot>`}
75
+ ${"search"===this.type?magnifyingGlassIcon:html`
76
+ <slot name="suffix-icon">
77
+ <!--
78
+ An icon after the input field
79
+ @type {Element}
80
+ -->
81
+ </slot>
82
+ `}
69
83
  </div>
70
84
  </div>
71
85
 
@@ -73,14 +87,19 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
73
87
  <slot
74
88
  class=${classMap({description:!0,hidden:Boolean(this.#s&&this.validityMessage)})}
75
89
  name="description"
76
- ></slot>
90
+ >
91
+ <!--
92
+ Additional information or context
93
+ @type {Element | string}
94
+ -->
95
+ </slot>
77
96
 
78
97
  ${when(this.#s&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
79
98
  >${unsafeHTML(this.validityMessage)}</span
80
99
  >`))}
81
100
  ${this.maxlength?html`
82
101
  <div
83
- class=${classMap({"character-count":!0,error:this.#a})}
102
+ class=${classMap({"character-count":!0,error:this.#o})}
84
103
  data-test="character-count-container"
85
104
  >
86
105
  <!--
@@ -92,14 +111,14 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
92
111
  ${this.#c.term("displayedCharacterCount",this.#m,this.maxlength)}
93
112
  </span>
94
113
 
95
- <span class="hidden" data-test="character-count-announcement"
96
- >${this.#c.term("announcedCharacterCount",this.#m,this.maxlength)}</span
97
- >
114
+ <span class="hidden" data-test="character-count-announcement">
115
+ ${this.#c.term("announcedCharacterCount",this.#m,this.maxlength)}
116
+ </span>
98
117
  </div>
99
118
  `:nothing}
100
119
  </div>
101
120
  </glide-core-private-label>
102
- `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.version=packageJson.version,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#p(){return this.clearable&&!this.disabled&&!this.readonly}get#h(){return this.#p&&this.value.length>0}get#m(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(t){this.#e.value?.value&&(this.value=this.#e.value?.value),this.dispatchEvent(new Event(t.type,{bubbles:!0,composed:!0}))}#o(){this.hasFocus=!0}#n(){this.#e.value&&(this.value=this.#e.value.value)}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"version",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"tooltip",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;const icons={eye:html`<svg
121
+ `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.version=packageJson.version,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#p(){return this.clearable&&!this.disabled&&!this.readonly}get#h(){return this.#p&&this.value.length>0}get#m(){return this.value.length}#i;get#o(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(){this.#e.value?.value&&(this.value=this.#e.value?.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#a(){this.hasFocus=!0}#n(){this.#e.value&&(this.value=this.#e.value.value)}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property({reflect:!0})],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0}),required],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"version",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"tooltip",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input"),final],GlideCoreInput);export default GlideCoreInput;const icons={eye:html`<svg
103
122
  aria-hidden="true"
104
123
  style=${styleMap({height:"1rem",width:"1rem"})}
105
124
  fill="none"
@@ -37,9 +37,11 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
37
37
  background-color: var(--glide-core-surface-base-lighter);
38
38
  border: 1px solid var(--glide-core-border-base);
39
39
  border-radius: var(--glide-core-spacing-xs);
40
+ box-sizing: border-box;
40
41
  color: var(--glide-core-text-body-1);
41
42
  display: flex;
42
43
  line-height: var(--glide-core-body-xs-line-height);
44
+ min-inline-size: 3.75rem;
43
45
  padding-inline: var(--glide-core-spacing-sm);
44
46
 
45
47
  &.focused,
@@ -53,9 +55,10 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
53
55
  border-color: var(--glide-core-status-error);
54
56
  }
55
57
 
56
- /* We had to resort to a class selector because there may be a bug in Chrome and Safari
57
- * with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
58
- */
58
+ /*
59
+ We had to resort to a class selector because there may be a bug in Chrome and Safari
60
+ with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
61
+ */
59
62
  &.readonly {
60
63
  background-color: transparent;
61
64
  border: 1px solid transparent;
package/dist/label.d.ts CHANGED
@@ -6,12 +6,19 @@ declare global {
6
6
  }
7
7
  }
8
8
  /**
9
- * @private
9
+ * @attr {boolean} [disabled=false]
10
+ * @attr {boolean} [error=false]
11
+ * @attr {boolean} [hide=false]
12
+ * @attr {string} [label]
13
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
14
+ * @attr {boolean} [required=false]
15
+ * @attr {'left'|'middle'} [split]
16
+ * @attr {string} [tooltip]
10
17
  *
11
- * @slot - The label.
12
- * @slot control - The control with which the label is associated.
13
- * @slot summary - Additional information or context.
14
- * @slot description - Additional information or context.
18
+ * @slot {HTMLLabelElement}
19
+ * @slot {Element} [control] - The element with which the label is associated
20
+ * @slot {Element | string} [description] - Additional information or context
21
+ * @slot {Element | string} [summary] - Additional information or context
15
22
  */
16
23
  export default class GlideCoreLabel extends LitElement {
17
24
  #private;
@@ -24,10 +31,9 @@ export default class GlideCoreLabel extends LitElement {
24
31
  required: boolean;
25
32
  split?: 'left' | 'middle';
26
33
  tooltip?: string;
27
- firstUpdated(): void;
34
+ label?: string;
28
35
  render(): import("lit").TemplateResult<1>;
29
36
  private hasDescription;
30
37
  private hasSummarySlot;
31
38
  private isLabelTooltip;
32
- private label;
33
39
  }