@crowdstrike/glide-core 0.24.3 → 0.24.4

package/dist/checkbox-group.d.ts

@@ -63,7 +63,7 @@ export default class GlideCoreCheckboxGroup extends LitElement implements FormCo
     label?: string;
     name: string;
     orientation: "horizontal";
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     /**
      * @default false
      */

package/dist/checkbox.d.ts

@@ -82,7 +82,7 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
     privateShowLabelTooltip: boolean;
     privateDisableLabelTooltip: boolean;
     privateSize: 'large' | 'small';
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     privateVariant?: 'minimal';
     required: boolean;
     summary?: string;

package/dist/dropdown.d.ts

@@ -96,7 +96,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
     set open(isOpen: boolean);
     orientation: 'horizontal' | 'vertical';
     placeholder?: string;
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     readonly: boolean;
     selectAll: boolean;
     required: boolean;

package/dist/form-controls-layout.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @attr {'left'|'middle'} [split='left']
+ * @attr {'left'|'middle'|'right'} [split='left']
  *
  * @readonly
  * @attr {string} [version]
@@ -19,8 +19,8 @@ export default class GlideCoreFormControlsLayout extends LitElement {
     /**
      * @default 'left'
      */
-    get split(): 'left' | 'middle';
-    set split(split: 'left' | 'middle');
+    get split(): 'left' | 'middle' | 'right';
+    set split(split: 'left' | 'middle' | 'right');
     readonly version: string;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/icon-button.styles.js

@@ -68,7 +68,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &.secondary {
-        background-color: var(--glide-core-color-interactive-surface-container);
+        background-color: transparent;
         color: var(
           --private-icon-color,
           var(--glide-core-color-interactive-icon-default)

package/dist/input.d.ts

@@ -84,7 +84,7 @@ export default class GlideCoreInput extends LitElement implements FormControl {
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     maxlength?: number;
     readonly version: string;
     tooltip?: string;

package/dist/label.d.ts

@@ -12,7 +12,7 @@ declare global {
  * @attr {string} [label]
  * @attr {'horizontal'|'vertical'} [orientation='horizontal']
  * @attr {boolean} [required=false]
- * @attr {'left'|'middle'} [split]
+ * @attr {'left'|'middle'|'right'} [split]
  * @attr {string} [tooltip]
  *
  * @slot {HTMLLabelElement}
@@ -29,7 +29,7 @@ export default class GlideCoreLabel extends LitElement {
     hide: boolean;
     orientation: 'horizontal' | 'vertical';
     required: boolean;
-    split?: 'left' | 'middle';
+    split?: 'left' | 'middle' | 'right';
     tooltip?: string;
     label?: string;
     render(): import("lit").TemplateResult<1>;

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};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{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import onResize from"./library/on-resize.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="private-tooltips">${when(this.tooltip,(()=>html`<glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip>`))}<glide-core-tooltip class="label-tooltip" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${onResize(this.#a.bind(this))} ${ref(this.#t)}></slot></div>`}#e;#t;#o;#i;#l;#r(){const e=this.#e.value?.assignedElements().at(0),t=new ResizeObserver((()=>{e&&this.#o.value&&(this.isLabelTooltip=e.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}));this.#o.value&&t.observe(this.#o.value)}#a(){this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}#s(){const e=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([property()],GlideCoreLabel.prototype,"label",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label"),final],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg aria-hidden="true" style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};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{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import onResize from"./library/on-resize.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split})}" part="private-tooltips">${when(this.tooltip,(()=>html`<glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip>`))}<glide-core-tooltip class="label-tooltip" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${onResize(this.#a.bind(this))} ${ref(this.#t)}></slot></div>`}#e;#t;#o;#i;#l;#r(){const e=this.#e.value?.assignedElements().at(0),t=new ResizeObserver((()=>{e&&this.#o.value&&(this.isLabelTooltip=e.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}));this.#o.value&&t.observe(this.#o.value)}#a(){this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}#s(){const e=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([property()],GlideCoreLabel.prototype,"label",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label"),final],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg aria-hidden="true" style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};

package/dist/label.styles.js

@@ -17,7 +17,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &.left {
-        grid-template-columns: calc(100% / 3) 1fr;
+        grid-template-columns: 33.5% 1fr;
       }
 
       &.middle {
@@ -26,6 +26,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
           );
       }
 
+      &.right {
+        grid-template-columns: 66.5% 1fr;
+      }
+
       &.hidden-label {
         display: flex;
         flex-direction: column;
@@ -47,7 +51,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       min-inline-size: 3ch;
 
       &.middle,
-      &.left {
+      &.left,
+      &.right {
         justify-content: flex-end;
       }
     }

package/dist/library/form-control.d.ts

@@ -5,7 +5,7 @@ export default interface FormControl {
     label?: string;
     name: string;
     orientation: 'horizontal' | 'vertical';
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     required: boolean;
     summary?: string;
     tooltip?: string;

package/dist/radio-group.d.ts

@@ -63,7 +63,7 @@ export default class GlideCoreRadioGroup extends LitElement implements FormContr
     label?: string;
     name: string;
     orientation: "horizontal";
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     tooltip?: string;
     /**
      * @default false

package/dist/textarea.d.ts

@@ -72,7 +72,7 @@ export default class GlideCoreTextarea extends LitElement implements FormControl
     spellcheck: boolean;
     autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
     autocomplete: 'on' | 'off';
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     tooltip?: string;
     readonly version: string;
     checkValidity(): boolean;

package/dist/toggle.d.ts

@@ -30,7 +30,7 @@ export default class GlideCoreToggle extends LitElement {
     hideLabel: boolean;
     label?: string;
     orientation: 'horizontal' | 'vertical';
-    privateSplit?: 'left' | 'middle';
+    privateSplit?: 'left' | 'middle' | 'right';
     summary?: string;
     tooltip?: string;
     readonly version: string;

package/package.json

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