@crowdstrike/glide-core 0.6.1 → 0.6.3

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 (59) hide show
  1. package/dist/button.styles.js +1 -1
  2. package/dist/checkbox-group.d.ts +1 -0
  3. package/dist/checkbox-group.js +1 -1
  4. package/dist/checkbox-group.styles.js +1 -1
  5. package/dist/checkbox.d.ts +1 -0
  6. package/dist/checkbox.js +1 -1
  7. package/dist/checkbox.styles.js +3 -0
  8. package/dist/dropdown.d.ts +1 -0
  9. package/dist/dropdown.js +1 -1
  10. package/dist/dropdown.styles.js +1 -1
  11. package/dist/dropdown.test.events.multiple.js +62 -0
  12. package/dist/dropdown.test.events.single.d.ts +1 -0
  13. package/dist/dropdown.test.events.single.js +47 -0
  14. package/dist/form-controls-layout.d.ts +23 -0
  15. package/dist/form-controls-layout.js +1 -0
  16. package/dist/form-controls-layout.stories.d.ts +10 -0
  17. package/dist/form-controls-layout.styles.d.ts +2 -0
  18. package/dist/form-controls-layout.styles.js +7 -0
  19. package/dist/form-controls-layout.test.basics.d.ts +2 -0
  20. package/dist/form-controls-layout.test.basics.js +74 -0
  21. package/dist/form-controls-layout.test.interactions.d.ts +2 -0
  22. package/dist/form-controls-layout.test.interactions.js +26 -0
  23. package/dist/input.d.ts +1 -0
  24. package/dist/input.js +1 -1
  25. package/dist/input.test.basics.js +6 -0
  26. package/dist/label.d.ts +3 -0
  27. package/dist/label.js +1 -1
  28. package/dist/label.styles.js +24 -3
  29. package/dist/label.test.basics.js +9 -5
  30. package/dist/library/ow.d.ts +2 -2
  31. package/dist/menu.js +1 -1
  32. package/dist/menu.test.basics.js +3 -10
  33. package/dist/menu.test.events.d.ts +2 -0
  34. package/dist/menu.test.events.js +30 -0
  35. package/dist/menu.test.interactions.js +129 -36
  36. package/dist/modal.js +1 -1
  37. package/dist/modal.tertiary-icon.js +1 -1
  38. package/dist/radio-group.d.ts +1 -0
  39. package/dist/radio-group.js +1 -1
  40. package/dist/radio-group.styles.js +1 -1
  41. package/dist/split-container.styles.js +1 -1
  42. package/dist/styles/variables.css +1 -1
  43. package/dist/textarea.d.ts +1 -0
  44. package/dist/textarea.js +2 -2
  45. package/dist/textarea.styles.js +1 -1
  46. package/dist/toasts.d.ts +1 -1
  47. package/dist/toasts.js +1 -1
  48. package/dist/toggle.d.ts +1 -0
  49. package/dist/toggle.js +1 -1
  50. package/dist/tooltip.d.ts +1 -1
  51. package/dist/tooltip.js +1 -1
  52. package/dist/tooltip.styles.js +3 -0
  53. package/dist/tooltip.test.interactions.js +22 -0
  54. package/dist/tree.item.d.ts +0 -3
  55. package/dist/tree.item.js +1 -1
  56. package/dist/tree.item.menu.d.ts +2 -0
  57. package/dist/tree.item.menu.js +1 -1
  58. package/dist/tree.item.menu.test.basics.js +17 -0
  59. package/package.json +2 -2
