@crowdstrike/glide-core 0.29.1 → 0.30.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 (124) hide show
  1. package/dist/accordion.js +240 -1
  2. package/dist/accordion.styles.js +13 -7
  3. package/dist/button-group.button.js +143 -1
  4. package/dist/button-group.button.styles.js +43 -15
  5. package/dist/button-group.js +249 -1
  6. package/dist/button-group.styles.js +10 -5
  7. package/dist/button.js +206 -1
  8. package/dist/button.styles.js +12 -7
  9. package/dist/checkbox-group.js +479 -14
  10. package/dist/checkbox-group.styles.js +5 -2
  11. package/dist/checkbox.js +519 -32
  12. package/dist/checkbox.styles.js +10 -5
  13. package/dist/drawer.js +168 -1
  14. package/dist/drawer.styles.js +5 -2
  15. package/dist/dropdown.js +2423 -123
  16. package/dist/dropdown.option.js +536 -1
  17. package/dist/dropdown.option.styles.js +5 -2
  18. package/dist/dropdown.styles.js +14 -7
  19. package/dist/form-controls-layout.js +102 -1
  20. package/dist/form-controls-layout.styles.js +5 -2
  21. package/dist/icon-button.js +139 -1
  22. package/dist/icon-button.styles.js +19 -7
  23. package/dist/icons/checked.js +28 -1
  24. package/dist/icons/chevron.js +21 -1
  25. package/dist/icons/magnifying-glass.js +23 -1
  26. package/dist/icons/pencil.js +21 -1
  27. package/dist/icons/severity-critical.js +20 -1
  28. package/dist/icons/severity-informational.js +20 -1
  29. package/dist/icons/severity-medium.js +20 -1
  30. package/dist/icons/x.js +21 -1
  31. package/dist/inline-alert.js +118 -1
  32. package/dist/inline-alert.styles.js +5 -2
  33. package/dist/input.d.ts +8 -2
  34. package/dist/input.js +505 -41
  35. package/dist/input.styles.js +25 -4
  36. package/dist/label.js +303 -1
  37. package/dist/label.styles.js +11 -5
  38. package/dist/library/assert-slot.js +136 -1
  39. package/dist/library/expect-unhandled-rejection.js +14 -1
  40. package/dist/library/expect-window-error.js +26 -1
  41. package/dist/library/final.js +18 -1
  42. package/dist/library/form-control.js +1 -1
  43. package/dist/library/localize.js +10 -1
  44. package/dist/library/mouse.js +35 -1
  45. package/dist/library/on-resize.js +24 -1
  46. package/dist/library/required.js +35 -1
  47. package/dist/library/shadow-root-mode.js +4 -1
  48. package/dist/library/unique-id.js +3 -1
  49. package/dist/link.js +92 -1
  50. package/dist/link.styles.js +10 -5
  51. package/dist/menu.d.ts +3 -2
  52. package/dist/menu.js +1259 -1
  53. package/dist/menu.styles.js +34 -17
  54. package/dist/modal.d.ts +4 -0
  55. package/dist/modal.icon-button.js +60 -1
  56. package/dist/modal.icon-button.styles.js +5 -2
  57. package/dist/modal.js +473 -1
  58. package/dist/modal.styles.js +71 -22
  59. package/dist/option.d.ts +74 -0
  60. package/dist/option.js +498 -0
  61. package/dist/option.styles.js +140 -0
  62. package/dist/{menu.options.d.ts → options.d.ts} +5 -6
  63. package/dist/options.js +130 -0
  64. package/dist/options.styles.js +21 -0
  65. package/dist/popover.js +620 -1
  66. package/dist/popover.styles.js +11 -5
  67. package/dist/radio-group.js +624 -17
  68. package/dist/radio-group.radio.js +211 -1
  69. package/dist/radio-group.radio.styles.js +9 -4
  70. package/dist/radio-group.styles.js +5 -2
  71. package/dist/slider.js +1040 -61
  72. package/dist/slider.styles.js +9 -4
  73. package/dist/spinner.js +60 -1
  74. package/dist/spinner.styles.js +5 -2
  75. package/dist/split-button.js +116 -1
  76. package/dist/split-button.primary-button.js +100 -1
  77. package/dist/split-button.primary-button.styles.js +13 -6
  78. package/dist/split-button.primary-link.js +102 -1
  79. package/dist/split-button.secondary-button.d.ts +2 -3
  80. package/dist/split-button.secondary-button.js +121 -1
  81. package/dist/split-button.secondary-button.styles.js +12 -7
  82. package/dist/split-button.styles.js +9 -4
  83. package/dist/styles/focus-outline.js +9 -3
  84. package/dist/styles/fonts.css +6 -1
  85. package/dist/styles/opacity-and-scale-animation.js +6 -3
  86. package/dist/styles/skeleton.js +6 -3
  87. package/dist/styles/variables.css +410 -1
  88. package/dist/styles/visually-hidden.js +6 -3
  89. package/dist/tab.group.js +386 -1
  90. package/dist/tab.group.styles.js +5 -2
  91. package/dist/tab.js +133 -1
  92. package/dist/tab.panel.js +93 -1
  93. package/dist/tab.panel.styles.js +11 -5
  94. package/dist/tab.styles.js +9 -4
  95. package/dist/tag.js +207 -1
  96. package/dist/tag.styles.js +10 -5
  97. package/dist/textarea.js +353 -19
  98. package/dist/textarea.styles.js +23 -4
  99. package/dist/toast.js +130 -1
  100. package/dist/toast.toasts.js +248 -25
  101. package/dist/toast.toasts.styles.js +9 -4
  102. package/dist/toggle.js +178 -1
  103. package/dist/toggle.styles.js +25 -5
  104. package/dist/tooltip.container.d.ts +2 -0
  105. package/dist/tooltip.container.js +130 -1
  106. package/dist/tooltip.container.styles.js +18 -4
  107. package/dist/tooltip.d.ts +6 -0
  108. package/dist/tooltip.js +484 -1
  109. package/dist/tooltip.styles.js +21 -5
  110. package/dist/translations/en.js +36 -1
  111. package/dist/translations/fr.js +37 -1
  112. package/dist/translations/ja.js +37 -1
  113. package/package.json +8 -12
  114. package/dist/menu.button.d.ts +0 -42
  115. package/dist/menu.button.js +0 -1
  116. package/dist/menu.button.styles.js +0 -32
  117. package/dist/menu.link.d.ts +0 -44
  118. package/dist/menu.link.js +0 -1
  119. package/dist/menu.link.styles.js +0 -35
  120. package/dist/menu.options.js +0 -1
  121. package/dist/menu.options.styles.d.ts +0 -2
  122. package/dist/menu.options.styles.js +0 -20
  123. /package/dist/{menu.button.styles.d.ts → option.styles.d.ts} +0 -0
  124. /package/dist/{menu.link.styles.d.ts → options.styles.d.ts} +0 -0
