@crowdstrike/glide-core 0.33.0 → 0.34.0

package/dist/checkbox.js

@@ -238,7 +238,8 @@ let Checkbox = class Checkbox extends LitElement {
             disabled: this.disabled,
         })}
               >
-                <div class="checked-icon">${checkedIcon}</div>
+                <div class="checked-icon" role="none">${checkedIcon}</div>
+
                 ${icons.indeterminate}
               </div>
             </div>
@@ -288,7 +289,7 @@ let Checkbox = class Checkbox extends LitElement {
               Screenreaders will come across the tooltip naturally as focus moves toward
               the Checkbox.
             -->
-            <div class="input-and-checkbox" slot="control">
+            <div class="input-and-checkbox" slot="control" role="none">
               <input
                 aria-describedby="summary description"
                 aria-invalid=${this.#isShowValidationFeedback}

package/dist/dropdown.js

@@ -568,6 +568,7 @@ let Dropdown = class Dropdown extends LitElement {
                           removable
                           ?disabled=${this.disabled || this.readonly}
                           ?private-editable=${option.editable}
+                          ?private-readonly=${this.readonly}
                           @edit=${this.#onTagEdit}
                           @remove=${this.#onTagRemove.bind(this, option)}
                         >
@@ -598,7 +599,11 @@ let Dropdown = class Dropdown extends LitElement {
             this.selectedAndEnabledOptions.length > this.tagOverflowLimit, () => {
             return html `<div
                   aria-hidden="true"
-                  class="tag-overflow-text"
+                  class=${classMap({
+                'tag-overflow-text': true,
+                disabled: this.disabled,
+                readonly: this.readonly,
+            })}
                   id="tag-overflow-text"
                 >
                   +
@@ -650,6 +655,7 @@ let Dropdown = class Dropdown extends LitElement {
             .isCommunicateItemCountToScreenreaders
             ? 'item-count'
             : ''}"
+                  aria-required=${this.required}
                   autocapitalize="off"
                   autocomplete="off"
                   class=${classMap({
@@ -755,32 +761,31 @@ let Dropdown = class Dropdown extends LitElement {
                     ${pencilIcon}
                   </glide-core-icon-button>`;
         })}
-
-              <button
-                aria-controls="options"
-                aria-describedby="description"
-                aria-expanded=${this.open && !this.disabled}
-                aria-haspopup="listbox"
-                aria-hidden=${this.filterable || this.isFilterable}
-                aria-labelledby="selected-option-labels label loading-feedback"
-                class="primary-button"
-                data-test="primary-button"
-                id="primary-button"
-                tabindex=${this.filterable || this.isFilterable || this.disabled
-            ? '-1'
-            : '0'}
-                type="button"
-                ?disabled=${this.disabled}
-                @focusin=${this.#onPrimaryButtonFocusin}
-                @focusout=${this.#onPrimaryButtonFocusout}
-                ${ref(this.#primaryButtonElementRef)}
-              >
-                ${when(this.isFiltering, () => {
-            return html `<div data-test="magnifying-glass-icon">
-                      ${magnifyingGlassIcon}
-                    </div>`;
-        }, () => chevronIcon)}
-              </button>
+              ${when(!(this.disabled || this.readonly), () => {
+            return html `<button
+                  aria-controls="options"
+                  aria-describedby="description"
+                  aria-expanded=${this.open}
+                  aria-haspopup="listbox"
+                  aria-hidden=${this.filterable || this.isFilterable}
+                  aria-labelledby="selected-option-labels label loading-feedback"
+                  aria-required=${this.required}
+                  class="primary-button"
+                  data-test="primary-button"
+                  id="primary-button"
+                  tabindex=${this.filterable || this.isFilterable ? '-1' : '0'}
+                  type="button"
+                  @focusin=${this.#onPrimaryButtonFocusin}
+                  @focusout=${this.#onPrimaryButtonFocusout}
+                  ${ref(this.#primaryButtonElementRef)}
+                >
+                  ${when(this.isFiltering, () => {
+                return html `<div data-test="magnifying-glass-icon">
+                        ${magnifyingGlassIcon}
+                      </div>`;
+            }, () => chevronIcon)}
+                </button>`;
+        })}
             </div>
           </div>
 

package/dist/dropdown.styles.js

@@ -93,9 +93,10 @@ export default [
       }
 
       &.readonly {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border-color: transparent;
-        padding-inline-start: 0;
       }
 
       &.quiet {
@@ -249,6 +250,14 @@ export default [
       align-content: center;
       color: var(--glide-core-color-interactive-text-link);
       white-space: nowrap;
+
+      &.disabled {
+        color: var(--glide-core-color-interactive-text-link--disabled);
+      }
+
+      &.readonly {
+        color: var(--glide-core-color-interactive-text-default);
+      }
     }
 
     .single-select-icon-slot {

package/dist/inline-alert.d.ts

@@ -11,6 +11,9 @@ declare global {
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the alert
+ *
+ * @readonly
+ * @prop {string} ariaLabel
  */
 export default class InlineAlert extends LitElement {
     #private;
@@ -18,6 +21,7 @@ export default class InlineAlert extends LitElement {
     static styles: import("lit").CSSResult[];
     variant: 'informational' | 'medium' | 'high' | 'critical';
     readonly version: string;
+    get ariaLabel(): string;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/inline-alert.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './inline-alert.styles.js';
@@ -16,6 +16,7 @@ import severityMediumIcon from './icons/severity-medium.js';
 import severityCriticalIcon from './icons/severity-critical.js';
 import assertSlot from './library/assert-slot.js';
 import final from './library/final.js';
+import { LocalizeController } from './library/localize.js';
 /**
  * @attr {'informational'|'medium'|'high'|'critical'} [variant='informational']
  *
@@ -23,6 +24,9 @@ import final from './library/final.js';
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the alert
+ *
+ * @readonly
+ * @prop {string} ariaLabel
  */
 let InlineAlert = class InlineAlert extends LitElement {
     constructor() {
@@ -31,6 +35,7 @@ let InlineAlert = class InlineAlert extends LitElement {
         this.version = packageJson.version;
         this.#animationDuration = 100;
         this.#componentElementRef = createRef();
+        this.#localize = new LocalizeController(this);
     }
     /* c8 ignore start */
     static { this.shadowRootOptions = {
@@ -39,6 +44,15 @@ let InlineAlert = class InlineAlert extends LitElement {
     }; }
     /* c8 ignore end */
     static { this.styles = styles; }
+    get ariaLabel() {
+        return this.#localize.term(this.variant === 'informational'
+            ? 'severityInformational'
+            : this.variant === 'medium'
+                ? 'severityMedium'
+                : this.variant === 'high'
+                    ? 'severityHigh'
+                    : 'severityCritical');
+    }
     firstUpdated() {
         this.#componentElementRef.value?.addEventListener('animationend', () => {
             this.#componentElementRef.value?.classList.remove('added');
@@ -47,14 +61,14 @@ let InlineAlert = class InlineAlert extends LitElement {
     render() {
         return html `
       <div
+        aria-label=${this.ariaLabel}
         class=${classMap({
             component: true,
             added: true,
             [this.variant]: true,
         })}
-        role="alert"
-        aria-labelledby="label"
         data-test="component"
+        role="alert"
         style="--private-animation-duration: ${this.#animationDuration}ms"
         ${ref(this.#componentElementRef)}
       >
@@ -68,7 +82,7 @@ let InlineAlert = class InlineAlert extends LitElement {
           ${icons[this.variant]}
         </div>
 
-        <div id="label" class="content">
+        <div class="content">
           <slot ${assertSlot()}>
             <!--
               The content of the alert
@@ -82,6 +96,7 @@ let InlineAlert = class InlineAlert extends LitElement {
     }
     #animationDuration;
     #componentElementRef;
+    #localize;
 };
 __decorate([
     property({ reflect: true, useDefault: true })
@@ -89,6 +104,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], InlineAlert.prototype, "version", void 0);
+__decorate([
+    state()
+], InlineAlert.prototype, "ariaLabel", null);
 InlineAlert = __decorate([
     customElement('glide-core-inline-alert'),
     final

package/dist/input.styles.js

@@ -86,9 +86,10 @@ export default [
         with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
       */
       &.readonly {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border: 1px solid transparent;
-        padding-inline-start: 0;
       }
 
       &.disabled {

package/dist/library/localize.d.ts

@@ -18,6 +18,7 @@ export interface Translation extends DefaultTranslation {
     severityInformational: string;
     severityCritical: string;
     severityMedium: string;
+    severityHigh: string;
     success: string;
     error: string;
     informational: string;

package/dist/slider.styles.js

@@ -118,9 +118,7 @@ export default [
     }
 
     .handle {
-      background-color: var(
-        --glide-core-private-color-slider-and-scrollbar-surface-handle
-      );
+      background-color: var(--glide-core-private-color-slider-surface-handle);
       block-size: 1.5rem;
       border: 2px solid var(--glide-core-color-interactive-stroke-active);
       border-radius: var(--glide-core-rounding-base-radius-round);

package/dist/styles/variables.css

@@ -123,7 +123,7 @@
   --glide-core-color-severity-stroke-high: #ffbf66;
   --glide-core-color-severity-stroke-medium: #ffcc00;
   --glide-core-color-severity-stroke-low: #c9c9c9;
-  --glide-core-color-severity-text-citical: #2c0907;
+  --glide-core-color-severity-text-critical: #2c0907;
   --glide-core-color-severity-text-high: #331e00;
   --glide-core-color-severity-text-medium: #332900;
   --glide-core-color-severity-text-low: #212121;
@@ -153,7 +153,7 @@
   --glide-core-private-color-dialog-and-modal-surface-overlay: #0000008c;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #0000000d;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #0000001a;
-  --glide-core-private-color-slider-and-scrollbar-surface-handle: #f0f0f0;
+  --glide-core-private-color-slider-surface-handle: #f0f0f0;
   --glide-core-private-color-tabs-stroke-underline: #e3e3e3;
   --glide-core-private-color-template-surface-container-detail: #ffffffe5;
   --glide-core-private-color-tooltip-surface-container: #212121;
@@ -284,7 +284,7 @@
   --glide-core-color-severity-stroke-high: #e7a649;
   --glide-core-color-severity-stroke-medium: #f0cf4f;
   --glide-core-color-severity-stroke-low: #727272;
-  --glide-core-color-severity-text-citical: #e67873;
+  --glide-core-color-severity-text-critical: #e67873;
   --glide-core-color-severity-text-high: #ffb64f;
   --glide-core-color-severity-text-medium: #f0cf4f;
   --glide-core-color-severity-text-low: #f9f9f9;
@@ -314,7 +314,7 @@
   --glide-core-private-color-dialog-and-modal-surface-overlay: #141414d9;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #ffffff0d;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #ffffff1a;
-  --glide-core-private-color-slider-and-scrollbar-surface-handle: #2c2c2c;
+  --glide-core-private-color-slider-surface-handle: #2c2c2c;
   --glide-core-private-color-tabs-stroke-underline: #ffffff26;
   --glide-core-private-color-template-surface-container-detail: #222222;
   --glide-core-private-color-tooltip-surface-container: #dcdcdc;
@@ -337,12 +337,18 @@
   --glide-core-duration-fast-02: 100ms;
   --glide-core-duration-moderate-01: 150ms;
   --glide-core-duration-moderate-02: 250ms;
+  --glide-core-duration-moderate-03: 325ms;
   --glide-core-duration-slow-01: 400ms;
   --glide-core-duration-slow-02: 900ms;
 }
 
 /* src/styles/variables/miscellaneous.css */
 :root {
+  --glide-core-typography-family-primary: "Nunito", system-ui;
+  --glide-core-typography-family-monospace:
+    "Oxygen Mono",
+    ui-monospace,
+    monospace;
   --glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);
   --glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);
   --glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);
@@ -394,11 +400,6 @@
   --glide-core-typography-size-body-default: 0.875rem;
   --glide-core-typography-size-body-small: 0.75rem;
   --glide-core-typography-size-component-chartlabel-md: 0.625rem;
-  --glide-core-typography-family-primary: "Nunito", system-ui;
-  --glide-core-typography-family-monospace:
-    "Oxygen Mono",
-    ui-monospace,
-    monospace;
   --glide-core-typography-weight-light: 300;
   --glide-core-typography-weight-regular: 400;
   --glide-core-typography-weight-semibold: 600;

package/dist/tag.d.ts

@@ -24,6 +24,7 @@ export default class Tag extends LitElement {
     label?: string;
     disabled: boolean;
     privateEditable: boolean;
+    privateReadonly: boolean;
     removable: boolean;
     readonly version: string;
     click(): void;

package/dist/tag.js

@@ -35,6 +35,8 @@ let Tag = class Tag extends LitElement {
         this.disabled = false;
         // Private because it's only meant to be used by Dropdown.
         this.privateEditable = false;
+        // Private because it's only meant to be used by Dropdown.
+        this.privateReadonly = false;
         this.removable = false;
         this.version = packageJson.version;
         this.#animationDuration = 100;
@@ -78,6 +80,7 @@ let Tag = class Tag extends LitElement {
             component: true,
             added: true,
             disabled: this.disabled,
+            readonly: this.privateReadonly,
         })}
         data-test="component"
         data-animation-duration=${this.#animationDuration}
@@ -194,6 +197,9 @@ __decorate([
 __decorate([
     property({ attribute: 'private-editable', reflect: true, type: Boolean })
 ], Tag.prototype, "privateEditable", void 0);
+__decorate([
+    property({ attribute: 'private-readonly', reflect: true, type: Boolean })
+], Tag.prototype, "privateReadonly", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], Tag.prototype, "removable", void 0);

package/dist/tag.styles.js

@@ -54,11 +54,19 @@ export default [
       }
 
       &.disabled {
-        background: var(--glide-core-color-static-surface-container-secondary);
+        background-color: var(
+          --glide-core-color-static-surface-container-secondary
+        );
         border-color: var(--glide-core-color-interactive-stroke-primary);
         color: var(--glide-core-color-interactive-icon-default--disabled);
       }
 
+      &.readonly {
+        background-color: var(--glide-core-color-static-surface-container);
+        border-color: var(--glide-core-color-interactive-stroke-primary);
+        color: var(--glide-core-color-interactive-text-default);
+      }
+
       &.removed {
         @media (prefers-reduced-motion: no-preference) {
           animation-duration: var(--private-animation-duration);

package/dist/textarea.styles.js

@@ -114,10 +114,11 @@ export default [
       }
 
       &[readonly] {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border-color: transparent;
         outline: none;
-        padding-inline-start: 0;
         resize: none;
         transition: none;
       }

package/dist/tooltip.js

@@ -330,8 +330,8 @@ let Tooltip = class Tooltip extends LitElement {
     #onTargetSlotChange() {
         const container = this.querySelector('glide-core-private-tooltip-container');
         const target = this.#targetSlotElementRef.value?.assignedElements().at(0);
-        if (container && target && !this.disabled && !this.screenreaderHidden) {
-            target.setAttribute('aria-describedby', container.id);
+        if (container && !this.disabled && !this.screenreaderHidden) {
+            target?.setAttribute('aria-describedby', container.id);
         }
     }
     #onTargetSlotFocusIn() {

package/dist/translations/en.js

@@ -16,6 +16,7 @@ const translation = {
     severityInformational: 'Severity: Informational',
     severityCritical: 'Severity: Critical',
     severityMedium: 'Severity: Medium',
+    severityHigh: 'Severity: High',
     success: 'Success:',
     error: 'Error:',
     informational: 'Informational:',

package/dist/translations/fr.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "severityHigh", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/fr.js

@@ -2,6 +2,7 @@ export const PENDING_STRINGS = [
     'severityInformational',
     'severityCritical',
     'severityMedium',
+    'severityHigh',
     'success',
     'error',
     'informational',

package/dist/translations/ja.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "severityHigh", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/ja.js

@@ -2,6 +2,7 @@ export const PENDING_STRINGS = [
     'severityInformational',
     'severityCritical',
     'severityMedium',
+    'severityHigh',
     'success',
     'error',
     'informational',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",