package/dist/styles/variables.css CHANGED
@@ -1 +1 @@
1
- :root,:host{color-scheme:normal;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 3.125rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #f0f0f0;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #c9c9c9;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #ffffff;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #d7e7ff;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}
1
+ :root,:host{color-scheme:normal;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #d7e7ff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #c9c9c9;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #ffffff;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #d7e7ff;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}
package/dist/textarea.d.ts CHANGED
@@ -32,6 +32,7 @@ export default class GlideCoreTextarea extends LitElement {
32
32
  name?: string;
33
33
  spellcheck: boolean;
34
34
  autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
35
+ privateSplit?: 'left' | 'middle';
35
36
  blur(): void;
36
37
  checkValidity(): boolean;
37
38
  disconnectedCallback(): void;
package/dist/textarea.js CHANGED
@@ -1,2 +1,2 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,l=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html}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{when}from"lit/directives/when.js";import styles from"./textarea.styles.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){return this.isCheckingValidity=!0,this.#t.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i),this.removeEventListener("invalid",this.#a)}get form(){return this.#t.form}get validity(){return this.#t.validity}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#r||this.#o}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label class="label" for="textarea">${this.label}</label><div class="textarea-container" slot="control"><textarea class="${classMap({error:this.#r||this.#o})}" id="textarea" name="${ifDefined(this.name)}" placeholder="${ifDefined(this.placeholder)}" rows="${this.rows}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" aria-describedby="meta" ${ref(this.#e)} @input="${this.#l}" @change="${this.#s}">
2
- </textarea></div><div class="meta" data-test-description-container id="meta" slot="description"><slot name="description"></slot>${when(this.maxlength,(()=>html`<div class="${classMap({"character-count":!0,error:this.#o})}" data-test-maxlength>${this.value.length}/${this.maxlength}</div>`))}</div></glide-core-label>`}reportValidity(){return this.#t.reportValidity()}updated(){this.#e.value&&(this.#e.value.value=this.value),this.#d()}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.spellcheck=!1,this.autocapitalize="on",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#e=createRef(),this.#i=({formData:e})=>{this.value.length>0&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",this.#a)}#t;#e;#i;get#r(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#o(){return!(!this.maxlength||this.disabled)&&this.value.length>this.maxlength}#s(e){const t=this.#e.value.value;this.value=t,this.#d(),this.dispatchEvent(new Event(e.type,e))}#l(){const e=this.#e.value.value;this.value=e,this.#t.setFormValue(this.value),this.#d()}#a(e){e.preventDefault(),this.isCheckingValidity||(this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!0)}async#d(){const e=this.#e.value;this.#o?this.#t.setValidity({...e?.validity,tooLong:!0}," ",e):this.#t.setValidity(e?.validity,e?.validationMessage,e),await this.updateComplete}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property()],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property()],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,l=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html}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{when}from"lit/directives/when.js";import ow from"./library/ow.js";import styles from"./textarea.styles.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){return this.isCheckingValidity=!0,this.#t.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i),this.removeEventListener("invalid",this.#a)}get form(){return this.#t.form}get validity(){return this.#t.validity}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#r||this.#o}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label class="label" for="textarea">${this.label}</label><div class="textarea-container" slot="control"><textarea class="${classMap({error:this.#r||this.#o})}" id="textarea" name="${ifDefined(this.name)}" placeholder="${ifDefined(this.placeholder)}" rows="${this.rows}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" aria-describedby="meta" ${ref(this.#e)} @input="${this.#l}" @change="${this.#s}">
2
+ </textarea></div><div class="meta" data-test-description-container id="meta" slot="description"><slot name="description"></slot>${when(this.maxlength,(()=>html`<div class="${classMap({"character-count":!0,error:this.#o})}" data-test-maxlength>${this.value.length}/${this.maxlength}</div>`))}</div></glide-core-label>`}reportValidity(){return this.#t.reportValidity()}updated(){this.#e.value&&(this.#e.value.value=this.value),this.#d()}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.spellcheck=!1,this.autocapitalize="on",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#e=createRef(),this.#i=({formData:e})=>{this.value.length>0&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",this.#a)}#t;#e;#i;get#r(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#o(){return!(!this.maxlength||this.disabled)&&this.value.length>this.maxlength}#s(e){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement));const t=this.#e.value.value;this.value=t,this.#d(),this.dispatchEvent(new Event(e.type,e))}#l(){ow(this.#e.value,ow.object.instanceOf(HTMLTextAreaElement));const e=this.#e.value.value;this.value=e,this.#t.setFormValue(this.value),this.#d()}#a(e){e.preventDefault(),this.isCheckingValidity||(this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!0)}async#d(){const e=this.#e.value;this.#o?this.#t.setValidity({...e?.validity,tooLong:!0}," ",e):this.#t.setValidity(e?.validity,e?.validationMessage,e),await this.updateComplete}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property()],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property()],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
package/dist/textarea.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import{css}from"lit";export default css`
2
- glide-core-label::part(tooltip-and-label-container) {
2
+ glide-core-label::part(tooltips-and-label) {
3
3
  align-items: flex-start;
4
4
  margin-block-start: var(--glide-core-spacing-sm);
5
5
  }
package/dist/toasts.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface Toast {
12
12
  duration?: number;
13
13
  }
14
14
  /**
15
- * @description A container and controller for toast messages
15
+ * @description A container and controller for toast messages.
16
16
 
17
17
  */
18
18
  export default class GlideCoreToasts extends LitElement {
package/dist/toasts.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return this.#e.value.append(i),i.addEventListener("close",(()=>{i.remove()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import ow from"./library/ow.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return ow(this.#e.value,ow.object.instanceOf(Element)),this.#e.value.append(i),i.addEventListener("close",(()=>{i.remove()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;
package/dist/toggle.d.ts CHANGED
@@ -24,6 +24,7 @@ export default class GlideCoreToggle extends LitElement {
24
24
  label?: string;
25
25
  orientation: 'horizontal' | 'vertical';
26
26
  name?: string;
27
+ privateSplit?: 'left' | 'middle';
27
28
  summary?: string;
28
29
  click(): void;
29
30
  focus(options?: FocusOptions): void;
package/dist/toggle.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(l=e[d])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(l=e[d])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
package/dist/tooltip.d.ts CHANGED
@@ -12,6 +12,7 @@ export default class GlideCoreTooltip extends LitElement {
12
12
  #private;
13
13
  static shadowRootOptions: ShadowRootInit;
14
14
  static styles: import("lit").CSSResult[];
15
+ disabled: boolean;
15
16
  placement?: 'bottom' | 'left' | 'right' | 'top';
16
17
  containingBlock?: Element;
17
18
  firstUpdated(): void;
@@ -19,5 +20,4 @@ export default class GlideCoreTooltip extends LitElement {
19
20
  private set isVisible(value);
20
21
  render(): import("lit").TemplateResult<1>;
21
22
  setContainingBlock(containingBlock: Element): void;
22
- private effectivePlacement?;
23
23
  }
package/dist/tooltip.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,i){var l,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(l=t[r])&&(a=(s<3?l(a):s>3?l(e,o,a):l(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,offset,platform,shift}from"@floating-ui/dom";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{offsetParent}from"composed-offset-position";import{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value),this.#o()}get isVisible(){return this.#i}set isVisible(t){this.#i=t,this.isVisible?this.#o():this.#l?.()}render(){return html`<div class="component" @mouseover="${this.#s}" @mouseout="${this.#a}"><div aria-labelledby="tooltip" class="target" slot="target" @focusin="${this.#r}" @focusout="${this.#n}" @keydown="${this.#f}" ${ref(this.#c)}><slot @slotchange="${this.#p}" ${ref(this.#e)} name="target"></slot></div><div class="${classMap({tooltip:!0,visible:this.isVisible})}" id="tooltip" role="tooltip" ${ref(this.#m)}><span aria-label="Tooltip: "></span><slot @slotchange="${this.#h}" ${ref(this.#t)}></slot><div class="arrow" ${ref(this.#d)}></div></div></div>`}setContainingBlock(t){this.containingBlock=t}#d=createRef();#l;#u;#t=createRef();#i=!1;#c=createRef();#e=createRef();#m=createRef();#g(){clearTimeout(this.#u)}#h(){owSlot(this.#t.value)}#r(){this.isVisible=!0}#n(){this.isVisible=!1}#f(t){"Escape"===t.key&&(this.isVisible=!1)}#a(){this.#v()}#s(){this.#g(),this.isVisible=!0}#p(){owSlot(this.#e.value)}#v(){this.#u=setTimeout((()=>{this.isVisible=!1}),200)}#o(){this.#c.value&&this.#m.value&&(this.#l=autoUpdate(this.#c.value,this.#m.value,(()=>{(async()=>{if(this.#c.value&&this.#m.value){const t=this.#d.value,{placement:e,x:o,y:i,middlewareData:l}=await computePosition(this.#c.value,this.#m.value,{platform:{...platform,getOffsetParent:t=>this.containingBlock&&t!==this.#d.value?this.containingBlock:platform.getOffsetParent(t,offsetParent)},placement:this.placement,strategy:"fixed",middleware:[offset(6),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:t})]});Object.assign(this.#m.value.style,{left:`${o}px`,top:`${i}px`});const s=l.arrow?.x??null,a=l.arrow?.y??null,r={top:"bottom",right:"left",bottom:"top",left:"right"}[e.split("-")[0]];Object.assign(t.style,{left:null===s?"":`${s}px`,top:null===a?"":`${a}px`,right:"",bottom:"",[r]:"-3px"}),this.effectivePlacement=e}})()})))}};__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"containingBlock",void 0),__decorate([state()],GlideCoreTooltip.prototype,"isVisible",null),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(s<3?l(a):s>3?l(t,o,a):l(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,offset,platform,shift}from"@floating-ui/dom";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{offsetParent}from"composed-offset-position";import{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#i=createRef(),this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#l.value),this.#a()}get isVisible(){return this.#o}set isVisible(e){this.#o=e,this.isVisible?this.#a():this.#r?.()}render(){return html`<div class="component" @mouseover="${this.#n}" @mouseout="${this.#f}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" slot="target" @focusin="${this.#p}" @focusout="${this.#c}" @keydown="${this.#d}" ${ref(this.#i)}><slot @slotchange="${this.#m}" ${ref(this.#l)} name="target"></slot></div><div class="${classMap({tooltip:!0,visible:this.isVisible&&!this.disabled})}" id="tooltip" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#s)}><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><slot @slotchange="${this.#h}" ${ref(this.#t)}></slot><div class="arrow" ${ref(this.#e)}></div></div></div>`}setContainingBlock(e){this.containingBlock=e}#e;#r;#u;#t;#o;#i;#l;#s;#g(){clearTimeout(this.#u)}#h(){owSlot(this.#t.value)}#p(){this.isVisible=!0}#c(){this.isVisible=!1}#d(e){"Escape"===e.key&&(this.isVisible=!1)}#f(){this.#R()}#n(){this.#g(),this.isVisible=!0}#m(){owSlot(this.#l.value)}#R(){this.#u=setTimeout((()=>{this.isVisible=!1}),200)}#a(){this.#i.value&&this.#s.value&&(this.#r=autoUpdate(this.#i.value,this.#s.value,(()=>{(async()=>{if(this.#i.value&&this.#s.value){const e=this.#e.value,{placement:t,x:o,y:i,middlewareData:l}=await computePosition(this.#i.value,this.#s.value,{platform:{...platform,getOffsetParent:e=>this.containingBlock&&e!==this.#e.value?this.containingBlock:platform.getOffsetParent(e,offsetParent)},placement:this.placement,strategy:"fixed",middleware:[offset(6),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:e})]});Object.assign(this.#s.value.style,{left:`${o}px`,top:`${i}px`});const s=l.arrow?.x??null,a=l.arrow?.y??null,r={top:"bottom",right:"left",bottom:"top",left:"right"}[t.split("-")[0]];Object.assign(e.style,{left:null===s?"":`${s}px`,top:null===a?"":`${a}px`,right:"",bottom:"",[r]:"-3px"})}})()})))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",void 0),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"containingBlock",void 0),__decorate([state()],GlideCoreTooltip.prototype,"isVisible",null),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;
package/dist/tooltip.styles.js CHANGED
@@ -11,6 +11,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
11
11
 
12
12
  /* Additional whitespace from line height and the tooltip won't be vertically centered. */
13
13
  display: flex;
14
+
15
+ /* Allows the consumer to style the target using "text-overflow: ellipsis". */
16
+ inline-size: 100%;
14
17
  padding: 0;
15
18
  position: relative;
16
19
 
package/dist/tooltip.test.interactions.js CHANGED
@@ -15,6 +15,17 @@ it('is visible on "focusin"', async () => {
15
15
  await elementUpdated(component);
16
16
  expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.true;
17
17
  });
18
+ it('is hidden on "focusin" when disabled', async () => {
19
+ const component = await fixture(html `<glide-core-tooltip disabled>
20
+ Tooltip
21
+ <span slot="target" tabindex="0">Target</span>
22
+ </glide-core-tooltip>`);
23
+ component.shadowRoot
24
+ ?.querySelector('[aria-labelledby="tooltip"]')
25
+ ?.dispatchEvent(new FocusEvent('focusin'));
26
+ await elementUpdated(component);
27
+ expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.not.be.ok;
28
+ });
18
29
  it('is hidden on "blur"', async () => {
19
30
  const component = await fixture(html `<glide-core-tooltip>
20
31
  Tooltip
@@ -58,6 +69,17 @@ it('is visible on "mouseover"', async () => {
58
69
  await elementUpdated(component);
59
70
  expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.true;
60
71
  });
72
+ it('is hidden on "mouseover" when disabled', async () => {
73
+ const component = await fixture(html `<glide-core-tooltip disabled>
74
+ Tooltip
75
+ <span slot="target" tabindex="0">Target</span>
76
+ </glide-core-tooltip>`);
77
+ component.shadowRoot
78
+ ?.querySelector('.component')
79
+ ?.dispatchEvent(new MouseEvent('mouseover'));
80
+ await elementUpdated(component);
81
+ expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.not.be.ok;
82
+ });
61
83
  it('is hidden on "mouseout"', async () => {
62
84
  const clock = sinon.useFakeTimers();
63
85
  const component = await fixture(html `<glide-core-tooltip>
package/dist/tree.item.d.ts CHANGED
@@ -39,7 +39,4 @@ export default class GlideCoreTreeItem extends LitElement {
39
39
  setContainingBlock(containingBlock: Element): void;
40
40
  toggleExpand(): void;
41
41
  private childTreeItems;
42
- private hasMenuSlot;
43
- private hasPrefixSlot;
44
- private hasSuffixSlot;
45
42
  }
package/dist/tree.item.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,s,i){var o,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,s,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(l=(r<3?o(l):r>3?o(t,s,l):o(t,s))||l);return r>3&&l&&Object.defineProperty(t,s,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import GlideCoreMenu from"./menu.js";import{when}from"lit/directives/when.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.childTreeItems=[],this.hasMenuSlot=!1,this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(){this.#e.value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#i)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#o};"></div><div class="expand-icon-container">${when(this.hasChildTreeItems,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div><slot name="prefix" @slotchange="${this.#r}"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu" @slotchange="${this.#l}"></slot><slot name="suffix" @slotchange="${this.#n}"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const s of this.slotElements)if(e===s)s.setAttribute("selected","true"),t=s;else{s.removeAttribute("selected");const i=s.selectItem(e);i&&(t=i)}return t}setContainingBlock(e){for(const t of this.menuSlotAssignedElements)t.setContainingBlock(e)}toggleExpand(){this.expanded=!this.expanded}#e;get#i(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#o(){return 20*(this.level-1)+"px"}#l(){this.hasMenuSlot=this.menuSlotAssignedElements.length>0}#r(){this.hasPrefixSlot=this.prefixSlotAssignedElements.length>0}#n(){this.hasSuffixSlot=this.suffixSlotAssignedElements.length>0}#t(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([queryAssignedElements({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasMenuSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasSuffixSlot",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,s){var r,o=arguments.length,l=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import GlideCoreMenu from"./menu.js";import{when}from"lit/directives/when.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.childTreeItems=[],this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(){this.#e.value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#i)}" aria-expanded="${ifDefined(this.#s)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#r};"></div><div class="expand-icon-container">${when(this.hasChildTreeItems,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div><slot name="prefix"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const i of this.slotElements)if(e===i)i.setAttribute("selected","true"),t=i;else{i.removeAttribute("selected");const s=i.selectItem(e);s&&(t=s)}return t}setContainingBlock(e){for(const t of this.menuSlotAssignedElements)t.setContainingBlock(e)}toggleExpand(){this.expanded=!this.expanded}#e;get#s(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#i(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#r(){return 20*(this.level-1)+"px"}#t(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([queryAssignedElements({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
package/dist/tree.item.menu.d.ts CHANGED
@@ -2,6 +2,7 @@ import './icon-button.js';
2
2
  import './menu.js';
3
3
  import './menu.options.js';
4
4
  import { LitElement } from 'lit';
5
+ import type { Placement } from '@floating-ui/dom';
5
6
  declare global {
6
7
  interface HTMLElementTagNameMap {
7
8
  'glide-core-tree-item-menu': GlideCoreTreeItemMenu;
@@ -17,6 +18,7 @@ export default class GlideCoreTreeItemMenu extends LitElement {
17
18
  #private;
18
19
  static shadowRootOptions: ShadowRootInit;
19
20
  static styles: import("lit").CSSResult[];
21
+ placement: Placement;
20
22
  firstUpdated(): void;
21
23
  render(): import("lit").TemplateResult<1>;
22
24
  setContainingBlock(containingBlock: Element): void;
package/dist/tree.item.menu.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){this.#t.value.setContainingBlock(e)}#e=createRef();#t=createRef();#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,l){var r,n=arguments.length,i=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var m=e.length-1;m>=0;m--)(r=e[m])&&(i=(n<3?r(i):n>3?r(t,o,i):r(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){ow(this.#t.value,ow.object.instanceOf(Element)),this.#t.value.setContainingBlock(e)}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
package/dist/tree.item.menu.test.basics.js CHANGED
@@ -2,6 +2,7 @@ import { expect, fixture, html, waitUntil } from '@open-wc/testing';
2
2
  import GlideCoreTreeItemMenu from './tree.item.menu.js';
3
3
  import expectArgumentError from './library/expect-argument-error.js';
4
4
  import sinon from 'sinon';
5
+ GlideCoreTreeItemMenu.shadowRootOptions.mode = 'open';
5
6
  it('registers', async () => {
6
7
  expect(window.customElements.get('glide-core-tree-item-menu')).to.equal(GlideCoreTreeItemMenu);
7
8
  });
@@ -31,3 +32,19 @@ it('throws if the default slot is the incorrect type', async () => {
31
32
  await waitUntil(() => stub.calledTwice);
32
33
  stub.restore();
33
34
  });
35
+ it('defaults the placement of the menu to bottom start', async () => {
36
+ const treeItemMenu = await fixture(html `
37
+ <glide-core-tree-item-menu>
38
+ <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
39
+ </glide-core-tree-item-menu>
40
+ `);
41
+ expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-start');
42
+ });
43
+ it('can set placement of the menu', async () => {
44
+ const treeItemMenu = await fixture(html `
45
+ <glide-core-tree-item-menu placement="bottom-end">
46
+ <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
47
+ </glide-core-tree-item-menu>
48
+ `);
49
+ expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-end');
50
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crowdstrike/glide-core",
3
- "version": "0.6.1",
3
+ "version": "0.6.3",
4
4
  "description": "CrowdStrike's Glide Design System components package for providing web components",
5
5
  "author": "CrowdStrike UX Team",
6
6
  "license": "Apache-2.0",
@@ -29,7 +29,7 @@
29
29
  "./styles/*": null,
30
30
  "./label.js": null,
31
31
  "./toasts.toast.js": null,
32
- "./library/set-containing-block.js": "./dist/set-containing-block.js",
32
+ "./library/set-containing-block.js": "./dist/library/set-containing-block.js",
33
33
  "./styles/fonts.css": "./dist/styles/fonts.css",
34
34
  "./styles/variables.css": "./dist/styles/variables.css"
35
35
  },