@limetech/lime-elements 38.26.0 → 38.27.0

package/dist/lime-elements/style/internal/boolean-input.scss

@@ -110,9 +110,31 @@ label.boolean-input-label {
         rgb(var(--contrast-300))
     );
 
+    /*
+     * NOTE: Original selectors using `:has()` are commented out due to Safari
+     * rendering bugs where descendant transitions (e.g. SVG stroke animations)
+     * or box/background updates sometimes fail to animate or even repaint
+     * reliably when the state change is detected only via `:has()`.
+     *
+     * Original (kept for future re-implementation, or cleanup):
+     * .boolean-input:has(input[type='checkbox']:checked) &,
+     * .boolean-input:has(input[type='radio']:checked) & {
+     *   ...
+     * }
+     *
+     * Replacement uses adjacency: the markup places the `<input>` immediately
+     * before .box, so we can select the checked state with
+     * input:checked + .box. We retain the explicit `.checked` class pathway in
+     * case some templates toggle that class manually.
+     *
+     * Using the `:has()` selector is more reliable, because it doesn't
+     * depend on the DOM structure (e.g. if the markup changes and the input is
+     * no longer adjacent to the box), but Safari support for `:has()` is still
+     * somewhat inconsistent.
+     */
     .checked &,
-    .boolean-input:has(input[type='checkbox']:checked) &,
-    .boolean-input:has(input[type='radio']:checked) & {
+    .boolean-input > input[type='checkbox']:checked + &,
+    .boolean-input > input[type='radio']:checked + & {
         background-color: var(
             --lime-primary-color,
             var(--limel-theme-primary-color)
@@ -127,12 +149,19 @@ label.boolean-input-label {
         opacity: 0.4;
     }
 
-    .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+    /*
+     * See previous comment about Safari rendering bugs ☝️.
+     *
+     * Original (kept for for future re-implementation, or cleanup):
+     * .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
+     * .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
+     */
+    .boolean-input:not(.disabled):hover & {
         will-change: box-shadow;
         box-shadow: var(--button-shadow-hovered);
     }
 
-    .boolean-input:not(.disabled):has(label.boolean-input-label:active) & {
+    .boolean-input:not(.disabled):active & {
         will-change: box-shadow;
         box-shadow: var(--button-shadow-pressed);
     }
@@ -145,10 +174,16 @@ label.boolean-input-label {
         inset: -0.1875rem; // 3px
         border-radius: inherit;
 
-        .boolean-input:has(input[type='checkbox']:focus-visible) &,
-        .boolean-input:has(input[type='radio']:focus-visible) & {
+        /*
+         * See previous comment about Safari rendering bugs ☝️.
+         *
+         * Original (kept for for future re-implementation, or cleanup):
+         * .boolean-input:has(input[type='checkbox']:focus-visible) &,
+         * .boolean-input:has(input[type='radio']:focus-visible) & { ...}
+         */
+        .boolean-input > input[type='checkbox']:focus-visible + &,
+        .boolean-input > input[type='radio']:focus-visible + & {
             will-change: box-shadow;
-
             box-shadow: var(--shadow-depth-8-focused);
         }
     }
@@ -171,7 +206,8 @@ label.boolean-input-label {
 
         background-color: rgb(var(--color-white));
 
-        .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+        /* Hover fallback for pseudo-element (see explanation above). */
+        .boolean-input:not(.disabled):hover & {
             will-change: opacity, box-shadow, transform, width;
         }
     }

package/dist/types/components/form/form.types.d.ts

@@ -178,6 +178,10 @@ export interface LimeSchemaOptions {
    * Mark the field as disabled
    */
   disabled?: boolean;
+  /**
+   * Hide the field from the UI while preserving its value in the form data.
+   */
+  hidden?: boolean;
   help?: string | Partial<Help>;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.26.0",
+  "version": "38.27.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-0d4a48ce.entry.js

@@ -1,2 +0,0 @@
-import{h as e,r as i,c as t,H as o,g as l}from"./p-288f0842.js";import{g as r}from"./p-d251f404.js";import{c as s}from"./p-ad52787a.js";import{C as a}from"./p-8ded6465.js";import{t as n}from"./p-4c88e5d3.js";const c=i=>e("div",{class:{"boolean-input":true,"radio-button":true,checked:i.checked,disabled:i.disabled}},e("input",{type:"radio",id:i.id,checked:i.checked,disabled:i.disabled,onChange:i.onChange}),e("div",{class:"box"}),e("label",{class:"boolean-input-label",htmlFor:i.id},i.label));const d='@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)))}.checked .box,.boolean-input:has(input[type=checkbox]:checked) .box,.boolean-input:has(input[type=radio]:checked) .box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit}.boolean-input:has(input[type=checkbox]:focus-visible) .box:before,.boolean-input:has(input[type=radio]:focus-visible) .box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white))}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark{opacity:1}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}.radio-button{--limel-boolean-input-box-border-radius:var(\n      --limel-boolean-input-box-size\n  )}.box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem;transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:50%;width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input{width:var(--limel-boolean-input-box-size);margin-left:-0.25rem}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}';const h=class{constructor(o){i(this,o);this.interact=t(this,"interact",7);this.renderLabel=()=>e("span",{class:"label",id:this.labelId},this.text);this.renderDescription=()=>{if(!this.secondaryText){return}return e("span",{class:"description",id:this.descriptionId},this.secondaryText)};this.renderIcon=()=>{const i=r(this.icon);if(!i){return}let t;let o;let l;if(typeof this.icon==="object"){t=this.icon.color;o=this.icon.backgroundColor;l=this.icon.title}const s={"aria-label":l,"aria-hidden":l?null:"true",name:i,style:{color:t,"background-color":o},badge:this.badgeIcon,size:this.iconSize};return e("limel-icon",Object.assign({},s))};this.renderPrimaryComponent=()=>{const i=this.primaryComponent;if(!(i===null||i===void 0?void 0:i.name)){return}const t=i.name;const o=i.props||{};return e(t,Object.assign({},o))};this.renderImage=()=>{if(!this.image){return}return e("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})};this.renderActionMenu=i=>{if(!i||i.length===0){return}const t=this.getStableActions(i);return e("limel-menu",{class:"mdc-deprecated-list-item__meta",items:t,openDirection:"left-start"},e("limel-icon-button",{class:"action-menu-trigger",slot:"trigger",icon:"menu_2",label:this.actionMenuLabel()}))};this.renderRadioButton=()=>{if(this.type!=="radio"){return}return e(c,{id:`radio_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.renderCheckbox=()=>{if(this.type!=="checkbox"){return}return e(a,{id:`checkbox_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.onClick=e=>{if(this.disabled){return}const i=e.target;const t=!!(i===null||i===void 0?void 0:i.closest(".action-menu-trigger"));const o=!!(i===null||i===void 0?void 0:i.closest("[data-no-toggle]"));const l=!!(i===null||i===void 0?void 0:i.closest("limel-menu"));if(t||o||l){return}if(this.isSelectableType()){this.handleInteraction()}};this.onKeyDown=e=>{if(this.disabled){return}const i=this.host.shadowRoot;const t=i?i.activeElement:null;if(t&&t!==this.host){return}const o=e.key==="Enter";const l=e.key===" "||e.key==="Space"||e.key==="Spacebar"||e.code==="Space";if(!o&&!l){return}if(e.repeat){if(l){e.preventDefault()}return}if(l){e.preventDefault()}if(this.isSelectableType()){this.handleInteraction();return}if(o||l){this.host.click()}};this.handleInteraction=()=>{const e=!this.selected;const i={text:this.text,secondaryText:this.secondaryText,disabled:this.disabled,icon:this.icon,selected:e,value:this.value,actions:this.actions,primaryComponent:this.primaryComponent,image:this.image};this.interact.emit({selected:e,item:i})};this.actionMenuLabel=()=>n.get("file-viewer.more-actions",this.language);this.language="en";this.value=undefined;this.text=undefined;this.secondaryText=undefined;this.disabled=false;this.icon=undefined;this.iconSize="small";this.badgeIcon=false;this.selected=false;this.actions=undefined;this.primaryComponent=undefined;this.image=undefined;this.type="listitem";this.labelId=s();this.descriptionId=s()}render(){var i;const t={"aria-labelledby":this.labelId,"aria-describedby":this.secondaryText?this.descriptionId:undefined,"aria-disabled":this.disabled?"true":"false"};if(this.type==="radio"||this.type==="checkbox"){t["aria-checked"]=this.selected?"true":"false"}else if(this.type==="option"||this.type==="menuitem"){t["aria-selected"]=this.selected?"true":"false"}return e(o,Object.assign({role:this.getHostRole(),class:{"has-primary-component":!!((i=this.primaryComponent)===null||i===void 0?void 0:i.name)}},t,{onClick:this.onClick,onKeyDown:this.onKeyDown}),this.renderRadioButton(),this.renderCheckbox(),this.renderIcon(),this.renderImage(),this.renderPrimaryComponent(),e("div",{class:"text"},this.renderLabel(),this.renderDescription()),this.renderActionMenu(this.actions))}getStableActions(e){if(this.memoizedActions===e){return this.memoizedActions}this.memoizedActions=e;return e}isSelectableType(){return this.type==="option"||this.type==="radio"||this.type==="checkbox"}getHostRole(){switch(this.type){case"option":{return"option"}case"radio":{return"radio"}case"checkbox":{return"checkbox"}case"menuitem":{return"menuitem"}default:{return"listitem"}}}get host(){return l(this)}};h.style=d;export{h as limel_list_item};
-//# sourceMappingURL=p-0d4a48ce.entry.js.map

package/dist/lime-elements/p-a7aa383b.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as o,g as t}from"./p-288f0842.js";import{c as l}from"./p-ad52787a.js";import{C as a}from"./p-8ded6465.js";const r='@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)))}.checked .box,.boolean-input:has(input[type=checkbox]:checked) .box,.boolean-input:has(input[type=radio]:checked) .box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit}.boolean-input:has(input[type=checkbox]:focus-visible) .box:before,.boolean-input:has(input[type=radio]:focus-visible) .box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white))}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark{opacity:1}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}';const n=class{constructor(o){e(this,o);this.change=i(this,"change",7);this.shouldReinitialize=false;this.id=l();this.helperTextId=l();this.destroyMDCInstances=()=>{const e=this.getCheckboxElement();if(e){delete e.dataset["indeterminate"];e.indeterminate=false}};this.isInvalid=()=>{if(this.invalid){return true}if(this.required&&this.modified&&!this.checked){return true}};this.initialize=()=>{const e=this.getCheckboxElement();if(!e){return}e.indeterminate=this.indeterminate;e.checked=this.checked||this.indeterminate};this.getCheckboxElement=()=>{var e,i;return((i=(e=this.limelCheckbox)===null||e===void 0?void 0:e.shadowRoot)===null||i===void 0?void 0:i.querySelector('input[type="checkbox"]'))||null};this.onChange=e=>{var i;e.stopPropagation();const o=e.currentTarget;const t=(i=o===null||o===void 0?void 0:o.checked)!==null&&i!==void 0?i:this.checked;this.change.emit(t);this.modified=true};this.disabled=false;this.readonly=false;this.invalid=undefined;this.label=undefined;this.helperText=undefined;this.checked=false;this.indeterminate=false;this.required=false;this.readonlyLabels=[];this.modified=false}handleCheckedChange(e){const i=this.getCheckboxElement();if(!i){return}i.checked=e||this.indeterminate}handleIndeterminateChange(e){const i=this.getCheckboxElement();if(!i){return}i.checked=this.checked||e;i.indeterminate=e}handleReadonlyChange(){this.destroyMDCInstances();this.shouldReinitialize=true}componentDidRender(){if(this.shouldReinitialize){this.initialize();this.shouldReinitialize=false}}connectedCallback(){this.initialize()}componentDidLoad(){this.initialize()}disconnectedCallback(){this.destroyMDCInstances()}render(){return o(a,{disabled:this.disabled||this.readonly,label:this.label,readonlyLabels:this.readonlyLabels,helperText:this.helperText,helperTextId:this.helperTextId,checked:this.checked||this.indeterminate,indeterminate:this.indeterminate,required:this.required,readonly:this.readonly,invalid:this.isInvalid(),onChange:this.onChange,id:this.id})}get limelCheckbox(){return t(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleIndeterminateChange"],readonly:["handleReadonlyChange"]}}};n.style=r;export{n as limel_checkbox};
-//# sourceMappingURL=p-a7aa383b.entry.js.map

package/dist/lime-elements/p-a7aa383b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","Checkbox","this","shouldReinitialize","id","createRandomString","helperTextId","destroyMDCInstances","input","getCheckboxElement","dataset","indeterminate","isInvalid","invalid","required","modified","checked","initialize","_b","_a","limelCheckbox","shadowRoot","querySelector","onChange","event","stopPropagation","currentTarget","isChecked","change","emit","handleCheckedChange","newValue","handleIndeterminateChange","handleReadonlyChange","componentDidRender","connectedCallback","componentDidLoad","disconnectedCallback","render","h","CheckboxTemplate","disabled","readonly","label","readonlyLabels","helperText"],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    &:not(.indeterminate):has(input[type='checkbox']:checked) {\n        svg.check-mark {\n            opacity: 1;\n\n            path {\n                stroke-dashoffset: 0;\n            }\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"mappings":"iIAAA,MAAMA,EAAc,+gK,MC4CPC,EAAQ,M,wDA6DTC,KAAAC,mBAAqB,MAUrBD,KAAAE,GAAaC,IACbH,KAAAI,aAAuBD,IA4CvBH,KAAAK,oBAAsB,KAC1B,MAAMC,EAAQN,KAAKO,qBACnB,GAAID,EAAO,QACAA,EAAME,QAAQ,iBACrBF,EAAMG,cAAgB,K,GA2BtBT,KAAAU,UAAY,KAChB,GAAIV,KAAKW,QAAS,CACd,OAAO,I,CAGX,GAAIX,KAAKY,UAAYZ,KAAKa,WAAab,KAAKc,QAAS,CACjD,OAAO,I,GAIPd,KAAAe,WAAa,KACjB,MAAMT,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMG,cAAgBT,KAAKS,cAC3BH,EAAMQ,QAAUd,KAAKc,SAAWd,KAAKS,aAAa,EAG9CT,KAAAO,mBAAqB,K,QACzB,QACIS,GAAAC,EAAAjB,KAAKkB,iBAAa,MAAAD,SAAA,SAAAA,EAAEE,cAAU,MAAAH,SAAA,SAAAA,EAAEI,cAC5B,4BACC,IAAI,EAITpB,KAAAqB,SAAYC,I,MAChBA,EAAMC,kBACN,MAAMjB,EAAQgB,EAAME,cACpB,MAAMC,GAAYR,EAAAX,IAAK,MAALA,SAAK,SAALA,EAAOQ,WAAO,MAAAG,SAAA,EAAAA,EAAIjB,KAAKc,QACzCd,KAAK0B,OAAOC,KAAKF,GACjBzB,KAAKa,SAAW,IAAI,E,cA9KN,M,cAQA,M,mFAwBD,M,mBAMM,M,cAMI,M,oBAOqB,G,cAG7B,K,CAeTe,oBAAoBC,GAC1B,MAAMvB,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMQ,QAAUe,GAAY7B,KAAKS,a,CAI3BqB,0BAA0BD,GAChC,MAAMvB,EAAQN,KAAKO,qBACnB,IAAKD,EAAO,CACR,M,CAGJA,EAAMQ,QAAUd,KAAKc,SAAWe,EAChCvB,EAAMG,cAAgBoB,C,CAIhBE,uBACN/B,KAAKK,sBACLL,KAAKC,mBAAqB,I,CAG9B+B,qBACI,GAAIhC,KAAKC,mBAAoB,CACzBD,KAAKe,aACLf,KAAKC,mBAAqB,K,EAI3BgC,oBACHjC,KAAKe,Y,CAGFmB,mBACHlC,KAAKe,Y,CAWFoB,uBACHnC,KAAKK,qB,CAGF+B,SACH,OACIC,EAACC,EAAgB,CACbC,SAAUvC,KAAKuC,UAAYvC,KAAKwC,SAChCC,MAAOzC,KAAKyC,MACZC,eAAgB1C,KAAK0C,eACrBC,WAAY3C,KAAK2C,WACjBvC,aAAcJ,KAAKI,aACnBU,QAASd,KAAKc,SAAWd,KAAKS,cAC9BA,cAAeT,KAAKS,cACpBG,SAAUZ,KAAKY,SACf4B,SAAUxC,KAAKwC,SACf7B,QAASX,KAAKU,YACdW,SAAUrB,KAAKqB,SACfnB,GAAIF,KAAKE,I"}