@crowdstrike/glide-core 0.22.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.js

@@ -24,11 +24,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
         >
           <slot
             class="default-slot"
-            @change=${this.#n}
-            @private-value-change=${this.#c}
-            @slotchange=${this.#h}
+            @private-checked-change=${this.#n}
+            @private-disabled-change=${this.#c}
+            @private-value-change=${this.#h}
+            @slotchange=${this.#p}
             ${assertSlot([GlideCoreCheckbox])}
-            ${ref(this.#p)}
+            ${ref(this.#u)}
           >
             <!--
               @type {GlideCoreCheckbox}
@@ -53,4 +54,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
               >`))}
         </div>
       </glide-core-private-label>
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#l.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#p=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#p;#o;#e;#i;#s;get#t(){return this.#p.value?this.#p.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#n(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.value=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.value=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#c(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#h(){this.#s=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0}),required],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#l.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#u=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#u;#o;#e;#i;#s;get#t(){return this.#u.value?this.#u.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#b(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#b()}#n(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.#s=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.#s=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#c(e){if(e.target instanceof GlideCoreCheckbox&&e.target.disabled&&e.target.checked){const t=this.#s.lastIndexOf(e.target.value);this.#s.splice(t,t+1)}else e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value&&this.#s.push(e.target.value)}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){this.#s=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0}),required],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

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.d.ts

@@ -58,9 +58,17 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    checked: boolean;
+    /**
+      @default false
+    */
+    get checked(): boolean;
+    set checked(isChecked: boolean);
     privateInternallyInert: boolean;
-    disabled: boolean;
+    /**
+     * @default false
+     */
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
     hideLabel: boolean;
     indeterminate: boolean;
     /**