@crowdstrike/glide-core 0.14.1 → 0.15.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.
- package/dist/button-group.js +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox.d.ts +2 -1
- package/dist/checkbox.js +13 -7
- package/dist/checkbox.styles.js +7 -2
- package/dist/dropdown.d.ts +3 -0
- package/dist/dropdown.js +37 -18
- package/dist/dropdown.option.d.ts +2 -0
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.option.styles.js +15 -2
- package/dist/dropdown.styles.js +32 -5
- package/dist/icons/informational.d.ts +2 -0
- package/dist/icons/informational.js +1 -0
- package/dist/icons/magnifying-glass.js +1 -1
- package/dist/inline-alert.d.ts +29 -0
- package/dist/inline-alert.js +1 -0
- package/dist/inline-alert.styles.d.ts +2 -0
- package/dist/inline-alert.styles.js +100 -0
- package/dist/input.d.ts +0 -2
- package/dist/input.js +11 -11
- package/dist/library/localize.d.ts +1 -0
- package/dist/menu.button.d.ts +3 -0
- package/dist/menu.button.js +1 -1
- package/dist/menu.button.styles.js +9 -1
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +2 -0
- package/dist/menu.link.js +1 -1
- package/dist/menu.link.styles.js +10 -1
- package/dist/radio-group.js +1 -1
- package/dist/styles/variables.css +1 -1
- package/dist/tab.d.ts +4 -1
- package/dist/tab.group.d.ts +2 -2
- package/dist/tab.group.js +1 -1
- package/dist/tab.group.styles.js +3 -2
- package/dist/tab.js +1 -1
- package/dist/tab.panel.d.ts +1 -1
- package/dist/tab.panel.js +1 -1
- package/dist/tab.panel.styles.js +14 -0
- package/dist/tag.styles.js +1 -0
- package/dist/translations/en.js +1 -1
- package/dist/translations/fr.d.ts +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/ja.d.ts +1 -1
- package/dist/translations/ja.js +1 -1
- package/dist/tree.js +1 -1
- package/package.json +12 -12
package/dist/tab.group.styles.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import{css}from"lit";export default[css`
|
2
2
|
:host {
|
3
3
|
background-color: transparent;
|
4
|
+
block-size: 100%;
|
4
5
|
display: flex;
|
5
6
|
flex-direction: column;
|
6
7
|
}
|
@@ -41,12 +42,12 @@ import{css}from"lit";export default[css`
|
|
41
42
|
background: var(--glide-core-border-focus);
|
42
43
|
block-size: 0.125rem;
|
43
44
|
content: '';
|
44
|
-
inline-size: var(--
|
45
|
+
inline-size: var(--selected-tab-indicator-width);
|
45
46
|
inset-block-end: 0;
|
46
47
|
inset-inline: 0;
|
47
48
|
position: absolute;
|
48
49
|
transform-origin: left;
|
49
|
-
translate: var(--
|
50
|
+
translate: var(--selected-tab-indicator-translate, 0) 0;
|
50
51
|
}
|
51
52
|
|
52
53
|
&.animated {
|
package/dist/tab.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,s){var o,r=arguments.length,d=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(d=(r<3?o(d):r>3?o(t,i,d):o(t,i))||d);return r>3&&d&&Object.defineProperty(t,i,d),d};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.styles.js";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.panel="",this.disabled=!1,this.selected=!1,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tab"),this.id=this.#e}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}"><div class="container"><slot name="icon"></slot><div class="default-slot"><slot></slot></div></div></div>`}updated(e){e.has("selected")&&this.setAttribute("aria-selected",this.selected?"true":"false"),e.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#e};__decorate([property({reflect:!0})],GlideCoreTab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"selected",void 0),GlideCoreTab=__decorate([customElement("glide-core-tab")],GlideCoreTab);export default GlideCoreTab;
|
package/dist/tab.panel.d.ts
CHANGED
@@ -17,7 +17,7 @@ export default class GlideCoreTabPanel extends LitElement {
|
|
17
17
|
* The corresponding <glide-core-tab> will have a `panel` attribute with this name
|
18
18
|
*/
|
19
19
|
name: string;
|
20
|
-
|
20
|
+
privateIsSelected: boolean;
|
21
21
|
protected firstUpdated(): void;
|
22
22
|
render(): import("lit").TemplateResult<1>;
|
23
23
|
protected updated(changes: PropertyValues): void;
|
package/dist/tab.panel.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,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 l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,o,a):r(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.panel.styles.js";let GlideCoreTabPanel=class GlideCoreTabPanel extends LitElement{constructor(){super(...arguments),this.name="",this.privateIsSelected=!0,this.#e=nanoid()}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tabpanel"),this.id=this.#e}render(){return html`<div class="${classMap({component:!0,hidden:!this.privateIsSelected,selected:this.privateIsSelected})}" data-test="tab-panel"><slot></slot></div>`}updated(e){super.updated(e),e.has("privateIsSelected")&&this.setAttribute("aria-hidden",this.privateIsSelected?"false":"true")}#e};__decorate([property({reflect:!0})],GlideCoreTabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTabPanel.prototype,"privateIsSelected",void 0),GlideCoreTabPanel=__decorate([customElement("glide-core-tab-panel")],GlideCoreTabPanel);export default GlideCoreTabPanel;
|
package/dist/tab.panel.styles.js
CHANGED
@@ -6,6 +6,16 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
|
|
6
6
|
outline: none;
|
7
7
|
}
|
8
8
|
|
9
|
+
/*
|
10
|
+
This reads a little oddly due to the negation, but we only want to
|
11
|
+
set this style on the host when the panel is selected, which means
|
12
|
+
it is not hidden. Otherwise we run into the case where non-selected,
|
13
|
+
hidden panels will attempt to take up space.
|
14
|
+
*/
|
15
|
+
:host([aria-hidden='false']) {
|
16
|
+
block-size: 100%;
|
17
|
+
}
|
18
|
+
|
9
19
|
.component {
|
10
20
|
font-family: var(--glide-core-font-sans);
|
11
21
|
outline: none;
|
@@ -24,5 +34,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
|
|
24
34
|
*/
|
25
35
|
padding-inline-end: var(--panel-padding-inline-end);
|
26
36
|
padding-inline-start: var(--panel-padding-inline-start);
|
37
|
+
|
38
|
+
&.selected {
|
39
|
+
block-size: 100%;
|
40
|
+
}
|
27
41
|
}
|
28
42
|
`];
|
package/dist/tag.styles.js
CHANGED
package/dist/translations/en.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",announcedCharacterCount:(t,
|
1
|
+
const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",announcedCharacterCount:(t,e)=>`Character count ${t} of ${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,actionsFor:t=>`Actions for ${t}`,itemCount:t=>`${t} items`,closeInlineAlert:t=>`Close ${t} alert`};export default translation;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Translation } from '../library/localize.js';
|
2
|
-
export declare const PENDING_STRINGS: readonly ["editOption", "editTag", "itemCount", "noResults"];
|
2
|
+
export declare const PENDING_STRINGS: readonly ["editOption", "editTag", "itemCount", "noResults", "closeInlineAlert"];
|
3
3
|
type PendingTranslation = (typeof PENDING_STRINGS)[number];
|
4
4
|
declare const translation: Omit<Translation, PendingTranslation>;
|
5
5
|
export default translation;
|
package/dist/translations/fr.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} de ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,removeTag:e=>`Supprimer la balise : ${e}`,actionsFor:e=>`Actions pour ${e}`};export default translation;
|
1
|
+
export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults","closeInlineAlert"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} de ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,removeTag:e=>`Supprimer la balise : ${e}`,actionsFor:e=>`Actions pour ${e}`};export default translation;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Translation } from '../library/localize.js';
|
2
|
-
export declare const PENDING_STRINGS: readonly ["editOption", "editTag", "itemCount", "noResults"];
|
2
|
+
export declare const PENDING_STRINGS: readonly ["editOption", "editTag", "itemCount", "noResults", "closeInlineAlert"];
|
3
3
|
type PendingTranslation = (typeof PENDING_STRINGS)[number];
|
4
4
|
declare const translation: Omit<Translation, PendingTranslation>;
|
5
5
|
export default translation;
|
package/dist/translations/ja.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(t,e)=>`${e} 文字数の${t}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}エントリのクリア`,removeTag:t=>`タグを削除: ${t}`,actionsFor:t=>`${t}のアクション`};export default translation;
|
1
|
+
export const PENDING_STRINGS=["editOption","editTag","itemCount","noResults","closeInlineAlert"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(t,e)=>`${e} 文字数の${t}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}エントリのクリア`,removeTag:t=>`タグを削除: ${t}`,actionsFor:t=>`${t}のアクション`};export default translation;
|
package/dist/tree.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,s){var r,l=arguments.length,i=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(i=(l<3?r(i):l>3?r(t,o,i):r(t,o))||i);return l>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,s){var r,l=arguments.length,i=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(i=(l<3?r(i):l>3?r(t,o,i):r(t,o))||i);return l>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#i(e){e?.focus(),this.focusedItem=e}#n(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#n(),t=new Set;return e.filter((e=>{const o=e.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!t.has(o)||t.add(e),!t.has(e)}))}#s(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#i(t)}#t(e){e.relatedTarget&&e.relatedTarget instanceof HTMLElement&&this.contains(e.relatedTarget)||(this.privateTabIndex=0,this.focusedItem=void 0)}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;if(e.target&&e.target instanceof HTMLElement&&(e.target.closest("glide-core-tree-item-icon-button")??e.target.closest("glide-core-tree-item-menu")))return;const t=this.#d(),{focusedItem:o}=this,s=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#i(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#i(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#i(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#i(t[s-1]),"Home"===e.key&&this.#i(t[0]),"End"===e.key&&this.#i(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#l(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([queryAssignedElements()],GlideCoreTree.prototype,"slotElements",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@crowdstrike/glide-core",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.15.0",
|
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",
|
@@ -37,7 +37,7 @@
|
|
37
37
|
"dependencies": {
|
38
38
|
"@floating-ui/dom": "^1.6.8",
|
39
39
|
"@shoelace-style/localize": "^3.1.2",
|
40
|
-
"nanoid": "^5.0.
|
40
|
+
"nanoid": "^5.0.9",
|
41
41
|
"ow": "^1.1.1"
|
42
42
|
},
|
43
43
|
"peerDependencies": {
|
@@ -51,15 +51,15 @@
|
|
51
51
|
"@eslint/js": "^8.56.0",
|
52
52
|
"@open-wc/testing": "^4.0.0",
|
53
53
|
"@rollup/plugin-commonjs": "^25.0.7",
|
54
|
-
"@storybook/addon-essentials": "^8.4.
|
55
|
-
"@storybook/addon-links": "^8.4.
|
56
|
-
"@storybook/blocks": "^8.4.
|
57
|
-
"@storybook/core-events": "^8.4.
|
58
|
-
"@storybook/manager-api": "^8.4.
|
59
|
-
"@storybook/preview-api": "^8.4.
|
60
|
-
"@storybook/theming": "^8.4.
|
61
|
-
"@storybook/web-components": "^8.4.
|
62
|
-
"@storybook/web-components-vite": "^8.4.
|
54
|
+
"@storybook/addon-essentials": "^8.4.7",
|
55
|
+
"@storybook/addon-links": "^8.4.7",
|
56
|
+
"@storybook/blocks": "^8.4.7",
|
57
|
+
"@storybook/core-events": "^8.4.7",
|
58
|
+
"@storybook/manager-api": "^8.4.7",
|
59
|
+
"@storybook/preview-api": "^8.4.7",
|
60
|
+
"@storybook/theming": "^8.4.7",
|
61
|
+
"@storybook/web-components": "^8.4.7",
|
62
|
+
"@storybook/web-components-vite": "^8.4.7",
|
63
63
|
"@stylistic/eslint-plugin": "^1.7.0",
|
64
64
|
"@types/eslint": "^8.56.7",
|
65
65
|
"@types/mocha": "^10.0.6",
|
@@ -97,7 +97,7 @@
|
|
97
97
|
"prettier": "3.1.0",
|
98
98
|
"rimraf": "^5.0.7",
|
99
99
|
"sinon": "^19.0.2",
|
100
|
-
"storybook": "^8.4.
|
100
|
+
"storybook": "^8.4.7",
|
101
101
|
"stylelint": "^16.3.1",
|
102
102
|
"stylelint-config-standard": "^36.0.0",
|
103
103
|
"stylelint-order": "^6.0.4",
|