@@ -1,6 +1,10 @@
1
- import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
2
- ${focusOutline(".handle:focus-visible")}
3
- `,css`
1
+ import { css } from 'lit';
2
+ import focusOutline from './styles/focus-outline.js';
3
+ export default [
4
+ css `
5
+ ${focusOutline('.handle:focus-visible')}
6
+ `,
7
+ css `
4
8
  /* The designs call for a bit more spacing than the default when vertical. */
5
9
  glide-core-private-label[orientation='vertical']::part(private-tooltips) {
6
10
  margin-block-end: var(--glide-core-spacing-base-xxs);
@@ -165,4 +169,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
165
169
  .validity-message {
166
170
  display: block;
167
171
  }
168
- `];
172
+ `,
173
+ ];
package/dist/spinner.js CHANGED
@@ -1 +1,60 @@
1
- var __decorate=this&&this.__decorate||function(e,t,r,o){var i,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var p=e.length-1;p>=0;p--)(i=e[p])&&(n=(s<3?i(n):s>3?i(t,r,n):i(t,r))||n);return s>3&&n&&Object.defineProperty(t,r,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.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"./spinner.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Spinner=class Spinner extends LitElement{constructor(){super(...arguments),this.size="medium",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,[this.size]:!0})}" role="progressbar"></div>`}};__decorate([property({reflect:!0}),required],Spinner.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Spinner.prototype,"size",void 0),__decorate([property({reflect:!0})],Spinner.prototype,"version",void 0),Spinner=__decorate([customElement("glide-core-spinner"),final],Spinner);export default Spinner;
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, LitElement } from 'lit';
8
+ import { classMap } from 'lit/directives/class-map.js';
9
+ import { customElement, property } from 'lit/decorators.js';
10
+ import { ifDefined } from 'lit/directives/if-defined.js';
11
+ import packageJson from '../package.json' with { type: 'json' };
12
+ import styles from './spinner.styles.js';
13
+ import shadowRootMode from './library/shadow-root-mode.js';
14
+ import final from './library/final.js';
15
+ import required from './library/required.js';
16
+ /**
17
+ * @attr {string} label - For screenreaders
18
+ * @attr {'large'|'medium'|'small'} [size='medium']
19
+ *
20
+ * @readonly
21
+ * @attr {string} [version]
22
+ */
23
+ let Spinner = class Spinner extends LitElement {
24
+ constructor() {
25
+ super(...arguments);
26
+ this.size = 'medium';
27
+ this.version = packageJson.version;
28
+ }
29
+ static { this.shadowRootOptions = {
30
+ ...LitElement.shadowRootOptions,
31
+ delegatesFocus: true,
32
+ mode: shadowRootMode,
33
+ }; }
34
+ static { this.styles = styles; }
35
+ render() {
36
+ return html `<div
37
+ aria-label=${ifDefined(this.label)}
38
+ class=${classMap({
39
+ component: true,
40
+ [this.size]: true,
41
+ })}
42
+ role="progressbar"
43
+ ></div>`;
44
+ }
45
+ };
46
+ __decorate([
47
+ property({ reflect: true }),
48
+ required
49
+ ], Spinner.prototype, "label", void 0);
50
+ __decorate([
51
+ property({ reflect: true, useDefault: true })
52
+ ], Spinner.prototype, "size", void 0);
53
+ __decorate([
54
+ property({ reflect: true })
55
+ ], Spinner.prototype, "version", void 0);
56
+ Spinner = __decorate([
57
+ customElement('glide-core-spinner'),
58
+ final
59
+ ], Spinner);
60
+ export default Spinner;
@@ -1,4 +1,6 @@
1
- import{css}from"lit";export default[css`
1
+ import { css } from 'lit';
2
+ export default [
3
+ css `
2
4
  @keyframes spin {
3
5
  100% {
4
6
  align-items: center;
@@ -46,4 +48,5 @@ import{css}from"lit";export default[css`
46
48
  --private-gradient-size: 0.25rem;
47
49
  }
48
50
  }
49
- `];
51
+ `,
52
+ ];
@@ -1 +1,116 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,a=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(i<3?r(a):i>3?r(e,o,a):r(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a};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 SplitButtonPrimaryButton from"./split-button.primary-button.js";import SplitButtonPrimaryLink from"./split-button.primary-link.js";import SplitButtonSecondaryButton from"./split-button.secondary-button.js";import styles from"./split-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let SplitButton=class SplitButton extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#e=createRef(),this.#o="primary"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){this.#o=t,this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=t)}get secondaryButtonElement(){const t=this.#e.value?.assignedElements().at(0);if(t instanceof SplitButtonSecondaryButton)return t}get primaryButtonElement(){const t=this.#t.value?.assignedElements().at(0);if(t instanceof SplitButtonPrimaryButton||t instanceof SplitButtonPrimaryLink)return t}render(){return html`<div class="component"><slot @slotchange="${this.#n}" ${assertSlot([SplitButtonPrimaryButton,SplitButtonPrimaryLink])} ${ref(this.#t)}></slot><slot name="secondary-button" @slotchange="${this.#r}" ${assertSlot([SplitButtonSecondaryButton])} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#n(){this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=this.variant)}#r(){this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=this.variant)}};__decorate([property({reflect:!0})],SplitButton.prototype,"variant",null),__decorate([property({reflect:!0})],SplitButton.prototype,"version",void 0),SplitButton=__decorate([customElement("glide-core-split-button"),final],SplitButton);export default SplitButton;
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, LitElement } from 'lit';
8
+ import { createRef, ref } from 'lit/directives/ref.js';
9
+ import { customElement, property } from 'lit/decorators.js';
10
+ import packageJson from '../package.json' with { type: 'json' };
11
+ import SplitButtonPrimaryButton from './split-button.primary-button.js';
12
+ import SplitButtonPrimaryLink from './split-button.primary-link.js';
13
+ import SplitButtonSecondaryButton from './split-button.secondary-button.js';
14
+ import styles from './split-button.styles.js';
15
+ import assertSlot from './library/assert-slot.js';
16
+ import shadowRootMode from './library/shadow-root-mode.js';
17
+ import final from './library/final.js';
18
+ /**
19
+ * @attr {'primary'|'secondary'} [variant='primary']
20
+ *
21
+ * @readonly
22
+ * @attr {string} [version]
23
+ *
24
+ * @slot {SplitButtonPrimaryButton | SplitButtonPrimaryLink}
25
+ * @slot {SplitButtonSecondaryButton} [secondary-button]
26
+ */
27
+ let SplitButton = class SplitButton extends LitElement {
28
+ constructor() {
29
+ super(...arguments);
30
+ this.version = packageJson.version;
31
+ this.#defaultSlotElementRef = createRef();
32
+ this.#secondaryButtonSlotElementRef = createRef();
33
+ this.#variant = 'primary';
34
+ }
35
+ static { this.shadowRootOptions = {
36
+ ...LitElement.shadowRootOptions,
37
+ mode: shadowRootMode,
38
+ }; }
39
+ static { this.styles = styles; }
40
+ /**
41
+ * @default 'primary'
42
+ */
43
+ get variant() {
44
+ return this.#variant;
45
+ }
46
+ set variant(variant) {
47
+ this.#variant = variant;
48
+ if (this.primaryButtonElement) {
49
+ this.primaryButtonElement.privateVariant = variant;
50
+ }
51
+ if (this.secondaryButtonElement) {
52
+ this.secondaryButtonElement.privateVariant = variant;
53
+ }
54
+ }
55
+ get secondaryButtonElement() {
56
+ const element = this.#secondaryButtonSlotElementRef.value
57
+ ?.assignedElements()
58
+ .at(0);
59
+ if (element instanceof SplitButtonSecondaryButton) {
60
+ return element;
61
+ }
62
+ }
63
+ get primaryButtonElement() {
64
+ const element = this.#defaultSlotElementRef.value?.assignedElements().at(0);
65
+ if (element instanceof SplitButtonPrimaryButton ||
66
+ element instanceof SplitButtonPrimaryLink) {
67
+ return element;
68
+ }
69
+ }
70
+ render() {
71
+ return html `
72
+ <div class="component">
73
+ <slot
74
+ @slotchange=${this.#onDefaultSlotChange}
75
+ ${assertSlot([SplitButtonPrimaryButton, SplitButtonPrimaryLink])}
76
+ ${ref(this.#defaultSlotElementRef)}
77
+ >
78
+ <!-- @type {SplitButtonPrimaryButton | SplitButtonPrimaryLink} -->
79
+ </slot>
80
+
81
+ <slot
82
+ name="secondary-button"
83
+ @slotchange=${this.#onSecondaryButtonSlotChange}
84
+ ${assertSlot([SplitButtonSecondaryButton])}
85
+ ${ref(this.#secondaryButtonSlotElementRef)}
86
+ >
87
+ <!-- @type {SplitButtonSecondaryButton} -->
88
+ </slot>
89
+ </div>
90
+ `;
91
+ }
92
+ #defaultSlotElementRef;
93
+ #secondaryButtonSlotElementRef;
94
+ #variant;
95
+ #onDefaultSlotChange() {
96
+ if (this.primaryButtonElement) {
97
+ this.primaryButtonElement.privateVariant = this.variant;
98
+ }
99
+ }
100
+ #onSecondaryButtonSlotChange() {
101
+ if (this.secondaryButtonElement) {
102
+ this.secondaryButtonElement.privateVariant = this.variant;
103
+ }
104
+ }
105
+ };
106
+ __decorate([
107
+ property({ reflect: true })
108
+ ], SplitButton.prototype, "variant", null);
109
+ __decorate([
110
+ property({ reflect: true })
111
+ ], SplitButton.prototype, "version", void 0);
112
+ SplitButton = __decorate([
113
+ customElement('glide-core-split-button'),
114
+ final
115
+ ], SplitButton);
116
+ export default SplitButton;
@@ -1 +1,100 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,p=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)p=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(p=(a<3?i(p):a>3?i(e,o,p):i(e,o))||p);return a>3&&p&&Object.defineProperty(e,o,p),p};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.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"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let SplitButtonPrimaryButton=class SplitButtonPrimaryButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}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)}" class="${classMap({component:!0,disabled:this.disabled,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" type="button" ?disabled="${this.disabled}"><slot name="icon"></slot>${this.label}</button>`}};__decorate([property({reflect:!0}),required],SplitButtonPrimaryButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],SplitButtonPrimaryButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],SplitButtonPrimaryButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],SplitButtonPrimaryButton.prototype,"ariaHasPopup",void 0),__decorate([property({reflect:!0,type:Boolean})],SplitButtonPrimaryButton.prototype,"disabled",void 0),__decorate([property()],SplitButtonPrimaryButton.prototype,"privateSize",void 0),__decorate([property()],SplitButtonPrimaryButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],SplitButtonPrimaryButton.prototype,"version",void 0),SplitButtonPrimaryButton=__decorate([customElement("glide-core-split-button-primary-button"),final],SplitButtonPrimaryButton);export default SplitButtonPrimaryButton;
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, LitElement } from 'lit';
8
+ import { classMap } from 'lit/directives/class-map.js';
9
+ import { customElement, property } from 'lit/decorators.js';
10
+ import { ifDefined } from 'lit/directives/if-defined.js';
11
+ import packageJson from '../package.json' with { type: 'json' };
12
+ import styles from './split-button.primary-button.styles.js';
13
+ import shadowRootMode from './library/shadow-root-mode.js';
14
+ import final from './library/final.js';
15
+ import required from './library/required.js';
16
+ /**
17
+ * @attr {string} label
18
+ * @attr {string|null} [aria-controls=null]
19
+ * @attr {'true'|'false'|null} [aria-expanded=null]
20
+ * @attr {'true'|'false'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null} [aria-haspopup=null]
21
+ * @attr {boolean} [disabled=false]
22
+ *
23
+ * @readonly
24
+ * @attr {string} [version]
25
+ *
26
+ * @slot {Element} [icon] - An icon before the label
27
+ */
28
+ let SplitButtonPrimaryButton = class SplitButtonPrimaryButton extends LitElement {
29
+ constructor() {
30
+ super(...arguments);
31
+ this.ariaControls = null;
32
+ this.ariaExpanded = null;
33
+ this.ariaHasPopup = null;
34
+ this.disabled = false;
35
+ this.privateSize = 'large';
36
+ this.privateVariant = 'primary';
37
+ this.version = packageJson.version;
38
+ }
39
+ static { this.shadowRootOptions = {
40
+ ...LitElement.shadowRootOptions,
41
+ delegatesFocus: true,
42
+ mode: shadowRootMode,
43
+ }; }
44
+ static { this.styles = styles; }
45
+ render() {
46
+ return html `<button
47
+ aria-controls=${ifDefined(this.ariaControls ?? undefined)}
48
+ aria-expanded=${ifDefined(this.ariaExpanded ?? undefined)}
49
+ aria-haspopup=${ifDefined(this.ariaHasPopup ?? undefined)}
50
+ class=${classMap({
51
+ component: true,
52
+ disabled: this.disabled,
53
+ [this.privateVariant]: true,
54
+ [this.privateSize]: true,
55
+ })}
56
+ data-test="component"
57
+ type="button"
58
+ ?disabled=${this.disabled}
59
+ >
60
+ <slot name="icon">
61
+ <!--
62
+ An icon before the label
63
+ @type {Element}
64
+ -->
65
+ </slot>
66
+
67
+ ${this.label}
68
+ </button>`;
69
+ }
70
+ };
71
+ __decorate([
72
+ property({ reflect: true }),
73
+ required
74
+ ], SplitButtonPrimaryButton.prototype, "label", void 0);
75
+ __decorate([
76
+ property({ attribute: 'aria-controls', reflect: true, useDefault: true })
77
+ ], SplitButtonPrimaryButton.prototype, "ariaControls", void 0);
78
+ __decorate([
79
+ property({ attribute: 'aria-expanded', reflect: true, useDefault: true })
80
+ ], SplitButtonPrimaryButton.prototype, "ariaExpanded", void 0);
81
+ __decorate([
82
+ property({ attribute: 'aria-haspopup', reflect: true, useDefault: true })
83
+ ], SplitButtonPrimaryButton.prototype, "ariaHasPopup", void 0);
84
+ __decorate([
85
+ property({ reflect: true, type: Boolean })
86
+ ], SplitButtonPrimaryButton.prototype, "disabled", void 0);
87
+ __decorate([
88
+ property()
89
+ ], SplitButtonPrimaryButton.prototype, "privateSize", void 0);
90
+ __decorate([
91
+ property()
92
+ ], SplitButtonPrimaryButton.prototype, "privateVariant", void 0);
93
+ __decorate([
94
+ property({ reflect: true })
95
+ ], SplitButtonPrimaryButton.prototype, "version", void 0);
96
+ SplitButtonPrimaryButton = __decorate([
97
+ customElement('glide-core-split-button-primary-button'),
98
+ final
99
+ ], SplitButtonPrimaryButton);
100
+ export default SplitButtonPrimaryButton;
@@ -1,11 +1,17 @@
1
- import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
2
- ${focusOutline(".component:focus-visible")}
3
- `,css`
1
+ import { css } from 'lit';
2
+ import focusOutline from './styles/focus-outline.js';
3
+ // These styles are shared between Split Button Primary Button and Split Button
4
+ // Primary Link.
5
+ export default [
6
+ css `
7
+ ${focusOutline('.component:focus-visible')}
8
+ `,
9
+ css `
4
10
  .component {
5
11
  align-items: center;
6
12
  block-size: 2.125rem;
7
- border-radius: var(--glide-core-rounding-base-radius-md) 0 0
8
- var(--glide-core-rounding-base-radius-md);
13
+ border-radius: var(--glide-core-rounding-base-radius-sm) 0 0
14
+ var(--glide-core-rounding-base-radius-sm);
9
15
  border-style: solid;
10
16
  border-width: 1px 0 1px 1px;
11
17
  box-sizing: border-box;
@@ -97,4 +103,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
97
103
  color: var(--glide-core-private-color-button-text-primary);
98
104
  }
