@kubex/zinc 1.1.144 → 1.1.145

package/dist/custom-elements.json

@@ -53472,7 +53472,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.144",
+    "version": "1.1.145",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.144",
+  "version": "1.1.145",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -3420,7 +3420,7 @@ ${Na(this.code(i,t))}
              aria-hidden=${n?"false":"true"}>
           <slot name="help-text">${this.helpText}</slot>
         </div>
-      </div>`}};Xe.styles=[z(Ee),z(Z_)],c([F('input[type="checkbox"]')],Xe.prototype,"input",2),c([I()],Xe.prototype,"hasFocus",2),c([d()],Xe.prototype,"title",2),c([d()],Xe.prototype,"name",2),c([d()],Xe.prototype,"value",2),c([d({attribute:"fallback"})],Xe.prototype,"fallbackValue",2),c([d({reflect:!0})],Xe.prototype,"size",2),c([d({type:Boolean,reflect:!0})],Xe.prototype,"disabled",2),c([d({type:Boolean,reflect:!0})],Xe.prototype,"checked",2),c([Ce("checked")],Xe.prototype,"defaultChecked",2),c([d({reflect:!0})],Xe.prototype,"form",2),c([d({type:Boolean,reflect:!0})],Xe.prototype,"required",2),c([d({attribute:"help-text"})],Xe.prototype,"helpText",2),c([d({type:Boolean,attribute:"trigger-submit"})],Xe.prototype,"triggerSubmit",2),c([d({attribute:"on-text"})],Xe.prototype,"onText",2),c([d({attribute:"off-text"})],Xe.prototype,"offText",2),c([d()],Xe.prototype,"label",2),c([d()],Xe.prototype,"description",2),c([d({attribute:"label-position",reflect:!0})],Xe.prototype,"labelPosition",2),c([d({type:Boolean})],Xe.prototype,"inline",2);var hL=Xe;Xe.define("zn-toggle");var Th=_`@charset "UTF-8";:host([contained]) .selection-card{--selection-card-padding:var(--zn-selection-card-padding,var(--zn-spacing-large));--selection-card-gap:var(--zn-selection-card-gap,var(--zn-spacing-medium));--selection-card-image-width:var(--zn-selection-card-image-width,5rem);--selection-card-image-height:var(--zn-selection-card-image-height,5rem);--selection-card-control-offset:var(--zn-selection-card-control-offset,var(--zn-spacing-medium));--selection-card-control-gutter:calc(var(--selection-card-control-offset) + var(--toggle-size) + var(--selection-card-gap));align-items:center;align-content:center;gap:var(--selection-card-gap);padding:var(--selection-card-padding)}:host([contained]) .selection-card .selection-card__content{flex:1 1 auto;min-width:0;margin-inline-start:0;line-height:var(--zn-line-height-normal)}:host([contained]) .selection-card .selection-card__title{display:block;font-size:var(--zn-selection-card-title-font-size,var(--zn-font-size-large));font-weight:var(--zn-font-weight-semibold);line-height:var(--zn-line-height-dense)}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--has-image{min-height:var(--zn-selection-card-min-height,9rem);flex-wrap:wrap}:host([contained]) .selection-card.selection-card--has-image .selection-card__content{flex-basis:var(--zn-selection-card-content-min-width,8rem)}:host([contained]) .selection-card .selection-card__image-container{flex:0 0 auto;display:flex;align-items:center;justify-content:center}:host([contained]) .selection-card .selection-card__image-container ::slotted(*){display:block;max-width:100%;max-height:var(--selection-card-image-height)}:host([contained]) .selection-card .selection-card__image{display:block;width:var(--selection-card-image-width);max-width:100%;height:var(--selection-card-image-height);-o-object-fit:contain;object-fit:contain}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--image-right .selection-card__image-container,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__image-container{order:2}:host([contained]) .selection-card.selection-card--image-right .selection-card__content,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__content{order:1}:host([contained]) .selection-card.selection-card--image-top,:host([contained]) .selection-card.selection-card--image-bottom{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:center}:host([contained]) .selection-card.selection-card--image-top .selection-card__image-container,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__image-container{align-self:center}:host([contained]) .selection-card.selection-card--image-top .selection-card__content,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__content{flex:0 0 auto;text-align:center}:host([contained]) .selection-card.selection-card--image-top,:host([contained]) .selection-card.selection-card--image-bottom{}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-top-left,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-top-left{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-top-right,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-top-right{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-center-left,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-center-left{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-center-right,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-center-right{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-bottom-left,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-bottom-left{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-bottom-right,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-bottom-right{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--control-top-left{padding-inline-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-top-left .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-start:var(--selection-card-control-offset);inset-inline-start:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-top-center{padding-block-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-top-center .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-start:var(--selection-card-control-offset);--selection-card-control-shift-x:-50%;inset-inline-start:50%}:host([contained]) .selection-card.selection-card--control-top-right{padding-inline-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-top-right .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-start:var(--selection-card-control-offset);inset-inline-end:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-center-left{padding-inline-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-center-left .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));--selection-card-control-shift-y:-50%;inset-block-start:50%;inset-inline-start:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-center .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));--selection-card-control-shift-y:-50%;inset-block-start:50%;--selection-card-control-shift-x:-50%;inset-inline-start:50%}:host([contained]) .selection-card.selection-card--control-center-right{padding-inline-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-center-right .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));--selection-card-control-shift-y:-50%;inset-block-start:50%;inset-inline-end:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-bottom-left{padding-inline-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-bottom-left .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-end:var(--selection-card-control-offset);inset-inline-start:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-bottom-center{padding-block-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-bottom-center .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-end:var(--selection-card-control-offset);--selection-card-control-shift-x:-50%;inset-inline-start:50%}:host([contained]) .selection-card.selection-card--control-bottom-right{padding-inline-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-bottom-right .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-end:var(--selection-card-control-offset);inset-inline-end:var(--selection-card-control-offset)}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--control-none .selection-card__control{display:none}:host([contained]) .selection-card.selection-card--control-none:has(input:focus-visible){outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}:host([contained]) [part~=base]{border-radius:var(--zn-selection-card-border-radius,var(--zn-border-radius))}:host([square]) [part~=base]{border-radius:0}`;var e2=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.form-control{display:flex;flex-direction:column;height:100%}.form-control .form-control__label{padding-bottom:var(--zn-spacing-small)}.checkbox{position:relative;display:inline-flex;align-items:flex-start;font-family:var(--zn-input-font-family),sans-serif;font-weight:var(--zn-input-font-weight);color:var(--zn-input-label-color);vertical-align:middle;cursor:pointer;height:100%;--checkbox-color:var(--zn-color-primary-600);--checkbox-color-hover:var(--zn-color-primary-500);--checkbox-icon-color:var(--zn-color-neutral-0);--checkbox-border-color:var(--zn-input-border-color);--checkbox-bg-color:var(--zn-input-background-color)}.checkbox.checkbox--default{--checkbox-color:var(--zn-color-primary-600);--checkbox-color-hover:var(--zn-color-primary-500);--checkbox-border-color:var(--zn-input-border-color)}.checkbox.checkbox--primary{--checkbox-color:var(--zn-color-primary-600);--checkbox-color-hover:var(--zn-color-primary-500);--checkbox-border-color:var(--zn-color-primary-600)}.checkbox.checkbox--secondary{--checkbox-color:var(--zn-color-neutral-600);--checkbox-color-hover:var(--zn-color-neutral-500);--checkbox-border-color:var(--zn-color-neutral-300);--checkbox-bg-color:var(--zn-color-neutral-50)}.checkbox.checkbox--info{--checkbox-color:var(--zn-color-info-600);--checkbox-color-hover:var(--zn-color-info-500);--checkbox-border-color:var(--zn-color-info-600)}.checkbox.checkbox--success{--checkbox-color:var(--zn-color-success-600);--checkbox-color-hover:var(--zn-color-success-500);--checkbox-border-color:var(--zn-color-success-600)}.checkbox.checkbox--warning{--checkbox-color:var(--zn-color-warning-600);--checkbox-color-hover:var(--zn-color-warning-500);--checkbox-border-color:var(--zn-color-warning-600)}.checkbox.checkbox--error{--checkbox-color:var(--zn-color-danger-600);--checkbox-color-hover:var(--zn-color-danger-500);--checkbox-border-color:var(--zn-color-danger-600)}.checkbox.checkbox--transparent{--checkbox-bg-color:transparent;--checkbox-border-color:transparent}.checkbox--small{--toggle-size:var(--zn-toggle-size-small);font-size:var(--zn-input-font-size-small)}.checkbox--small .checkbox__description{font-size:var(--zn-font-size-x-small)}.checkbox--medium{--toggle-size:var(--zn-toggle-size-medium);font-size:var(--zn-input-font-size-medium)}.checkbox--medium .checkbox__description,.checkbox--large .checkbox__description{font-size:var(--zn-input-font-size-small)}.checkbox--large{--toggle-size:var(--zn-toggle-size-large);font-size:var(--zn-input-font-size-large)}.checkbox__control{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--toggle-size);height:var(--toggle-size);border:solid var(--zn-input-border-width) var(--checkbox-border-color);background-color:var(--checkbox-bg-color);border-radius:var(--zn-border-radius-small);color:var(--checkbox-icon-color);transition:var(--zn-transition-fast) border-color,var(--zn-transition-fast) background-color,var(--zn-transition-fast) color,var(--zn-transition-fast) box-shadow}.checkbox__input{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__indeterminate-icon{--icon-size:var(--toggle-size);--icon-color:var(--checkbox-icon-color);display:inline-flex;width:var(--toggle-size);height:var(--toggle-size)}.svg-icon{height:max(16px,70%);--icon-color:var(--checkbox-icon-color)}.svg-icon .checkbox__checked-icon{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 0.4s cubic-bezier(0.4,0,0.2,1)}.checkbox--indeterminate .svg-icon{color:transparent}.checkbox--checked .svg-icon{color:var(--checkbox-icon-color)}.checkbox--checked .checkbox__checked-icon{stroke-dashoffset:0}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--checkbox-color-hover,var(--zn-input-border-color-hover));background-color:var(--zn-input-background-color-hover)}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{border-color:var(--checkbox-color);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--checkbox-color);background-color:var(--checkbox-color);color:var(--checkbox-icon-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--checkbox-color-hover);background-color:var(--checkbox-color-hover)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}.checkbox--disabled{opacity:0.5;cursor:not-allowed}:host-context([required]) .checkbox__label::after{display:none}:host([required]) .checkbox__label::after{display:none}:host(.checkbox-user-invalid) .checkbox__control{border-color:var(--zn-color-danger-600)}:host(.checkbox-user-invalid) .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{border-color:var(--zn-color-danger-600);outline:var(--zn-focus-ring-style) var(--zn-focus-ring-width) var(--zn-error-focus-ring-color);outline-offset:var(--zn-focus-ring-offset)}:host(.groupedCheckbox){margin-top:var(--zn-spacing-medium)}:host(.groupedCheckbox[horizontal]),:host(.groupedCheckbox[contained]){margin-top:var(--zn-spacing-small)}:host(.groupedCheckbox[horizontal][contained]){margin-top:0;height:100%}.checkbox__label{display:inline-block;color:var(--zn-input-label-color);line-height:var(--toggle-size);margin-inline-start:0.75em;-moz-user-select:none;user-select:none;-webkit-user-select:none}.checkbox--no-border{border:none !important;outline:none !important;border-radius:0 !important}.checkbox--contained{padding:1.375rem var(--zn-spacing-large) 1.375rem var(--zn-spacing-medium);border:1px solid var(--zn-color-gray-400);border-radius:var(--zn-border-radius);width:100%;height:100%}:not(.checkbox--disabled).checkbox--contained:hover,:not(.checkbox--disabled).checkbox--contained.checkbox--checked:hover{background-color:var(--zn-color-purple-50);transition:var(--zn-transition-medium) all}.checkbox--contained.checkbox--checked .checkbox__label{color:var(--zn-color-purple-600);font-weight:var(--zn-font-weight-semibold)}.checkbox--contained.checkbox--checked .checkbox__description{color:var(--zn-color-gray-900);font-weight:var(--zn-font-weight-normal)}.checkbox--contained.checkbox--checked{background-color:var(--zn-color-purple-100);border:1px solid var(--zn-color-purple-600);outline:1px solid var(--zn-color-purple-600);transition:var(--zn-transition-medium) all}:host([slot=prefix]){height:100%;aspect-ratio:1}:host([slot=prefix]) .checkbox__control{height:100%;width:100%;border:unset;box-shadow:unset;background-color:var(--zn-color-purple-50)}:host([slot=prefix]) .checkbox--primary .checkbox__control,:host([slot=prefix]) .checkbox--success .checkbox__control,:host([slot=prefix]) .checkbox--warning .checkbox__control,:host([slot=prefix]) .checkbox--error .checkbox__control,:host([slot=prefix]) .checkbox--info .checkbox__control{background-color:var(--checkbox-color);color:var(--zn-color-neutral-0);border-color:var(--checkbox-color)}:host([slot=prefix]) .checkbox--primary:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--success:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--warning:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--error:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--info:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{background-color:var(--checkbox-color-hover);border-color:var(--checkbox-color-hover);color:var(--zn-color-neutral-0)}:host([slot=prefix]) .checkbox--secondary .checkbox__control{background-color:var(--zn-color-neutral-200);color:var(--zn-color-neutral-700)}:host([slot=prefix]) .checkbox--secondary:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{background-color:var(--zn-color-neutral-300);border-color:var(--zn-color-neutral-300);color:var(--zn-color-neutral-800)}:host([slot=prefix]) .checkbox--checked .checkbox__control{background-color:var(--checkbox-color);color:var(--zn-color-neutral-0)}`;var ge=class extends k{constructor(){super(...arguments);this.formControlController=new re(this,{value:t=>t.checked?t.value||"on":t.uncheckedValue||void 0,defaultValue:t=>t.defaultChecked,setValue:(t,r)=>t.checked=r});this.hasSlotController=new Y(this,"[default]","description","image");this.hasFocus=!1;this.title="";this.name="";this.cardTitle="";this.size="medium";this.disabled=!1;this.checked=!1;this.indeterminate=!1;this.contained=!1;this.square=!1;this.src="";this.imageAlt="";this.imagePosition="left";this.controlPosition="start";this.borderless=!1;this.horizontal=!1;this.defaultChecked=!1;this.form="";this.required=!1;this.submitOnClick=!1;this.description="";this.checkedIcon="";this.uncheckedIcon="";this.color="default"}get validity(){return this.input?.validity}get isChecked(){return this.checked}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleClick(){if(this.disabled)return;this.checked=!this.checked,this.indeterminate=!1,this.emit("zn-change");let t=this.getForm();this.submitOnClick&&t&&t.requestSubmit()}handleBlur(){this.hasFocus=!1,this.emit("zn-blur")}handleInput(){this.emit("zn-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleFocus(){this.hasFocus=!0,this.emit("zn-focus")}handleSelectedContentClick(t){t.preventDefault()}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate,this.formControlController.updateValidity()}click(){this.input.click()}focus(t){this.input.focus(t)}blur(){this.input.blur()}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){let t=this.hasSlotController.test("description"),r=this.description?!0:t,n=this.contained&&(!!this.src||this.hasSlotController.test("image")),a=this.hasSlotController.test("[default]"),s=this.contained&&(n||!!this.cardTitle||this.controlPosition!=="start"),l=this.hasSlotController.test("label"),p=this.hasSlotController.test("label-tooltip"),h=this.label||l,m=this.checked||this.indeterminate?this.checkedColor||this.color:this.uncheckedColor||this.color;return u`
+      </div>`}};Xe.styles=[z(Ee),z(Z_)],c([F('input[type="checkbox"]')],Xe.prototype,"input",2),c([I()],Xe.prototype,"hasFocus",2),c([d()],Xe.prototype,"title",2),c([d()],Xe.prototype,"name",2),c([d()],Xe.prototype,"value",2),c([d({attribute:"fallback"})],Xe.prototype,"fallbackValue",2),c([d({reflect:!0})],Xe.prototype,"size",2),c([d({type:Boolean,reflect:!0})],Xe.prototype,"disabled",2),c([d({type:Boolean,reflect:!0})],Xe.prototype,"checked",2),c([Ce("checked")],Xe.prototype,"defaultChecked",2),c([d({reflect:!0})],Xe.prototype,"form",2),c([d({type:Boolean,reflect:!0})],Xe.prototype,"required",2),c([d({attribute:"help-text"})],Xe.prototype,"helpText",2),c([d({type:Boolean,attribute:"trigger-submit"})],Xe.prototype,"triggerSubmit",2),c([d({attribute:"on-text"})],Xe.prototype,"onText",2),c([d({attribute:"off-text"})],Xe.prototype,"offText",2),c([d()],Xe.prototype,"label",2),c([d()],Xe.prototype,"description",2),c([d({attribute:"label-position",reflect:!0})],Xe.prototype,"labelPosition",2),c([d({type:Boolean})],Xe.prototype,"inline",2);var hL=Xe;Xe.define("zn-toggle");var Th=_`@charset "UTF-8";:host([contained]) .selection-card{--selection-card-padding:var(--zn-selection-card-padding,var(--zn-spacing-large));--selection-card-gap:var(--zn-selection-card-gap,var(--zn-spacing-medium));--selection-card-image-width:var(--zn-selection-card-image-width,5rem);--selection-card-image-height:var(--zn-selection-card-image-height,5rem);--selection-card-control-offset:var(--zn-selection-card-control-offset,var(--zn-spacing-medium));--selection-card-control-gutter:calc(var(--selection-card-control-offset) + var(--toggle-size) + var(--selection-card-gap));align-items:center;align-content:center;gap:var(--selection-card-gap);padding:var(--selection-card-padding)}:host([contained]) .selection-card .selection-card__content{flex:1 1 auto;min-width:0;margin-inline-start:0;line-height:var(--zn-line-height-normal)}:host([contained]) .selection-card .selection-card__title{display:block;font-size:var(--zn-selection-card-title-font-size,var(--zn-font-size-large));font-weight:var(--zn-font-weight-semibold);line-height:var(--zn-line-height-dense)}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--has-image{min-height:var(--zn-selection-card-min-height,9rem);flex-wrap:wrap}:host([contained]) .selection-card.selection-card--has-image .selection-card__content{flex-basis:var(--zn-selection-card-content-min-width,8rem)}:host([contained]) .selection-card .selection-card__image-container{flex:0 0 auto;display:flex;align-items:center;justify-content:center}:host([contained]) .selection-card .selection-card__image-container ::slotted(*){display:block;max-width:100%;max-height:var(--selection-card-image-height)}:host([contained]) .selection-card .selection-card__image{display:block;width:var(--selection-card-image-width);max-width:100%;height:var(--selection-card-image-height);-o-object-fit:contain;object-fit:contain}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--image-right .selection-card__image-container,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__image-container{order:2}:host([contained]) .selection-card.selection-card--image-right .selection-card__content,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__content{order:1}:host([contained]) .selection-card.selection-card--image-top,:host([contained]) .selection-card.selection-card--image-bottom{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start}:host([contained]) .selection-card.selection-card--image-top .selection-card__image-container,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__image-container{align-self:center}:host([contained]) .selection-card.selection-card--image-top .selection-card__content,:host([contained]) .selection-card.selection-card--image-bottom .selection-card__content{flex:0 0 auto;text-align:center}:host([contained]) .selection-card.selection-card--image-top,:host([contained]) .selection-card.selection-card--image-bottom{}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-top-left,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-top-left{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-top-right,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-top-right{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-center-left,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-center-left{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-center-right,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-center-right{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-bottom-left,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-bottom-left{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-top.selection-card--control-bottom-right,:host([contained]) .selection-card.selection-card--image-bottom.selection-card--control-bottom-right{padding-inline:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--image-bottom{justify-content:flex-end}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--control-top-left{padding-inline-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-top-left .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-start:var(--selection-card-control-offset);inset-inline-start:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-top-center{padding-block-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-top-center .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-start:var(--selection-card-control-offset);--selection-card-control-shift-x:-50%;inset-inline-start:50%}:host([contained]) .selection-card.selection-card--control-top-right{padding-inline-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-top-right .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-start:var(--selection-card-control-offset);inset-inline-end:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-center-left{padding-inline-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-center-left .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));--selection-card-control-shift-y:-50%;inset-block-start:50%;inset-inline-start:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-center .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));--selection-card-control-shift-y:-50%;inset-block-start:50%;--selection-card-control-shift-x:-50%;inset-inline-start:50%}:host([contained]) .selection-card.selection-card--control-center-right{padding-inline-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-center-right .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));--selection-card-control-shift-y:-50%;inset-block-start:50%;inset-inline-end:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-bottom-left{padding-inline-start:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-bottom-left .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-end:var(--selection-card-control-offset);inset-inline-start:var(--selection-card-control-offset)}:host([contained]) .selection-card.selection-card--control-bottom-center{padding-block-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-bottom-center .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-end:var(--selection-card-control-offset);--selection-card-control-shift-x:-50%;inset-inline-start:50%}:host([contained]) .selection-card.selection-card--control-bottom-right{padding-inline-end:var(--selection-card-control-gutter)}:host([contained]) .selection-card.selection-card--control-bottom-right .selection-card__control{position:absolute;z-index:1;transform:translate(var(--selection-card-control-shift-x,0),var(--selection-card-control-shift-y,0));inset-block-end:var(--selection-card-control-offset);inset-inline-end:var(--selection-card-control-offset)}:host([contained]) .selection-card{}:host([contained]) .selection-card.selection-card--control-none .selection-card__control{display:none}:host([contained]) .selection-card.selection-card--control-none:has(input:focus-visible){outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}:host([contained]) [part~=base]{border-radius:var(--zn-selection-card-border-radius,var(--zn-border-radius))}:host([square]) [part~=base]{border-radius:0}`;var e2=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.form-control{display:flex;flex-direction:column;height:100%}.form-control .form-control__label{padding-bottom:var(--zn-spacing-small)}.checkbox{position:relative;display:inline-flex;align-items:flex-start;font-family:var(--zn-input-font-family),sans-serif;font-weight:var(--zn-input-font-weight);color:var(--zn-input-label-color);vertical-align:middle;cursor:pointer;height:100%;--checkbox-color:var(--zn-color-primary-600);--checkbox-color-hover:var(--zn-color-primary-500);--checkbox-icon-color:var(--zn-color-neutral-0);--checkbox-border-color:var(--zn-input-border-color);--checkbox-bg-color:var(--zn-input-background-color)}.checkbox.checkbox--default{--checkbox-color:var(--zn-color-primary-600);--checkbox-color-hover:var(--zn-color-primary-500);--checkbox-border-color:var(--zn-input-border-color)}.checkbox.checkbox--primary{--checkbox-color:var(--zn-color-primary-600);--checkbox-color-hover:var(--zn-color-primary-500);--checkbox-border-color:var(--zn-color-primary-600)}.checkbox.checkbox--secondary{--checkbox-color:var(--zn-color-neutral-600);--checkbox-color-hover:var(--zn-color-neutral-500);--checkbox-border-color:var(--zn-color-neutral-300);--checkbox-bg-color:var(--zn-color-neutral-50)}.checkbox.checkbox--info{--checkbox-color:var(--zn-color-info-600);--checkbox-color-hover:var(--zn-color-info-500);--checkbox-border-color:var(--zn-color-info-600)}.checkbox.checkbox--success{--checkbox-color:var(--zn-color-success-600);--checkbox-color-hover:var(--zn-color-success-500);--checkbox-border-color:var(--zn-color-success-600)}.checkbox.checkbox--warning{--checkbox-color:var(--zn-color-warning-600);--checkbox-color-hover:var(--zn-color-warning-500);--checkbox-border-color:var(--zn-color-warning-600)}.checkbox.checkbox--error{--checkbox-color:var(--zn-color-danger-600);--checkbox-color-hover:var(--zn-color-danger-500);--checkbox-border-color:var(--zn-color-danger-600)}.checkbox.checkbox--transparent{--checkbox-bg-color:transparent;--checkbox-border-color:transparent}.checkbox--small{--toggle-size:var(--zn-toggle-size-small);font-size:var(--zn-input-font-size-small)}.checkbox--small .checkbox__description{font-size:var(--zn-font-size-x-small)}.checkbox--medium{--toggle-size:var(--zn-toggle-size-medium);font-size:var(--zn-input-font-size-medium)}.checkbox--medium .checkbox__description,.checkbox--large .checkbox__description{font-size:var(--zn-input-font-size-small)}.checkbox--large{--toggle-size:var(--zn-toggle-size-large);font-size:var(--zn-input-font-size-large)}.checkbox__control{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--toggle-size);height:var(--toggle-size);border:solid var(--zn-input-border-width) var(--checkbox-border-color);background-color:var(--checkbox-bg-color);border-radius:var(--zn-border-radius-small);color:var(--checkbox-icon-color);transition:var(--zn-transition-fast) border-color,var(--zn-transition-fast) background-color,var(--zn-transition-fast) color,var(--zn-transition-fast) box-shadow}.checkbox__input{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__indeterminate-icon{--icon-size:var(--toggle-size);--icon-color:var(--checkbox-icon-color);display:inline-flex;width:var(--toggle-size);height:var(--toggle-size)}.svg-icon{height:max(16px,70%);--icon-color:var(--checkbox-icon-color)}.svg-icon .checkbox__checked-icon{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 0.4s cubic-bezier(0.4,0,0.2,1)}.checkbox--indeterminate .svg-icon{color:transparent}.checkbox--checked .svg-icon{color:var(--checkbox-icon-color)}.checkbox--checked .checkbox__checked-icon{stroke-dashoffset:0}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--checkbox-color-hover,var(--zn-input-border-color-hover));background-color:var(--zn-input-background-color-hover)}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{border-color:var(--checkbox-color);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--checkbox-color);background-color:var(--checkbox-color);color:var(--checkbox-icon-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--checkbox-color-hover);background-color:var(--checkbox-color-hover)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}.checkbox--disabled{opacity:0.5;cursor:not-allowed}:host-context([required]) .checkbox__label::after{display:none}:host([required]) .checkbox__label::after{display:none}:host(.checkbox-user-invalid) .checkbox__control{border-color:var(--zn-color-danger-600)}:host(.checkbox-user-invalid) .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{border-color:var(--zn-color-danger-600);outline:var(--zn-focus-ring-style) var(--zn-focus-ring-width) var(--zn-error-focus-ring-color);outline-offset:var(--zn-focus-ring-offset)}:host(.groupedCheckbox){margin-top:var(--zn-spacing-medium)}:host(.groupedCheckbox[horizontal]),:host(.groupedCheckbox[contained]){margin-top:var(--zn-spacing-small)}:host(.groupedCheckbox[horizontal][contained]){margin-top:0;height:100%}.checkbox__label{display:inline-block;color:var(--zn-input-label-color);line-height:var(--toggle-size);margin-inline-start:0.75em;-moz-user-select:none;user-select:none;-webkit-user-select:none}.checkbox--no-border{border:none !important;outline:none !important;border-radius:0 !important}.checkbox--contained{padding:1.375rem var(--zn-spacing-large) 1.375rem var(--zn-spacing-medium);border:1px solid var(--zn-color-gray-400);border-radius:var(--zn-border-radius);width:100%;height:100%}:not(.checkbox--disabled).checkbox--contained:hover,:not(.checkbox--disabled).checkbox--contained.checkbox--checked:hover{background-color:var(--zn-color-purple-50);transition:var(--zn-transition-medium) all}.checkbox--contained.checkbox--checked .checkbox__label{color:var(--zn-color-purple-600);font-weight:var(--zn-font-weight-semibold)}.checkbox--contained.checkbox--checked .checkbox__description{color:var(--zn-color-gray-900);font-weight:var(--zn-font-weight-normal)}.checkbox--contained.checkbox--checked{background-color:var(--zn-color-purple-100);border:1px solid var(--zn-color-purple-600);outline:1px solid var(--zn-color-purple-600);transition:var(--zn-transition-medium) all}:host([slot=prefix]){height:100%;aspect-ratio:1}:host([slot=prefix]) .checkbox__control{height:100%;width:100%;border:unset;box-shadow:unset;background-color:var(--zn-color-purple-50)}:host([slot=prefix]) .checkbox--primary .checkbox__control,:host([slot=prefix]) .checkbox--success .checkbox__control,:host([slot=prefix]) .checkbox--warning .checkbox__control,:host([slot=prefix]) .checkbox--error .checkbox__control,:host([slot=prefix]) .checkbox--info .checkbox__control{background-color:var(--checkbox-color);color:var(--zn-color-neutral-0);border-color:var(--checkbox-color)}:host([slot=prefix]) .checkbox--primary:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--success:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--warning:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--error:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover,:host([slot=prefix]) .checkbox--info:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{background-color:var(--checkbox-color-hover);border-color:var(--checkbox-color-hover);color:var(--zn-color-neutral-0)}:host([slot=prefix]) .checkbox--secondary .checkbox__control{background-color:var(--zn-color-neutral-200);color:var(--zn-color-neutral-700)}:host([slot=prefix]) .checkbox--secondary:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{background-color:var(--zn-color-neutral-300);border-color:var(--zn-color-neutral-300);color:var(--zn-color-neutral-800)}:host([slot=prefix]) .checkbox--checked .checkbox__control{background-color:var(--checkbox-color);color:var(--zn-color-neutral-0)}`;var ge=class extends k{constructor(){super(...arguments);this.formControlController=new re(this,{value:t=>t.checked?t.value||"on":t.uncheckedValue||void 0,defaultValue:t=>t.defaultChecked,setValue:(t,r)=>t.checked=r});this.hasSlotController=new Y(this,"[default]","description","image");this.hasFocus=!1;this.title="";this.name="";this.cardTitle="";this.size="medium";this.disabled=!1;this.checked=!1;this.indeterminate=!1;this.contained=!1;this.square=!1;this.src="";this.imageAlt="";this.imagePosition="left";this.controlPosition="start";this.borderless=!1;this.horizontal=!1;this.defaultChecked=!1;this.form="";this.required=!1;this.submitOnClick=!1;this.description="";this.checkedIcon="";this.uncheckedIcon="";this.color="default"}get validity(){return this.input?.validity}get isChecked(){return this.checked}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleClick(){if(this.disabled)return;this.checked=!this.checked,this.indeterminate=!1,this.emit("zn-change");let t=this.getForm();this.submitOnClick&&t&&t.requestSubmit()}handleBlur(){this.hasFocus=!1,this.emit("zn-blur")}handleInput(){this.emit("zn-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}handleFocus(){this.hasFocus=!0,this.emit("zn-focus")}handleSelectedContentClick(t){t.preventDefault()}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate,this.formControlController.updateValidity()}click(){this.input.click()}focus(t){this.input.focus(t)}blur(){this.input.blur()}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){let t=this.hasSlotController.test("description"),r=this.description?!0:t,n=this.contained&&(!!this.src||this.hasSlotController.test("image")),a=this.hasSlotController.test("[default]"),s=this.contained&&(n||!!this.cardTitle||this.controlPosition!=="start"),l=this.hasSlotController.test("label"),p=this.hasSlotController.test("label-tooltip"),h=this.label||l,m=this.checked||this.indeterminate?this.checkedColor||this.color:this.uncheckedColor||this.color;return u`
       <div
         class=${M({"form-control":!0,"form-control--small":this.size==="small","form-control--medium":this.size==="medium","form-control--large":this.size==="large","form-control--checkbox-contained-wrapper":this.contained,"form-control--has-label":h})}>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.144",
+  "version": "1.1.145",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/selection-card.scss

@@ -102,7 +102,9 @@ $control-positions: (
     flex-direction: column;
     flex-wrap: nowrap;
     align-items: stretch;
-    justify-content: center;
+    /* Grid rows stretch cards to one height; centring would float a short card's
+       image off the row's shared line, so pin to the image's named edge. */
+    justify-content: flex-start;
 
     .selection-card__image-container {
       align-self: center;
@@ -124,6 +126,10 @@ $control-positions: (
     }
   }
 
+  &.selection-card--image-bottom {
+    justify-content: flex-end;
+  }
+
   /* Positioned controls */
   @each $name, $position in $control-positions {
     $block: map.get($position, block);