@crowdstrike/glide-core 0.23.0 → 0.24.0

package/dist/accordion.styles.js

@@ -2,25 +2,26 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     ${focusOutline(".summary:focus-visible")}
   `,css`
     .component {
-      border: 1px solid var(--glide-core-border-base-lighter);
-      border-radius: 0.625rem;
-      box-shadow: var(--glide-core-shadow-md);
-      font-family: var(--glide-core-body-xs-font-family);
+      border: 1px solid
+        var(--glide-core-color-static-surface-container-secondary);
+      border-radius: var(--glide-core-rounding-base-radius-sm);
+      box-shadow: var(--glide-core-effect-raised);
+      font-family: var(--glide-core-typography-family-primary);
     }
 
     .summary {
       align-items: center;
-      border-radius: 0.625rem;
-      color: var(--glide-core-text-body-1);
+      border-radius: var(--glide-core-rounding-base-radius-sm);
+      color: var(--glide-core-color-static-text-default);
       cursor: pointer;
       display: flex;
-      font-size: var(--glide-core-body-sm-font-size);
-      font-weight: 700;
+      font-size: var(--glide-core-typography-size-heading-h4);
+      font-weight: var(--glide-core-typography-weight-bold);
       justify-content: space-between;
-      line-height: 1.5rem;
+      line-height: var(--glide-core-typography-height-heading-h4);
       list-style: none;
-      padding-block: var(--glide-core-spacing-xs);
-      padding-inline: var(--glide-core-spacing-sm);
+      padding-block: var(--glide-core-spacing-base-xs);
+      padding-inline: var(--glide-core-spacing-base-sm);
       user-select: none;
 
       &:focus {
@@ -33,7 +34,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &.active {
-        padding-block-end: var(--glide-core-spacing-xxs);
+        padding-block-end: var(--glide-core-spacing-base-xxs);
       }
 
       &.open {
@@ -45,7 +46,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       svg {
         align-items: center;
         display: flex;
-        margin-inline-end: var(--glide-core-spacing-xxs);
+        margin-inline-end: var(--glide-core-spacing-base-xxs);
         rotate: -90deg;
 
         @media (prefers-reduced-motion: no-preference) {
@@ -58,7 +59,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       align-items: center;
       display: flex;
       flex: 1;
-      gap: var(--glide-core-spacing-xs);
+      gap: var(--glide-core-spacing-base-xs);
       overflow: hidden;
       white-space: nowrap;
     }
@@ -70,15 +71,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .default-slot {
-      color: var(--glide-core-text-body-1);
+      color: var(--glide-core-color-static-text-default);
       display: block;
-      font-size: var(--glide-core-body-sm-font-size);
-      font-weight: var(--glide-core-body-xs-font-weight);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
       overflow: hidden;
-      padding-block-end: var(--glide-core-spacing-sm);
+      padding-block-end: var(--glide-core-spacing-base-sm);
 
       /* Hardcoded spacing here is intentional so that it better aligns with the Accordion label */
-      padding-inline: 2rem var(--glide-core-spacing-sm);
+      padding-inline: 2rem var(--glide-core-spacing-base-sm);
 
       &.indented {
         padding-inline-start: 3.5rem;
@@ -87,9 +88,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
     .suffix-icons-slot {
       align-items: center;
-      color: var(--glide-core-icon-primary);
+      color: var(--glide-core-color-interactive-icon-link);
       gap: 0.625rem;
-      margin-inline-start: var(--glide-core-spacing-xs);
+      margin-inline-start: var(--glide-core-spacing-base-xs);
 
       &.icons {
         display: flex;

package/dist/button-group.button.styles.js

@@ -18,10 +18,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     :host(:last-of-type) .component.horizontal {
       border-end-end-radius: 0.6875rem;
+      border-inline-end: none;
       border-start-end-radius: 0.6875rem;
     }
 
     :host(:last-of-type) .component.vertical {
+      border-block-end: none;
       border-end-end-radius: 0.6875rem;
       border-end-start-radius: 0.6875rem;
     }
@@ -29,20 +31,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .component {
       align-items: center;
       appearance: none;
-      background-color: var(--glide-core-surface-page);
+      background-color: var(--glide-core-color-static-surface-container);
+      color: var(--glide-core-color-static-text-default);
       cursor: pointer;
       display: flex;
-      font-family: var(--glide-core-font-sans);
-      font-size: var(--glide-core-body-md-font-size);
-      font-style: var(--glide-core-heading-xxs-font-style);
-      font-weight: var(--glide-core-heading-xxs-font-weight);
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-large);
+      font-weight: var(--glide-core-typography-weight-bold);
       gap: 0.625rem;
       justify-content: center;
       line-height: 1;
       min-block-size: 1.125rem;
       min-inline-size: 5.1875rem;
-      padding-block: var(--glide-core-spacing-xs);
-      padding-inline: var(--glide-core-spacing-md);
+      padding-block: var(--glide-core-spacing-base-xs);
+      padding-inline: var(--glide-core-spacing-base-md);
       transition-duration: 150ms;
       transition-property: color, background-color, fill, stroke;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -54,9 +56,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &:focus-visible {
-        background-color: var(--glide-core-surface-selected);
-        border-color: var(--glide-core-border-focus);
-        color: var(--glide-core-color-white);
+        background-color: var(
+          --glide-core-color-interactive-surface-container-active
+        );
+        border-color: var(--glide-core-color-interactive-stroke-focus);
+        color: var(--glide-core-color-static-text-onsolid);
         outline-offset: 2px;
 
         /* Create a stacking context so the outline isn't obscured by other elements. */
@@ -64,11 +68,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &.horizontal {
-        border-inline-end: 1px solid var(--glide-core-border-base-lighter);
+        border-inline-end: 1px solid
+          var(--glide-core-color-static-surface-container-secondary);
       }
 
       &.vertical {
-        border-block-end: 1px solid var(--glide-core-border-base-lighter);
+        border-block-end: 1px solid
+          var(--glide-core-color-static-surface-container-secondary);
 
         &.icon {
           &:not(.icon-only) {
@@ -79,29 +85,47 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &.icon-only {
         min-inline-size: 0;
-        padding: var(--glide-core-spacing-xs);
+        padding: var(--glide-core-spacing-base-xs);
       }
 
       &.disabled {
-        background-color: var(--glide-core-border-base-lighter);
-        border-color: var(--glide-core-border-base-lighter);
-        color: var(--glide-core-text-tertiary-disabled);
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
+        border-color: var(--glide-core-color-static-stroke-primary);
+        color: var(--glide-core-color-interactive-text-link--disabled);
         cursor: not-allowed;
       }
 
       &:not(.disabled) {
         &.selected {
-          background-color: var(--glide-core-surface-selected);
-          border-color: var(--glide-core-surface-selected);
-          color: var(--glide-core-color-white);
+          background-color: var(
+            --glide-core-color-interactive-surface-container-active
+          );
+          border-color: var(
+            --glide-core-color-interactive-surface-container-active
+          );
+          color: var(--glide-core-private-color-button-text-primary);
+
+          &:hover {
+            background-color: var(
+              --glide-core-color-interactive-surface-container--hover
+            );
+            border-color: var(
+              --glide-core-color-interactive-surface-container--hover
+            );
+            color: var(--glide-core-color-interactive-text-link);
+          }
         }
       }
 
       &:not(.disabled, .selected):hover {
-        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-text-primary);
+        box-shadow: var(--glide-core-effect-hovered);
+        color: var(--glide-core-color-interactive-text-link);
       }
     }
   `];

package/dist/button-group.styles.js

@@ -2,19 +2,19 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     ${visuallyHidden(".label")}
   `,css`
     .component {
-      border: 1px solid var(--glide-core-border-base);
-      border-radius: 0.75rem;
+      border: 1px solid var(--glide-core-color-interactive-stroke-primary);
+      border-radius: var(--glide-core-spacing-base-sm);
       display: inline-block;
     }
 
     .label {
-      /* 
-        Colored to pass the contrast check in the "is accessible" test. It's visually 
-        hidden and doesn't need to meet contrast requirements. But the alternative 
-        is to add "ignoredRules: ['color-contrast']" to that test, disabling contrast 
+      /*
+        Colored to pass the contrast check in the "is accessible" test. It's visually
+        hidden and doesn't need to meet contrast requirements. But the alternative
+        is to add "ignoredRules: ['color-contrast']" to that test, disabling contrast
         checking for the entire component.
       */
-      color: var(--glide-core-color-white);
+      color: var(--glide-core-color-static-text-onsolid);
     }
 
     .container {

package/dist/button.d.ts

@@ -1,3 +1,4 @@
+import './tooltip.ts';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,6 +10,7 @@ declare global {
  * @attr {boolean} [disabled=false]
  * @attr {string} [name='']
  * @attr {'large'|'small'} [size='large']
+ * @attr {string} [tooltip]
  * @attr {'button'|'submit'|'reset'} [type='button']
  * @attr {string} [value='']
  * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
@@ -31,6 +33,7 @@ export default class GlideCoreButton extends LitElement {
     label?: string;
     name: string;
     size: 'large' | 'small';
+    tooltip?: string;
     type: 'button' | 'submit' | 'reset';
     value: string;
     variant: 'primary' | 'secondary' | 'tertiary';

package/dist/button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}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 packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get form(){return this.#e.form}click(){this.#t.value?.click()}render(){return html`<button class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" ?disabled="${this.disabled}" @click="${this.#o}" ${ref(this.#t)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#i)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#s}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#i=createRef(),this.#n=createRef(),this.#e=this.attachInternals()}#t;#e;#i;#n;#o(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const e=this.#i.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#s(){const e=this.#n.value?.assignedNodes();this.hasSuffixIcon=Boolean(e&&e.length>0)}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0}),required],GlideCoreButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button"),final],GlideCoreButton);export default GlideCoreButton;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<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 n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./tooltip.ts";import{html,LitElement}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 packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get form(){return this.#e.form}click(){this.#t.value?.click()}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" slot="target" @click="${this.#o}" ${ref(this.#t)}><slot name="prefix-icon" @slotchange="${this.#i}" ${ref(this.#r)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#s}" ${ref(this.#l)}></slot></button></glide-core-tooltip>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#r=createRef(),this.#l=createRef(),this.#e=this.attachInternals()}#t;#e;#r;#l;#o(e){this.disabled?e.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#i(){const e=this.#r.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#s(){const e=this.#l.value?.assignedNodes();this.hasSuffixIcon=Boolean(e&&e.length>0)}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0}),required],GlideCoreButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button"),final],GlideCoreButton);export default GlideCoreButton;

package/dist/button.styles.js

@@ -9,18 +9,17 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     .component {
       align-items: center;
       border-color: transparent;
-      border-radius: 0.75rem;
+      border-radius: var(--glide-core-rounding-base-radius-md);
       border-style: solid;
       border-width: 1px;
       cursor: pointer;
       display: inline-flex;
-      font-family: var(--glide-core-heading-xxs-font-family);
-      font-style: var(--glide-core-heading-xxs-font-style);
-      font-weight: var(--glide-core-heading-xxs-font-weight);
+      font-family: var(--glide-core-typography-family-primary);
+      font-weight: var(--glide-core-typography-weight-bold);
       gap: 0.625rem;
       justify-content: center;
-      padding-block: var(--glide-core-spacing-xs);
-      padding-inline: var(--glide-core-spacing-md);
+      padding-block: var(--glide-core-spacing-base-xs);
+      padding-inline: var(--glide-core-spacing-base-md);
       transition-duration: 150ms;
       transition-property: color, background-color, border-color, fill, stroke;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -30,7 +29,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
 
-      &:disabled {
+      &.disabled {
         cursor: not-allowed;
         opacity: 1;
       }
@@ -44,83 +43,104 @@ 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(--glide-core-text-selected);
+        color: var(--glide-core-private-color-button-text-primary);
 
-        &:disabled {
-          background-color: var(--glide-core-surface-disabled);
+        &.disabled {
+          background-color: var(
+            --glide-core-color-interactive-surface-container--disabled
+          );
           border-color: transparent;
-          color: var(--glide-core-text-tertiary-disabled);
+          color: var(--glide-core-color-interactive-text-link--disabled);
         }
 
-        &:not(:disabled):active {
-          background-color: var(--glide-core-surface-selected-hover);
+        &:not(.disabled):active {
+          background-color: var(
+            --glide-core-private-color-button-surface-active
+          );
           border-color: transparent;
-          color: var(--glide-core-text-selected);
+          color: var(--glide-core-private-color-button-text-primary);
         }
 
-        &:not(:active):hover:not(:disabled) {
-          background-color: var(--glide-core-surface-hover);
+        &:not(:active):hover:not(.disabled) {
+          background-color: var(
+            --glide-core-color-interactive-surface-container--hover
+          );
           border-color: transparent;
-          box-shadow: var(--glide-core-glow-sm);
-          color: var(--glide-core-text-primary);
+          box-shadow: var(--glide-core-effect-hovered);
+          color: var(--glide-core-color-interactive-text-link);
         }
       }
 
       &.secondary {
-        background-color: transparent;
-        border-color: var(--glide-core-border-primary);
-        color: var(--glide-core-text-primary);
-
-        &:disabled {
-          background-color: var(--glide-core-surface-disabled);
+        background-color: var(--glide-core-color-interactive-surface-container);
+        border-color: var(--glide-core-private-color-button-stroke-default);
+        color: var(--glide-core-color-interactive-text-link);
+
+        &.disabled {
+          background-color: var(
+            --glide-core-color-interactive-surface-container--disabled
+          );
           border-color: transparent;
-          color: var(--glide-core-text-tertiary-disabled);
+          color: var(--glide-core-color-interactive-text-link--disabled);
         }
 
-        &:not(:disabled):active {
-          background-color: var(--glide-core-surface-selected-hover);
+        &:not(.disabled):active {
+          background-color: var(
+            --glide-core-private-color-button-surface-active
+          );
           border-color: transparent;
-          color: var(--glide-core-text-selected);
+          color: var(--glide-core-private-color-button-text-primary);
         }
 
-        &:not(:active):hover:not(:disabled) {
-          background-color: var(--glide-core-surface-hover);
+        &:not(:active):hover:not(.disabled) {
+          background-color: var(
+            --glide-core-color-interactive-surface-container--hover
+          );
           border-color: transparent;
-          box-shadow: var(--glide-core-glow-sm);
-          color: var(--glide-core-text-primary);
+          box-shadow: var(--glide-core-effect-hovered);
+          color: var(--glide-core-color-interactive-text-link);
         }
       }
 
       &.tertiary {
         background-color: transparent;
         border-color: transparent;
-        color: var(--glide-core-text-primary);
+        color: var(--glide-core-color-interactive-text-link);
 
-        &:disabled {
-          color: var(--glide-core-text-tertiary-disabled);
+        &.disabled {
+          color: var(--glide-core-color-interactive-text-link--disabled);
         }
 
-        &:not(:disabled):active {
-          color: var(--glide-core-text-secondary);
+        &:not(.disabled):active {
+          background-color: var(
+            --glide-core-private-color-button-surface-active
+          );
+          color: var(--glide-core-private-color-button-text-primary);
         }
 
-        &:not(:active):hover:not(:disabled) {
-          color: var(--glide-core-text-primary-hover);
+        &:not(:active):hover:not(.disabled) {
+          background-color: var(
+            --glide-core-color-interactive-surface-container--hover
+          );
+          box-shadow: var(--glide-core-effect-hovered);
+          color: var(--glide-core-color-interactive-text-link);
         }
       }
 
       &.large {
         block-size: 2.125rem;
-        font-size: var(--glide-core-heading-xxs-font-size);
+        font-size: var(--glide-core-typography-size-body-large);
         line-height: 1.5rem;
         min-inline-size: 5.1875rem;
       }
 
       &.small {
         block-size: 1.75rem;
-        font-size: var(--glide-core-body-xs-font-size);
+        font-size: var(--glide-core-typography-size-body-small);
         line-height: 1rem;
         min-inline-size: 4.375rem;
       }

package/dist/checkbox-group.styles.js

@@ -2,7 +2,7 @@ import{css}from"lit";export default[css`
     :host(:not(:disabled)) .component {
       &.error {
         .checkbox {
-          border-color: var(--glide-core-status-error);
+          border-color: var(--glide-core-color-error-stroke-primary);
         }
       }
     }
@@ -17,9 +17,9 @@ import{css}from"lit";export default[css`
       inline-size: min-content;
 
       &.invalid {
-        border: 1px solid var(--glide-core-status-error);
-        border-radius: 0.5rem;
-        padding: var(--glide-core-spacing-xxs) 0.375rem;
+        border: 1px solid var(--glide-core-color-error-stroke-primary);
+        border-radius: var(--glide-core-rounding-base-radius-sm);
+        padding: var(--glide-core-spacing-base-xxs) 0.375rem;
       }
     }
 
@@ -27,7 +27,7 @@ import{css}from"lit";export default[css`
       display: flex;
       flex-direction: column;
       grid-column: 2;
-      row-gap: var(--glide-core-spacing-xs);
+      row-gap: var(--glide-core-spacing-base-xs);
     }
 
     .description {

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var r,a=arguments.length,o=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(o=(a<3?r(o):a>3?r(t,i,o):r(t,i))||o);return a>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import"./tooltip.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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get checked(){return this.#e}set checked(e){const t=e!==this.#e;this.#e=e,t&&this.dispatchEvent(new Event("private-checked-change",{bubbles:!0}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get label(){return this.#i}set label(e){this.#i=e,setTimeout((()=>{this.#s()}))}get value(){return this.#r}set value(e){const t=this.#r;this.#r=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#a.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#a.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#l=new IntersectionObserver((()=>{this.checkVisibility()&&this.#s()})),this.#l.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#n),this.#l?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#a.validity:this.required&&!this.checked?(this.#a.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.value),this.#a.validity):this.required&&this.#a.validity.valueMissing&&this.checked?(this.#a.setValidity({}),this.#a.validity):(this.required||!this.#a.validity.valueMissing||this.checked||this.#a.setValidity({}),this.#a.validity)}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#n)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
+var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import"./tooltip.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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get checked(){return this.#e}set checked(e){const t=e!==this.#e;this.#e=e,t&&this.dispatchEvent(new Event("private-checked-change",{bubbles:!0}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get label(){return this.#i}set label(e){this.#i=e,setTimeout((()=>{this.#s()}))}get value(){return this.#a}set value(e){const t=this.#a;this.#a=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#r.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#l=new IntersectionObserver((()=>{this.checkVisibility()&&this.#s()})),this.#l.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#n),this.#l?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.value),this.#r.validity):this.required&&this.#r.validity.valueMissing&&this.checked?(this.#r.setValidity({}),this.#r.validity):(this.required||!this.#r.validity.valueMissing||this.checked||this.#r.setValidity({}),this.#r.validity)}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#n)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
       ${when("minimal"===this.privateVariant,(()=>html`
           <label
             class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
@@ -97,7 +97,13 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var r,a=arguments.length
               </div>
             </div>
 
-            ${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}
+            ${when(this.summary,(()=>html`<div
+                  class=${classMap({summary:!0,disabled:this.disabled})}
+                  id="summary"
+                  slot="summary"
+                >
+                  ${this.summary}
+                </div>`))}
 
             <div id="description" slot="description">
               <!--
@@ -121,7 +127,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var r,a=arguments.length
                   >`))}
             </div>
           </glide-core-private-label>`))}
-    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#a.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#a.setValidity({customError:!1},"",this.#o.value):this.#a.setValidity({customError:!0,valueMissing:this.#a.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#a.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#e=!1,this.#t=!1,this.#p=createRef(),this.#r="",this.#n=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#a=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#a;#l;#e;#t;#i;#p;#r;#n;get#d(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#b(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#h(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#s(){this.#p.value&&(this.isLabelOverflow=this.#p.value.scrollWidth>this.#p.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",null),__decorate([property({attribute:"private-internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0}),required],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"version",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox"),final],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
+    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#e=!1,this.#t=!1,this.#p=createRef(),this.#a="",this.#n=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#r;#l;#e;#t;#i;#p;#a;#n;get#d(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#b(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#h(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#s(){this.#p.value&&(this.isLabelOverflow=this.#p.value.scrollWidth>this.#p.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",null),__decorate([property({attribute:"private-internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0}),required],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"version",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox"),final],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
     <svg
       aria-hidden="true"
       style=${styleMap({height:"0.875rem",width:"0.875rem"})}