npm - @crowdstrike/glide-core - Versions diffs - 0.23.0 → 0.24.1 - Mend

@crowdstrike/glide-core 0.23.0 → 0.24.1

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 (46) hide show

package/dist/accordion.styles.js +22 -21
package/dist/button-group.button.styles.js +46 -22
package/dist/button-group.styles.js +7 -7
package/dist/button.d.ts +3 -0
package/dist/button.js +1 -1
package/dist/button.styles.js +62 -42
package/dist/checkbox-group.styles.js +5 -5
package/dist/checkbox.js +9 -3
package/dist/checkbox.styles.js +46 -28
package/dist/drawer.styles.js +6 -4
package/dist/dropdown.js +1 -1
package/dist/dropdown.option.styles.js +26 -28
package/dist/dropdown.styles.js +64 -58
package/dist/icon-button.styles.js +44 -23
package/dist/inline-alert.js +1 -1
package/dist/inline-alert.styles.js +24 -21
package/dist/input.styles.js +33 -25
package/dist/label.styles.js +22 -27
package/dist/menu.button.styles.js +6 -4
package/dist/menu.js +1 -1
package/dist/menu.link.styles.js +6 -4
package/dist/menu.options.styles.js +12 -16
package/dist/menu.styles.js +9 -6
package/dist/modal.styles.js +16 -13
package/dist/popover.js +1 -1
package/dist/popover.styles.js +14 -14
package/dist/radio-group.radio.styles.js +31 -11
package/dist/radio-group.styles.js +8 -10
package/dist/split-button.primary-button.styles.js +41 -26
package/dist/split-button.secondary-button.styles.js +61 -21
package/dist/styles/focus-outline.js +1 -1
package/dist/styles/variables.css +1 -1
package/dist/tab.group.styles.js +6 -5
package/dist/tab.panel.styles.js +1 -1
package/dist/tab.styles.js +7 -7
package/dist/tag.styles.js +27 -26
package/dist/textarea.styles.js +22 -18
package/dist/toasts.styles.js +2 -2
package/dist/toasts.toast.styles.js +20 -20
package/dist/toggle.styles.js +15 -7
package/dist/tooltip.container.styles.js +14 -13
package/dist/tooltip.js +1 -1
package/dist/tooltip.styles.js +1 -1
package/package.json +8 -9
package/dist/library/get-parent-class-name.d.ts +0 -3
package/dist/library/get-parent-class-name.js +0 -1

package/dist/dropdown.styles.js CHANGED Viewed

@@ -7,7 +7,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .component {
       --private-min-inline-size: 9.375rem;
-      font-family: var(--glide-core-font-sans);
+      font-family: var(--glide-core-typography-family-primary);
     }
     .dropdown-and-options {
@@ -32,21 +32,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       --private-button-and-input-height: 1.25rem;
       align-items: center;
-      background-color: var(--glide-core-surface-base-lighter);
+      background-color: var(--glide-core-color-interactive-surface-container);
       block-size: 2.125rem;
-      border: 1px solid var(--glide-core-border-base);
-      border-radius: var(--glide-core-spacing-xs);
+      border: 1px solid var(--glide-core-color-static-stroke-primary);
+      border-radius: var(--glide-core-spacing-base-xs);
       box-sizing: border-box;
-      color: var(--glide-core-text-body-1);
+      color: var(--glide-core-color-static-text-default);
       cursor: inherit;
       display: inline-flex;
       flex-grow: 1;
-      font-size: var(--glide-core-body-sm-font-size);
-      font-style: var(--glide-core-body-sm-font-style);
-      font-weight: var(--glide-core-body-sm-font-weight);
-      gap: var(--glide-core-spacing-xs);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
+      gap: var(--glide-core-spacing-base-xs);
       min-inline-size: var(--private-min-inline-size);
-      padding-inline: var(--glide-core-spacing-sm);
+      padding-inline: var(--glide-core-spacing-base-sm);
       text-align: start;
       transition:
         background-color 200ms ease-in-out,
@@ -57,22 +56,24 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         background-color: transparent;
         block-size: 1.5rem;
         border-color: transparent;
-        border-radius: var(--glide-core-border-radius-round);
-        column-gap: var(--glide-core-spacing-xxs);
+        border-radius: var(--glide-core-rounding-base-radius-round);
+        column-gap: var(--glide-core-spacing-base-xxs);
         min-inline-size: 3.75rem;
         padding-block: 0;
-        padding-inline: var(--glide-core-spacing-sm);
+        padding-inline: var(--glide-core-spacing-base-sm);
       }
       &.disabled {
-        background: var(--glide-core-surface-disabled);
-        border-color: var(--glide-core-border-base-light);
-        color: var(--glide-core-text-tertiary-disabled);
+        background: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
+        border-color: var(--glide-core-color-static-stroke-secondary);
+        color: var(--glide-core-color-interactive-text-default--disabled);
       }
       &.error {
-        border-color: var(--glide-core-status-error);
-        color: var(--glide-core-status-error);
+        border-color: var(--glide-core-color-error-stroke-primary);
+        color: var(--glide-core-color-error-stroke-primary);
       }
       &.readonly {
@@ -86,8 +87,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
             :hover,
             :has(.primary-button:focus-visible, .input:focus-visible)
           ):not(&.error, &.disabled, &.multiple, &.readonly) {
-          background-color: var(--glide-core-surface-hover);
-          color: var(--glide-core-text-body-1);
+          background-color: var(
+            --glide-core-color-interactive-surface-container--hover
+          );
+          color: var(--glide-core-color-static-text-default);
         }
       }