99
105
  }
100
- `];
106
+ `,
107
+ ];
@@ -1 +1,102 @@
1
- var __decorate=this&&this.__decorate||function(t,e,r,i){var o,a=arguments.length,s=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var p=t.length-1;p>=0;p--)(o=t[p])&&(s=(a<3?o(s):a>3?o(e,r,s):o(e,r))||s);return a>3&&s&&Object.defineProperty(e,r,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.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"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let SplitButtonPrimaryLink=class SplitButtonPrimaryLink extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return this.disabled?html`<span aria-disabled="true" class="${classMap({component:!0,disabled:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" role="link"><slot name="icon"></slot>${this.label}</span>`:html`<a class="${classMap({component:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" href="${ifDefined(this.href)}"><slot name="icon"></slot>${this.label}</a>`}};__decorate([property({reflect:!0}),required],SplitButtonPrimaryLink.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],SplitButtonPrimaryLink.prototype,"disabled",void 0),__decorate([property({reflect:!0})],SplitButtonPrimaryLink.prototype,"href",void 0),__decorate([property()],SplitButtonPrimaryLink.prototype,"privateSize",void 0),__decorate([property()],SplitButtonPrimaryLink.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],SplitButtonPrimaryLink.prototype,"version",void 0),SplitButtonPrimaryLink=__decorate([customElement("glide-core-split-button-primary-link"),final],SplitButtonPrimaryLink);export default SplitButtonPrimaryLink;
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, LitElement } from 'lit';
8
+ import { classMap } from 'lit/directives/class-map.js';
9
+ import { customElement, property } from 'lit/decorators.js';
10
+ import { ifDefined } from 'lit/directives/if-defined.js';
11
+ import packageJson from '../package.json' with { type: 'json' };
12
+ import styles from './split-button.primary-button.styles.js';
13
+ import shadowRootMode from './library/shadow-root-mode.js';
14
+ import final from './library/final.js';
15
+ import required from './library/required.js';
16
+ /**
17
+ * @attr {string} label
18
+ * @attr {boolean} [disabled=false]
19
+ * @attr {string} [href]
20
+ *
21
+ * @readonly
22
+ * @attr {string} [version]
23
+ *
24
+ * @slot {Element} [icon] - An icon before the label
25
+ */
26
+ let SplitButtonPrimaryLink = class SplitButtonPrimaryLink extends LitElement {
27
+ constructor() {
28
+ super(...arguments);
29
+ this.disabled = false;
30
+ this.privateSize = 'large';
31
+ this.privateVariant = 'primary';
32
+ this.version = packageJson.version;
33
+ }
34
+ static { this.shadowRootOptions = {
35
+ ...LitElement.shadowRootOptions,
36
+ delegatesFocus: true,
37
+ mode: shadowRootMode,
38
+ }; }
39
+ static { this.styles = styles; }
40
+ render() {
41
+ if (this.disabled) {
42
+ return html `<span
43
+ aria-disabled="true"
44
+ class=${classMap({
45
+ component: true,
46
+ disabled: true,
47
+ [this.privateVariant]: true,
48
+ [this.privateSize]: true,
49
+ })}
50
+ role="link"
51
+ >
52
+ <slot name="icon">
53
+ <!--
54
+ An icon before the label
55
+ @type {Element}
56
+ -->
57
+ </slot>
58
+
59
+ ${this.label}
60
+ </span>`;
61
+ }
62
+ return html `<a
63
+ class=${classMap({
64
+ component: true,
65
+ [this.privateVariant]: true,
66
+ [this.privateSize]: true,
67
+ })}
68
+ data-test="component"
69
+ href=${ifDefined(this.href)}
70
+ >
71
+ <slot name="icon">
72
+ <!-- @type {Element} -->
73
+ </slot>
74
+
75
+ ${this.label}
76
+ </a>`;
77
+ }
78
+ };
79
+ __decorate([
80
+ property({ reflect: true }),
81
+ required
82
+ ], SplitButtonPrimaryLink.prototype, "label", void 0);
83
+ __decorate([
84
+ property({ reflect: true, type: Boolean })
85
+ ], SplitButtonPrimaryLink.prototype, "disabled", void 0);
86
+ __decorate([
87
+ property({ reflect: true })
88
+ ], SplitButtonPrimaryLink.prototype, "href", void 0);
89
+ __decorate([
90
+ property()
91
+ ], SplitButtonPrimaryLink.prototype, "privateSize", void 0);
92
+ __decorate([
93
+ property()
94
+ ], SplitButtonPrimaryLink.prototype, "privateVariant", void 0);
95
+ __decorate([
96
+ property({ reflect: true })
97
+ ], SplitButtonPrimaryLink.prototype, "version", void 0);
98
+ SplitButtonPrimaryLink = __decorate([
99
+ customElement('glide-core-split-button-primary-link'),
100
+ final
101
+ ], SplitButtonPrimaryLink);
102
+ export default SplitButtonPrimaryLink;
@@ -1,4 +1,4 @@
1
- import './menu.options.js';
1
+ import './options.js';
2
2
  import { LitElement } from 'lit';
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
@@ -14,7 +14,7 @@ declare global {
14
14
  * @readonly
15
15
  * @attr {string} [version]
16
16
  *
17
- * @slot {MenuButton | MenuLink}
17
+ * @slot {Option}
18
18
  */
19
19
  export default class SplitButtonSecondaryButton extends LitElement {
20
20
  #private;
@@ -28,6 +28,5 @@ export default class SplitButtonSecondaryButton extends LitElement {
28
28
  privateVariant: 'primary' | 'secondary';
29
29
  readonly version: string;
30
30
  click(): void;
31
- firstUpdated(): void;
32
31
  render(): import("lit").TemplateResult<1>;
33
32
  }
@@ -1 +1,121 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,s=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,n);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(s=(i<3?r(s):i>3?r(e,o,s):r(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import"./menu.options.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{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import Menu from"./menu.js";import MenuButton from"./menu.button.js";import MenuLink from"./menu.link.js";import chevronIcon from"./icons/chevron.js";import styles from"./split-button.secondary-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 SplitButtonSecondaryButton=class SplitButtonSecondaryButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.menuOpen=!1,this.menuPlacement="bottom-end",this.privateActive=!1,this.privateVariant="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()}firstUpdated(){const t=new MutationObserver((()=>{this.#e.value&&(this.menuOpen=this.#e.value.open)}));this.#e.value&&t.observe(this.#e.value,{attributes:!0,attributeFilter:["open"]})}render(){return html`<glide-core-menu placement="${this.menuPlacement}" ?open="${this.menuOpen}" ${ref(this.#e)}><button aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,active:this.menuOpen,disabled:this.disabled,[this.privateVariant]:!0})}" data-test="button" slot="target" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}>${chevronIcon}</button><glide-core-menu-options><slot ${assertSlot([MenuButton,MenuLink])}></slot></glide-core-menu-options></glide-core-menu>`}#t;#e};__decorate([property({reflect:!0}),required],SplitButtonSecondaryButton.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],SplitButtonSecondaryButton.prototype,"disabled",void 0),__decorate([property({attribute:"menu-open",reflect:!0,type:Boolean})],SplitButtonSecondaryButton.prototype,"menuOpen",void 0),__decorate([property({attribute:"menu-placement",reflect:!0,useDefault:!0})],SplitButtonSecondaryButton.prototype,"menuPlacement",void 0),__decorate([property({type:Boolean})],SplitButtonSecondaryButton.prototype,"privateActive",void 0),__decorate([property()],SplitButtonSecondaryButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],SplitButtonSecondaryButton.prototype,"version",void 0),SplitButtonSecondaryButton=__decorate([customElement("glide-core-split-button-secondary-button"),final],SplitButtonSecondaryButton);export default SplitButtonSecondaryButton;
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import './options.js';
8
+ import { html, LitElement } from 'lit';
9
+ import { classMap } from 'lit/directives/class-map.js';
10
+ import { createRef, ref } from 'lit/directives/ref.js';
11
+ import { customElement, property } from 'lit/decorators.js';
12
+ import { ifDefined } from 'lit/directives/if-defined.js';
13
+ import packageJson from '../package.json' with { type: 'json' };
14
+ import Menu from './menu.js';
15
+ import chevronIcon from './icons/chevron.js';
16
+ import styles from './split-button.secondary-button.styles.js';
17
+ import assertSlot from './library/assert-slot.js';
18
+ import shadowRootMode from './library/shadow-root-mode.js';
19
+ import final from './library/final.js';
20
+ import required from './library/required.js';
21
+ import Option from './option.js';
22
+ /**
23
+ * @attr {string} label
24
+ * @attr {boolean} [disabled=false]
25
+ * @attr {boolean} [menu-open=false]
26
+ * @attr {'bottom-end'|'top-end'} [menu-placement='bottom-end']
27
+ *
28
+ * @readonly
29
+ * @attr {string} [version]
30
+ *
31
+ * @slot {Option}
32
+ */
33
+ let SplitButtonSecondaryButton = class SplitButtonSecondaryButton extends LitElement {
34
+ constructor() {
35
+ super(...arguments);
36
+ this.disabled = false;
37
+ this.menuOpen = false;
38
+ this.menuPlacement = 'bottom-end';
39
+ this.privateActive = false;
40
+ this.privateVariant = 'primary';
41
+ this.version = packageJson.version;
42
+ this.#buttonElementRef = createRef();
43
+ this.#menuElementRef = createRef();
44
+ }
45
+ static { this.shadowRootOptions = {
46
+ ...LitElement.shadowRootOptions,
47
+ delegatesFocus: true,
48
+ mode: shadowRootMode,
49
+ }; }
50
+ static { this.styles = styles; }
51
+ click() {
52
+ this.#buttonElementRef.value?.click();
53
+ }
54
+ render() {
55
+ return html `
56
+ <glide-core-menu
57
+ placement=${this.menuPlacement}
58
+ ?open=${this.menuOpen}
59
+ @toggle=${this.#onMenuToggle}
60
+ ${ref(this.#menuElementRef)}
61
+ >
62
+ <button
63
+ aria-label=${ifDefined(this.label)}
64
+ class=${classMap({
65
+ button: true,
66
+ active: this.menuOpen,
67
+ disabled: this.disabled,
68
+ [this.privateVariant]: true,
69
+ })}
70
+ data-test="button"
71
+ slot="target"
72
+ type="button"
73
+ ?disabled=${this.disabled}
74
+ ${ref(this.#buttonElementRef)}
75
+ >
76
+ ${chevronIcon}
77
+ </button>
78
+
79
+ <glide-core-options>
80
+ <slot ${assertSlot([Option])}>
81
+ <!-- @type {Option} -->
82
+ </slot>
83
+ </glide-core-options>
84
+ </glide-core-menu>
85
+ `;
86
+ }
87
+ #buttonElementRef;
88
+ #menuElementRef;
89
+ #onMenuToggle(event) {
90
+ if (event.target instanceof Menu) {
91
+ this.menuOpen = event.target.open;
92
+ }
93
+ }
94
+ };
95
+ __decorate([
96
+ property({ reflect: true }),
97
+ required
98
+ ], SplitButtonSecondaryButton.prototype, "label", void 0);
99
+ __decorate([
100
+ property({ reflect: true, type: Boolean })
101
+ ], SplitButtonSecondaryButton.prototype, "disabled", void 0);
102
+ __decorate([
103
+ property({ attribute: 'menu-open', reflect: true, type: Boolean })
104
+ ], SplitButtonSecondaryButton.prototype, "menuOpen", void 0);
105
+ __decorate([
106
+ property({ attribute: 'menu-placement', reflect: true, useDefault: true })
107
+ ], SplitButtonSecondaryButton.prototype, "menuPlacement", void 0);
108
+ __decorate([
109
+ property({ type: Boolean })
110
+ ], SplitButtonSecondaryButton.prototype, "privateActive", void 0);
111
+ __decorate([
112
+ property()
113
+ ], SplitButtonSecondaryButton.prototype, "privateVariant", void 0);
114
+ __decorate([
115
+ property({ reflect: true })
116
+ ], SplitButtonSecondaryButton.prototype, "version", void 0);
117
+ SplitButtonSecondaryButton = __decorate([
118
+ customElement('glide-core-split-button-secondary-button'),
119
+ final
120
+ ], SplitButtonSecondaryButton);
121
+ export default SplitButtonSecondaryButton;
@@ -1,7 +1,11 @@
1
- import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
2
- ${focusOutline(".component:focus-visible")}
3
- `,css`
4
- .component {
1
+ import { css } from 'lit';
2
+ import focusOutline from './styles/focus-outline.js';
3
+ export default [
4
+ css `
5
+ ${focusOutline('.button:focus-visible')}
6
+ `,
7
+ css `
8
+ .button {
5
9
  align-items: center;
6
10
  background-color: var(
7
11
  --glide-core-color-interactive-surface-container-active
@@ -13,8 +17,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
13
17
  border-inline-start-color: var(
14
18
  --glide-core-private-color-button-stroke-default
15
19
  );
16
- border-radius: 0 var(--glide-core-rounding-base-radius-md)
17
- var(--glide-core-rounding-base-radius-md) 0;
20
+ border-radius: 0 var(--glide-core-rounding-base-radius-sm)
21
+ var(--glide-core-rounding-base-radius-sm) 0;
18
22
  border-style: solid;
19
23
  border-width: 1px;
20
24
  box-sizing: border-box;
@@ -126,4 +130,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
126
130
  color: var(--glide-core-private-color-button-icon-primary);
127
131
  }
128
132
  }
129
- `];
133
+ `,
134
+ ];