@@ -96,12 +99,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
           :has(.primary-button:hover),
           :has(.primary-button:focus-visible, .input:focus-visible)
         ):not(&.disabled, &.error, &.quiet, &.readonly) {
-        border-color: var(--glide-core-border-focus);
+        border-color: var(--glide-core-color-interactive-stroke-focus);
       }
       &:has(.primary-button:focus-visible, .input:focus-visible) {
         &.quiet {
-          border-color: var(--glide-core-border-focus);
+          border-color: var(--glide-core-color-interactive-stroke-focus);
         }
       }
     }
@@ -109,11 +112,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .options-and-footer {
       --private-border-width: 1px;
-      background-color: var(--glide-core-surface-modal);
+      background-color: var(
+        --glide-core-private-color-dialog-and-modal-surface-container
+      );
       border: var(--private-border-width) solid
-        var(--glide-core-border-base-lighter);
-      border-radius: var(--glide-core-spacing-xs);
-      box-shadow: var(--glide-core-shadow-lg);
+        var(--glide-core-color-static-surface-container-secondary);
+      border-radius: var(--glide-core-rounding-base-radius-sm);
+      box-shadow: var(--glide-core-effect-floating);
       inset: unset;
       min-inline-size: var(--private-min-inline-size);
       padding: 0;
@@ -123,8 +128,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .options {
       box-sizing: border-box;
       max-block-size: calc(
-        var(--private-option-height) * 9 + var(--glide-core-spacing-xxxs) * 2 +
-          var(--private-border-width) * 2
+        var(--private-option-height) * 9 + var(--glide-core-spacing-base-xxxs) *
+          2 + var(--private-border-width) * 2
       );
       overflow: auto;
       scroll-behavior: smooth;
@@ -144,15 +149,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .default-slot {
       display: block;
-      padding: var(--glide-core-spacing-xxxs);
+      padding: var(--glide-core-spacing-base-xxxs);
     }
     .footer {
-      background-color: var(--glide-core-surface-base-gray-lighter);
+      background-color: var(--glide-core-color-static-surface-header);
       display: none;
-      inline-size: calc(100% - var(--glide-core-spacing-xxxs) * 2);
+      inline-size: calc(100% - var(--glide-core-spacing-base-xxxs) * 2);
       inset-block-end: 0;
-      padding: var(--glide-core-spacing-xxxs);
+      padding: var(--glide-core-spacing-base-xxxs);
       /*
         "sticky" is a little hack so that footer is absolutely positioned but
@@ -169,10 +174,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       align-items: center;
       background-color: transparent;
       border: none;
-      border-radius: 0.75rem;
+      border-radius: var(--glide-core-rounding-base-radius-md);
       display: flex;
-      font-family: var(--glide-core-body-sm-font-family);
-      font-weight: var(--glide-core-body-sm-font-weight);
+      font-family: var(--glide-core-typography-family-primary);
+      font-weight: var(--glide-core-typography-weight-regular);
       inline-size: 100%;
       line-height: 100%;
       text-align: start;
@@ -181,18 +186,18 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         --private-size: 1rem;
         column-gap: 0.625rem;
-        font-size: var(--glide-core-body-sm-font-size);
+        font-size: var(--glide-core-typography-size-body-default);
         padding-block: 0.375rem;
-        padding-inline: var(--glide-core-spacing-sm);
+        padding-inline: var(--glide-core-spacing-base-sm);
       }
       &.small {
         --private-size: 0.875rem;
-        column-gap: var(--glide-core-spacing-xs);
-        font-size: var(--glide-core-body-xs-font-size);
-        padding-block: var(--glide-core-spacing-xxxs);
-        padding-inline: var(--glide-core-spacing-xs);
+        column-gap: var(--glide-core-spacing-base-xs);
+        font-size: var(--glide-core-typography-size-body-small);
+        padding-block: var(--glide-core-spacing-base-xxxs);
+        padding-inline: var(--glide-core-spacing-base-xs);
       }
       &:focus {
@@ -205,13 +210,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       &:focus,
       &:hover {
-        background-color: var(--glide-core-surface-hover);
+        background-color: var(
+          --glide-core-color-interactive-surface-container--hover
+        );
       }
     }
     .select-all {
-      background-color: var(--glide-core-surface-base-gray-lighter);
-      padding: var(--glide-core-spacing-xxxs);
+      background-color: var(--glide-core-color-static-surface-header);
+      padding: var(--glide-core-spacing-base-xxxs);
       &:not([hidden]) {
         display: block;
@@ -219,27 +226,26 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
     .no-results {
-      font-family: var(--glide-core-body-sm-font-family);
-      font-size: var(--glide-core-body-sm-font-size);
-      font-weight: var(--glide-core-body-sm-font-weight);
-      line-height: var(--glide-core-body-sm-line-height);
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
       padding: 0.625rem 0.875rem;
       text-transform: capitalize;
     }
     .placeholder {
-      color: var(--glide-core-text-placeholder);
+      color: var(--glide-core-color-interactive-text-placeholder);
       &.quiet {
         &:not(.disabled) {
-          color: var(--glide-core-text-body-1);
+          color: var(--glide-core-color-static-text-default);
         }
       }
     }
     .tags {
       display: grid;
-      gap: var(--glide-core-spacing-xs);
+      gap: var(--glide-core-spacing-base-xs);
       /*
         Tags will shrink down to zero and never overflow if they don't have a minimum
@@ -275,15 +281,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .tag-overflow-text {
       align-content: center;
-      color: var(--glide-core-text-link);
-      margin-inline-end: var(--glide-core-spacing-md);
+      color: var(--glide-core-color-interactive-text-link);
+      margin-inline-end: var(--glide-core-spacing-base-md);
       white-space: nowrap;
     }
     .single-select-icon-slot {
       &.quiet {
         &::slotted(*) {
-          margin-inline-end: var(--glide-core-spacing-xxs);
+          margin-inline-end: var(--glide-core-spacing-base-xxs);
         }
       }
@@ -331,7 +337,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .edit-button {
       display: flex;
-      margin-inline-end: var(--glide-core-spacing-xxs);
+      margin-inline-end: var(--glide-core-spacing-base-xxs);
     }
     .input-tooltip {
@@ -355,7 +361,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       border: none;
       cursor: inherit;
       flex-grow: 1;
-      font-family: var(--glide-core-font-sans);
+      font-family: var(--glide-core-typography-family-primary);
       font-size: inherit;
       inline-size: 100%;
       min-inline-size: 3.75rem;
@@ -375,8 +381,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
       &::placeholder {
-        color: var(--glide-core-text-placeholder);
-        font-family: var(--glide-core-font-sans);
+        color: var(--glide-core-color-interactive-text-placeholder);
+        font-family: var(--glide-core-typography-family-primary);
       }
     }

package/dist/icon-button.styles.js CHANGED Viewed

@@ -10,7 +10,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       align-items: center;
       block-size: var(--private-size, 1.625rem);
       border-color: transparent;
-      border-radius: 0.5rem;
+      border-radius: var(--glide-core-rounding-base-radius-sm);
       border-style: solid;
       border-width: 1px;
       cursor: pointer;
@@ -32,50 +32,68 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
       &.primary {
-        background-color: var(--glide-core-surface-primary);
+        background-color: var(
+          --glide-core-color-interactive-surface-container-active
+        );
         border-color: transparent;
-        color: var(--private-icon-color, var(--glide-core-icon-selected));
+        color: var(
+          --private-icon-color,
+          var(--glide-core-private-color-button-icon-primary)
+        );
         &:disabled {
-          background-color: var(--glide-core-surface-base-gray-light);
+          background-color: var(
+            --glide-core-color-static-surface-container-secondary
+          );
           border-color: transparent;
-          color: var(--glide-core-icon-tertiary-disabled);
+          color: var(--glide-core-color-interactive-icon-default--disabled);
         }
         &:not(:disabled):active {
-          background-color: var(--glide-core-surface-selected);
+          background-color: var(
+            --glide-core-private-color-button-surface-active
+          );
           border-color: transparent;
-          color: var(--glide-core-icon-selected);
+          color: var(--glide-core-color-interactive-icon-default--active);
         }
         &:not(:active):hover:not(:disabled) {
-          background-color: var(--glide-core-surface-hover);
+          background-color: var(
+            --glide-core-color-interactive-surface-container--hover
+          );
           border-color: transparent;
-          box-shadow: var(--glide-core-glow-sm);
-          color: var(--glide-core-icon-primary);
+          box-shadow: var(--glide-core-effect-hovered);
+          color: var(--glide-core-color-interactive-icon-link);
         }
       }
       &.secondary {
-        background-color: transparent;
-        border-color: transparent;
-        color: var(--private-icon-color, var(--glide-core-icon-default));
+        background-color: var(--glide-core-color-interactive-surface-container);
+        color: var(
+          --private-icon-color,
+          var(--glide-core-color-interactive-icon-default)
+        );
         &:disabled {
-          background-color: transparent;
-          color: var(--glide-core-icon-tertiary-disabled);
+          background-color: var(--glide-core-color-static-surface-container);
+          border-color: transparent;
+          color: var(--glide-core-color-interactive-icon-default--disabled);
         }
         &:not(:disabled):active {
-          background-color: var(--glide-core-surface-selected);
+          background-color: var(
+            --glide-core-private-color-button-surface-active
+          );
           border-color: transparent;
-          color: var(--glide-core-icon-selected);
+          color: var(--glide-core-color-interactive-icon-default--active);
         }
         &:not(:active):hover:not(:disabled) {
-          background-color: var(--glide-core-surface-hover);
+          background-color: var(
+            --glide-core-color-interactive-surface-container--hover
+          );
           border-color: transparent;
-          color: var(--glide-core-icon-primary);
+          color: var(--glide-core-color-interactive-icon-link);
         }
       }
@@ -83,7 +101,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         background-color: transparent;
         block-size: var(--private-size, 1rem);
         border-color: transparent;
-        color: var(--private-icon-color, var(--glide-core-icon-default));
+        color: var(
+          --private-icon-color,
+          var(--glide-core-color-interactive-icon-default)
+        );
         inline-size: var(--private-size, 1rem);
         padding: 0;
@@ -92,17 +113,17 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         }
         &:disabled {
-          color: var(--glide-core-icon-tertiary-disabled);
+          color: var(--glide-core-color-interactive-icon-default--disabled);
         }
         &:not(:disabled):active {
-          color: var(--glide-core-icon-active);
+          color: var(--glide-core-color-interactive-icon-active);
         }
         &:not(:active):hover:not(:disabled) {
           color: var(
             --private-hovered-icon-color,
-            var(--glide-core-icon-primary-hover)
+            var(--glide-core-color-interactive-icon-active--hover)
           );
         }
       }

package/dist/inline-alert.js CHANGED Viewed

	@@ -1 +1 @@
1	- var __decorate=this&&this.__decorate\|\|function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))\|\|l);return n>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" ~~data-animation-duration="${this.#e}"~~ style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#n}" @keydown="${this.#l}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};
1	+ var __decorate=this&&this.__decorate\|\|function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))\|\|l);return n>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#n}" @keydown="${this.#l}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};

package/dist/inline-alert.styles.js CHANGED Viewed

@@ -2,34 +2,37 @@ import{css}from"lit";export default[css`
     .component {
       align-items: flex-start;
       border: 1px solid;
-      border-radius: var(--glide-core-spacing-sm);
-      color: var(--glide-core-text-body-2);
+      border-radius: var(--glide-core-rounding-base-radius-md);
+      color: var(--glide-core-color-static-text-default);
       display: flex;
-      font-family: var(--glide-core-body-sm-font-family);
-      font-size: var(--glide-core-body-sm-font-size);
-      font-weight: var(--glide-core-body-sm-font-weight);
-      gap: var(--glide-core-spacing-xs);
-      line-height: var(--glide-core-body-sm-line-height);
-      padding: var(--glide-core-spacing-sm);
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
+      gap: var(--glide-core-spacing-base-xs);
+      padding: var(--glide-core-spacing-base-sm);
       &.informational {
-        background-color: var(--glide-core-surface-informational);
-        border-color: var(--glide-core-border-informational);
+        background-color: var(--glide-core-color-info-surface-container-light);
+        border-color: var(--glide-core-color-info-stroke-secondary);
       }
       &.medium {
-        background-color: var(--glide-core-surface-warning);
-        border-color: var(--glide-core-border-attention);
+        background-color: var(
+          --glide-core-color-attention-surface-container-light
+        );
+        border-color: var(--glide-core-color-attention-stroke-secondary);
       }
       &.high {
-        background-color: var(--glide-core-surface-warning);
-        border-color: var(--glide-core-border-warning);
+        background-color: var(
+          --glide-core-color-warning-surface-container-light
+        );
+        border-color: var(--glide-core-color-warning-stroke-secondary);
       }
       &.critical {
-        background-color: var(--glide-core-surface-error);
-        border-color: var(--glide-core-border-error);
+        background-color: var(--glide-core-color-error-surface-container-light);
+        border-color: var(--glide-core-color-error-stroke-secondary);
       }
       &.added {
@@ -73,19 +76,19 @@ import{css}from"lit";export default[css`
       inline-size: 1rem;
       &.informational {
-        color: var(--glide-core-status-warning-informational);
+        color: var(--glide-core-color-info-icon-default);
       }
       &.medium {
-        color: var(--glide-core-status-warning-medium);
+        color: var(--glide-core-color-attention-icon-default);
       }
       &.high {
-        color: var(--glide-core-status-warning-high);
+        color: var(--glide-core-color-warning-icon-default);
       }
       &.critical {
-        color: var(--glide-core-status-warning-critical);
+        color: var(--glide-core-color-error-icon-default);
       }
     }
@@ -96,7 +99,7 @@ import{css}from"lit";export default[css`
     }
     .removal-button {
-      --private-icon-color: var(--glide-core-icon-default2);
+      --private-icon-color: var(--glide-core-color-interactive-icon-default);
       align-self: flex-start;
       transition: color 200ms ease-in-out;

package/dist/input.styles.js CHANGED Viewed

@@ -2,9 +2,9 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     ${visuallyHidden(".character-count .hidden")}
   `,css`
     .meta {
-      column-gap: var(--glide-core-spacing-xs);
+      column-gap: var(--glide-core-spacing-base-xs);
       display: flex;
-      font-size: 0.75rem;
+      font-size: var(--glide-core-typography-size-body-small);
       grid-column: 2;
       justify-content: space-between;
     }
@@ -23,7 +23,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     .character-count {
       &.error {
-        font-weight: var(--glide-core-font-weight-bold);
+        font-weight: var(--glide-core-typography-weight-bold);
       }
     }
@@ -34,28 +34,32 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     .input-container {
       align-items: center;
-      background-color: var(--glide-core-surface-base-lighter);
-      border: 1px solid var(--glide-core-border-base);
-      border-radius: var(--glide-core-spacing-xs);
+      background-color: var(--glide-core-color-interactive-surface-container);
+      border: 1px solid var(--glide-core-color-interactive-stroke-primary);
+      border-radius: var(--glide-core-rounding-base-radius-sm);
       box-sizing: border-box;
-      color: var(--glide-core-text-body-1);
+      color: var(--glide-core-color-interactive-text-default);
       display: flex;
-      line-height: var(--glide-core-body-xs-line-height);
       min-inline-size: 3.75rem;
-      padding-inline: var(--glide-core-spacing-sm);
+      padding-inline: var(--glide-core-spacing-base-sm);
       &.focused,
+      &:has(.input:hover) {
+        border-color: var(--glide-core-color-interactive-stroke-focus);
+        transition: border-color 200ms ease-in-out;
+      }
       &:hover,
       &:has(.input:hover) {
-        border-color: var(--glide-core-border-focus);
+        border-color: var(--glide-core-color-interactive-stroke-primary--hover);
         transition: border-color 200ms ease-in-out;
       }
       &.error {
-        border-color: var(--glide-core-status-error);
+        border-color: var(--glide-core-color-error-stroke-primary);
       }
-      /*
+      /*
         We had to resort to a class selector because there may be a bug in Chrome and Safari
         with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
       */
@@ -66,9 +70,13 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
       }
       &.disabled {
-        background-color: var(--glide-core-surface-disabled);
-        border-color: var(--glide-core-border-base-light);
-        color: var(--glide-core-text-tertiary-disabled);
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
+        border-color: var(
+          --glide-core-color-interactive-stroke-primary--disabled
+        );
+        color: var(--glide-core-color-interactive-text-default--disabled);
       }
     }
@@ -78,16 +86,16 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
       border: none;
       color: inherit;
       cursor: inherit;
-      font-family: var(--glide-core-font-sans);
-      font-size: var(--glide-core-body-sm-font-size);
-      font-weight: var(--glide-core-body-xs-font-weight);
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
       inline-size: 100%;
       min-inline-size: 0;
       outline: none;
       padding: 0;
       &::placeholder {
-        color: var(--glide-core-text-placeholder);
+        color: var(--glide-core-color-interactive-text-placeholder);
       }
       &::-webkit-search-decoration,
@@ -100,12 +108,12 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
       /* The input obscures an offset outline for -webkit-calendar-picker-indicator, so 'focus-outline' is not used */
       &[type='date'] {
         &::-webkit-calendar-picker-indicator {
-          border-radius: var(--glide-core-border-radius-xs);
-          padding: var(--glide-core-spacing-xxs);
+          border-radius: 0.125rem;
+          padding: var(--glide-core-spacing-base-xxs);
         }
         /* stylelint-disable-next-line csstools/use-nesting */
         &::-webkit-calendar-picker-indicator:focus-visible {
-          outline: 2px solid var(--glide-core-border-focus);
+          outline: 2px solid var(--glide-core-color-interactive-stroke-focus);
         }
       }
     }
@@ -121,10 +129,10 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
       align-items: center;
       background: none;
       border: none;
-      color: var(--glide-core-icon-default);
+      color: var(--glide-core-color-interactive-icon-default);
       display: inline-flex;
       justify-content: center;
-      padding-inline-start: var(--glide-core-spacing-xxs);
+      padding-inline-start: var(--glide-core-spacing-base-xxs);
     }
     .clear-icon-button,
@@ -136,7 +144,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     }
     ::slotted([slot='prefix-icon']) {
-      padding-inline-end: var(--glide-core-spacing-xxs);
+      padding-inline-end: var(--glide-core-spacing-base-xxs);
     }
     .empty .clear-icon-button {