@pantoken/components 0.2.7 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.css +1 -1
- package/dist/index.mjs +12 -12
- package/package.json +2 -1
package/dist/components.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.instui-button{justify-content:center;align-items:center;gap:var(--instui-spacing-space-xs);min-height:var(--instui-component-base-button-medium-height);padding:var(--instui-spacing-space-xs) var(--instui-component-base-button-medium-padding-horizontal);font-family:var(--instui-font-family-base);font-size:var(--instui-component-base-button-medium-font-size);font-weight:var(--instui-font-weight-interactive);line-height:var(--instui-line-height-standalone-text-base);border:var(--instui-border-width-md) solid transparent;border-radius:var(--instui-component-base-button-border-radius);cursor:pointer;background:var(--instui-color-background-interactive-action-primary-base);color:var(--instui-color-text-interactive-action-primary-base);display:inline-flex}.instui-button:hover{background:var(--instui-color-background-interactive-action-primary-hover)}.instui-button:active{background:var(--instui-color-background-interactive-action-primary-active)}.instui-button:disabled,.instui-button[aria-disabled=true]{background:var(--instui-color-background-interactive-action-primary-disabled);color:var(--instui-color-text-interactive-action-primary-disabled);cursor:not-allowed}.instui-button.-color-secondary{background:var(--instui-color-background-interactive-action-secondary-base);color:var(--instui-color-text-interactive-action-secondary-base);border-color:var(--instui-color-stroke-interactive-action-secondary-base)}.instui-button.-color-secondary:hover{background:var(--instui-color-background-interactive-action-secondary-hover);border-color:var(--instui-color-stroke-interactive-action-secondary-hover)}.instui-button.-color-secondary:active{background:var(--instui-color-background-interactive-action-secondary-active);border-color:var(--instui-color-stroke-interactive-action-secondary-active)}.instui-button.-color-danger{background:var(--instui-color-background-interactive-action-destructive-base);color:var(--instui-color-text-interactive-action-status-base)}.instui-button.-color-danger:hover{background:var(--instui-color-background-interactive-action-destructive-hover)}.instui-button.-color-danger:active{background:var(--instui-color-background-interactive-action-destructive-active)}.instui-button.-color-success{background:var(--instui-color-background-interactive-action-success-base);color:var(--instui-color-text-interactive-action-status-base)}.instui-button.-color-success:hover{background:var(--instui-color-background-interactive-action-success-hover)}.instui-button.-color-tertiary{color:var(--instui-color-text-interactive-action-tertiary-base);border-color:var(--instui-color-stroke-interactive-action-tertiary-base);background:0 0}.instui-button.-color-tertiary:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)}.instui-button.-color-tertiary:active{background:var(--instui-color-background-interactive-action-tertiary-active)}.instui-button.-color-primary-inverse{background:var(--instui-component-base-button-primary-inverse-background);color:var(--instui-component-base-button-primary-inverse-color);border-color:var(--instui-component-base-button-primary-inverse-border-color)}.instui-button.-color-primary-inverse:hover{background:var(--instui-component-base-button-primary-inverse-hover-background);border-color:var(--instui-component-base-button-primary-on-color-hover-border-color)}.instui-button.-color-primary-inverse:active{background:var(--instui-component-base-button-primary-inverse-active-background);border-color:var(--instui-component-base-button-primary-on-color-active-border-color)}.instui-button.-color-ai{color:var(--instui-color-text-interactive-action-ai-base);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%) border-box;border-color:#0000}.instui-button.-color-ai:hover{color:var(--instui-color-text-interactive-action-ai-hover);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%) border-box}.instui-button.-color-ai:active{color:var(--instui-color-text-interactive-action-ai-active);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%) border-box}.instui-button.-color-ai-secondary{background:linear-gradient(to bottom, var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%, var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text;border-color:#0000;position:relative}.instui-button.-color-ai-secondary:after{content:"";inset:calc(-1 * var(--instui-border-width-md));border-radius:inherit;padding:var(--instui-border-width-sm);background:linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%);-webkit-mask-composite:xor;pointer-events:none;position:absolute;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.instui-button.-color-ai-secondary:hover,.instui-button.-color-ai-secondary:active{color:var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);-webkit-text-fill-color:currentColor;-webkit-background-clip:border-box;background-clip:border-box}.instui-button.-color-ai-secondary:hover{background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%)}.instui-button.-color-ai-secondary:active{background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%)}.instui-button.-color-ai:before,.instui-button.-color-ai-secondary:before{content:"";flex:none;block-size:1em;inline-size:1em;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E") 50%/contain no-repeat}.instui-button.-color-ai:before{background:var(--instui-color-text-interactive-action-ai-base)}.instui-button.-color-ai-secondary:before{background:linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%)}.instui-button.-without-background{background:var(--instui-component-base-button-primary-ghost-background);color:var(--instui-component-base-button-primary-ghost-color);border-color:var(--instui-component-base-button-primary-ghost-border-color)}.instui-button.-color-secondary.-ghost{background:var(--instui-component-base-button-secondary-ghost-background);color:var(--instui-component-base-button-secondary-ghost-color);border-color:var(--instui-component-base-button-secondary-ghost-border-color)}.instui-button.-without-background:hover{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-primary-ghost-color) h s calc(l - 10)) 10%, transparent)}.instui-button.-without-background:active{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-primary-ghost-color) h s calc(l - 10)) 20%, transparent)}.instui-button.-color-secondary.-ghost:hover{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-secondary-ghost-color) h s calc(l - 10)) 10%, transparent)}.instui-button.-color-secondary.-ghost:active{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-secondary-ghost-color) h s calc(l - 10)) 20%, transparent)}.instui-button.-display-block{width:100%;display:flex}.instui-button.-size-sm{font-size:var(--instui-component-base-button-small-font-size);min-height:var(--instui-component-base-button-small-height);padding-inline:var(--instui-component-base-button-small-padding-horizontal)}.instui-button.-size-lg{font-size:var(--instui-component-base-button-large-font-size);min-height:var(--instui-component-base-button-large-height);padding-inline:var(--instui-component-base-button-large-padding-horizontal)}.instui-button.-shape-square{padding:var(--instui-spacing-space-xs);aspect-ratio:1}.instui-button.-shape-circle{padding:var(--instui-spacing-space-xs);aspect-ratio:1;border-radius:50%}.instui-button.-shape-square[class*=-icon-]:before,.instui-button.-shape-circle[class*=-icon-]:before{block-size:1.25em;inline-size:1.25em}.instui-button.-condensed{min-height:0;color:var(--instui-color-text-interactive-action-secondary-base);padding-inline:var(--instui-spacing-space-xs);background:0 0;border-color:#0000}.instui-button.-condensed:hover{background:var(--instui-color-background-muted)}.instui-button.-toggle[aria-pressed=true]{background:var(--instui-color-background-interactive-action-secondary-active);border-color:var(--instui-color-stroke-interactive-action-secondary-active);color:var(--instui-color-text-interactive-action-secondary-base)}.instui-button.-without-border{border-style:none}.instui-button.-size-small{font-size:var(--instui-component-base-button-small-font-size);min-height:var(--instui-component-base-button-small-height);padding-inline:var(--instui-component-base-button-small-padding-horizontal)}.instui-button.-size-large{font-size:var(--instui-component-base-button-large-font-size);min-height:var(--instui-component-base-button-large-height);padding-inline:var(--instui-component-base-button-large-padding-horizontal)}.instui-alert{min-inline-size:12rem;padding:var(--instui-component-alert-content-padding-vertical) var(--instui-component-alert-content-padding-horizontal);background:var(--instui-component-alert-background);color:var(--instui-component-alert-color);border:var(--instui-component-alert-border-width) var(--instui-component-alert-border-style) var(--instui-component-alert-info-border-color);border-radius:var(--instui-component-alert-border-radius);box-shadow:var(--instui-elevation-above);font-family:var(--instui-component-alert-content-font-family);font-size:var(--instui-component-alert-content-font-size);font-weight:var(--instui-component-alert-content-font-weight);line-height:var(--instui-component-alert-content-line-height);--pantoken-alert-icon-bg:var(--instui-component-alert-info-icon-background);--pantoken-alert-glyph:var(--instui-icon-info);padding-inline-start:calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));position:relative}.instui-alert:before{content:"";inset-block:calc(-1 * var(--instui-component-alert-border-width));background:var(--pantoken-alert-icon-bg);inline-size:2.5rem;border-start-start-radius:var(--instui-component-alert-border-radius);border-end-start-radius:var(--instui-component-alert-border-radius);position:absolute;inset-inline-start:calc(-1 * var(--instui-component-alert-border-width))}.instui-alert:after{content:"";background:var(--instui-component-alert-icon-color);inline-size:2.5rem;-webkit-mask:var(--pantoken-alert-glyph) center / 1.125rem no-repeat;mask:var(--pantoken-alert-glyph) center / 1.125rem no-repeat;position:absolute;inset-block:0;inset-inline-start:0}.instui-alert>.instui-close-button{position:absolute;inset-block-start:var(--instui-spacing-space-xs);inset-inline-end:var(--instui-spacing-space-xs)}.instui-alert:has(>.instui-close-button){padding-inline-end:calc(var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs))}.instui-alert.-without-shadow{box-shadow:none}.instui-alert.-screen-reader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-alert.-color-info{border-color:var(--instui-component-alert-info-border-color)}.instui-alert.-color-success{border-color:var(--instui-component-alert-success-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-success-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-check)}.instui-alert.-color-warning{border-color:var(--instui-component-alert-warning-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-warning-icon-background);--pantoken-alert-glyph:var(--instui-icon-triangle-alert)}.instui-alert.-color-danger{border-color:var(--instui-component-alert-danger-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-danger-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-x)}.instui-alert[class*=-icon-]{--pantoken-alert-glyph:var(--pantoken-glyph)}.instui-alert[class*=-icon-]:before{background:var(--pantoken-alert-icon-bg);block-size:auto;inline-size:2.5rem;-webkit-mask:none;mask:none}.instui-alert.-has-shadow-false{box-shadow:none}.instui-alert.-variant-info{border-color:var(--instui-component-alert-info-border-color)}.instui-alert.-variant-success{border-color:var(--instui-component-alert-success-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-success-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-check)}.instui-alert.-variant-warning{border-color:var(--instui-component-alert-warning-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-warning-icon-background);--pantoken-alert-glyph:var(--instui-icon-triangle-alert)}.instui-alert.-variant-error{border-color:var(--instui-component-alert-danger-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-danger-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-x)}@keyframes pantoken-badge-pulse{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.instui-badge-wrapper{display:inline-flex;position:relative}.instui-badge{--pantoken-badge-accent:var(--instui-component-badge-color-primary);--pantoken-badge-text:light-dark(var(--instui-component-badge-color),var(--instui-component-badge-color-inverse));min-width:var(--instui-component-badge-size);height:var(--instui-component-badge-size);padding:0 var(--instui-component-badge-padding);font-family:var(--instui-component-badge-font-family);font-size:var(--instui-component-badge-font-size);font-weight:var(--instui-component-badge-font-weight);border-radius:var(--instui-component-badge-border-radius);background:var(--pantoken-badge-accent);color:var(--pantoken-badge-text);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.instui-badge.-color-success{--pantoken-badge-accent:var(--instui-component-badge-color-success);--pantoken-badge-text:var(--instui-component-badge-color)}.instui-badge.-color-danger{--pantoken-badge-accent:var(--instui-component-badge-color-danger);--pantoken-badge-text:var(--instui-component-badge-color)}.instui-badge.-color-inverse{--pantoken-badge-accent:var(--instui-component-badge-color);--pantoken-badge-text:var(--instui-component-badge-color-inverse)}.instui-badge.-type-notification{min-width:0;width:var(--instui-spacing-space-sm);height:var(--instui-spacing-space-sm);padding:0;font-size:0}.instui-badge.-pulse:before{content:"";border:var(--instui-border-width-md) solid var(--pantoken-badge-accent);border-radius:inherit;animation:1.2s ease-out infinite pantoken-badge-pulse;position:absolute;inset:0}.instui-badge.-placement-top-end,.instui-badge.-placement-top-start,.instui-badge.-placement-bottom-end,.instui-badge.-placement-bottom-start,.instui-badge.-placement-start-center,.instui-badge.-placement-end-center{position:absolute}.instui-badge.-placement-top-end{top:-.5rem;inset-inline-end:-.5rem}.instui-badge.-placement-top-start{top:-.5rem;inset-inline-start:-.5rem}.instui-badge.-placement-bottom-end{bottom:-.5rem;inset-inline-end:-.5rem}.instui-badge.-placement-bottom-start{bottom:-.5rem;inset-inline-start:-.5rem}.instui-badge.-placement-end-center{top:50%;inset-inline-end:-.5rem;transform:translateY(-50%)}.instui-badge.-placement-start-center{top:50%;inset-inline-start:-.5rem;transform:translateY(-50%)}.instui-badge.-standalone{position:relative;inset:auto;transform:none}.instui-pill{height:var(--instui-component-pill-height);max-width:var(--instui-component-pill-max-width);padding:0 var(--instui-component-pill-padding-horizontal);background:var(--instui-component-pill-background-color);color:var(--instui-component-pill-base-text-color);border:var(--instui-component-pill-border-width) var(--instui-component-pill-border-style) var(--instui-component-pill-base-border-color);border-radius:var(--instui-component-pill-border-radius);font-family:var(--instui-component-pill-font-family);font-size:var(--instui-component-pill-text-font-size);font-weight:var(--instui-component-pill-text-font-weight);line-height:var(--instui-component-pill-line-height);align-items:center;display:inline-flex}.instui-pill[class*=-icon-]:before{inline-size:var(--instui-font-size-text-xs);block-size:var(--instui-font-size-text-xs);margin-inline-end:.375rem}.instui-pill.-color-info{color:var(--instui-component-pill-info-text-color);border-color:var(--instui-component-pill-info-border-color)}.instui-pill.-color-success{color:var(--instui-component-pill-success-text-color);border-color:var(--instui-component-pill-success-border-color)}.instui-pill.-color-warning{color:var(--instui-component-pill-warning-text-color);border-color:var(--instui-component-pill-warning-border-color)}.instui-pill.-color-danger{color:var(--instui-component-pill-error-text-color);border-color:var(--instui-component-pill-error-border-color)}.instui-pill.-color-info,.instui-pill.-color-success,.instui-pill.-color-warning,.instui-pill.-color-danger{font-weight:var(--instui-component-pill-status-label-font-weight)}.instui-tag{height:var(--instui-component-tag-height-medium);max-width:var(--instui-component-tag-max-width);padding:0 var(--instui-component-tag-padding-horizontal);background:var(--instui-component-tag-default-background);color:var(--instui-component-tag-default-color);border:var(--instui-component-tag-default-border-width) var(--instui-component-tag-default-border-style) var(--instui-component-tag-default-border-color);border-radius:var(--instui-component-tag-default-border-radius);font-family:var(--instui-component-tag-font-family);font-size:var(--instui-component-tag-font-size-medium);align-items:center;display:inline-flex}.instui-tag:hover{background:var(--instui-component-tag-default-background-hover)}.instui-tag.-size-sm{height:var(--instui-component-tag-height-small);padding:0 var(--instui-component-tag-padding-horizontal-small);font-size:var(--instui-component-tag-font-size-small)}.instui-tag.-size-lg{height:var(--instui-component-tag-height-large);font-size:var(--instui-component-tag-font-size-large)}.instui-tag.-inline{gap:var(--instui-spacing-space-xs);background:var(--instui-component-tag-inline-background);color:var(--instui-component-tag-inline-color);border-color:var(--instui-component-tag-inline-border-color);border-radius:var(--instui-component-tag-inline-border-radius);cursor:pointer}.instui-tag.-inline:hover{background:var(--instui-component-tag-inline-background-hover)}.instui-tag.-inline:after{content:"";background:var(--instui-component-tag-inline-icon-color);width:1em;height:1em;-webkit-mask:var(--instui-icon-x) center / contain no-repeat;mask:var(--instui-icon-x) center / contain no-repeat;flex:none}.instui-tag.-inline:hover:after{background:var(--instui-component-tag-inline-icon-hover-color)}.instui-tag.-readonly{cursor:default;background:var(--instui-component-tag-default-background)}.instui-tag.-readonly.-inline:after{display:none}.instui-tag.-size-small{height:var(--instui-component-tag-height-small);padding:0 var(--instui-component-tag-padding-horizontal-small);font-size:var(--instui-component-tag-font-size-small)}.instui-tag.-size-large{height:var(--instui-component-tag-height-large);font-size:var(--instui-component-tag-font-size-large)}.instui-avatar{width:var(--instui-component-avatar-size-md);height:var(--instui-component-avatar-size-md);background:var(--instui-component-avatar-background-color);color:var(--instui-component-avatar-blue-text-color);border:var(--instui-component-avatar-border-width-sm) solid var(--instui-component-avatar-border-color);font-family:var(--instui-component-avatar-font-family);font-size:var(--instui-component-avatar-font-size-md);font-weight:var(--instui-component-avatar-font-weight);border-radius:50%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.instui-avatar.-shape-rectangle{border-radius:var(--instui-component-avatar-rectangle-radius)}.instui-avatar.-size-sm{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-2xs{width:var(--instui-component-avatar-size2xs);height:var(--instui-component-avatar-size2xs);font-size:var(--instui-component-avatar-font-size2xs)}.instui-avatar.-size-xs{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-lg{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-xl{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-size-2xl{width:var(--instui-component-avatar-size2xl);height:var(--instui-component-avatar-size2xl);font-size:var(--instui-component-avatar-font-size2xl)}.instui-avatar.-color-ash{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-ash.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-blue{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-blue.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-green{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-green.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-grey{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-grey.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}.instui-avatar.-color-orange{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-orange.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-red{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-red.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-ai{background:linear-gradient(to bottom, var(--instui-component-avatar-ai-top-gradient-color), var(--instui-component-avatar-ai-bottom-gradient-color));color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color);color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-show-border{border-width:var(--instui-component-avatar-border-width-md);border-style:solid;border-color:var(--instui-component-avatar-border-color)}.instui-avatar>img{object-fit:cover;border-radius:inherit;block-size:100%;inline-size:100%}.instui-avatar.-size-small{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-x-small{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-large{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-x-large{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-color-accent1{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-accent1.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-accent2{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-accent2.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-accent3{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-accent3.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-accent4{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-accent4.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-accent5{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-accent5.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-accent6{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-accent6.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}.instui-tabs{background:var(--instui-component-tabs-default-background);flex-direction:column;display:flex}@scope(.instui-tabs){:scope>.list{flex-flow:wrap;width:100%;display:flex}:scope.-overflow-scroll>.list{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}:scope.-overflow-scroll>.list::-webkit-scrollbar{display:none}.tab{-webkit-appearance:none;appearance:none;color:var(--instui-component-tabs-tab-default-text-color);font-family:var(--instui-component-tabs-tab-font-family);font-size:var(--instui-component-tabs-tab-font-size);font-weight:var(--instui-component-tabs-tab-font-weight);cursor:pointer;user-select:none;white-space:nowrap;z-index:1;margin-bottom:calc(-1 * var(--instui-component-tabs-panel-border-width));background:0 0;border:0;border-bottom:.25rem solid #0000;padding:1rem 1.25rem;line-height:1;position:relative}.tab:hover:not(.-selected):not(.-disabled):not([aria-selected=true]):not([aria-disabled=true]){border-bottom-color:var(--instui-component-tabs-tab-default-hover-border-color)}.tab.-selected,.tab[aria-selected=true]{border-bottom-color:var(--instui-component-tabs-tab-default-selected-border-color)}.tab.-disabled,.tab[aria-disabled=true],.tab:disabled{opacity:.5;cursor:default;font-weight:400}:scope.-variant-secondary .tab{line-height:var(--instui-component-tabs-tab-line-height);color:var(--instui-component-tabs-tab-secondary-text-color);margin-inline-end:.2em;margin-bottom:calc(-1 * var(--instui-component-tabs-panel-border-width));border:var(--instui-component-tabs-panel-border-width) solid transparent;border-radius:.1875rem .1875rem 0 0;padding:.75rem 1rem}:scope.-variant-secondary .tab:first-of-type{margin-inline-start:0}:scope.-variant-secondary .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=true]):not([aria-disabled=true]){background:var(--instui-component-tabs-tab-secondary-selected-background);border-color:var(--instui-component-tabs-tab-secondary-selected-border-color);color:var(--instui-component-tabs-tab-secondary-selected-text-color)}:scope.-variant-secondary .tab.-selected,:scope.-variant-secondary .tab[aria-selected=true]{background:var(--instui-component-tabs-tab-secondary-selected-background);border-color:var(--instui-component-tabs-tab-secondary-selected-border-color);border-bottom-color:var(--instui-component-tabs-tab-secondary-selected-background);color:var(--instui-component-tabs-tab-secondary-selected-text-color)}:scope>.panel{box-sizing:border-box;border-top:var(--instui-component-tabs-panel-border-width) solid var(--instui-component-tabs-panel-border-color);background:var(--instui-component-tabs-panel-background);color:var(--instui-component-tabs-panel-text-color);font-family:var(--instui-component-tabs-panel-font-family);font-size:var(--instui-component-tabs-panel-font-size);font-weight:var(--instui-component-tabs-panel-font-weight);line-height:var(--instui-component-tabs-panel-line-height);padding:var(--instui-spacing-space-sm) var(--instui-spacing-space-md) var(--instui-spacing-space-md)}:scope>.panel[hidden]{display:none}}.instui-metric{gap:var(--instui-component-metric-gap-texts);padding:0 var(--instui-component-metric-padding-horizontal);flex-direction:column;display:inline-flex}@scope(.instui-metric){:scope>.value{color:var(--instui-component-metric-value-color);font-family:var(--instui-component-metric-value-font-family);font-size:var(--instui-component-metric-value-font-size);font-weight:var(--instui-component-metric-value-font-weight);line-height:var(--instui-component-metric-value-line-height)}:scope>.label{color:var(--instui-component-metric-label-color);font-family:var(--instui-component-metric-label-font-family);font-size:var(--instui-component-metric-label-font-size);font-weight:var(--instui-component-metric-label-font-weight);line-height:var(--instui-component-metric-label-line-height)}}.instui-metric.-text-align-start{text-align:start;align-items:flex-start}.instui-metric.-text-align-center{text-align:center;align-items:center}.instui-metric.-text-align-end{text-align:end;align-items:flex-end}.instui-byline{align-items:center;gap:var(--instui-component-byline-figure-margin);background:var(--instui-component-byline-background);color:var(--instui-component-byline-color);font-family:var(--instui-component-byline-font-family);display:flex}.instui-byline.-align-content-top{align-items:flex-start}.instui-byline.-align-content-center{align-items:center}.instui-byline.-size-sm{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-md{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-lg{max-width:var(--instui-component-byline-large,40rem)}@scope(.instui-byline){:scope>[class*=-icon-]{line-height:1}.title{margin:0 0 var(--instui-component-byline-title-margin);font-size:var(--instui-component-byline-title-font-size);font-weight:var(--instui-component-byline-title-font-weight);line-height:var(--instui-component-byline-title-line-height)}.description{font-size:var(--instui-component-byline-description-font-size);font-weight:var(--instui-component-byline-description-font-weight);line-height:var(--instui-component-byline-description-line-height)}}.instui-byline.-size-small{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-medium{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-large{max-width:var(--instui-component-byline-large,40rem)}.instui-img{--pantoken-img-filter:none;block-size:auto;max-inline-size:100%;filter:var(--pantoken-img-filter);transition:filter var(--instui-component-img-effect-transition-duration) ease;display:inline-block}.instui-img.-display-block{display:block}.instui-img.-constrain-cover{object-fit:cover;block-size:100%;inline-size:100%}.instui-img.-constrain-contain{object-fit:contain;block-size:100%;inline-size:100%}.instui-img.-with-grayscale{--pantoken-img-filter:grayscale(1)}.instui-img.-with-blur{--pantoken-img-filter:blur(var(--instui-component-img-image-blur-amount))}.instui-img.-with-grayscale.-with-blur{--pantoken-img-filter:grayscale(1) blur(var(--instui-component-img-image-blur-amount))}.instui-table{border-collapse:collapse;background:var(--instui-component-table-background);width:100%;color:var(--instui-component-table-color);font-family:var(--instui-component-table-font-family);font-size:var(--instui-component-table-font-size)}.instui-table caption{text-align:start;padding:var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal);color:var(--instui-component-table-col-header-color);font-weight:var(--instui-component-table-head-font-weight)}.instui-table.-layout-fixed{table-layout:fixed}.instui-table thead{background:var(--instui-component-table-head-background)}.instui-table th{text-align:start;background:var(--instui-component-table-col-header-background);color:var(--instui-component-table-col-header-color);font-weight:var(--instui-component-table-head-font-weight);line-height:var(--instui-component-table-col-header-line-height);padding:var(--instui-component-table-col-header-padding-vertical) var(--instui-component-table-col-header-padding-horizontal)}.instui-table thead th{border-bottom:var(--instui-border-width-md) solid var(--instui-component-table-row-border-color)}.instui-table tbody th,.instui-table th[scope=row]{background:var(--instui-component-table-row-header-background);color:var(--instui-component-table-row-header-color);font-weight:var(--instui-component-table-row-header-font-weight);line-height:var(--instui-component-table-row-header-line-height);padding:var(--instui-component-table-row-header-padding-vertical) var(--instui-component-table-row-header-padding-horizontal)}.instui-table td{color:var(--instui-component-table-cell-color);line-height:var(--instui-component-table-cell-line-height);padding:var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal)}.instui-table tbody td,.instui-table tbody th{border:0}.instui-table tbody tr{border-bottom:var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color)}.instui-table.-hover tbody tr{border-inline:.1875rem solid #0000}.instui-table.-hover tbody tr:hover{border-inline-color:var(--instui-component-table-row-hover-border-color)}.instui-table.-layout-stacked thead{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-table.-layout-stacked,.instui-table.-layout-stacked tbody,.instui-table.-layout-stacked tr,.instui-table.-layout-stacked td,.instui-table.-layout-stacked th{width:auto;display:block}.instui-table.-layout-stacked tbody tr{padding:var(--instui-component-table-row-padding-vertical) var(--instui-component-table-row-padding-horizontal)}.instui-table.-layout-stacked tbody td[data-label]:before,.instui-table.-layout-stacked tbody th[data-label]:before{content:attr(data-label);font-weight:var(--instui-component-table-head-font-weight);color:var(--instui-component-table-col-header-color);display:block}.instui-link{align-items:center;gap:var(--instui-component-link-gap-md);color:var(--instui-component-link-text-color);font-family:var(--instui-component-link-font-family);font-size:var(--instui-component-link-font-size-md);font-weight:var(--instui-component-link-font-weight);line-height:var(--instui-component-link-line-height-md);text-decoration:var(--instui-component-link-text-decoration-outside-text);cursor:pointer;display:inline-flex}.instui-link:hover{color:var(--instui-component-link-text-hover-color)}.instui-link[aria-disabled=true]{color:var(--instui-component-link-text-disabled-color);cursor:not-allowed}.instui-link.-size-sm{gap:var(--instui-component-link-gap-sm);font-size:var(--instui-component-link-font-size-sm);line-height:var(--instui-component-link-line-height-sm)}.instui-link.-size-lg{gap:var(--instui-component-link-gap-lg);font-size:var(--instui-component-link-font-size-lg);line-height:var(--instui-component-link-line-height-lg)}.instui-link.-color-inverse{color:var(--instui-component-link-on-color-text-color)}.instui-link.-color-inverse:hover{color:var(--instui-component-link-on-color-text-hover-color)}.instui-link.-color-inverse[aria-disabled=true]{color:var(--instui-component-link-on-color-text-disabled-color)}.instui-link.-inline{font-family:var(--instui-component-link-inline-link-medium-font-family);font-size:var(--instui-component-link-inline-link-medium-font-size);font-weight:var(--instui-component-link-inline-link-medium-font-weight);line-height:var(--instui-component-link-inline-link-medium-line-height);text-decoration:var(--instui-component-link-text-decoration-within-text);display:inline}.instui-link.-inline.-sm{font-size:var(--instui-component-link-inline-link-small-font-size);font-weight:var(--instui-component-link-inline-link-small-font-weight);line-height:var(--instui-component-link-inline-link-small-line-height)}.instui-link.-inline.-lg{font-size:var(--instui-component-link-inline-link-large-font-size);font-weight:var(--instui-component-link-inline-link-large-font-weight);line-height:var(--instui-component-link-inline-link-large-line-height)}.instui-link.-unstyled{color:var(--instui-component-link-unstyled-text-color);text-decoration:none}.instui-link.-size-small{gap:var(--instui-component-link-gap-sm);font-size:var(--instui-component-link-font-size-sm);line-height:var(--instui-component-link-line-height-sm)}.instui-link.-size-large{gap:var(--instui-component-link-gap-lg);font-size:var(--instui-component-link-font-size-lg);line-height:var(--instui-component-link-line-height-lg)}.instui-list{color:var(--instui-component-list-item-color);font-family:var(--instui-component-list-item-font-family);font-size:var(--instui-component-list-item-font-size-medium);font-weight:var(--instui-component-list-item-font-weight);line-height:var(--instui-component-list-item-line-height);padding-inline-start:var(--instui-component-list-list-padding)}.instui-list>li{margin:var(--instui-component-list-item-spacing-medium) 0}.instui-list.-size-sm{font-size:var(--instui-component-list-item-font-size-small)}.instui-list.-size-sm>li{margin:var(--instui-component-list-item-spacing-small) 0}.instui-list.-size-lg{font-size:var(--instui-component-list-item-font-size-large)}.instui-list.-size-lg>li{margin:var(--instui-component-list-item-spacing-large) 0}.instui-list.-ordered>li::marker{font-weight:var(--instui-component-list-ordered-number-font-weight)}.instui-list.-ordered>li{padding-inline-start:var(--instui-component-list-ordered-number-margin)}.instui-list.-delimiter-solid>li+li{border-top:var(--instui-component-list-item-delimiter-solid-border-width) var(--instui-component-list-item-delimiter-solid-border-style) var(--instui-component-list-item-delimiter-solid-border-color);padding-top:var(--instui-component-list-item-spacing-medium)}.instui-list.-delimiter-dashed>li+li{border-top:var(--instui-component-list-item-delimiter-dashed-border-width) var(--instui-component-list-item-delimiter-dashed-border-style) var(--instui-component-list-item-delimiter-dashed-border-color);padding-top:var(--instui-component-list-item-spacing-medium)}.instui-list.-unstyled{padding-inline-start:0;list-style:none}.instui-list.-inline{align-items:center;gap:var(--instui-component-list-item-spacing-medium);flex-wrap:wrap;padding-inline-start:0;list-style:none;display:flex}.instui-list.-inline>li{margin:0}.instui-list.-size-small{font-size:var(--instui-component-list-item-font-size-small)}.instui-list.-size-small>li{margin:var(--instui-component-list-item-spacing-small) 0}.instui-list.-size-large{font-size:var(--instui-component-list-item-font-size-large)}.instui-list.-size-large>li{margin:var(--instui-component-list-item-spacing-large) 0}.instui-icon{display:inline-flex}[class*=-icon-]:before{content:"";vertical-align:-.125em;block-size:1em;inline-size:1em;-webkit-mask:var(--pantoken-glyph) center / contain no-repeat;mask:var(--pantoken-glyph) center / contain no-repeat;background:currentColor;flex:none;display:inline-block}.instui-checkbox{align-items:center;gap:var(--instui-component-checkbox-gap);color:var(--instui-component-checkbox-label-base-color);font-family:var(--instui-component-checkbox-font-family);font-size:var(--instui-component-checkbox-font-size-md);font-weight:var(--instui-component-checkbox-font-weight);line-height:var(--instui-component-checkbox-line-height);display:inline-flex}.instui-checkbox.-label-placement-end{flex-direction:row}.instui-checkbox.-label-placement-start{flex-direction:row-reverse}.instui-checkbox.-label-placement-top{flex-direction:column-reverse;align-items:flex-start}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]{-webkit-appearance:none;appearance:none;width:var(--instui-component-checkbox-control-size-md);height:var(--instui-component-checkbox-control-size-md);margin-block:var(--instui-component-checkbox-control-vertical-margin);border:var(--instui-component-checkbox-border-width) solid var(--instui-component-checkbox-border-color);border-radius:var(--instui-component-checkbox-border-radius);background:var(--instui-component-checkbox-background-color);cursor:pointer;--pantoken-cb-glyph:var(--instui-icon-check) center / contain no-repeat;flex:none;place-content:center;transition:background-color .15s,border-color .15s;display:inline-grid}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:before{content:"";background:oklch(from var(--instui-component-checkbox-background-checked-color) clamp(0, (.62 - l) * infinity, 1) 0 0);width:.75em;height:.75em;-webkit-mask:var(--pantoken-cb-glyph);mask:var(--pantoken-cb-glyph);transition:transform .1s;transform:scale(0)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-border-hover-color);background:var(--instui-component-checkbox-background-hover-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{border-color:var(--instui-component-checkbox-border-checked-color);background:var(--instui-component-checkbox-background-checked-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked:before,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate:before{transform:scale(1)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{--pantoken-cb-glyph:var(--instui-icon-minus) center / contain no-repeat}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:disabled{border-color:var(--instui-component-checkbox-border-disabled-color);background:var(--instui-component-checkbox-background-disabled-color);cursor:not-allowed}.instui-checkbox:has(input:disabled){color:var(--instui-component-checkbox-label-disabled-color)}.instui-checkbox:hover{color:var(--instui-component-checkbox-label-hover-color)}.instui-checkbox.-size-sm{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-sm input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-lg{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-lg input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]{border-color:var(--instui-component-checkbox-error-border-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-error-border-hover-color)}.instui-checkbox.-readonly{color:var(--instui-component-checkbox-label-readonly-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-readonly input[type=checkbox]{border-color:var(--instui-component-checkbox-border-readonly-color);background:var(--instui-component-checkbox-background-readonly-color)}@scope(.instui-checkbox){:scope.-required .asterisk{color:var(--instui-component-checkbox-asterisk-color)}}.instui-checkbox.-variant-toggle input[type=checkbox]{--pantoken-toggle-h:var(--instui-size-choice-control-height-md);--pantoken-toggle-w:var(--instui-component-radio-input-toggle-medium-height);--pantoken-toggle-bw:var(--instui-border-width-sm);--pantoken-toggle-inset:calc(var(--pantoken-toggle-bw) * 3);--pantoken-toggle-handle:calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);-webkit-appearance:none;appearance:none;width:var(--pantoken-toggle-w);height:var(--pantoken-toggle-h);border-radius:var(--pantoken-toggle-h);box-shadow:inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);background:var(--instui-color-background-muted);cursor:pointer;border:0;transition:background-color .15s;position:relative}.instui-checkbox.-variant-toggle input[type=checkbox]:before{content:"";box-sizing:border-box;width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);border:var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);background:var(--instui-component-radio-input-toggle-handle-text);top:50%;border-radius:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:after{content:"";width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);background:var(--instui-color-text-muted);-webkit-mask:var(--instui-icon-x) center / 58% no-repeat;mask:var(--instui-icon-x) center / 58% no-repeat;top:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked{background:var(--instui-component-radio-input-toggle-background-success)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:before{border-color:var(--instui-component-radio-input-toggle-background-success);inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:after{background:var(--instui-component-radio-input-toggle-background-success);-webkit-mask:var(--instui-icon-check) center / 58% no-repeat;mask:var(--instui-icon-check) center / 58% no-repeat;inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-size-small{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-small input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-large{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-large input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}.instui-radio{align-items:center;gap:var(--instui-component-radio-input-gap);color:var(--instui-component-radio-input-label-base-color);font-family:var(--instui-component-radio-input-font-family);font-size:var(--instui-component-radio-input-font-size-md);font-weight:var(--instui-component-radio-input-font-weight);line-height:var(--instui-component-radio-input-line-height-md);display:inline-flex}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]{-webkit-appearance:none;appearance:none;width:var(--instui-component-radio-input-control-size-md);height:var(--instui-component-radio-input-control-size-md);margin-block:var(--instui-component-radio-input-control-vertical-margin);border:var(--instui-component-radio-input-border-width) solid var(--instui-component-radio-input-border-color);background:var(--instui-component-radio-input-background-color);cursor:pointer;border-radius:50%;flex:none;place-content:center;transition:border-color .15s,background-color .15s;display:inline-grid}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:before{content:"";width:calc(var(--instui-component-radio-input-control-size-md) - 2 * var(--instui-component-radio-input-checked-inset-md));height:calc(var(--instui-component-radio-input-control-size-md) - 2 * var(--instui-component-radio-input-checked-inset-md));background:var(--instui-component-radio-input-border-selected-color);border-radius:50%;transition:transform .1s;transform:scale(0)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:hover{border-color:var(--instui-component-radio-input-border-hover-color);background:var(--instui-component-radio-input-background-hover-color)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:checked{border-color:var(--instui-component-radio-input-border-selected-color)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:checked:before{transform:scale(1)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:disabled{border-color:var(--instui-component-radio-input-border-disabled-color);background:var(--instui-component-radio-input-background-disabled-color);cursor:not-allowed}.instui-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled){color:var(--instui-component-radio-input-label-disabled-color)}.instui-radio:not(.-variant-toggle):not(.-toggle):hover{color:var(--instui-component-radio-input-label-hover-color)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-sm{font-size:var(--instui-component-radio-input-font-size-sm);line-height:var(--instui-component-radio-input-line-height-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=radio]{width:var(--instui-component-radio-input-control-size-sm);height:var(--instui-component-radio-input-control-size-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm));height:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm))}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-lg{font-size:var(--instui-component-radio-input-font-size-lg);line-height:var(--instui-component-radio-input-line-height-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=radio]{width:var(--instui-component-radio-input-control-size-lg);height:var(--instui-component-radio-input-control-size-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg));height:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg))}.instui-radio:not(.-variant-toggle):not(.-toggle).-readonly{color:var(--instui-component-radio-input-label-readonly-color)}.instui-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=radio]{border-color:var(--instui-component-radio-input-border-readonly-color);background:var(--instui-component-radio-input-background-readonly-color)}.instui-radio.-variant-toggle{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success);height:var(--instui-component-radio-input-toggle-medium-height);border-radius:var(--instui-component-radio-input-toggle-border-radius);color:var(--instui-component-radio-input-label-base-color);font-size:var(--instui-component-radio-input-toggle-medium-font-size);text-transform:uppercase;white-space:nowrap;cursor:pointer;background:0 0;justify-content:center;gap:0;padding-inline:.875rem;line-height:1;transition:background-color .15s,color .15s;position:relative}.instui-radio.-variant-toggle input[type=radio]{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-radio.-variant-toggle.-context-off{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-off)}.instui-radio.-variant-toggle.-context-success{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success)}.instui-radio.-variant-toggle.-context-danger{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-danger)}.instui-radio.-variant-toggle.-context-warning{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-warning)}.instui-radio.-variant-toggle:has(input:checked){background:var(--pantoken-rt-fill);color:var(--instui-component-radio-input-toggle-handle-text);box-shadow:var(--instui-elevation-depth1)}.instui-radio.-variant-toggle:has(input:focus-visible){text-decoration:underline}.instui-radio.-variant-toggle:has(input:focus-visible):before{content:"";border:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);border-radius:calc(var(--instui-component-radio-input-toggle-border-radius) + .0625rem);pointer-events:none;position:absolute;inset:-.25rem}.instui-radio.-variant-toggle:has(input:disabled){opacity:.5;cursor:not-allowed}.instui-radio.-variant-toggle.-size-sm{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-variant-toggle.-size-lg{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-small{font-size:var(--instui-component-radio-input-font-size-sm);line-height:var(--instui-component-radio-input-line-height-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-small input[type=radio]{width:var(--instui-component-radio-input-control-size-sm);height:var(--instui-component-radio-input-control-size-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-small input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm));height:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm))}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-large{font-size:var(--instui-component-radio-input-font-size-lg);line-height:var(--instui-component-radio-input-line-height-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-large input[type=radio]{width:var(--instui-component-radio-input-control-size-lg);height:var(--instui-component-radio-input-control-size-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-large input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg));height:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg))}.instui-radio.-variant-toggle.-size-small{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-variant-toggle.-size-large{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}.instui-radio.-toggle{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success);height:var(--instui-component-radio-input-toggle-medium-height);border-radius:var(--instui-component-radio-input-toggle-border-radius);color:var(--instui-component-radio-input-label-base-color);font-size:var(--instui-component-radio-input-toggle-medium-font-size);text-transform:uppercase;white-space:nowrap;cursor:pointer;background:0 0;justify-content:center;gap:0;padding-inline:.875rem;line-height:1;transition:background-color .15s,color .15s;position:relative}.instui-radio.-toggle input[type=radio]{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-radio.-toggle.-context-off{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-off)}.instui-radio.-toggle.-context-success{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success)}.instui-radio.-toggle.-context-danger{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-danger)}.instui-radio.-toggle.-context-warning{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-warning)}.instui-radio.-toggle:has(input:checked){background:var(--pantoken-rt-fill);color:var(--instui-component-radio-input-toggle-handle-text);box-shadow:var(--instui-elevation-depth1)}.instui-radio.-toggle:has(input:focus-visible){text-decoration:underline}.instui-radio.-toggle:has(input:focus-visible):before{content:"";border:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);border-radius:calc(var(--instui-component-radio-input-toggle-border-radius) + .0625rem);pointer-events:none;position:absolute;inset:-.25rem}.instui-radio.-toggle:has(input:disabled){opacity:.5;cursor:not-allowed}.instui-radio.-toggle.-size-sm{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-toggle.-size-lg{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}.instui-radio.-toggle.-size-small{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-toggle.-size-large{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}@keyframes pantoken-spinner-rotate{to{transform:rotate(360deg)}}.instui-spinner{width:var(--instui-component-spinner-spinner-size-md);height:var(--instui-component-spinner-spinner-size-md);border:var(--instui-component-spinner-stroke-width-md) solid var(--instui-component-spinner-track-color);border-top-color:var(--instui-component-spinner-color);border-radius:50%;animation:.8s linear infinite pantoken-spinner-rotate;display:inline-block}.instui-spinner.-size-xs{width:var(--instui-component-spinner-spinner-size-xs);height:var(--instui-component-spinner-spinner-size-xs);border-width:var(--instui-component-spinner-stroke-width-xs)}.instui-spinner.-size-sm{width:var(--instui-component-spinner-spinner-size-sm);height:var(--instui-component-spinner-spinner-size-sm);border-width:var(--instui-component-spinner-stroke-width-sm)}.instui-spinner.-size-lg{width:var(--instui-component-spinner-spinner-size-lg);height:var(--instui-component-spinner-spinner-size-lg);border-width:var(--instui-component-spinner-stroke-width-lg)}.instui-spinner.-color-inverse{border-top-color:var(--instui-component-spinner-inverse-color)}.instui-spinner.-size-x-small{width:var(--instui-component-spinner-spinner-size-xs);height:var(--instui-component-spinner-spinner-size-xs);border-width:var(--instui-component-spinner-stroke-width-xs)}.instui-spinner.-size-small{width:var(--instui-component-spinner-spinner-size-sm);height:var(--instui-component-spinner-spinner-size-sm);border-width:var(--instui-component-spinner-stroke-width-sm)}.instui-spinner.-size-large{width:var(--instui-component-spinner-spinner-size-lg);height:var(--instui-component-spinner-spinner-size-lg);border-width:var(--instui-component-spinner-stroke-width-lg)}.instui-progress{width:100%;height:var(--instui-component-progress-bar-medium-height);background:var(--instui-component-progress-bar-track-color);border:var(--instui-component-progress-bar-track-bottom-border-width) solid var(--instui-component-progress-bar-border-color);border-radius:var(--instui-component-progress-bar-border-radius);display:block;position:relative;overflow:hidden}.instui-progress:after{content:"";height:var(--instui-component-progress-bar-track-bottom-border-width);background:var(--instui-component-progress-bar-track-bottom-border-color);pointer-events:none;inset-inline:0;position:absolute;bottom:0}.instui-progress.-size-xs{height:var(--instui-component-progress-bar-x-small-height)}.instui-progress.-size-sm{height:var(--instui-component-progress-bar-small-height)}.instui-progress.-size-lg{height:var(--instui-component-progress-bar-large-height)}@scope(.instui-progress){:scope>.bar{background:var(--instui-color-background-brand);border-radius:var(--instui-component-progress-bar-border-radius);height:100%}:scope.-should-animate>.bar{transition:width .5s}}.instui-progress.-color-brand .bar{background:var(--instui-color-background-brand)}.instui-progress.-color-info .bar{background:var(--instui-color-background-info)}.instui-progress.-color-success .bar{background:var(--instui-color-background-success)}.instui-progress.-color-warning .bar{background:var(--instui-color-background-warning)}.instui-progress.-color-danger .bar{background:var(--instui-color-background-error)}.instui-progress.-color-primary-inverse{background:var(--instui-component-progress-bar-track-color-inverse);border-color:var(--instui-component-progress-bar-border-color-inverse);color:var(--instui-component-progress-bar-text-color-inverse)}.instui-progress.-color-primary-inverse:after{background:var(--instui-component-progress-bar-track-bottom-border-color-inverse)}.instui-progress.-color-primary-inverse .bar{background:var(--instui-component-progress-bar-meter-color-brand-inverse)}.instui-progress-value{padding:0 var(--instui-component-progress-bar-value-padding);color:var(--instui-component-progress-bar-text-color);font-family:var(--instui-component-progress-bar-font-family);font-size:var(--instui-component-progress-bar-medium-value-font-size);font-weight:var(--instui-component-progress-bar-font-weight);line-height:var(--instui-component-progress-bar-line-height)}.instui-progress.-color-inverse~.instui-progress-value,.instui-progress-value.-color-inverse{color:var(--instui-component-progress-bar-text-color-inverse)}.instui-progress.-size-x-small{height:var(--instui-component-progress-bar-x-small-height)}.instui-progress.-size-small{height:var(--instui-component-progress-bar-small-height)}.instui-progress.-size-large{height:var(--instui-component-progress-bar-large-height)}.instui-progress.-meter-color-brand .bar{background:var(--instui-color-background-brand)}.instui-progress.-meter-color-info .bar{background:var(--instui-color-background-info)}.instui-progress.-meter-color-success .bar{background:var(--instui-color-background-success)}.instui-progress.-meter-color-warning .bar,.instui-progress.-meter-color-alert .bar{background:var(--instui-color-background-warning)}.instui-progress.-meter-color-danger .bar{background:var(--instui-color-background-error)}.instui-menu{min-width:var(--instui-component-menu-min-width);max-width:var(--instui-component-menu-max-width);background:var(--instui-component-menu-item-background);border:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);border-radius:var(--instui-border-radius-md);padding:var(--instui-spacing-space-xs) 0}@scope(.instui-menu){:scope>.item{padding:var(--instui-component-menu-item-padding-vertical) var(--instui-component-menu-item-padding-horizontal);color:var(--instui-component-menu-item-label-color);font-family:var(--instui-component-menu-item-font-family);font-size:var(--instui-component-menu-item-font-size);font-weight:var(--instui-component-menu-item-font-weight);line-height:var(--instui-component-menu-item-line-height);cursor:pointer;display:block}:scope>.item.-disabled{opacity:var(--instui-opacity-disabled);pointer-events:none;cursor:not-allowed}:scope>.item:hover,:scope>.item.-highlighted{background:var(--instui-component-menu-item-highlighted-background);color:var(--instui-component-menu-item-highlighted-label-color)}:scope>.item.-active,:scope>.item[aria-checked=true]{background:var(--instui-component-menu-item-active-background);color:var(--instui-component-menu-item-active-label-color)}:scope>.item.-active:hover,:scope>.item[aria-checked=true]:hover{background:var(--instui-component-menu-item-selected-highlighted-background)}.item-info{color:var(--instui-component-menu-item-label-info-color)}:scope>.item:hover .item-info,:scope>.item.-highlighted .item-info{color:var(--instui-component-menu-item-highlighted-label-info-color)}:scope>.group{padding:var(--instui-component-menu-group-padding-vertical) var(--instui-component-menu-group-padding-horizontal);background:var(--instui-component-menu-group-background);color:var(--instui-component-menu-group-color);font-family:var(--instui-component-menu-group-font-family);font-size:var(--instui-component-menu-group-font-size);font-weight:var(--instui-component-menu-group-font-weight)}:scope>.separator{height:var(--instui-component-menu-separator-height);background:var(--instui-component-menu-separator-background);margin:var(--instui-component-menu-separator-margin-vertical) var(--instui-component-menu-separator-margin-horizontal)}}.instui-modal{max-width:var(--instui-component-modal-medium-max-width);background:var(--instui-component-modal-background-color);color:var(--instui-component-modal-text-color);border:var(--instui-component-modal-border-width) solid var(--instui-component-modal-border-color);border-radius:var(--instui-component-modal-border-radius);font-family:var(--instui-component-modal-font-family);box-shadow:var(--instui-elevation-topmost);overflow:hidden}dialog.instui-modal{margin:auto;padding:0}dialog.instui-modal::backdrop{background:var(--instui-component-mask-background-color)}dialog.instui-modal.-blur::backdrop{backdrop-filter:blur(.5rem)}.instui-modal.-size-sm{max-width:var(--instui-component-modal-small-max-width)}.instui-modal.-size-lg{max-width:var(--instui-component-modal-large-max-width)}.instui-modal.-size-auto{max-width:none;min-width:var(--instui-component-modal-auto-min-width)}.instui-modal.-size-fullscreen{border-radius:0;width:auto;max-width:none;height:auto;max-height:none;margin:0;position:fixed;inset:0}.instui-modal.-overflow-fit{max-block-size:calc(100dvh - var(--instui-spacing-space-xl) * 2);flex-direction:column;display:flex}.instui-modal.-color-inverse{background:var(--instui-component-modal-inverse-background-color);color:var(--instui-component-modal-inverse-text-color);border-color:var(--instui-component-modal-inverse-border-color)}@scope(.instui-modal){:scope.-overflow-fit>.body{overflow-y:auto}:scope>.header{padding:var(--instui-component-modal-header-padding);background:var(--instui-component-modal-header-background-color);border-bottom:var(--instui-component-modal-header-border-width) solid var(--instui-component-modal-header-border-color)}:scope>.body{padding:var(--instui-component-modal-body-padding)}:scope>.body:has(>img){padding:0}:scope>.body:has(>img) img{width:100%;display:block}:scope>.footer{padding:var(--instui-component-modal-footer-padding);background:var(--instui-component-modal-footer-background-color);border-top:var(--instui-component-modal-footer-border-width) solid var(--instui-component-modal-footer-border-color);border-radius:0 0 var(--instui-component-modal-footer-border-radius) var(--instui-component-modal-footer-border-radius)}:scope.-density-compact>.header{padding:var(--instui-component-modal-header-padding-compact)}:scope.-density-compact>.body{padding:var(--instui-component-modal-body-padding-compact)}:scope.-density-compact>.footer{padding:var(--instui-component-modal-footer-padding-compact)}:scope.-color-inverse>.header{background:var(--instui-component-modal-header-inverse-background-color);border-bottom-color:var(--instui-component-modal-header-inverse-border-color)}:scope.-color-inverse>.body{background:var(--instui-component-modal-body-inverse-background-color)}:scope.-color-inverse>.footer{background:var(--instui-component-modal-footer-inverse-background-color);border-top-color:var(--instui-component-modal-footer-inverse-border-color)}}.instui-modal.-size-small{max-width:var(--instui-component-modal-small-max-width)}.instui-modal.-size-large{max-width:var(--instui-component-modal-large-max-width)}.instui-breadcrumb{align-items:center;gap:var(--instui-component-breadcrumb-gap-md);font-family:var(--instui-component-link-font-family);font-size:var(--instui-component-link-font-size-md);flex-wrap:wrap;display:flex}.instui-breadcrumb.-size-sm{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-lg{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}.instui-breadcrumb.-size-sm .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}.instui-breadcrumb.-size-lg .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}@scope(.instui-breadcrumb){:scope a{color:var(--instui-component-link-text-color);text-decoration:none}:scope a [class*=-icon-]{line-height:1}:scope a:hover{color:var(--instui-component-link-text-hover-color);text-decoration:underline}:scope>.item:not(:last-child):after{content:"/";color:var(--instui-color-text-muted);margin-inline-start:var(--instui-component-breadcrumb-gap-md)}}.instui-breadcrumb.-size-small{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-large{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}.instui-breadcrumb.-size-small .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}.instui-breadcrumb.-size-large .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}.instui-billboard{text-align:center;background:var(--instui-component-billboard-background-color);padding:var(--instui-component-billboard-padding-medium);margin:var(--instui-component-billboard-medium-margin);font-family:var(--instui-component-billboard-font-family);color:var(--instui-color-text-base);display:block}.instui-billboard.-size-sm{padding:var(--instui-component-billboard-padding-small)}.instui-billboard.-size-md,.instui-billboard.-size-medium{padding:var(--instui-component-billboard-padding-medium)}.instui-billboard.-size-lg,.instui-billboard.-size-large{padding:var(--instui-component-billboard-padding-large);margin:var(--instui-component-billboard-large-margin)}.instui-billboard.-size-sm .message{font-size:var(--instui-font-size-text-sm)}.instui-billboard.-size-md .message,.instui-billboard.-size-medium .message{font-size:var(--instui-font-size-text-base)}.instui-billboard.-size-lg .message,.instui-billboard.-size-large .message{font-size:1.375rem}.instui-billboard.-clickable{cursor:pointer;border:var(--instui-component-billboard-button-border-width) var(--instui-component-billboard-button-border-style) transparent;border-radius:var(--instui-component-billboard-button-border-radius)}.instui-billboard.-clickable:hover{border-style:dashed;border-color:var(--instui-color-text-base)}.instui-billboard.-clickable:focus{border-style:solid;border-color:var(--instui-color-text-base);outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-billboard.-clickable:focus-visible{outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-billboard.-clickable:active{background:var(--instui-component-billboard-clickable-active-bg);border-style:solid;border-color:var(--instui-color-text-base)}.instui-billboard>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard>.hero[class*=-icon-]{line-height:1}.instui-billboard.-size-sm>.hero,.instui-billboard.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}.instui-billboard.-size-md>.hero,.instui-billboard.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard.-size-lg>.hero,.instui-billboard.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}@scope(.instui-billboard){:scope>.hero{color:var(--instui-color-text-base);font-size:var(--instui-component-icon-illu-md);justify-content:center;margin-block-end:var(--instui-spacing-space-sm);display:inline-flex}:scope>.hero[class*=-icon-]{line-height:1}:scope.-size-sm>.hero{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-md>.hero,:scope.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}:scope.-size-lg>.hero,:scope.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-sm>.hero[class*=-icon-],:scope.-size-small>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-md>.hero[class*=-icon-],:scope.-size-medium>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-md)}:scope.-size-lg>.hero[class*=-icon-],:scope.-size-large>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-lg)}:scope>.heading{margin:0 0 var(--instui-spacing-space-xs);color:var(--instui-color-text-base);font-weight:700;font-size:var(--instui-component-text-font-size-x-x-large)}:scope>.message{color:var(--instui-color-text-base);font-size:var(--instui-font-size-text-base)}:scope.-clickable:hover>.hero{color:var(--instui-component-link-text-color)}:scope.-clickable:active>.hero{color:var(--instui-component-link-on-color-text-color)}}.instui-billboard.-size-small{padding:var(--instui-component-billboard-padding-small)}.instui-billboard.-size-medium,.instui-billboard.-size-medium{padding:var(--instui-component-billboard-padding-medium)}.instui-billboard.-size-large{padding:var(--instui-component-billboard-padding-large);margin:var(--instui-component-billboard-large-margin)}.instui-billboard.-size-small .message{font-size:var(--instui-font-size-text-sm)}.instui-billboard.-size-medium .message,.instui-billboard.-size-medium .message{font-size:var(--instui-font-size-text-base)}.instui-billboard.-size-large .message{font-size:1.375rem}.instui-billboard.-size-small>.hero,.instui-billboard.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}.instui-billboard.-size-medium>.hero,.instui-billboard.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard.-size-large>.hero,.instui-billboard.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-medium>.hero,:scope.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}:scope.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-small>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-medium>.hero[class*=-icon-],:scope.-size-medium>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-md)}:scope.-size-large>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-lg)}.instui-rating{align-items:center;gap:var(--instui-component-rating-icon-icon-margin);font-size:var(--instui-component-rating-icon-medium-icon-font-size);color:var(--instui-component-rating-icon-icon-empty-color);display:inline-flex}.instui-rating.-size-sm{font-size:var(--instui-component-rating-icon-small-icon-font-size)}.instui-rating.-size-lg{font-size:var(--instui-component-rating-icon-large-icon-font-size)}@scope(.instui-rating){.-icon-star-solid{color:var(--instui-component-rating-icon-icon-filled-color)}:scope>.label{color:var(--instui-color-text-base);font-family:var(--instui-font-family-base);font-size:var(--instui-font-size-text-base);margin-inline-start:var(--instui-component-rating-icon-icon-margin)}}.instui-rating.-size-small{font-size:var(--instui-component-rating-icon-small-icon-font-size)}.instui-rating.-size-large{font-size:var(--instui-component-rating-icon-large-icon-font-size)}.instui-toggle-group{border:var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);border-radius:var(--instui-border-radius-md);background:var(--instui-color-background-elevated-surface-base);color:var(--instui-component-toggle-details-text-color);font-family:var(--instui-component-toggle-details-font-family);font-weight:var(--instui-component-toggle-details-font-weight);line-height:var(--instui-component-toggle-details-line-height);display:block;overflow:hidden}.instui-toggle-group>summary{align-items:center;gap:var(--instui-component-toggle-details-icon-margin);cursor:pointer;padding:var(--instui-component-toggle-details-content-padding-medium);font-size:var(--instui-component-toggle-details-font-size-medium);list-style:none;display:flex}.instui-toggle-group>summary::-webkit-details-marker{display:none}.instui-toggle-group>summary:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat;background:currentColor;flex:none;transition:transform .2s}.instui-toggle-group[open]>summary:before{transform:rotate(90deg)}.instui-toggle-group>:not(summary){border-block-start:var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);padding:var(--instui-component-toggle-details-content-padding-medium)}.instui-toggle-group.-size-sm>summary,.instui-toggle-group.-size-sm>:not(summary){font-size:var(--instui-component-toggle-details-font-size-small);padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-group.-size-lg>summary,.instui-toggle-group.-size-lg>:not(summary){font-size:var(--instui-component-toggle-details-font-size-large);padding:var(--instui-component-toggle-details-content-padding-large)}.instui-toggle-group.-without-border{border:0}.instui-toggle-group.-without-border>:not(summary){border-block-start:0}.instui-toggle-group.-size-small>summary,.instui-toggle-group.-size-small>:not(summary){font-size:var(--instui-component-toggle-details-font-size-small);padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-group.-size-large>summary,.instui-toggle-group.-size-large>:not(summary){font-size:var(--instui-component-toggle-details-font-size-large);padding:var(--instui-component-toggle-details-content-padding-large)}.instui-context-view{padding:var(--instui-spacing-space-md);background:var(--instui-color-background-elevated-surface-base);color:var(--instui-color-text-base);border:var(--instui-component-context-view-arrow-border-width) solid var(--instui-component-context-view-arrow-border-color);border-radius:var(--instui-component-context-view-border-radius);box-shadow:var(--instui-elevation-above);display:inline-block;position:relative}.instui-context-view:before,.instui-context-view:after{content:"";border-style:solid;border-color:#0000;position:absolute}.instui-context-view:before{border-width:calc(var(--instui-component-context-view-arrow-size) + var(--instui-component-context-view-arrow-border-width))}.instui-context-view:after{border-width:var(--instui-component-context-view-arrow-size)}.instui-context-view:before{border-top-color:var(--instui-component-context-view-arrow-border-color);top:100%;inset-inline-start:calc(var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width))}.instui-context-view:after{border-top-color:var(--instui-component-context-view-arrow-background-color);top:100%;inset-inline-start:var(--instui-spacing-space-lg)}.instui-context-view.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color);top:auto;bottom:100%}.instui-context-view.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color);top:auto;bottom:100%}.instui-context-view.-placement-start:before,.instui-context-view.-placement-start:after{top:50%;border-top-color:#0000;inset-inline-start:100%;transform:translateY(-50%)}.instui-context-view.-placement-start:before{border-inline-start-color:var(--instui-component-context-view-arrow-border-color)}.instui-context-view.-placement-start:after{border-inline-start-color:var(--instui-component-context-view-arrow-background-color)}.instui-context-view.-placement-end:before,.instui-context-view.-placement-end:after{top:50%;border-top-color:#0000;inset-inline:auto 100%;transform:translateY(-50%)}.instui-context-view.-placement-end:before{border-inline-end-color:var(--instui-component-context-view-arrow-border-color)}.instui-context-view.-placement-end:after{border-inline-end-color:var(--instui-component-context-view-arrow-background-color)}.instui-context-view.-color-inverse{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse:before{border-top-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse:after{border-top-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-start:before{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-start:after{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-end:before{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-end:after{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-background-color-inverse)}[popover].instui-context-view{margin:0;position:fixed;overflow:visible}[popover].instui-context-view:not(:popover-open){display:none}@supports (position-area:block-end){[popover].instui-context-view{position-anchor:--pantoken-anchor;position-try-fallbacks:flip-block, flip-inline}[popover].instui-context-view.-placement-top{position-area:block-start}[popover].instui-context-view.-placement-bottom{position-area:block-end}[popover].instui-context-view.-placement-start{position-area:inline-start center}[popover].instui-context-view.-placement-end{position-area:inline-end center}}@property --value{syntax:"<number>";inherits:true;initial-value:0}.instui-progress-circle{--value:0;--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand);--pantoken-pc-track:var(--instui-component-progress-circle-track-color);--pantoken-pc-stroke:var(--instui-component-progress-circle-medium-stroke-width);width:var(--instui-component-progress-circle-medium-size);height:var(--instui-component-progress-circle-medium-size);color:var(--instui-component-progress-circle-color);font-family:var(--instui-component-progress-circle-font-family);font-weight:var(--instui-component-progress-circle-font-weight);line-height:var(--instui-component-progress-circle-line-height);justify-content:center;align-items:center;display:inline-flex;position:relative}.instui-progress-circle:before{content:"";background:conic-gradient(var(--pantoken-pc-fill) calc(var(--value) * 1%), var(--pantoken-pc-track) 0);-webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);mask:radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);border-radius:50%;position:absolute;inset:0}.instui-progress-circle .value{z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.instui-progress-circle.-size-xs{width:var(--instui-component-progress-circle-x-small-size);height:var(--instui-component-progress-circle-x-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-x-small-stroke-width)}.instui-progress-circle.-size-sm{width:var(--instui-component-progress-circle-small-size);height:var(--instui-component-progress-circle-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-small-stroke-width)}.instui-progress-circle.-size-lg{width:var(--instui-component-progress-circle-large-size);height:var(--instui-component-progress-circle-large-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-large-stroke-width)}.instui-progress-circle.-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand)}.instui-progress-circle.-color-primary-inverse.-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand-inverse)}.instui-progress-circle.-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info)}.instui-progress-circle.-color-primary-inverse.-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info-inverse)}.instui-progress-circle.-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success)}.instui-progress-circle.-color-primary-inverse.-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success-inverse)}.instui-progress-circle.-color-warning{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning)}.instui-progress-circle.-color-primary-inverse.-color-warning{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning-inverse)}.instui-progress-circle.-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger)}.instui-progress-circle.-color-primary-inverse.-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger-inverse)}.instui-progress-circle.-color-primary-inverse{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand-inverse);--pantoken-pc-track:var(--instui-component-progress-circle-track-color-inverse);color:var(--instui-component-progress-circle-color-inverse)}.instui-progress-circle.-size-x-small{width:var(--instui-component-progress-circle-x-small-size);height:var(--instui-component-progress-circle-x-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-x-small-stroke-width)}.instui-progress-circle.-size-small{width:var(--instui-component-progress-circle-small-size);height:var(--instui-component-progress-circle-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-small-stroke-width)}.instui-progress-circle.-size-large{width:var(--instui-component-progress-circle-large-size);height:var(--instui-component-progress-circle-large-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-large-stroke-width)}.instui-progress-circle.-meter-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand)}.instui-progress-circle.-meter-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info)}.instui-progress-circle.-meter-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success)}.instui-progress-circle.-meter-color-warning,.instui-progress-circle.-meter-color-alert{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning)}.instui-progress-circle.-meter-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger)}.instui-pagination{align-items:center;gap:var(--instui-component-pagination-page-indicator-gap);font-family:var(--instui-font-family-base);flex-wrap:wrap;display:inline-flex}@scope(.instui-pagination){:scope>.page,:scope>.arrow{min-block-size:2rem;min-inline-size:2rem;padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);color:var(--instui-color-text-interactive-navigation-primary-base);border:var(--instui-border-width-md) solid transparent;border-radius:var(--instui-component-base-button-border-radius);font:inherit;font-weight:var(--instui-font-weight-interactive);cursor:pointer;background:0 0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}:scope>.arrow [class*=-icon-]{line-height:1}:scope>.page:hover,:scope>.arrow:hover{background:var(--instui-color-background-muted);color:var(--instui-color-text-interactive-navigation-primary-hover)}:scope>.page[aria-current],:scope>.page.-current{background:var(--instui-color-background-interactive-action-primary-base);color:var(--instui-color-text-interactive-action-primary-base);border-color:var(--instui-color-background-interactive-action-primary-base)}:scope>.page[aria-current]:hover,:scope>.page.-current:hover{background:var(--instui-color-background-interactive-action-primary-hover);border-color:var(--instui-color-background-interactive-action-primary-hover);color:var(--instui-color-text-interactive-action-primary-base)}:scope>.arrow:disabled,:scope>.arrow[aria-disabled=true]{color:var(--instui-color-text-muted);opacity:var(--instui-opacity-disabled);cursor:not-allowed;background:0 0}:scope>.ellipsis{min-inline-size:2rem;color:var(--instui-color-text-muted);justify-content:center;align-items:center;display:inline-flex}:scope>.page-input-label{color:var(--instui-component-pagination-page-input-label-color)}}.instui-pagination.-variant-input{gap:var(--instui-component-pagination-page-input-input-spacing)}.instui-pagination.-variant-input .instui-text-input,.instui-pagination.-variant-input .instui-number-input{inline-size:var(--instui-component-pagination-page-input-input-width)}.instui-truncate{text-overflow:ellipsis;white-space:nowrap;font-family:var(--instui-component-truncate-text-font-family);line-height:var(--instui-component-truncate-text-line-height);overflow:hidden}.instui-truncate.-lines{-webkit-line-clamp:var(--lines,2);line-clamp:var(--lines,2);white-space:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.instui-toggle-details{color:var(--instui-component-toggle-details-text-color);font-family:var(--instui-component-toggle-details-font-family);font-weight:var(--instui-component-toggle-details-font-weight);line-height:var(--instui-component-toggle-details-line-height)}.instui-toggle-details>summary{align-items:center;gap:var(--instui-component-toggle-details-icon-margin);cursor:pointer;font-size:var(--instui-component-toggle-details-font-size-medium);padding:var(--instui-component-toggle-details-toggle-padding);color:var(--instui-component-toggle-details-text-color);list-style:none;display:flex}.instui-toggle-details>summary::-webkit-details-marker{display:none}.instui-toggle-details>summary:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat;background:currentColor;flex:none;transition:transform .2s}.instui-toggle-details[open]>summary:before{transform:rotate(90deg)}.instui-toggle-details.-chevron-end>summary:before{order:1;margin-inline-start:auto}.instui-toggle-details.-variant-filled>summary{background:var(--instui-color-background-interactive-action-secondary-base);border-radius:var(--instui-component-toggle-details-toggle-border-radius)}.instui-toggle-details>:not(summary){padding:var(--instui-component-toggle-details-content-padding-medium)}.instui-toggle-details.-size-sm>summary{font-size:var(--instui-component-toggle-details-font-size-small)}.instui-toggle-details.-size-sm>:not(summary){padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-details.-size-lg>summary{font-size:var(--instui-component-toggle-details-font-size-large)}.instui-toggle-details.-size-lg>:not(summary){padding:var(--instui-component-toggle-details-content-padding-large)}.instui-toggle-details.-size-small>summary{font-size:var(--instui-component-toggle-details-font-size-small)}.instui-toggle-details.-size-small>:not(summary){padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-details.-size-large>summary{font-size:var(--instui-component-toggle-details-font-size-large)}.instui-toggle-details.-size-large>:not(summary){padding:var(--instui-component-toggle-details-content-padding-large)}.instui-file-drop{text-align:center;padding:var(--instui-spacing-space-lg);color:var(--instui-color-text-base);background:var(--instui-component-file-drop-background-color);border:var(--instui-component-file-drop-border-width) var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);border-radius:var(--instui-component-file-drop-border-radius);display:block}.instui-file-drop:hover,.instui-file-drop.-hover{border-color:var(--instui-component-file-drop-hover-border-color)}.instui-file-drop.-accepted{border-color:var(--instui-component-file-drop-accepted-color)}.instui-file-drop.-rejected{border-color:var(--instui-component-file-drop-rejected-color)}.instui-file-drop>[class*=-icon-]{line-height:1}.instui-side-nav-bar{gap:var(--instui-component-side-nav-bar-content-gap);padding:var(--instui-component-side-nav-bar-content-margin);box-sizing:border-box;background:var(--instui-component-side-nav-bar-background-color);block-size:100%;min-block-size:100%;inline-size:fit-content;color:var(--instui-component-side-nav-bar-font-color);font-family:var(--instui-component-side-nav-bar-item-font-family);flex-direction:column;display:flex}@scope(.instui-side-nav-bar){:scope>.item{align-items:center;gap:var(--instui-spacing-space2xs);padding:var(--instui-component-side-nav-bar-item-content-padding);min-inline-size:var(--instui-component-side-nav-bar-minimized-width);color:var(--instui-component-side-nav-bar-item-font-color);background:var(--instui-component-side-nav-bar-item-background-color);border-radius:var(--instui-component-side-nav-bar-item-border-radius);font-size:var(--instui-component-side-nav-bar-item-font-size);font-weight:var(--instui-component-side-nav-bar-item-font-weight);line-height:var(--instui-component-side-nav-bar-item-line-height);text-align:center;text-decoration:var(--instui-component-side-nav-bar-item-link-text-decoration);cursor:pointer;flex-direction:column;display:flex}:scope>.item [class*=-icon-]{line-height:1}:scope>.item:hover{background:var(--instui-component-side-nav-bar-item-hover-background-color)}:scope>.item.-selected{background:var(--instui-component-side-nav-bar-item-selected-background-color);color:var(--instui-component-side-nav-bar-item-selected-font-color)}}.instui-side-nav-bar.-minimized{inline-size:var(--instui-component-side-nav-bar-minimized-width)}.instui-side-nav-bar.-minimized .item .label{display:none}.instui-tree-browser{border-radius:var(--instui-component-tree-browser-border-radius);font-family:var(--instui-component-tree-browser-tree-collection-font-family);color:var(--instui-component-tree-browser-tree-button-name-text-color)}.instui-tree-browser details>summary,.instui-tree-browser .item{align-items:center;gap:var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);padding:var(--instui-component-tree-browser-tree-button-base-spacing-medium);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-medium);line-height:var(--instui-component-tree-browser-tree-button-text-line-height);color:var(--instui-component-tree-browser-tree-button-name-text-color);border-radius:var(--instui-component-tree-browser-tree-button-border-radius);cursor:pointer;list-style:none;display:flex}.instui-tree-browser details>summary [class*=-icon-],.instui-tree-browser .item [class*=-icon-]{line-height:1}.instui-tree-browser details>summary::-webkit-details-marker{display:none}.instui-tree-browser details>summary:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat;background:currentColor;flex:none;transition:transform .2s}.instui-tree-browser details[open]>summary:before{transform:rotate(90deg)}.instui-tree-browser details>summary:hover,.instui-tree-browser .item:hover{background:var(--instui-component-tree-browser-tree-button-hover-background-color);color:var(--instui-component-tree-browser-tree-button-hover-text-color)}.instui-tree-browser details>summary.-selected,.instui-tree-browser .item.-selected{background:var(--instui-component-tree-browser-tree-button-selected-background-color);color:var(--instui-component-tree-browser-tree-button-selected-text-color)}.instui-tree-browser ul{margin:0;padding-inline-start:var(--instui-component-tree-browser-tree-collection-base-spacing-medium);list-style:none}.instui-tree-browser.-size-sm details>summary,.instui-tree-browser.-size-sm .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-small);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-small)}.instui-tree-browser.-size-lg details>summary,.instui-tree-browser.-size-lg .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-large);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-large)}.instui-tree-browser.-size-small details>summary,.instui-tree-browser.-size-small .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-small);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-small)}.instui-tree-browser.-size-large details>summary,.instui-tree-browser.-size-large .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-large);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-large)}.instui-calendar{text-align:center;background:var(--instui-component-calendar-background);color:var(--instui-component-calendar-color);font-family:var(--instui-component-calendar-font-family);font-size:var(--instui-component-calendar-font-size);font-weight:var(--instui-component-calendar-font-weight);line-height:var(--instui-component-calendar-line-height);display:inline-block}@scope(.instui-calendar){:scope>.nav{justify-content:space-between;align-items:center;margin-block-end:var(--instui-component-calendar-nav-margin);display:flex}:scope>.grid{grid-template-columns:repeat(7, var(--instui-component-calendar-day-min-width));justify-content:center;gap:var(--instui-spacing-space2xs);display:grid}.weekday,.day{inline-size:var(--instui-component-calendar-day-min-width);block-size:var(--instui-component-calendar-day-height);justify-content:center;align-items:center;display:flex}.weekday{font-weight:var(--instui-font-weight-interactive)}.day{font-size:var(--instui-component-calendar-day-font-size);color:var(--instui-component-calendar-day-color);background:var(--instui-component-calendar-day-background);cursor:pointer}.day.-outside-month{color:var(--instui-component-calendar-day-outside-month-color)}.day.-today{background:var(--instui-component-calendar-day-today-background);color:var(--instui-component-calendar-day-today-color);border-radius:var(--instui-component-calendar-day-today-border-radius)}.day.-selected{background:var(--instui-component-calendar-day-selected-background);color:var(--instui-component-calendar-day-selected-color);border-radius:var(--instui-component-calendar-day-selected-border-radius)}}.instui-popover{background:var(--instui-color-background-elevated-surface-base);color:var(--instui-color-text-base);border:var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);border-radius:var(--instui-component-popover-border-radius);padding:var(--instui-spacing-space-sm);box-shadow:var(--instui-elevation-above)}[popover].instui-popover{margin:0}@supports (position-area:block-end){[popover].instui-popover{position-anchor:--pantoken-anchor;position-try-fallbacks:flip-block, flip-inline}[popover].instui-popover.-placement-top{position-area:block-start}[popover].instui-popover.-placement-bottom{position-area:block-end}[popover].instui-popover.-placement-start{position-area:inline-start center}[popover].instui-popover.-placement-end{position-area:inline-end center}}@supports (transition-behavior:allow-discrete){[popover].instui-popover{transition:opacity .15s ease, transform .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;opacity:1;transform:translateY(0)}[popover].instui-popover:not(:popover-open){opacity:0;transform:translateY(-.25rem)}@starting-style{[popover].instui-popover:popover-open{opacity:0;transform:translateY(-.25rem)}}}.instui-tray{inline-size:var(--instui-component-tray-width-md);background:var(--instui-component-tray-background-color);border:var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);block-size:auto;max-block-size:none;max-inline-size:100%;padding:var(--instui-component-tray-padding);z-index:var(--instui-component-tray-z-index);box-shadow:var(--instui-elevation-topmost);position:fixed;inset-block:0;inset-inline-start:0}.instui-tray.-placement-end{inset-inline:auto 0}.instui-tray.-placement-top{block-size:auto;inline-size:100%;inset:0 0 auto}.instui-tray.-placement-bottom{block-size:auto;inline-size:100%;inset:auto 0 0}.instui-tray.-size-xs{inline-size:var(--instui-component-tray-width-xs)}.instui-tray.-size-sm{inline-size:var(--instui-component-tray-width-sm)}.instui-tray.-size-lg{inline-size:var(--instui-component-tray-width-lg)}.instui-tray.-size-xl{inline-size:var(--instui-component-tray-width-xl)}[popover].instui-tray{margin:0}dialog.instui-tray{padding:var(--instui-component-tray-padding);border:var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);margin:0}@supports (transition-behavior:allow-discrete){[popover].instui-tray{transition:transform .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;transform:translate(0)}[popover].instui-tray:not(:popover-open){transform:translate(-100%)}@starting-style{[popover].instui-tray:popover-open{transform:translate(-100%)}}[popover].instui-tray.-placement-end:not(:popover-open){transform:translate(100%)}@starting-style{[popover].instui-tray.-placement-end:popover-open{transform:translate(100%)}}[popover].instui-tray.-placement-top:not(:popover-open){transform:translateY(-100%)}@starting-style{[popover].instui-tray.-placement-top:popover-open{transform:translateY(-100%)}}[popover].instui-tray.-placement-bottom:not(:popover-open){transform:translateY(100%)}@starting-style{[popover].instui-tray.-placement-bottom:popover-open{transform:translateY(100%)}}}.instui-tray.-size-x-small{inline-size:var(--instui-component-tray-width-xs)}.instui-tray.-size-small{inline-size:var(--instui-component-tray-width-sm)}.instui-tray.-size-large{inline-size:var(--instui-component-tray-width-lg)}.instui-tray.-size-x-large{inline-size:var(--instui-component-tray-width-xl)}.instui-tooltip{display:inline-flex;position:relative}@scope(.instui-tooltip){:scope>[class*=-icon-]{line-height:1}:scope>.tip{z-index:1;padding:var(--instui-component-tooltip-padding);background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-radius:var(--instui-border-radius-sm);font-family:var(--instui-component-tooltip-font-family);font-size:var(--instui-component-tooltip-font-size);font-weight:var(--instui-component-tooltip-font-weight);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;margin-block-end:var(--instui-spacing-space-xs);transition:opacity .15s;position:absolute;inset-block-end:100%;inset-inline-start:50%;transform:translate(-50%)}}.instui-tooltip:hover>.tip,.instui-tooltip:focus-within>.tip{opacity:1;visibility:visible}.instui-tooltip>.tip.-placement-bottom{margin-block:var(--instui-spacing-space-xs) 0;inset-block:100% auto}.instui-tooltip>.tip.-placement-start{margin:0 var(--instui-spacing-space-xs) 0 0;inset-block-end:auto;inset-inline:auto 100%;top:50%;transform:translateY(-50%)}.instui-tooltip>.tip.-placement-end{margin:0 0 0 var(--instui-spacing-space-xs);inset-block-end:auto;inset-inline:100% auto;top:50%;transform:translateY(-50%)}.instui-range-input{-webkit-appearance:none;appearance:none;inline-size:100%;min-inline-size:var(--instui-component-range-input-min-width);block-size:var(--instui-component-range-input-handle-size);background:0 0}.instui-range-input::-webkit-slider-runnable-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}.instui-range-input::-moz-range-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}.instui-range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);background:var(--instui-component-range-input-handle-background);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);cursor:pointer;border-radius:50%;margin-block-start:calc((.25rem - var(--instui-component-range-input-handle-size)) / 2)}.instui-range-input::-moz-range-thumb{inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);background:var(--instui-component-range-input-handle-background);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);cursor:pointer;border-radius:50%}.instui-range-input:hover::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-hover-background)}.instui-range-input:hover::-moz-range-thumb{background:var(--instui-component-range-input-handle-hover-background)}.instui-range-input:focus-visible{outline:none}.instui-range-input:focus-visible::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}.instui-range-input:focus-visible::-moz-range-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}.instui-range-input-value{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-radius:var(--instui-border-radius-md);padding:var(--instui-component-range-input-value-medium-padding);font-family:var(--instui-component-range-input-value-font-family);font-size:var(--instui-component-range-input-value-medium-font-size);font-weight:var(--instui-component-range-input-value-font-weight);align-self:center;align-items:center;margin-inline-start:.5rem;line-height:1;display:inline-flex;position:relative}.instui-range-input-value:before{content:"";border-block:.375rem solid #0000;border-inline-end:.375rem solid var(--instui-color-background-inverse);border-inline-start:0;position:absolute;inset-block-start:50%;inset-inline-start:-.375rem;transform:translateY(-50%)}.instui-range-input-value.-size-sm{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}.instui-range-input-value.-size-lg{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}.instui-range-input-value.-size-small{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}.instui-range-input-value.-size-large{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}.instui-mask{background:var(--instui-component-mask-background-color);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.instui-mask.-fullscreen{z-index:999;position:fixed}.instui-mask.-blur{backdrop-filter:blur(.5rem)}.instui-screen-reader-content{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-heading{font-family:var(--instui-component-heading-h1-font-family);color:var(--instui-component-heading-base-color);line-height:var(--instui-component-heading-line-height);font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight);margin:0;display:block}.instui-heading.-level-h1{font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight)}.instui-heading.-level-h2{font-size:var(--instui-component-heading-h2-font-size);font-weight:var(--instui-component-heading-h2-font-weight)}.instui-heading.-level-h3{font-size:var(--instui-component-heading-h3-font-size);font-weight:var(--instui-component-heading-h3-font-weight)}.instui-heading.-level-h4{font-size:var(--instui-component-heading-h4-font-size);font-weight:var(--instui-component-heading-h4-font-weight)}.instui-heading.-level-h5{font-size:var(--instui-component-heading-h5-font-size);font-weight:var(--instui-component-heading-h5-font-weight)}.instui-heading.-level-h6{font-size:var(--instui-component-heading-h6-font-size);font-weight:var(--instui-component-heading-h6-font-weight)}.instui-heading.-variant-title-page{font-size:var(--instui-component-heading-title-page-desktop-font-size);font-weight:var(--instui-component-heading-title-page-desktop-font-weight)}.instui-heading.-variant-title-section{font-size:var(--instui-component-heading-title-section-font-size);font-weight:var(--instui-component-heading-title-section-font-weight)}.instui-heading.-variant-title-card-section{font-size:var(--instui-component-heading-title-card-section-font-size);font-weight:var(--instui-component-heading-title-card-section-font-weight)}.instui-heading.-variant-title-card-regular{font-size:var(--instui-component-heading-title-card-regular-font-size);font-weight:var(--instui-component-heading-title-card-regular-font-weight)}.instui-heading.-variant-title-card-mini{font-size:var(--instui-component-heading-title-card-mini-font-size);font-weight:var(--instui-component-heading-title-card-mini-font-weight)}.instui-heading.-variant-label{font-size:var(--instui-component-heading-label-font-size);font-weight:var(--instui-component-heading-label-font-weight)}.instui-heading.-color-secondary{color:var(--instui-component-heading-muted-color)}.instui-heading.-color-primary-inverse{color:var(--instui-component-heading-inverse-color)}.instui-heading.-color-ai{background:linear-gradient(to bottom, var(--instui-component-heading-ai-text-top-gradient-color) 0%, var(--instui-component-heading-ai-text-bottom-gradient-color) 100%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.instui-heading.-border-bottom{border-bottom:var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);padding-bottom:var(--instui-component-heading-border-padding)}.instui-heading.-border-top{border-top:var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);padding-top:var(--instui-component-heading-border-padding)}.instui-text{font-family:var(--instui-component-text-content-font-family);color:var(--instui-component-text-base-color);font-size:var(--instui-component-text-font-size-medium);font-weight:var(--instui-component-text-font-weight-normal);line-height:var(--instui-component-text-content-line-height)}.instui-text.-size-xs{font-size:var(--instui-component-text-font-size-x-small)}.instui-text.-size-sm{font-size:var(--instui-component-text-font-size-small)}.instui-text.-size-lg{font-size:var(--instui-component-text-font-size-large)}.instui-text.-size-xl{font-size:var(--instui-component-text-font-size-x-large)}.instui-text.-weight-bold{font-weight:var(--instui-component-text-font-weight-bold)}.instui-text.-style-italic{font-style:italic}.instui-text.-color-secondary{color:var(--instui-component-text-muted-color)}.instui-text.-color-brand{color:var(--instui-component-text-primary-color)}.instui-text.-color-success{color:var(--instui-component-text-success-color)}.instui-text.-color-danger{color:var(--instui-component-text-error-color)}.instui-text.-color-warning{color:var(--instui-component-text-warning-color)}.instui-text.-color-primary-inverse{color:var(--instui-component-text-inverse-color)}.instui-text.-color-ai{color:var(--instui-component-text-ai-color);background:var(--instui-component-text-ai-background-color)}.instui-text.-variant-description-page{font-size:var(--instui-component-text-description-page-font-size);line-height:var(--instui-component-text-description-page-line-height)}.instui-text.-variant-description-section{font-size:var(--instui-component-text-description-section-font-size);line-height:var(--instui-component-text-description-section-line-height)}.instui-text.-variant-content-small{font-size:var(--instui-component-text-content-small-font-size);line-height:var(--instui-component-text-content-small-line-height)}.instui-text.-variant-legend{font-size:var(--instui-component-text-legend-font-size);line-height:var(--instui-component-text-legend-line-height)}.instui-text.-transform-uppercase{text-transform:uppercase}.instui-text.-transform-lowercase{text-transform:lowercase}.instui-text.-transform-capitalize{text-transform:capitalize}.instui-text.-size-x-small{font-size:var(--instui-component-text-font-size-x-small)}.instui-text.-size-small{font-size:var(--instui-component-text-font-size-small)}.instui-text.-size-large{font-size:var(--instui-component-text-font-size-large)}.instui-text.-size-x-large{font-size:var(--instui-component-text-font-size-x-large)}.instui-close-button{aspect-ratio:1;min-height:var(--instui-component-base-button-medium-height);padding:var(--instui-spacing-space-xs);border-radius:var(--instui-component-base-button-border-radius);color:var(--instui-color-text-interactive-action-secondary-base);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.instui-close-button:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-x) center / contain no-repeat;mask:var(--instui-icon-x) center / contain no-repeat;background:currentColor}.instui-close-button:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)}.instui-close-button:active{background:var(--instui-color-background-interactive-action-tertiary-active)}.instui-close-button.-size-sm{min-height:var(--instui-component-base-button-small-height)}.instui-close-button.-size-lg{min-height:var(--instui-component-base-button-large-height)}.instui-close-button.-color-inverse{color:var(--instui-component-base-button-primary-inverse-ghost-color)}.instui-close-button.-size-small{min-height:var(--instui-component-base-button-small-height)}.instui-close-button.-size-large{min-height:var(--instui-component-base-button-large-height)}.instui-form-field{gap:var(--instui-component-form-field-layout-gap-inputs);color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);grid-template-columns:1fr;grid-template-areas:"label""controls""messages";display:grid}@scope(.instui-form-field){:scope>.label{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-area:label}:scope>.controls{grid-area:controls}}.instui-form-field>.instui-form-field-messages{grid-area:messages}.instui-form-field .instui-form-field-message.-type-error,.instui-form-field .instui-form-field-message.-type-new-error{display:none}.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-error,.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-new-error,.instui-form-field.-invalid .instui-form-field-message.-type-error,.instui-form-field.-invalid .instui-form-field-message.-type-new-error{display:inline-flex}.instui-form-field:is(.-required,:has(:required)) .label:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-form-field.-readonly .label{color:var(--instui-component-form-field-layout-readonly-text-color)}.instui-form-field.-layout-stacked{grid-template-columns:1fr;grid-template-areas:"label""controls""messages"}.instui-form-field.-layout-inline{align-items:center;column-gap:var(--instui-component-form-field-layout-gap-primitives);grid-template-columns:auto 1fr;grid-template-areas:"label controls"".messages"}.instui-form-field.-layout-inline.-v-align-top{align-items:start}.instui-form-field.-layout-inline.-v-align-bottom{align-items:end}.instui-form-field.-layout-inline.-label-align-start .label{text-align:start}.instui-form-field.-layout-inline.-label-align-end .label{text-align:end}.instui-form-field.-inline{inline-size:auto;display:inline-grid}.instui-form-field-group{gap:var(--instui-component-form-field-layout-gap-inputs);border:0;grid-template-columns:1fr;min-inline-size:0;margin:0;padding:0;display:grid}.instui-form-field-group>legend{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-column:1/-1;margin-block-end:var(--instui-component-form-field-layout-gap-primitives);padding:0}.instui-form-field-group.-required>legend:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-form-field-group.-layout-columns,.instui-form-field-group.-layout-inline{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.instui-form-field-group.-row-spacing-none{row-gap:0}.instui-form-field-group.-row-spacing-small{row-gap:var(--instui-spacing-space-sm)}.instui-form-field-group.-row-spacing-medium{row-gap:var(--instui-spacing-space-md)}.instui-form-field-group.-row-spacing-large{row-gap:var(--instui-spacing-space-lg)}.instui-form-field-group.-col-spacing-none{column-gap:0}.instui-form-field-group.-col-spacing-small{column-gap:var(--instui-spacing-space-sm)}.instui-form-field-group.-col-spacing-medium{column-gap:var(--instui-spacing-space-md)}.instui-form-field-group.-col-spacing-large{column-gap:var(--instui-spacing-space-lg)}.instui-form-field-group.-v-align-top{align-items:start}.instui-form-field-group.-v-align-middle{align-items:center}.instui-form-field-group.-v-align-bottom{align-items:end}@supports (grid-template-columns:subgrid){.instui-form-field-group.-layout-aligned{grid-template-columns:auto 1fr;align-items:center}.instui-form-field-group.-layout-aligned>.instui-form-field{grid-column:1/-1;grid-template-columns:subgrid;grid-template-areas:"label controls"".messages";align-items:center;display:grid}}.instui-radio-input-group{gap:var(--instui-component-form-field-layout-gap-inputs);border:0;flex-direction:column;min-inline-size:0;margin:0;padding:0;display:flex}.instui-radio-input-group>legend{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);margin-block-end:var(--instui-component-form-field-layout-gap-primitives);padding:0}.instui-radio-input-group.-required>legend:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-radio-input-group.-layout-columns,.instui-radio-input-group.-layout-inline{align-items:center;column-gap:var(--instui-spacing-space-md);flex-flow:wrap}.instui-radio-input-group.-layout-columns>legend,.instui-radio-input-group.-layout-inline>legend{flex-basis:100%}.instui-radio-input-group.-variant-toggle{flex-flow:wrap;align-items:center;gap:0}.instui-radio-input-group.-variant-toggle>legend{flex-basis:100%}.instui-radio-input-group.-variant-toggle>.instui-radio:has(input:focus-visible){z-index:1}.instui-form-field-messages{gap:var(--instui-component-form-field-layout-gap-primitives);flex-direction:column;display:flex}.instui-form-field-message{font-family:var(--instui-component-form-field-message-font-family);font-size:var(--instui-component-form-field-message-font-size);font-weight:var(--instui-component-form-field-message-font-weight);line-height:var(--instui-component-form-field-message-line-height);color:var(--instui-component-form-field-message-hint-text-color);align-items:center;gap:.25rem;display:inline-flex}.instui-form-field-message.-type-hint{color:var(--instui-component-form-field-message-hint-text-color)}.instui-form-field-message.-type-error{color:var(--instui-component-form-field-message-error-text-color)}.instui-form-field-message.-type-success{color:var(--instui-component-form-field-message-success-text-color)}.instui-form-field-message.-type-error:before,.instui-form-field-message.-type-success:before{content:"";background:currentColor;flex:none;block-size:1em;inline-size:1em}.instui-form-field-message.-type-error:before{-webkit-mask:var(--instui-icon-circle-alert) center / contain no-repeat;mask:var(--instui-icon-circle-alert) center / contain no-repeat}.instui-form-field-message.-type-success:before{-webkit-mask:var(--instui-icon-circle-check) center / contain no-repeat;mask:var(--instui-icon-circle-check) center / contain no-repeat}.instui-form-field-message.-type-screenreader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-form-field-message.-type-new-error{color:var(--instui-component-form-field-message-error-text-color)}.instui-form-field-message.-type-new-error:before,.instui-form-field-message.-type-success:before{content:"";background:currentColor;flex:none;block-size:1em;inline-size:1em}.instui-form-field-message.-type-new-error:before{-webkit-mask:var(--instui-icon-circle-alert) center / contain no-repeat;mask:var(--instui-icon-circle-alert) center / contain no-repeat}.instui-text-input{box-sizing:border-box;inline-size:100%;font-family:var(--instui-component-text-input-font-family);font-weight:var(--instui-component-text-input-font-weight);color:var(--instui-component-text-input-text-color);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);display:block}.instui-text-input::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-text-input:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-text-input:hover::placeholder{color:var(--instui-component-text-input-placeholder-hover-color)}.instui-text-input:disabled,.instui-text-input.-disabled{background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-text-input.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-text-input.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-text-input.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-text-input:is(.-invalid,:user-invalid):focus-visible{outline-color:var(--instui-focus-outline-color-danger)}.instui-text-input.-success:focus-visible{outline-color:var(--instui-focus-outline-color-success)}.instui-text-input{block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);font-size:var(--instui-component-text-input-font-size-md)}.instui-text-input.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-text-input.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-text-input.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-text-input.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-text-area{box-sizing:border-box;inline-size:100%;font-family:var(--instui-component-text-area-font-family);font-weight:var(--instui-component-text-area-font-weight);color:var(--instui-component-text-area-text-color);background-color:var(--instui-component-text-area-background-color);border:var(--instui-component-text-area-border-width) solid var(--instui-component-text-area-border-color);border-radius:var(--instui-component-text-area-border-radius);display:block}.instui-text-area::placeholder{color:var(--instui-component-text-area-placeholder-color)}.instui-text-area:hover{background-color:var(--instui-component-text-area-background-hover-color);border-color:var(--instui-component-text-area-border-hover-color)}.instui-text-area:hover::placeholder{color:var(--instui-component-text-area-placeholder-hover-color)}.instui-text-area:disabled,.instui-text-area.-disabled{background-color:var(--instui-component-text-area-background-disabled-color);border-color:var(--instui-component-text-area-border-disabled-color);color:var(--instui-component-text-area-text-disabled-color);cursor:not-allowed}.instui-text-area.-readonly{background-color:var(--instui-component-text-area-background-readonly-color);border-color:var(--instui-component-text-area-border-readonly-color);color:var(--instui-component-text-area-text-readonly-color)}.instui-text-area.-invalid{border-color:var(--instui-component-text-area-error-border-color)}.instui-text-area.-success{border-color:var(--instui-component-text-area-success-border-color)}.instui-text-area:is(.-invalid,:user-invalid):focus-visible{outline-color:var(--instui-focus-outline-color-danger)}.instui-text-area.-success:focus-visible{outline-color:var(--instui-focus-outline-color-success)}.instui-text-area{padding:var(--instui-component-text-area-padding);font-size:var(--instui-component-text-area-font-size-md);resize:vertical;min-block-size:4rem;line-height:1.5}.instui-text-area.-size-sm{font-size:var(--instui-component-text-area-font-size-sm)}.instui-text-area.-size-lg{font-size:var(--instui-component-text-area-font-size-lg)}.instui-text-area.-size-small{font-size:var(--instui-component-text-area-font-size-sm)}.instui-text-area.-size-large{font-size:var(--instui-component-text-area-font-size-lg)}.instui-simple-select{box-sizing:border-box;inline-size:100%;font-family:var(--instui-component-text-input-font-family);font-weight:var(--instui-component-text-input-font-weight);color:var(--instui-component-text-input-text-color);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);display:block}.instui-simple-select::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-simple-select:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-simple-select:hover::placeholder{color:var(--instui-component-text-input-placeholder-hover-color)}.instui-simple-select:disabled,.instui-simple-select.-disabled{background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-simple-select.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-simple-select.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-simple-select.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-simple-select:is(.-invalid,:user-invalid):focus-visible{outline-color:var(--instui-focus-outline-color-danger)}.instui-simple-select.-success:focus-visible{outline-color:var(--instui-focus-outline-color-success)}.instui-simple-select{block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);font-size:var(--instui-component-text-input-font-size-md);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--instui-component-text-input-padding-horizontal-md) center;background-size:1em;padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem)}.instui-simple-select.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem)}.instui-simple-select.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem)}.instui-simple-select.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem)}.instui-simple-select.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem)}.instui-input-group{box-sizing:border-box;inline-size:100%;block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);align-items:center;gap:var(--instui-component-text-input-gap-content);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-component-text-input-text-color);font-family:var(--instui-component-text-input-font-family);font-size:var(--instui-component-text-input-font-size-md);display:flex}.instui-input-group:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-input-group>input,.instui-input-group .instui-text-input{block-size:auto;min-inline-size:0;font:inherit;color:inherit;background:0 0;border:0;outline:none;flex:1;padding:0}.instui-input-group>input::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-input-group .before,.instui-input-group .after{color:var(--instui-component-text-input-text-color);flex:none;align-items:center;display:inline-flex}.instui-input-group.-disabled,.instui-input-group:has(>input:disabled){background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-input-group.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-input-group.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-input-group.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-input-group:has(:focus-visible){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset);border-radius:var(--instui-focus-outline-radius)}.instui-input-group:is(.-invalid,:has(>input:user-invalid)):has(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)}.instui-input-group.-success:has(:focus-visible){outline-color:var(--instui-focus-outline-color-success)}.instui-input-group.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-input-group.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-input-group.-should-not-wrap{flex-wrap:nowrap}.instui-input-group.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-input-group.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-number-input{box-sizing:border-box;inline-size:100%;block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);align-items:center;gap:var(--instui-component-text-input-gap-content);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-component-text-input-text-color);font-family:var(--instui-component-text-input-font-family);font-size:var(--instui-component-text-input-font-size-md);display:flex}.instui-number-input:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-number-input>input,.instui-number-input .instui-text-input{block-size:auto;min-inline-size:0;font:inherit;color:inherit;background:0 0;border:0;outline:none;flex:1;padding:0}.instui-number-input>input::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-number-input .before,.instui-number-input .after{color:var(--instui-component-text-input-text-color);flex:none;align-items:center;display:inline-flex}.instui-number-input.-disabled,.instui-number-input:has(>input:disabled){background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-number-input.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-number-input.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-number-input.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-number-input:has(:focus-visible){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset);border-radius:var(--instui-focus-outline-radius)}.instui-number-input:is(.-invalid,:has(>input:user-invalid)):has(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)}.instui-number-input.-success:has(:focus-visible){outline-color:var(--instui-focus-outline-color-success)}.instui-number-input.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-number-input.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-number-input{padding-inline-end:0;overflow:hidden}.instui-number-input>input::-webkit-outer-spin-button,.instui-number-input>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.instui-number-input>input[type=number]{-moz-appearance:textfield;appearance:textfield}.instui-number-input .arrows{border-inline-start:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);flex-direction:column;flex:none;align-self:stretch;inline-size:1.5rem;display:flex}.instui-number-input .arrows button{background:var(--instui-component-text-input-arrows-background-color);color:var(--instui-color-icon-interactive-action-secondary-base);cursor:pointer;border:0;flex:1;justify-content:center;align-items:center;padding:0;display:flex}.instui-number-input .arrows button+button{border-block-start:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color)}.instui-number-input .arrows button:hover{background:var(--instui-component-text-input-arrows-background-hover-color)}.instui-number-input .arrows button:active{background:var(--instui-component-text-input-arrows-background-active-color)}.instui-number-input .arrows button:disabled{background:var(--instui-component-text-input-arrows-background-disabled-color);cursor:not-allowed}.instui-number-input .arrows button:before{content:"";block-size:.875em;inline-size:.875em;-webkit-mask:var(--instui-icon-chevron-up) center / contain no-repeat;mask:var(--instui-icon-chevron-up) center / contain no-repeat;background:currentColor}.instui-number-input .arrows button.down:before{-webkit-mask:var(--instui-icon-chevron-down) center / contain no-repeat;mask:var(--instui-icon-chevron-down) center / contain no-repeat}.instui-number-input.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-number-input.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-in-place-edit{min-inline-size:2rem;padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);border:var(--instui-component-text-input-border-width) solid transparent;border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-color-text-base);font:inherit;cursor:text;display:inline-block}.instui-in-place-edit:hover{background:var(--instui-color-background-muted)}.instui-in-place-edit:focus{background:var(--instui-component-text-input-background-color);border-color:var(--instui-component-text-input-border-color);outline:none}.instui-in-place-edit:focus-visible{outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-in-place-edit.-readonly{cursor:default}.instui-in-place-edit.-readonly:hover{background:0 0}
|
|
1
|
+
:root{--value:0}.instui-button{justify-content:center;align-items:center;gap:var(--instui-spacing-space-xs);min-height:var(--instui-component-base-button-medium-height);padding:var(--instui-spacing-space-xs) var(--instui-component-base-button-medium-padding-horizontal);font-family:var(--instui-font-family-base);font-size:var(--instui-component-base-button-medium-font-size);font-weight:var(--instui-font-weight-interactive);line-height:var(--instui-line-height-standalone-text-base);border:var(--instui-border-width-md) solid transparent;border-radius:var(--instui-component-base-button-border-radius);cursor:pointer;background:var(--instui-color-background-interactive-action-primary-base);color:var(--instui-color-text-interactive-action-primary-base);display:inline-flex}.instui-button:hover{background:var(--instui-color-background-interactive-action-primary-hover)}.instui-button:active{background:var(--instui-color-background-interactive-action-primary-active)}.instui-button:disabled,.instui-button[aria-disabled=true]{background:var(--instui-color-background-interactive-action-primary-disabled);color:var(--instui-color-text-interactive-action-primary-disabled);cursor:not-allowed}.instui-button.-color-secondary{background:var(--instui-color-background-interactive-action-secondary-base);color:var(--instui-color-text-interactive-action-secondary-base);border-color:var(--instui-color-stroke-interactive-action-secondary-base)}.instui-button.-color-secondary:hover{background:var(--instui-color-background-interactive-action-secondary-hover);border-color:var(--instui-color-stroke-interactive-action-secondary-hover)}.instui-button.-color-secondary:active{background:var(--instui-color-background-interactive-action-secondary-active);border-color:var(--instui-color-stroke-interactive-action-secondary-active)}.instui-button.-color-danger{background:var(--instui-color-background-interactive-action-destructive-base);color:var(--instui-color-text-interactive-action-status-base)}.instui-button.-color-danger:hover{background:var(--instui-color-background-interactive-action-destructive-hover)}.instui-button.-color-danger:active{background:var(--instui-color-background-interactive-action-destructive-active)}.instui-button.-color-success{background:var(--instui-color-background-interactive-action-success-base);color:var(--instui-color-text-interactive-action-status-base)}.instui-button.-color-success:hover{background:var(--instui-color-background-interactive-action-success-hover)}.instui-button.-color-tertiary{color:var(--instui-color-text-interactive-action-tertiary-base);border-color:var(--instui-color-stroke-interactive-action-tertiary-base);background:0 0}.instui-button.-color-tertiary:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)}.instui-button.-color-tertiary:active{background:var(--instui-color-background-interactive-action-tertiary-active)}.instui-button.-color-primary-inverse{background:var(--instui-component-base-button-primary-inverse-background);color:var(--instui-component-base-button-primary-inverse-color);border-color:var(--instui-component-base-button-primary-inverse-border-color)}.instui-button.-color-primary-inverse:hover{background:var(--instui-component-base-button-primary-inverse-hover-background);border-color:var(--instui-component-base-button-primary-on-color-hover-border-color)}.instui-button.-color-primary-inverse:active{background:var(--instui-component-base-button-primary-inverse-active-background);border-color:var(--instui-component-base-button-primary-on-color-active-border-color)}.instui-button.-color-ai{color:var(--instui-color-text-interactive-action-ai-base);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%) border-box;border-color:#0000}.instui-button.-color-ai:hover{color:var(--instui-color-text-interactive-action-ai-hover);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%) border-box}.instui-button.-color-ai:active{color:var(--instui-color-text-interactive-action-ai-active);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%) border-box}.instui-button.-color-ai-secondary{background:linear-gradient(to bottom, var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%, var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text;border-color:#0000;position:relative}.instui-button.-color-ai-secondary:after{content:"";inset:calc(-1 * var(--instui-border-width-md));border-radius:inherit;padding:var(--instui-border-width-sm);background:linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%);-webkit-mask-composite:xor;pointer-events:none;position:absolute;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.instui-button.-color-ai-secondary:hover,.instui-button.-color-ai-secondary:active{color:var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);-webkit-text-fill-color:currentColor;-webkit-background-clip:border-box;background-clip:border-box}.instui-button.-color-ai-secondary:hover{background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%)}.instui-button.-color-ai-secondary:active{background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%)}.instui-button.-color-ai:before,.instui-button.-color-ai-secondary:before{content:"";flex:none;block-size:1em;inline-size:1em;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E") 50%/contain no-repeat}.instui-button.-color-ai:before{background:var(--instui-color-text-interactive-action-ai-base)}.instui-button.-color-ai-secondary:before{background:linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%)}.instui-button.-without-background{background:var(--instui-component-base-button-primary-ghost-background);color:var(--instui-component-base-button-primary-ghost-color);border-color:var(--instui-component-base-button-primary-ghost-border-color)}.instui-button.-color-secondary.-ghost{background:var(--instui-component-base-button-secondary-ghost-background);color:var(--instui-component-base-button-secondary-ghost-color);border-color:var(--instui-component-base-button-secondary-ghost-border-color)}.instui-button.-without-background:hover{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-primary-ghost-color) h s calc(l - 10)) 10%, transparent)}.instui-button.-without-background:active{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-primary-ghost-color) h s calc(l - 10)) 20%, transparent)}.instui-button.-color-secondary.-ghost:hover{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-secondary-ghost-color) h s calc(l - 10)) 10%, transparent)}.instui-button.-color-secondary.-ghost:active{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-secondary-ghost-color) h s calc(l - 10)) 20%, transparent)}.instui-button.-display-block{width:100%;display:flex}.instui-button.-size-sm{font-size:var(--instui-component-base-button-small-font-size);min-height:var(--instui-component-base-button-small-height);padding-inline:var(--instui-component-base-button-small-padding-horizontal)}.instui-button.-size-lg{font-size:var(--instui-component-base-button-large-font-size);min-height:var(--instui-component-base-button-large-height);padding-inline:var(--instui-component-base-button-large-padding-horizontal)}.instui-button.-shape-square{padding:var(--instui-spacing-space-xs);aspect-ratio:1}.instui-button.-shape-circle{padding:var(--instui-spacing-space-xs);aspect-ratio:1;border-radius:50%}.instui-button.-shape-square[class*=-icon-]:before,.instui-button.-shape-circle[class*=-icon-]:before{block-size:1.25em;inline-size:1.25em}.instui-button.-condensed{min-height:0;color:var(--instui-color-text-interactive-action-secondary-base);padding-inline:var(--instui-spacing-space-xs);background:0 0;border-color:#0000}.instui-button.-condensed:hover{background:var(--instui-color-background-muted)}.instui-button.-toggle[aria-pressed=true]{background:var(--instui-color-background-interactive-action-secondary-active);border-color:var(--instui-color-stroke-interactive-action-secondary-active);color:var(--instui-color-text-interactive-action-secondary-base)}.instui-button.-without-border{border-style:none}.instui-button.-size-small{font-size:var(--instui-component-base-button-small-font-size);min-height:var(--instui-component-base-button-small-height);padding-inline:var(--instui-component-base-button-small-padding-horizontal)}.instui-button.-size-large{font-size:var(--instui-component-base-button-large-font-size);min-height:var(--instui-component-base-button-large-height);padding-inline:var(--instui-component-base-button-large-padding-horizontal)}.instui-alert{min-inline-size:12rem;padding:var(--instui-component-alert-content-padding-vertical) var(--instui-component-alert-content-padding-horizontal);background:var(--instui-component-alert-background);color:var(--instui-component-alert-color);border:var(--instui-component-alert-border-width) var(--instui-component-alert-border-style) var(--instui-component-alert-info-border-color);border-radius:var(--instui-component-alert-border-radius);box-shadow:var(--instui-elevation-above);font-family:var(--instui-component-alert-content-font-family);font-size:var(--instui-component-alert-content-font-size);font-weight:var(--instui-component-alert-content-font-weight);line-height:var(--instui-component-alert-content-line-height);--pantoken-alert-icon-bg:var(--instui-component-alert-info-icon-background);--pantoken-alert-glyph:var(--instui-icon-info);padding-inline-start:calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));position:relative}.instui-alert:before{content:"";inset-block:calc(-1 * var(--instui-component-alert-border-width));background:var(--pantoken-alert-icon-bg);inline-size:2.5rem;border-start-start-radius:var(--instui-component-alert-border-radius);border-end-start-radius:var(--instui-component-alert-border-radius);position:absolute;inset-inline-start:calc(-1 * var(--instui-component-alert-border-width))}.instui-alert:after{content:"";background:var(--instui-component-alert-icon-color);inline-size:2.5rem;-webkit-mask:var(--pantoken-alert-glyph) center / 1.125rem no-repeat;mask:var(--pantoken-alert-glyph) center / 1.125rem no-repeat;position:absolute;inset-block:0;inset-inline-start:0}.instui-alert>.instui-close-button{position:absolute;inset-block-start:var(--instui-spacing-space-xs);inset-inline-end:var(--instui-spacing-space-xs)}.instui-alert:has(>.instui-close-button){padding-inline-end:calc(var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs))}.instui-alert.-without-shadow{box-shadow:none}.instui-alert.-screen-reader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-alert.-color-info{border-color:var(--instui-component-alert-info-border-color)}.instui-alert.-color-success{border-color:var(--instui-component-alert-success-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-success-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-check)}.instui-alert.-color-warning{border-color:var(--instui-component-alert-warning-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-warning-icon-background);--pantoken-alert-glyph:var(--instui-icon-triangle-alert)}.instui-alert.-color-danger{border-color:var(--instui-component-alert-danger-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-danger-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-x)}.instui-alert[class*=-icon-]{--pantoken-alert-glyph:var(--pantoken-glyph)}.instui-alert[class*=-icon-]:before{background:var(--pantoken-alert-icon-bg);block-size:auto;inline-size:2.5rem;-webkit-mask:none;mask:none}.instui-alert.-has-shadow-false{box-shadow:none}.instui-alert.-variant-info{border-color:var(--instui-component-alert-info-border-color)}.instui-alert.-variant-success{border-color:var(--instui-component-alert-success-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-success-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-check)}.instui-alert.-variant-warning{border-color:var(--instui-component-alert-warning-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-warning-icon-background);--pantoken-alert-glyph:var(--instui-icon-triangle-alert)}.instui-alert.-variant-error{border-color:var(--instui-component-alert-danger-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-danger-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-x)}@keyframes pantoken-badge-pulse{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.instui-badge-wrapper{display:inline-flex;position:relative}.instui-badge{--pantoken-badge-accent:var(--instui-component-badge-color-primary);--pantoken-badge-text:light-dark(var(--instui-component-badge-color),var(--instui-component-badge-color-inverse));min-width:var(--instui-component-badge-size);height:var(--instui-component-badge-size);padding:0 var(--instui-component-badge-padding);font-family:var(--instui-component-badge-font-family);font-size:var(--instui-component-badge-font-size);font-weight:var(--instui-component-badge-font-weight);border-radius:var(--instui-component-badge-border-radius);background:var(--pantoken-badge-accent);color:var(--pantoken-badge-text);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.instui-badge.-color-success{--pantoken-badge-accent:var(--instui-component-badge-color-success);--pantoken-badge-text:var(--instui-component-badge-color)}.instui-badge.-color-danger{--pantoken-badge-accent:var(--instui-component-badge-color-danger);--pantoken-badge-text:var(--instui-component-badge-color)}.instui-badge.-color-inverse{--pantoken-badge-accent:var(--instui-component-badge-color);--pantoken-badge-text:var(--instui-component-badge-color-inverse)}.instui-badge.-type-notification{min-width:0;width:var(--instui-spacing-space-sm);height:var(--instui-spacing-space-sm);padding:0;font-size:0}.instui-badge.-pulse:before{content:"";border:var(--instui-border-width-md) solid var(--pantoken-badge-accent);border-radius:inherit;animation:1.2s ease-out infinite pantoken-badge-pulse;position:absolute;inset:0}.instui-badge.-placement-top-end,.instui-badge.-placement-top-start,.instui-badge.-placement-bottom-end,.instui-badge.-placement-bottom-start,.instui-badge.-placement-start-center,.instui-badge.-placement-end-center{position:absolute}.instui-badge.-placement-top-end{top:-.5rem;inset-inline-end:-.5rem}.instui-badge.-placement-top-start{top:-.5rem;inset-inline-start:-.5rem}.instui-badge.-placement-bottom-end{bottom:-.5rem;inset-inline-end:-.5rem}.instui-badge.-placement-bottom-start{bottom:-.5rem;inset-inline-start:-.5rem}.instui-badge.-placement-end-center{top:50%;inset-inline-end:-.5rem;transform:translateY(-50%)}.instui-badge.-placement-start-center{top:50%;inset-inline-start:-.5rem;transform:translateY(-50%)}.instui-badge.-standalone{position:relative;inset:auto;transform:none}.instui-pill{height:var(--instui-component-pill-height);max-width:var(--instui-component-pill-max-width);padding:0 var(--instui-component-pill-padding-horizontal);background:var(--instui-component-pill-background-color);color:var(--instui-component-pill-base-text-color);border:var(--instui-component-pill-border-width) var(--instui-component-pill-border-style) var(--instui-component-pill-base-border-color);border-radius:var(--instui-component-pill-border-radius);font-family:var(--instui-component-pill-font-family);font-size:var(--instui-component-pill-text-font-size);font-weight:var(--instui-component-pill-text-font-weight);line-height:var(--instui-component-pill-line-height);align-items:center;display:inline-flex}.instui-pill[class*=-icon-]:before{inline-size:var(--instui-font-size-text-xs);block-size:var(--instui-font-size-text-xs);margin-inline-end:.375rem}.instui-pill.-color-info{color:var(--instui-component-pill-info-text-color);border-color:var(--instui-component-pill-info-border-color)}.instui-pill.-color-success{color:var(--instui-component-pill-success-text-color);border-color:var(--instui-component-pill-success-border-color)}.instui-pill.-color-warning{color:var(--instui-component-pill-warning-text-color);border-color:var(--instui-component-pill-warning-border-color)}.instui-pill.-color-danger{color:var(--instui-component-pill-error-text-color);border-color:var(--instui-component-pill-error-border-color)}.instui-pill.-color-info,.instui-pill.-color-success,.instui-pill.-color-warning,.instui-pill.-color-danger{font-weight:var(--instui-component-pill-status-label-font-weight)}.instui-tag{height:var(--instui-component-tag-height-medium);max-width:var(--instui-component-tag-max-width);padding:0 var(--instui-component-tag-padding-horizontal);background:var(--instui-component-tag-default-background);color:var(--instui-component-tag-default-color);border:var(--instui-component-tag-default-border-width) var(--instui-component-tag-default-border-style) var(--instui-component-tag-default-border-color);border-radius:var(--instui-component-tag-default-border-radius);font-family:var(--instui-component-tag-font-family);font-size:var(--instui-component-tag-font-size-medium);align-items:center;display:inline-flex}.instui-tag:hover{background:var(--instui-component-tag-default-background-hover)}.instui-tag.-size-sm{height:var(--instui-component-tag-height-small);padding:0 var(--instui-component-tag-padding-horizontal-small);font-size:var(--instui-component-tag-font-size-small)}.instui-tag.-size-lg{height:var(--instui-component-tag-height-large);font-size:var(--instui-component-tag-font-size-large)}.instui-tag.-inline{gap:var(--instui-spacing-space-xs);background:var(--instui-component-tag-inline-background);color:var(--instui-component-tag-inline-color);border-color:var(--instui-component-tag-inline-border-color);border-radius:var(--instui-component-tag-inline-border-radius);cursor:pointer}.instui-tag.-inline:hover{background:var(--instui-component-tag-inline-background-hover)}.instui-tag.-inline:after{content:"";background:var(--instui-component-tag-inline-icon-color);width:1em;height:1em;-webkit-mask:var(--instui-icon-x) center / contain no-repeat;mask:var(--instui-icon-x) center / contain no-repeat;flex:none}.instui-tag.-inline:hover:after{background:var(--instui-component-tag-inline-icon-hover-color)}.instui-tag.-readonly{cursor:default;background:var(--instui-component-tag-default-background)}.instui-tag.-readonly.-inline:after{display:none}.instui-tag.-size-small{height:var(--instui-component-tag-height-small);padding:0 var(--instui-component-tag-padding-horizontal-small);font-size:var(--instui-component-tag-font-size-small)}.instui-tag.-size-large{height:var(--instui-component-tag-height-large);font-size:var(--instui-component-tag-font-size-large)}.instui-avatar{width:var(--instui-component-avatar-size-md);height:var(--instui-component-avatar-size-md);background:var(--instui-component-avatar-background-color);color:var(--instui-component-avatar-blue-text-color);border:var(--instui-component-avatar-border-width-sm) solid var(--instui-component-avatar-border-color);font-family:var(--instui-component-avatar-font-family);font-size:var(--instui-component-avatar-font-size-md);font-weight:var(--instui-component-avatar-font-weight);border-radius:50%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.instui-avatar.-shape-rectangle{border-radius:var(--instui-component-avatar-rectangle-radius)}.instui-avatar.-size-sm{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-2xs{width:var(--instui-component-avatar-size2xs);height:var(--instui-component-avatar-size2xs);font-size:var(--instui-component-avatar-font-size2xs)}.instui-avatar.-size-xs{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-lg{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-xl{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-size-2xl{width:var(--instui-component-avatar-size2xl);height:var(--instui-component-avatar-size2xl);font-size:var(--instui-component-avatar-font-size2xl)}.instui-avatar.-color-ash{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-ash.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-blue{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-blue.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-green{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-green.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-grey{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-grey.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}.instui-avatar.-color-orange{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-orange.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-red{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-red.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-ai{background:linear-gradient(to bottom, var(--instui-component-avatar-ai-top-gradient-color), var(--instui-component-avatar-ai-bottom-gradient-color));color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color);color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-show-border{border-width:var(--instui-component-avatar-border-width-md);border-style:solid;border-color:var(--instui-component-avatar-border-color)}.instui-avatar>img{object-fit:cover;border-radius:inherit;block-size:100%;inline-size:100%}.instui-avatar.-size-small{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-x-small{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-large{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-x-large{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-color-accent1{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-accent1.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-accent2{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-accent2.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-accent3{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-accent3.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-accent4{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-accent4.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-accent5{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-accent5.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-accent6{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-accent6.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}.instui-tabs{background:var(--instui-component-tabs-default-background);flex-direction:column;display:flex}@scope(.instui-tabs){:scope>.list{flex-flow:wrap;width:100%;display:flex}:scope.-overflow-scroll>.list{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}:scope.-overflow-scroll>.list::-webkit-scrollbar{display:none}.tab{-webkit-appearance:none;appearance:none;color:var(--instui-component-tabs-tab-default-text-color);font-family:var(--instui-component-tabs-tab-font-family);font-size:var(--instui-component-tabs-tab-font-size);font-weight:var(--instui-component-tabs-tab-font-weight);cursor:pointer;user-select:none;white-space:nowrap;z-index:1;margin-bottom:calc(-1 * var(--instui-component-tabs-panel-border-width));background:0 0;border:0;border-bottom:.25rem solid #0000;padding:1rem 1.25rem;line-height:1;position:relative}.tab:hover:not(.-selected):not(.-disabled):not([aria-selected=true]):not([aria-disabled=true]){border-bottom-color:var(--instui-component-tabs-tab-default-hover-border-color)}.tab.-selected,.tab[aria-selected=true]{border-bottom-color:var(--instui-component-tabs-tab-default-selected-border-color)}.tab.-disabled,.tab[aria-disabled=true],.tab:disabled{opacity:.5;cursor:default;font-weight:400}:scope.-variant-secondary .tab{line-height:var(--instui-component-tabs-tab-line-height);color:var(--instui-component-tabs-tab-secondary-text-color);margin-inline-end:.2em;margin-bottom:calc(-1 * var(--instui-component-tabs-panel-border-width));border:var(--instui-component-tabs-panel-border-width) solid transparent;border-radius:.1875rem .1875rem 0 0;padding:.75rem 1rem}:scope.-variant-secondary .tab:first-of-type{margin-inline-start:0}:scope.-variant-secondary .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=true]):not([aria-disabled=true]){background:var(--instui-component-tabs-tab-secondary-selected-background);border-color:var(--instui-component-tabs-tab-secondary-selected-border-color);color:var(--instui-component-tabs-tab-secondary-selected-text-color)}:scope.-variant-secondary .tab.-selected,:scope.-variant-secondary .tab[aria-selected=true]{background:var(--instui-component-tabs-tab-secondary-selected-background);border-color:var(--instui-component-tabs-tab-secondary-selected-border-color);border-bottom-color:var(--instui-component-tabs-tab-secondary-selected-background);color:var(--instui-component-tabs-tab-secondary-selected-text-color)}:scope>.panel{box-sizing:border-box;border-top:var(--instui-component-tabs-panel-border-width) solid var(--instui-component-tabs-panel-border-color);background:var(--instui-component-tabs-panel-background);color:var(--instui-component-tabs-panel-text-color);font-family:var(--instui-component-tabs-panel-font-family);font-size:var(--instui-component-tabs-panel-font-size);font-weight:var(--instui-component-tabs-panel-font-weight);line-height:var(--instui-component-tabs-panel-line-height);padding:var(--instui-spacing-space-sm) var(--instui-spacing-space-md) var(--instui-spacing-space-md)}:scope>.panel[hidden]{display:none}}.instui-metric{gap:var(--instui-component-metric-gap-texts);padding:0 var(--instui-component-metric-padding-horizontal);flex-direction:column;display:inline-flex}@scope(.instui-metric){:scope>.value{color:var(--instui-component-metric-value-color);font-family:var(--instui-component-metric-value-font-family);font-size:var(--instui-component-metric-value-font-size);font-weight:var(--instui-component-metric-value-font-weight);line-height:var(--instui-component-metric-value-line-height)}:scope>.label{color:var(--instui-component-metric-label-color);font-family:var(--instui-component-metric-label-font-family);font-size:var(--instui-component-metric-label-font-size);font-weight:var(--instui-component-metric-label-font-weight);line-height:var(--instui-component-metric-label-line-height)}}.instui-metric.-text-align-start{text-align:start;align-items:flex-start}.instui-metric.-text-align-center{text-align:center;align-items:center}.instui-metric.-text-align-end{text-align:end;align-items:flex-end}.instui-byline{align-items:center;gap:var(--instui-component-byline-figure-margin);background:var(--instui-component-byline-background);color:var(--instui-component-byline-color);font-family:var(--instui-component-byline-font-family);display:flex}.instui-byline.-align-content-top{align-items:flex-start}.instui-byline.-align-content-center{align-items:center}.instui-byline.-size-sm{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-md{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-lg{max-width:var(--instui-component-byline-large,40rem)}@scope(.instui-byline){:scope>[class*=-icon-]{line-height:1}.title{margin:0 0 var(--instui-component-byline-title-margin);font-size:var(--instui-component-byline-title-font-size);font-weight:var(--instui-component-byline-title-font-weight);line-height:var(--instui-component-byline-title-line-height)}.description{font-size:var(--instui-component-byline-description-font-size);font-weight:var(--instui-component-byline-description-font-weight);line-height:var(--instui-component-byline-description-line-height)}}.instui-byline.-size-small{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-medium{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-large{max-width:var(--instui-component-byline-large,40rem)}.instui-img{--pantoken-img-filter:none;block-size:auto;max-inline-size:100%;filter:var(--pantoken-img-filter);transition:filter var(--instui-component-img-effect-transition-duration) ease;display:inline-block}.instui-img.-display-block{display:block}.instui-img.-constrain-cover{object-fit:cover;block-size:100%;inline-size:100%}.instui-img.-constrain-contain{object-fit:contain;block-size:100%;inline-size:100%}.instui-img.-with-grayscale{--pantoken-img-filter:grayscale(1)}.instui-img.-with-blur{--pantoken-img-filter:blur(var(--instui-component-img-image-blur-amount))}.instui-img.-with-grayscale.-with-blur{--pantoken-img-filter:grayscale(1) blur(var(--instui-component-img-image-blur-amount))}.instui-table{border-collapse:collapse;background:var(--instui-component-table-background);width:100%;color:var(--instui-component-table-color);font-family:var(--instui-component-table-font-family);font-size:var(--instui-component-table-font-size)}.instui-table caption{text-align:start;padding:var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal);color:var(--instui-component-table-col-header-color);font-weight:var(--instui-component-table-head-font-weight)}.instui-table.-layout-fixed{table-layout:fixed}.instui-table thead{background:var(--instui-component-table-head-background)}.instui-table th{text-align:start;background:var(--instui-component-table-col-header-background);color:var(--instui-component-table-col-header-color);font-weight:var(--instui-component-table-head-font-weight);line-height:var(--instui-component-table-col-header-line-height);padding:var(--instui-component-table-col-header-padding-vertical) var(--instui-component-table-col-header-padding-horizontal)}.instui-table thead th{border-bottom:var(--instui-border-width-md) solid var(--instui-component-table-row-border-color)}.instui-table tbody th,.instui-table th[scope=row]{background:var(--instui-component-table-row-header-background);color:var(--instui-component-table-row-header-color);font-weight:var(--instui-component-table-row-header-font-weight);line-height:var(--instui-component-table-row-header-line-height);padding:var(--instui-component-table-row-header-padding-vertical) var(--instui-component-table-row-header-padding-horizontal)}.instui-table td{color:var(--instui-component-table-cell-color);line-height:var(--instui-component-table-cell-line-height);padding:var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal)}.instui-table tbody td,.instui-table tbody th{border:0}.instui-table tbody tr{border-bottom:var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color)}.instui-table.-hover tbody tr{border-inline:.1875rem solid #0000}.instui-table.-hover tbody tr:hover{border-inline-color:var(--instui-component-table-row-hover-border-color)}.instui-table.-layout-stacked thead{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-table.-layout-stacked,.instui-table.-layout-stacked tbody,.instui-table.-layout-stacked tr,.instui-table.-layout-stacked td,.instui-table.-layout-stacked th{width:auto;display:block}.instui-table.-layout-stacked tbody tr{padding:var(--instui-component-table-row-padding-vertical) var(--instui-component-table-row-padding-horizontal)}.instui-table.-layout-stacked tbody td[data-label]:before,.instui-table.-layout-stacked tbody th[data-label]:before{content:attr(data-label);font-weight:var(--instui-component-table-head-font-weight);color:var(--instui-component-table-col-header-color);display:block}.instui-link{align-items:center;gap:var(--instui-component-link-gap-md);color:var(--instui-component-link-text-color);font-family:var(--instui-component-link-font-family);font-size:var(--instui-component-link-font-size-md);font-weight:var(--instui-component-link-font-weight);line-height:var(--instui-component-link-line-height-md);text-decoration:var(--instui-component-link-text-decoration-outside-text);cursor:pointer;display:inline-flex}.instui-link:hover{color:var(--instui-component-link-text-hover-color)}.instui-link[aria-disabled=true]{color:var(--instui-component-link-text-disabled-color);cursor:not-allowed}.instui-link.-size-sm{gap:var(--instui-component-link-gap-sm);font-size:var(--instui-component-link-font-size-sm);line-height:var(--instui-component-link-line-height-sm)}.instui-link.-size-lg{gap:var(--instui-component-link-gap-lg);font-size:var(--instui-component-link-font-size-lg);line-height:var(--instui-component-link-line-height-lg)}.instui-link.-color-inverse{color:var(--instui-component-link-on-color-text-color)}.instui-link.-color-inverse:hover{color:var(--instui-component-link-on-color-text-hover-color)}.instui-link.-color-inverse[aria-disabled=true]{color:var(--instui-component-link-on-color-text-disabled-color)}.instui-link.-inline{font-family:var(--instui-component-link-inline-link-medium-font-family);font-size:var(--instui-component-link-inline-link-medium-font-size);font-weight:var(--instui-component-link-inline-link-medium-font-weight);line-height:var(--instui-component-link-inline-link-medium-line-height);text-decoration:var(--instui-component-link-text-decoration-within-text);display:inline}.instui-link.-inline.-sm{font-size:var(--instui-component-link-inline-link-small-font-size);font-weight:var(--instui-component-link-inline-link-small-font-weight);line-height:var(--instui-component-link-inline-link-small-line-height)}.instui-link.-inline.-lg{font-size:var(--instui-component-link-inline-link-large-font-size);font-weight:var(--instui-component-link-inline-link-large-font-weight);line-height:var(--instui-component-link-inline-link-large-line-height)}.instui-link.-unstyled{color:var(--instui-component-link-unstyled-text-color);text-decoration:none}.instui-link.-size-small{gap:var(--instui-component-link-gap-sm);font-size:var(--instui-component-link-font-size-sm);line-height:var(--instui-component-link-line-height-sm)}.instui-link.-size-large{gap:var(--instui-component-link-gap-lg);font-size:var(--instui-component-link-font-size-lg);line-height:var(--instui-component-link-line-height-lg)}.instui-list{color:var(--instui-component-list-item-color);font-family:var(--instui-component-list-item-font-family);font-size:var(--instui-component-list-item-font-size-medium);font-weight:var(--instui-component-list-item-font-weight);line-height:var(--instui-component-list-item-line-height);padding-inline-start:var(--instui-component-list-list-padding)}.instui-list>li{margin:var(--instui-component-list-item-spacing-medium) 0}.instui-list.-size-sm{font-size:var(--instui-component-list-item-font-size-small)}.instui-list.-size-sm>li{margin:var(--instui-component-list-item-spacing-small) 0}.instui-list.-size-lg{font-size:var(--instui-component-list-item-font-size-large)}.instui-list.-size-lg>li{margin:var(--instui-component-list-item-spacing-large) 0}.instui-list.-ordered>li::marker{font-weight:var(--instui-component-list-ordered-number-font-weight)}.instui-list.-ordered>li{padding-inline-start:var(--instui-component-list-ordered-number-margin)}.instui-list.-delimiter-solid>li+li{border-top:var(--instui-component-list-item-delimiter-solid-border-width) var(--instui-component-list-item-delimiter-solid-border-style) var(--instui-component-list-item-delimiter-solid-border-color);padding-top:var(--instui-component-list-item-spacing-medium)}.instui-list.-delimiter-dashed>li+li{border-top:var(--instui-component-list-item-delimiter-dashed-border-width) var(--instui-component-list-item-delimiter-dashed-border-style) var(--instui-component-list-item-delimiter-dashed-border-color);padding-top:var(--instui-component-list-item-spacing-medium)}.instui-list.-unstyled{padding-inline-start:0;list-style:none}.instui-list.-inline{align-items:center;gap:var(--instui-component-list-item-spacing-medium);flex-wrap:wrap;padding-inline-start:0;list-style:none;display:flex}.instui-list.-inline>li{margin:0}.instui-list.-size-small{font-size:var(--instui-component-list-item-font-size-small)}.instui-list.-size-small>li{margin:var(--instui-component-list-item-spacing-small) 0}.instui-list.-size-large{font-size:var(--instui-component-list-item-font-size-large)}.instui-list.-size-large>li{margin:var(--instui-component-list-item-spacing-large) 0}.instui-icon{display:inline-flex}[class*=-icon-]:before{content:"";vertical-align:-.125em;block-size:1em;inline-size:1em;-webkit-mask:var(--pantoken-glyph) center / contain no-repeat;mask:var(--pantoken-glyph) center / contain no-repeat;background:currentColor;flex:none;display:inline-block}.instui-checkbox{align-items:center;gap:var(--instui-component-checkbox-gap);color:var(--instui-component-checkbox-label-base-color);font-family:var(--instui-component-checkbox-font-family);font-size:var(--instui-component-checkbox-font-size-md);font-weight:var(--instui-component-checkbox-font-weight);line-height:var(--instui-component-checkbox-line-height);display:inline-flex}.instui-checkbox.-label-placement-end{flex-direction:row}.instui-checkbox.-label-placement-start{flex-direction:row-reverse}.instui-checkbox.-label-placement-top{flex-direction:column-reverse;align-items:flex-start}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]{-webkit-appearance:none;appearance:none;width:var(--instui-component-checkbox-control-size-md);height:var(--instui-component-checkbox-control-size-md);margin-block:var(--instui-component-checkbox-control-vertical-margin);border:var(--instui-component-checkbox-border-width) solid var(--instui-component-checkbox-border-color);border-radius:var(--instui-component-checkbox-border-radius);background:var(--instui-component-checkbox-background-color);cursor:pointer;--pantoken-cb-glyph:var(--instui-icon-check) center / contain no-repeat;flex:none;place-content:center;transition:background-color .15s,border-color .15s;display:inline-grid}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:before{content:"";background:oklch(from var(--instui-component-checkbox-background-checked-color) clamp(0, (.62 - l) * infinity, 1) 0 0);width:.75em;height:.75em;-webkit-mask:var(--pantoken-cb-glyph);mask:var(--pantoken-cb-glyph);transition:transform .1s;transform:scale(0)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-border-hover-color);background:var(--instui-component-checkbox-background-hover-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{border-color:var(--instui-component-checkbox-border-checked-color);background:var(--instui-component-checkbox-background-checked-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked:before,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate:before{transform:scale(1)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{--pantoken-cb-glyph:var(--instui-icon-minus) center / contain no-repeat}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:disabled{border-color:var(--instui-component-checkbox-border-disabled-color);background:var(--instui-component-checkbox-background-disabled-color);cursor:not-allowed}.instui-checkbox:has(input:disabled){color:var(--instui-component-checkbox-label-disabled-color)}.instui-checkbox:hover{color:var(--instui-component-checkbox-label-hover-color)}.instui-checkbox.-size-sm{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-sm input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-lg{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-lg input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]{border-color:var(--instui-component-checkbox-error-border-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-error-border-hover-color)}.instui-checkbox.-readonly{color:var(--instui-component-checkbox-label-readonly-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-readonly input[type=checkbox]{border-color:var(--instui-component-checkbox-border-readonly-color);background:var(--instui-component-checkbox-background-readonly-color)}@scope(.instui-checkbox){:scope.-required .asterisk{color:var(--instui-component-checkbox-asterisk-color)}}.instui-checkbox.-variant-toggle input[type=checkbox]{--pantoken-toggle-h:var(--instui-size-choice-control-height-md);--pantoken-toggle-w:var(--instui-component-radio-input-toggle-medium-height);--pantoken-toggle-bw:var(--instui-border-width-sm);--pantoken-toggle-inset:calc(var(--pantoken-toggle-bw) * 3);--pantoken-toggle-handle:calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);-webkit-appearance:none;appearance:none;width:var(--pantoken-toggle-w);height:var(--pantoken-toggle-h);border-radius:var(--pantoken-toggle-h);box-shadow:inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);background:var(--instui-color-background-muted);cursor:pointer;border:0;transition:background-color .15s;position:relative}.instui-checkbox.-variant-toggle input[type=checkbox]:before{content:"";box-sizing:border-box;width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);border:var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);background:var(--instui-component-radio-input-toggle-handle-text);top:50%;border-radius:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:after{content:"";width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);background:var(--instui-color-text-muted);-webkit-mask:var(--instui-icon-x) center / 58% no-repeat;mask:var(--instui-icon-x) center / 58% no-repeat;top:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked{background:var(--instui-component-radio-input-toggle-background-success)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:before{border-color:var(--instui-component-radio-input-toggle-background-success);inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:after{background:var(--instui-component-radio-input-toggle-background-success);-webkit-mask:var(--instui-icon-check) center / 58% no-repeat;mask:var(--instui-icon-check) center / 58% no-repeat;inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-size-small{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-small input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-large{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-large input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}.instui-radio{align-items:center;gap:var(--instui-component-radio-input-gap);color:var(--instui-component-radio-input-label-base-color);font-family:var(--instui-component-radio-input-font-family);font-size:var(--instui-component-radio-input-font-size-md);font-weight:var(--instui-component-radio-input-font-weight);line-height:var(--instui-component-radio-input-line-height-md);display:inline-flex}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]{-webkit-appearance:none;appearance:none;width:var(--instui-component-radio-input-control-size-md);height:var(--instui-component-radio-input-control-size-md);margin-block:var(--instui-component-radio-input-control-vertical-margin);border:var(--instui-component-radio-input-border-width) solid var(--instui-component-radio-input-border-color);background:var(--instui-component-radio-input-background-color);cursor:pointer;border-radius:50%;flex:none;place-content:center;transition:border-color .15s,background-color .15s;display:inline-grid}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:before{content:"";width:calc(var(--instui-component-radio-input-control-size-md) - 2 * var(--instui-component-radio-input-checked-inset-md));height:calc(var(--instui-component-radio-input-control-size-md) - 2 * var(--instui-component-radio-input-checked-inset-md));background:var(--instui-component-radio-input-border-selected-color);border-radius:50%;transition:transform .1s;transform:scale(0)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:hover{border-color:var(--instui-component-radio-input-border-hover-color);background:var(--instui-component-radio-input-background-hover-color)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:checked{border-color:var(--instui-component-radio-input-border-selected-color)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:checked:before{transform:scale(1)}.instui-radio:not(.-variant-toggle):not(.-toggle) input[type=radio]:disabled{border-color:var(--instui-component-radio-input-border-disabled-color);background:var(--instui-component-radio-input-background-disabled-color);cursor:not-allowed}.instui-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled){color:var(--instui-component-radio-input-label-disabled-color)}.instui-radio:not(.-variant-toggle):not(.-toggle):hover{color:var(--instui-component-radio-input-label-hover-color)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-sm{font-size:var(--instui-component-radio-input-font-size-sm);line-height:var(--instui-component-radio-input-line-height-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=radio]{width:var(--instui-component-radio-input-control-size-sm);height:var(--instui-component-radio-input-control-size-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm));height:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm))}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-lg{font-size:var(--instui-component-radio-input-font-size-lg);line-height:var(--instui-component-radio-input-line-height-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=radio]{width:var(--instui-component-radio-input-control-size-lg);height:var(--instui-component-radio-input-control-size-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg));height:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg))}.instui-radio:not(.-variant-toggle):not(.-toggle).-readonly{color:var(--instui-component-radio-input-label-readonly-color)}.instui-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=radio]{border-color:var(--instui-component-radio-input-border-readonly-color);background:var(--instui-component-radio-input-background-readonly-color)}.instui-radio.-variant-toggle{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success);height:var(--instui-component-radio-input-toggle-medium-height);border-radius:var(--instui-component-radio-input-toggle-border-radius);color:var(--instui-component-radio-input-label-base-color);font-size:var(--instui-component-radio-input-toggle-medium-font-size);text-transform:uppercase;white-space:nowrap;cursor:pointer;background:0 0;justify-content:center;gap:0;padding-inline:.875rem;line-height:1;transition:background-color .15s,color .15s;position:relative}.instui-radio.-variant-toggle input[type=radio]{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-radio.-variant-toggle.-context-off{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-off)}.instui-radio.-variant-toggle.-context-success{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success)}.instui-radio.-variant-toggle.-context-danger{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-danger)}.instui-radio.-variant-toggle.-context-warning{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-warning)}.instui-radio.-variant-toggle:has(input:checked){background:var(--pantoken-rt-fill);color:var(--instui-component-radio-input-toggle-handle-text);box-shadow:var(--instui-elevation-depth1)}.instui-radio.-variant-toggle:has(input:focus-visible){text-decoration:underline}.instui-radio.-variant-toggle:has(input:focus-visible):before{content:"";border:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);border-radius:calc(var(--instui-component-radio-input-toggle-border-radius) + .0625rem);pointer-events:none;position:absolute;inset:-.25rem}.instui-radio.-variant-toggle:has(input:disabled){opacity:.5;cursor:not-allowed}.instui-radio.-variant-toggle.-size-sm{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-variant-toggle.-size-lg{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-small{font-size:var(--instui-component-radio-input-font-size-sm);line-height:var(--instui-component-radio-input-line-height-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-small input[type=radio]{width:var(--instui-component-radio-input-control-size-sm);height:var(--instui-component-radio-input-control-size-sm)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-small input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm));height:calc(var(--instui-component-radio-input-control-size-sm) - 2 * var(--instui-component-radio-input-checked-inset-sm))}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-large{font-size:var(--instui-component-radio-input-font-size-lg);line-height:var(--instui-component-radio-input-line-height-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-large input[type=radio]{width:var(--instui-component-radio-input-control-size-lg);height:var(--instui-component-radio-input-control-size-lg)}.instui-radio:not(.-variant-toggle):not(.-toggle).-size-large input[type=radio]:before{width:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg));height:calc(var(--instui-component-radio-input-control-size-lg) - 2 * var(--instui-component-radio-input-checked-inset-lg))}.instui-radio.-variant-toggle.-size-small{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-variant-toggle.-size-large{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}.instui-radio.-toggle{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success);height:var(--instui-component-radio-input-toggle-medium-height);border-radius:var(--instui-component-radio-input-toggle-border-radius);color:var(--instui-component-radio-input-label-base-color);font-size:var(--instui-component-radio-input-toggle-medium-font-size);text-transform:uppercase;white-space:nowrap;cursor:pointer;background:0 0;justify-content:center;gap:0;padding-inline:.875rem;line-height:1;transition:background-color .15s,color .15s;position:relative}.instui-radio.-toggle input[type=radio]{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-radio.-toggle.-context-off{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-off)}.instui-radio.-toggle.-context-success{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-success)}.instui-radio.-toggle.-context-danger{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-danger)}.instui-radio.-toggle.-context-warning{--pantoken-rt-fill:var(--instui-component-radio-input-toggle-background-warning)}.instui-radio.-toggle:has(input:checked){background:var(--pantoken-rt-fill);color:var(--instui-component-radio-input-toggle-handle-text);box-shadow:var(--instui-elevation-depth1)}.instui-radio.-toggle:has(input:focus-visible){text-decoration:underline}.instui-radio.-toggle:has(input:focus-visible):before{content:"";border:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);border-radius:calc(var(--instui-component-radio-input-toggle-border-radius) + .0625rem);pointer-events:none;position:absolute;inset:-.25rem}.instui-radio.-toggle:has(input:disabled){opacity:.5;cursor:not-allowed}.instui-radio.-toggle.-size-sm{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-toggle.-size-lg{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}.instui-radio.-toggle.-size-small{height:var(--instui-component-radio-input-toggle-small-height);font-size:var(--instui-component-radio-input-toggle-small-font-size);padding-inline:.5rem}.instui-radio.-toggle.-size-large{height:var(--instui-component-radio-input-toggle-large-height);font-size:var(--instui-component-radio-input-toggle-large-font-size);padding-inline:1rem}@keyframes pantoken-spinner-rotate{to{transform:rotate(360deg)}}.instui-spinner{width:var(--instui-component-spinner-spinner-size-md);height:var(--instui-component-spinner-spinner-size-md);border:var(--instui-component-spinner-stroke-width-md) solid var(--instui-component-spinner-track-color);border-top-color:var(--instui-component-spinner-color);border-radius:50%;animation:.8s linear infinite pantoken-spinner-rotate;display:inline-block}.instui-spinner.-size-xs{width:var(--instui-component-spinner-spinner-size-xs);height:var(--instui-component-spinner-spinner-size-xs);border-width:var(--instui-component-spinner-stroke-width-xs)}.instui-spinner.-size-sm{width:var(--instui-component-spinner-spinner-size-sm);height:var(--instui-component-spinner-spinner-size-sm);border-width:var(--instui-component-spinner-stroke-width-sm)}.instui-spinner.-size-lg{width:var(--instui-component-spinner-spinner-size-lg);height:var(--instui-component-spinner-spinner-size-lg);border-width:var(--instui-component-spinner-stroke-width-lg)}.instui-spinner.-color-inverse{border-top-color:var(--instui-component-spinner-inverse-color)}.instui-spinner.-size-x-small{width:var(--instui-component-spinner-spinner-size-xs);height:var(--instui-component-spinner-spinner-size-xs);border-width:var(--instui-component-spinner-stroke-width-xs)}.instui-spinner.-size-small{width:var(--instui-component-spinner-spinner-size-sm);height:var(--instui-component-spinner-spinner-size-sm);border-width:var(--instui-component-spinner-stroke-width-sm)}.instui-spinner.-size-large{width:var(--instui-component-spinner-spinner-size-lg);height:var(--instui-component-spinner-spinner-size-lg);border-width:var(--instui-component-spinner-stroke-width-lg)}.instui-progress{width:100%;height:var(--instui-component-progress-bar-medium-height);background:var(--instui-component-progress-bar-track-color);border:var(--instui-component-progress-bar-track-bottom-border-width) solid var(--instui-component-progress-bar-border-color);border-radius:var(--instui-component-progress-bar-border-radius);display:block;position:relative;overflow:hidden}.instui-progress:after{content:"";height:var(--instui-component-progress-bar-track-bottom-border-width);background:var(--instui-component-progress-bar-track-bottom-border-color);pointer-events:none;inset-inline:0;position:absolute;bottom:0}.instui-progress.-size-xs{height:var(--instui-component-progress-bar-x-small-height)}.instui-progress.-size-sm{height:var(--instui-component-progress-bar-small-height)}.instui-progress.-size-lg{height:var(--instui-component-progress-bar-large-height)}@scope(.instui-progress){:scope>.bar{background:var(--instui-color-background-brand);border-radius:var(--instui-component-progress-bar-border-radius);height:100%}:scope.-should-animate>.bar{transition:width .5s}}.instui-progress.-color-brand .bar{background:var(--instui-color-background-brand)}.instui-progress.-color-info .bar{background:var(--instui-color-background-info)}.instui-progress.-color-success .bar{background:var(--instui-color-background-success)}.instui-progress.-color-warning .bar{background:var(--instui-color-background-warning)}.instui-progress.-color-danger .bar{background:var(--instui-color-background-error)}.instui-progress.-color-primary-inverse{background:var(--instui-component-progress-bar-track-color-inverse);border-color:var(--instui-component-progress-bar-border-color-inverse);color:var(--instui-component-progress-bar-text-color-inverse)}.instui-progress.-color-primary-inverse:after{background:var(--instui-component-progress-bar-track-bottom-border-color-inverse)}.instui-progress.-color-primary-inverse .bar{background:var(--instui-component-progress-bar-meter-color-brand-inverse)}.instui-progress-value{padding:0 var(--instui-component-progress-bar-value-padding);color:var(--instui-component-progress-bar-text-color);font-family:var(--instui-component-progress-bar-font-family);font-size:var(--instui-component-progress-bar-medium-value-font-size);font-weight:var(--instui-component-progress-bar-font-weight);line-height:var(--instui-component-progress-bar-line-height)}.instui-progress.-color-inverse~.instui-progress-value,.instui-progress-value.-color-inverse{color:var(--instui-component-progress-bar-text-color-inverse)}.instui-progress.-size-x-small{height:var(--instui-component-progress-bar-x-small-height)}.instui-progress.-size-small{height:var(--instui-component-progress-bar-small-height)}.instui-progress.-size-large{height:var(--instui-component-progress-bar-large-height)}.instui-progress.-meter-color-brand .bar{background:var(--instui-color-background-brand)}.instui-progress.-meter-color-info .bar{background:var(--instui-color-background-info)}.instui-progress.-meter-color-success .bar{background:var(--instui-color-background-success)}.instui-progress.-meter-color-warning .bar,.instui-progress.-meter-color-alert .bar{background:var(--instui-color-background-warning)}.instui-progress.-meter-color-danger .bar{background:var(--instui-color-background-error)}.instui-menu{min-width:var(--instui-component-menu-min-width);max-width:var(--instui-component-menu-max-width);background:var(--instui-component-menu-item-background);border:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);border-radius:var(--instui-border-radius-md);padding:var(--instui-spacing-space-xs) 0}@scope(.instui-menu){:scope>.item{padding:var(--instui-component-menu-item-padding-vertical) var(--instui-component-menu-item-padding-horizontal);color:var(--instui-component-menu-item-label-color);font-family:var(--instui-component-menu-item-font-family);font-size:var(--instui-component-menu-item-font-size);font-weight:var(--instui-component-menu-item-font-weight);line-height:var(--instui-component-menu-item-line-height);cursor:pointer;display:block}:scope>.item.-disabled{opacity:var(--instui-opacity-disabled);pointer-events:none;cursor:not-allowed}:scope>.item:hover,:scope>.item.-highlighted{background:var(--instui-component-menu-item-highlighted-background);color:var(--instui-component-menu-item-highlighted-label-color)}:scope>.item.-active,:scope>.item[aria-checked=true]{background:var(--instui-component-menu-item-active-background);color:var(--instui-component-menu-item-active-label-color)}:scope>.item.-active:hover,:scope>.item[aria-checked=true]:hover{background:var(--instui-component-menu-item-selected-highlighted-background)}.item-info{color:var(--instui-component-menu-item-label-info-color)}:scope>.item:hover .item-info,:scope>.item.-highlighted .item-info{color:var(--instui-component-menu-item-highlighted-label-info-color)}:scope>.group{padding:var(--instui-component-menu-group-padding-vertical) var(--instui-component-menu-group-padding-horizontal);background:var(--instui-component-menu-group-background);color:var(--instui-component-menu-group-color);font-family:var(--instui-component-menu-group-font-family);font-size:var(--instui-component-menu-group-font-size);font-weight:var(--instui-component-menu-group-font-weight)}:scope>.separator{height:var(--instui-component-menu-separator-height);background:var(--instui-component-menu-separator-background);margin:var(--instui-component-menu-separator-margin-vertical) var(--instui-component-menu-separator-margin-horizontal)}}.instui-modal{max-width:var(--instui-component-modal-medium-max-width);background:var(--instui-component-modal-background-color);color:var(--instui-component-modal-text-color);border:var(--instui-component-modal-border-width) solid var(--instui-component-modal-border-color);border-radius:var(--instui-component-modal-border-radius);font-family:var(--instui-component-modal-font-family);box-shadow:var(--instui-elevation-topmost);overflow:hidden}dialog.instui-modal{margin:auto;padding:0}dialog.instui-modal::backdrop{background:var(--instui-component-mask-background-color)}dialog.instui-modal.-blur::backdrop{backdrop-filter:blur(.5rem)}.instui-modal.-size-sm{max-width:var(--instui-component-modal-small-max-width)}.instui-modal.-size-lg{max-width:var(--instui-component-modal-large-max-width)}.instui-modal.-size-auto{max-width:none;min-width:var(--instui-component-modal-auto-min-width)}.instui-modal.-size-fullscreen{border-radius:0;width:auto;max-width:none;height:auto;max-height:none;margin:0;position:fixed;inset:0}.instui-modal.-overflow-fit{max-block-size:calc(100dvh - var(--instui-spacing-space-xl) * 2);flex-direction:column;display:flex}.instui-modal.-color-inverse{background:var(--instui-component-modal-inverse-background-color);color:var(--instui-component-modal-inverse-text-color);border-color:var(--instui-component-modal-inverse-border-color)}@scope(.instui-modal){:scope.-overflow-fit>.body{overflow-y:auto}:scope>.header{padding:var(--instui-component-modal-header-padding);background:var(--instui-component-modal-header-background-color);border-bottom:var(--instui-component-modal-header-border-width) solid var(--instui-component-modal-header-border-color)}:scope>.body{padding:var(--instui-component-modal-body-padding)}:scope>.body:has(>img){padding:0}:scope>.body:has(>img) img{width:100%;display:block}:scope>.footer{padding:var(--instui-component-modal-footer-padding);background:var(--instui-component-modal-footer-background-color);border-top:var(--instui-component-modal-footer-border-width) solid var(--instui-component-modal-footer-border-color);border-radius:0 0 var(--instui-component-modal-footer-border-radius) var(--instui-component-modal-footer-border-radius)}:scope.-density-compact>.header{padding:var(--instui-component-modal-header-padding-compact)}:scope.-density-compact>.body{padding:var(--instui-component-modal-body-padding-compact)}:scope.-density-compact>.footer{padding:var(--instui-component-modal-footer-padding-compact)}:scope.-color-inverse>.header{background:var(--instui-component-modal-header-inverse-background-color);border-bottom-color:var(--instui-component-modal-header-inverse-border-color)}:scope.-color-inverse>.body{background:var(--instui-component-modal-body-inverse-background-color)}:scope.-color-inverse>.footer{background:var(--instui-component-modal-footer-inverse-background-color);border-top-color:var(--instui-component-modal-footer-inverse-border-color)}}.instui-modal.-size-small{max-width:var(--instui-component-modal-small-max-width)}.instui-modal.-size-large{max-width:var(--instui-component-modal-large-max-width)}.instui-breadcrumb{align-items:center;gap:var(--instui-component-breadcrumb-gap-md);font-family:var(--instui-component-link-font-family);font-size:var(--instui-component-link-font-size-md);flex-wrap:wrap;display:flex}.instui-breadcrumb.-size-sm{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-lg{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}.instui-breadcrumb.-size-sm .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}.instui-breadcrumb.-size-lg .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}@scope(.instui-breadcrumb){:scope a{color:var(--instui-component-link-text-color);text-decoration:none}:scope a [class*=-icon-]{line-height:1}:scope a:hover{color:var(--instui-component-link-text-hover-color);text-decoration:underline}:scope>.item:not(:last-child):after{content:"/";color:var(--instui-color-text-muted);margin-inline-start:var(--instui-component-breadcrumb-gap-md)}}.instui-breadcrumb.-size-small{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-large{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}.instui-breadcrumb.-size-small .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}.instui-breadcrumb.-size-large .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}.instui-billboard{text-align:center;background:var(--instui-component-billboard-background-color);padding:var(--instui-component-billboard-padding-medium);margin:var(--instui-component-billboard-medium-margin);font-family:var(--instui-component-billboard-font-family);color:var(--instui-color-text-base);display:block}.instui-billboard.-size-sm{padding:var(--instui-component-billboard-padding-small)}.instui-billboard.-size-md,.instui-billboard.-size-medium{padding:var(--instui-component-billboard-padding-medium)}.instui-billboard.-size-lg,.instui-billboard.-size-large{padding:var(--instui-component-billboard-padding-large);margin:var(--instui-component-billboard-large-margin)}.instui-billboard.-size-sm .message{font-size:var(--instui-font-size-text-sm)}.instui-billboard.-size-md .message,.instui-billboard.-size-medium .message{font-size:var(--instui-font-size-text-base)}.instui-billboard.-size-lg .message,.instui-billboard.-size-large .message{font-size:1.375rem}.instui-billboard.-clickable{cursor:pointer;border:var(--instui-component-billboard-button-border-width) var(--instui-component-billboard-button-border-style) transparent;border-radius:var(--instui-component-billboard-button-border-radius)}.instui-billboard.-clickable:hover{border-style:dashed;border-color:var(--instui-color-text-base)}.instui-billboard.-clickable:focus{border-style:solid;border-color:var(--instui-color-text-base);outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-billboard.-clickable:focus-visible{outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-billboard.-clickable:active{background:var(--instui-component-billboard-clickable-active-bg);border-style:solid;border-color:var(--instui-color-text-base)}.instui-billboard>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard>.hero[class*=-icon-]{line-height:1}.instui-billboard.-size-sm>.hero,.instui-billboard.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}.instui-billboard.-size-md>.hero,.instui-billboard.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard.-size-lg>.hero,.instui-billboard.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}@scope(.instui-billboard){:scope>.hero{color:var(--instui-color-text-base);font-size:var(--instui-component-icon-illu-md);justify-content:center;margin-block-end:var(--instui-spacing-space-sm);display:inline-flex}:scope>.hero[class*=-icon-]{line-height:1}:scope.-size-sm>.hero{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-md>.hero,:scope.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}:scope.-size-lg>.hero,:scope.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-sm>.hero[class*=-icon-],:scope.-size-small>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-md>.hero[class*=-icon-],:scope.-size-medium>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-md)}:scope.-size-lg>.hero[class*=-icon-],:scope.-size-large>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-lg)}:scope>.heading{margin:0 0 var(--instui-spacing-space-xs);color:var(--instui-color-text-base);font-weight:700;font-size:var(--instui-component-text-font-size-x-x-large)}:scope>.message{color:var(--instui-color-text-base);font-size:var(--instui-font-size-text-base)}:scope.-clickable:hover>.hero{color:var(--instui-component-link-text-color)}:scope.-clickable:active>.hero{color:var(--instui-component-link-on-color-text-color)}}.instui-billboard.-size-small{padding:var(--instui-component-billboard-padding-small)}.instui-billboard.-size-medium,.instui-billboard.-size-medium{padding:var(--instui-component-billboard-padding-medium)}.instui-billboard.-size-large{padding:var(--instui-component-billboard-padding-large);margin:var(--instui-component-billboard-large-margin)}.instui-billboard.-size-small .message{font-size:var(--instui-font-size-text-sm)}.instui-billboard.-size-medium .message,.instui-billboard.-size-medium .message{font-size:var(--instui-font-size-text-base)}.instui-billboard.-size-large .message{font-size:1.375rem}.instui-billboard.-size-small>.hero,.instui-billboard.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}.instui-billboard.-size-medium>.hero,.instui-billboard.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard.-size-large>.hero,.instui-billboard.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-medium>.hero,:scope.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}:scope.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-small>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-medium>.hero[class*=-icon-],:scope.-size-medium>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-md)}:scope.-size-large>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-lg)}.instui-rating{align-items:center;gap:var(--instui-component-rating-icon-icon-margin);font-size:var(--instui-component-rating-icon-medium-icon-font-size);color:var(--instui-component-rating-icon-icon-empty-color);display:inline-flex}.instui-rating.-size-sm{font-size:var(--instui-component-rating-icon-small-icon-font-size)}.instui-rating.-size-lg{font-size:var(--instui-component-rating-icon-large-icon-font-size)}@scope(.instui-rating){.-icon-star-solid{color:var(--instui-component-rating-icon-icon-filled-color)}:scope>.label{color:var(--instui-color-text-base);font-family:var(--instui-font-family-base);font-size:var(--instui-font-size-text-base);margin-inline-start:var(--instui-component-rating-icon-icon-margin)}}.instui-rating.-size-small{font-size:var(--instui-component-rating-icon-small-icon-font-size)}.instui-rating.-size-large{font-size:var(--instui-component-rating-icon-large-icon-font-size)}.instui-toggle-group{border:var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);border-radius:var(--instui-border-radius-md);background:var(--instui-color-background-elevated-surface-base);color:var(--instui-component-toggle-details-text-color);font-family:var(--instui-component-toggle-details-font-family);font-weight:var(--instui-component-toggle-details-font-weight);line-height:var(--instui-component-toggle-details-line-height);display:block;overflow:hidden}.instui-toggle-group>summary{align-items:center;gap:var(--instui-component-toggle-details-icon-margin);cursor:pointer;padding:var(--instui-component-toggle-details-content-padding-medium);font-size:var(--instui-component-toggle-details-font-size-medium);list-style:none;display:flex}.instui-toggle-group>summary::-webkit-details-marker{display:none}.instui-toggle-group>summary:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat;background:currentColor;flex:none;transition:transform .2s}.instui-toggle-group[open]>summary:before{transform:rotate(90deg)}.instui-toggle-group>:not(summary){border-block-start:var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);padding:var(--instui-component-toggle-details-content-padding-medium)}.instui-toggle-group.-size-sm>summary,.instui-toggle-group.-size-sm>:not(summary){font-size:var(--instui-component-toggle-details-font-size-small);padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-group.-size-lg>summary,.instui-toggle-group.-size-lg>:not(summary){font-size:var(--instui-component-toggle-details-font-size-large);padding:var(--instui-component-toggle-details-content-padding-large)}.instui-toggle-group.-without-border{border:0}.instui-toggle-group.-without-border>:not(summary){border-block-start:0}.instui-toggle-group.-size-small>summary,.instui-toggle-group.-size-small>:not(summary){font-size:var(--instui-component-toggle-details-font-size-small);padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-group.-size-large>summary,.instui-toggle-group.-size-large>:not(summary){font-size:var(--instui-component-toggle-details-font-size-large);padding:var(--instui-component-toggle-details-content-padding-large)}.instui-context-view{padding:var(--instui-spacing-space-md);background:var(--instui-color-background-elevated-surface-base);color:var(--instui-color-text-base);border:var(--instui-component-context-view-arrow-border-width) solid var(--instui-component-context-view-arrow-border-color);border-radius:var(--instui-component-context-view-border-radius);box-shadow:var(--instui-elevation-above);display:inline-block;position:relative}.instui-context-view:before,.instui-context-view:after{content:"";border-style:solid;border-color:#0000;position:absolute}.instui-context-view:before{border-width:calc(var(--instui-component-context-view-arrow-size) + var(--instui-component-context-view-arrow-border-width))}.instui-context-view:after{border-width:var(--instui-component-context-view-arrow-size)}.instui-context-view:before{border-top-color:var(--instui-component-context-view-arrow-border-color);top:100%;inset-inline-start:calc(var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width))}.instui-context-view:after{border-top-color:var(--instui-component-context-view-arrow-background-color);top:100%;inset-inline-start:var(--instui-spacing-space-lg)}.instui-context-view.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color);top:auto;bottom:100%}.instui-context-view.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color);top:auto;bottom:100%}.instui-context-view.-placement-start:before,.instui-context-view.-placement-start:after{top:50%;border-top-color:#0000;inset-inline-start:100%;transform:translateY(-50%)}.instui-context-view.-placement-start:before{border-inline-start-color:var(--instui-component-context-view-arrow-border-color)}.instui-context-view.-placement-start:after{border-inline-start-color:var(--instui-component-context-view-arrow-background-color)}.instui-context-view.-placement-end:before,.instui-context-view.-placement-end:after{top:50%;border-top-color:#0000;inset-inline:auto 100%;transform:translateY(-50%)}.instui-context-view.-placement-end:before{border-inline-end-color:var(--instui-component-context-view-arrow-border-color)}.instui-context-view.-placement-end:after{border-inline-end-color:var(--instui-component-context-view-arrow-background-color)}.instui-context-view.-color-inverse{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse:before{border-top-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse:after{border-top-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-start:before{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-start:after{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-end:before{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-end:after{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-background-color-inverse)}[popover].instui-context-view{margin:0;position:fixed;overflow:visible}[popover].instui-context-view:not(:popover-open){display:none}@supports (position-area:block-end){[popover].instui-context-view{position-anchor:--pantoken-anchor;position-try-fallbacks:flip-block, flip-inline}[popover].instui-context-view.-placement-top{position-area:block-start}[popover].instui-context-view.-placement-bottom{position-area:block-end}[popover].instui-context-view.-placement-start{position-area:inline-start center}[popover].instui-context-view.-placement-end{position-area:inline-end center}}.instui-progress-circle{--value:0;--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand);--pantoken-pc-track:var(--instui-component-progress-circle-track-color);--pantoken-pc-stroke:var(--instui-component-progress-circle-medium-stroke-width);width:var(--instui-component-progress-circle-medium-size);height:var(--instui-component-progress-circle-medium-size);color:var(--instui-component-progress-circle-color);font-family:var(--instui-component-progress-circle-font-family);font-weight:var(--instui-component-progress-circle-font-weight);line-height:var(--instui-component-progress-circle-line-height);justify-content:center;align-items:center;display:inline-flex;position:relative}.instui-progress-circle:before{content:"";background:conic-gradient(var(--pantoken-pc-fill) calc(var(--value) * 1%), var(--pantoken-pc-track) 0);-webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);mask:radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);border-radius:50%;position:absolute;inset:0}.instui-progress-circle .value{z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.instui-progress-circle.-size-xs{width:var(--instui-component-progress-circle-x-small-size);height:var(--instui-component-progress-circle-x-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-x-small-stroke-width)}.instui-progress-circle.-size-sm{width:var(--instui-component-progress-circle-small-size);height:var(--instui-component-progress-circle-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-small-stroke-width)}.instui-progress-circle.-size-lg{width:var(--instui-component-progress-circle-large-size);height:var(--instui-component-progress-circle-large-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-large-stroke-width)}.instui-progress-circle.-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand)}.instui-progress-circle.-color-primary-inverse.-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand-inverse)}.instui-progress-circle.-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info)}.instui-progress-circle.-color-primary-inverse.-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info-inverse)}.instui-progress-circle.-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success)}.instui-progress-circle.-color-primary-inverse.-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success-inverse)}.instui-progress-circle.-color-warning{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning)}.instui-progress-circle.-color-primary-inverse.-color-warning{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning-inverse)}.instui-progress-circle.-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger)}.instui-progress-circle.-color-primary-inverse.-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger-inverse)}.instui-progress-circle.-color-primary-inverse{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand-inverse);--pantoken-pc-track:var(--instui-component-progress-circle-track-color-inverse);color:var(--instui-component-progress-circle-color-inverse)}.instui-progress-circle.-size-x-small{width:var(--instui-component-progress-circle-x-small-size);height:var(--instui-component-progress-circle-x-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-x-small-stroke-width)}.instui-progress-circle.-size-small{width:var(--instui-component-progress-circle-small-size);height:var(--instui-component-progress-circle-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-small-stroke-width)}.instui-progress-circle.-size-large{width:var(--instui-component-progress-circle-large-size);height:var(--instui-component-progress-circle-large-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-large-stroke-width)}.instui-progress-circle.-meter-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand)}.instui-progress-circle.-meter-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info)}.instui-progress-circle.-meter-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success)}.instui-progress-circle.-meter-color-warning,.instui-progress-circle.-meter-color-alert{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning)}.instui-progress-circle.-meter-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger)}.instui-pagination{align-items:center;gap:var(--instui-component-pagination-page-indicator-gap);font-family:var(--instui-font-family-base);flex-wrap:wrap;display:inline-flex}@scope(.instui-pagination){:scope>.page,:scope>.arrow{min-block-size:2rem;min-inline-size:2rem;padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);color:var(--instui-color-text-interactive-navigation-primary-base);border:var(--instui-border-width-md) solid transparent;border-radius:var(--instui-component-base-button-border-radius);font:inherit;font-weight:var(--instui-font-weight-interactive);cursor:pointer;background:0 0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}:scope>.arrow [class*=-icon-]{line-height:1}:scope>.page:hover,:scope>.arrow:hover{background:var(--instui-color-background-muted);color:var(--instui-color-text-interactive-navigation-primary-hover)}:scope>.page[aria-current],:scope>.page.-current{background:var(--instui-color-background-interactive-action-primary-base);color:var(--instui-color-text-interactive-action-primary-base);border-color:var(--instui-color-background-interactive-action-primary-base)}:scope>.page[aria-current]:hover,:scope>.page.-current:hover{background:var(--instui-color-background-interactive-action-primary-hover);border-color:var(--instui-color-background-interactive-action-primary-hover);color:var(--instui-color-text-interactive-action-primary-base)}:scope>.arrow:disabled,:scope>.arrow[aria-disabled=true]{color:var(--instui-color-text-muted);opacity:var(--instui-opacity-disabled);cursor:not-allowed;background:0 0}:scope>.ellipsis{min-inline-size:2rem;color:var(--instui-color-text-muted);justify-content:center;align-items:center;display:inline-flex}:scope>.page-input-label{color:var(--instui-component-pagination-page-input-label-color)}}.instui-pagination.-variant-input{gap:var(--instui-component-pagination-page-input-input-spacing)}.instui-pagination.-variant-input .instui-text-input,.instui-pagination.-variant-input .instui-number-input{inline-size:var(--instui-component-pagination-page-input-input-width)}.instui-truncate{text-overflow:ellipsis;white-space:nowrap;font-family:var(--instui-component-truncate-text-font-family);line-height:var(--instui-component-truncate-text-line-height);overflow:hidden}.instui-truncate.-lines{-webkit-line-clamp:var(--lines,2);line-clamp:var(--lines,2);white-space:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.instui-toggle-details{color:var(--instui-component-toggle-details-text-color);font-family:var(--instui-component-toggle-details-font-family);font-weight:var(--instui-component-toggle-details-font-weight);line-height:var(--instui-component-toggle-details-line-height)}.instui-toggle-details>summary{align-items:center;gap:var(--instui-component-toggle-details-icon-margin);cursor:pointer;font-size:var(--instui-component-toggle-details-font-size-medium);padding:var(--instui-component-toggle-details-toggle-padding);color:var(--instui-component-toggle-details-text-color);list-style:none;display:flex}.instui-toggle-details>summary::-webkit-details-marker{display:none}.instui-toggle-details>summary:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat;background:currentColor;flex:none;transition:transform .2s}.instui-toggle-details[open]>summary:before{transform:rotate(90deg)}.instui-toggle-details.-chevron-end>summary:before{order:1;margin-inline-start:auto}.instui-toggle-details.-variant-filled>summary{background:var(--instui-color-background-interactive-action-secondary-base);border-radius:var(--instui-component-toggle-details-toggle-border-radius)}.instui-toggle-details>:not(summary){padding:var(--instui-component-toggle-details-content-padding-medium)}.instui-toggle-details.-size-sm>summary{font-size:var(--instui-component-toggle-details-font-size-small)}.instui-toggle-details.-size-sm>:not(summary){padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-details.-size-lg>summary{font-size:var(--instui-component-toggle-details-font-size-large)}.instui-toggle-details.-size-lg>:not(summary){padding:var(--instui-component-toggle-details-content-padding-large)}.instui-toggle-details.-size-small>summary{font-size:var(--instui-component-toggle-details-font-size-small)}.instui-toggle-details.-size-small>:not(summary){padding:var(--instui-component-toggle-details-content-padding-small)}.instui-toggle-details.-size-large>summary{font-size:var(--instui-component-toggle-details-font-size-large)}.instui-toggle-details.-size-large>:not(summary){padding:var(--instui-component-toggle-details-content-padding-large)}.instui-file-drop{text-align:center;padding:var(--instui-spacing-space-lg);color:var(--instui-color-text-base);background:var(--instui-component-file-drop-background-color);border:var(--instui-component-file-drop-border-width) var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);border-radius:var(--instui-component-file-drop-border-radius);display:block}.instui-file-drop:hover,.instui-file-drop.-hover{border-color:var(--instui-component-file-drop-hover-border-color)}.instui-file-drop.-accepted{border-color:var(--instui-component-file-drop-accepted-color)}.instui-file-drop.-rejected{border-color:var(--instui-component-file-drop-rejected-color)}.instui-file-drop>[class*=-icon-]{line-height:1}.instui-side-nav-bar{gap:var(--instui-component-side-nav-bar-content-gap);padding:var(--instui-component-side-nav-bar-content-margin);box-sizing:border-box;background:var(--instui-component-side-nav-bar-background-color);block-size:100%;min-block-size:100%;inline-size:fit-content;color:var(--instui-component-side-nav-bar-font-color);font-family:var(--instui-component-side-nav-bar-item-font-family);flex-direction:column;display:flex}@scope(.instui-side-nav-bar){:scope>.item{align-items:center;gap:var(--instui-spacing-space2xs);padding:var(--instui-component-side-nav-bar-item-content-padding);min-inline-size:var(--instui-component-side-nav-bar-minimized-width);color:var(--instui-component-side-nav-bar-item-font-color);background:var(--instui-component-side-nav-bar-item-background-color);border-radius:var(--instui-component-side-nav-bar-item-border-radius);font-size:var(--instui-component-side-nav-bar-item-font-size);font-weight:var(--instui-component-side-nav-bar-item-font-weight);line-height:var(--instui-component-side-nav-bar-item-line-height);text-align:center;text-decoration:var(--instui-component-side-nav-bar-item-link-text-decoration);cursor:pointer;flex-direction:column;display:flex}:scope>.item [class*=-icon-]{line-height:1}:scope>.item:hover{background:var(--instui-component-side-nav-bar-item-hover-background-color)}:scope>.item.-selected{background:var(--instui-component-side-nav-bar-item-selected-background-color);color:var(--instui-component-side-nav-bar-item-selected-font-color)}}.instui-side-nav-bar.-minimized{inline-size:var(--instui-component-side-nav-bar-minimized-width)}.instui-side-nav-bar.-minimized .item .label{display:none}.instui-tree-browser{border-radius:var(--instui-component-tree-browser-border-radius);font-family:var(--instui-component-tree-browser-tree-collection-font-family);color:var(--instui-component-tree-browser-tree-button-name-text-color)}.instui-tree-browser details>summary,.instui-tree-browser .item{align-items:center;gap:var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);padding:var(--instui-component-tree-browser-tree-button-base-spacing-medium);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-medium);line-height:var(--instui-component-tree-browser-tree-button-text-line-height);color:var(--instui-component-tree-browser-tree-button-name-text-color);border-radius:var(--instui-component-tree-browser-tree-button-border-radius);cursor:pointer;list-style:none;display:flex}.instui-tree-browser details>summary [class*=-icon-],.instui-tree-browser .item [class*=-icon-]{line-height:1}.instui-tree-browser details>summary::-webkit-details-marker{display:none}.instui-tree-browser details>summary:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat;background:currentColor;flex:none;transition:transform .2s}.instui-tree-browser details[open]>summary:before{transform:rotate(90deg)}.instui-tree-browser details>summary:hover,.instui-tree-browser .item:hover{background:var(--instui-component-tree-browser-tree-button-hover-background-color);color:var(--instui-component-tree-browser-tree-button-hover-text-color)}.instui-tree-browser details>summary.-selected,.instui-tree-browser .item.-selected{background:var(--instui-component-tree-browser-tree-button-selected-background-color);color:var(--instui-component-tree-browser-tree-button-selected-text-color)}.instui-tree-browser ul{margin:0;padding-inline-start:var(--instui-component-tree-browser-tree-collection-base-spacing-medium);list-style:none}.instui-tree-browser.-size-sm details>summary,.instui-tree-browser.-size-sm .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-small);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-small)}.instui-tree-browser.-size-lg details>summary,.instui-tree-browser.-size-lg .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-large);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-large)}.instui-tree-browser.-size-small details>summary,.instui-tree-browser.-size-small .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-small);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-small)}.instui-tree-browser.-size-large details>summary,.instui-tree-browser.-size-large .item{padding:var(--instui-component-tree-browser-tree-button-base-spacing-large);font-size:var(--instui-component-tree-browser-tree-button-name-font-size-large)}.instui-calendar{text-align:center;background:var(--instui-component-calendar-background);color:var(--instui-component-calendar-color);font-family:var(--instui-component-calendar-font-family);font-size:var(--instui-component-calendar-font-size);font-weight:var(--instui-component-calendar-font-weight);line-height:var(--instui-component-calendar-line-height);display:inline-block}@scope(.instui-calendar){:scope>.nav{justify-content:space-between;align-items:center;margin-block-end:var(--instui-component-calendar-nav-margin);display:flex}:scope>.grid{grid-template-columns:repeat(7, var(--instui-component-calendar-day-min-width));justify-content:center;gap:var(--instui-spacing-space2xs);display:grid}.weekday,.day{inline-size:var(--instui-component-calendar-day-min-width);block-size:var(--instui-component-calendar-day-height);justify-content:center;align-items:center;display:flex}.weekday{font-weight:var(--instui-font-weight-interactive)}.day{font-size:var(--instui-component-calendar-day-font-size);color:var(--instui-component-calendar-day-color);background:var(--instui-component-calendar-day-background);cursor:pointer}.day.-outside-month{color:var(--instui-component-calendar-day-outside-month-color)}.day.-today{background:var(--instui-component-calendar-day-today-background);color:var(--instui-component-calendar-day-today-color);border-radius:var(--instui-component-calendar-day-today-border-radius)}.day.-selected{background:var(--instui-component-calendar-day-selected-background);color:var(--instui-component-calendar-day-selected-color);border-radius:var(--instui-component-calendar-day-selected-border-radius)}}.instui-popover{background:var(--instui-color-background-elevated-surface-base);color:var(--instui-color-text-base);border:var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);border-radius:var(--instui-component-popover-border-radius);padding:var(--instui-spacing-space-sm);box-shadow:var(--instui-elevation-above)}[popover].instui-popover{margin:0}@supports (position-area:block-end){[popover].instui-popover{position-anchor:--pantoken-anchor;position-try-fallbacks:flip-block, flip-inline}[popover].instui-popover.-placement-top{position-area:block-start}[popover].instui-popover.-placement-bottom{position-area:block-end}[popover].instui-popover.-placement-start{position-area:inline-start center}[popover].instui-popover.-placement-end{position-area:inline-end center}}@supports (transition-behavior:allow-discrete){[popover].instui-popover{transition:opacity .15s ease, transform .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;opacity:1;transform:translateY(0)}[popover].instui-popover:not(:popover-open){opacity:0;transform:translateY(-.25rem)}@starting-style{[popover].instui-popover:popover-open{opacity:0;transform:translateY(-.25rem)}}}.instui-tray{inline-size:var(--instui-component-tray-width-md);background:var(--instui-component-tray-background-color);border:var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);block-size:auto;max-block-size:none;max-inline-size:100%;padding:var(--instui-component-tray-padding);z-index:var(--instui-component-tray-z-index);box-shadow:var(--instui-elevation-topmost);position:fixed;inset-block:0;inset-inline-start:0}.instui-tray.-placement-end{inset-inline:auto 0}.instui-tray.-placement-top{block-size:auto;inline-size:100%;inset:0 0 auto}.instui-tray.-placement-bottom{block-size:auto;inline-size:100%;inset:auto 0 0}.instui-tray.-size-xs{inline-size:var(--instui-component-tray-width-xs)}.instui-tray.-size-sm{inline-size:var(--instui-component-tray-width-sm)}.instui-tray.-size-lg{inline-size:var(--instui-component-tray-width-lg)}.instui-tray.-size-xl{inline-size:var(--instui-component-tray-width-xl)}[popover].instui-tray{margin:0}dialog.instui-tray{padding:var(--instui-component-tray-padding);border:var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);margin:0}@supports (transition-behavior:allow-discrete){[popover].instui-tray{transition:transform .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;transform:translate(0)}[popover].instui-tray:not(:popover-open){transform:translate(-100%)}@starting-style{[popover].instui-tray:popover-open{transform:translate(-100%)}}[popover].instui-tray.-placement-end:not(:popover-open){transform:translate(100%)}@starting-style{[popover].instui-tray.-placement-end:popover-open{transform:translate(100%)}}[popover].instui-tray.-placement-top:not(:popover-open){transform:translateY(-100%)}@starting-style{[popover].instui-tray.-placement-top:popover-open{transform:translateY(-100%)}}[popover].instui-tray.-placement-bottom:not(:popover-open){transform:translateY(100%)}@starting-style{[popover].instui-tray.-placement-bottom:popover-open{transform:translateY(100%)}}}.instui-tray.-size-x-small{inline-size:var(--instui-component-tray-width-xs)}.instui-tray.-size-small{inline-size:var(--instui-component-tray-width-sm)}.instui-tray.-size-large{inline-size:var(--instui-component-tray-width-lg)}.instui-tray.-size-x-large{inline-size:var(--instui-component-tray-width-xl)}.instui-tooltip{display:inline-flex;position:relative}@scope(.instui-tooltip){:scope>[class*=-icon-]{line-height:1}:scope>.tip{z-index:1;padding:var(--instui-component-tooltip-padding);background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-radius:var(--instui-border-radius-sm);font-family:var(--instui-component-tooltip-font-family);font-size:var(--instui-component-tooltip-font-size);font-weight:var(--instui-component-tooltip-font-weight);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;margin-block-end:var(--instui-spacing-space-xs);transition:opacity .15s;position:absolute;inset-block-end:100%;inset-inline-start:50%;transform:translate(-50%)}}.instui-tooltip:hover>.tip,.instui-tooltip:focus-within>.tip{opacity:1;visibility:visible}.instui-tooltip>.tip.-placement-bottom{margin-block:var(--instui-spacing-space-xs) 0;inset-block:100% auto}.instui-tooltip>.tip.-placement-start{margin:0 var(--instui-spacing-space-xs) 0 0;inset-block-end:auto;inset-inline:auto 100%;top:50%;transform:translateY(-50%)}.instui-tooltip>.tip.-placement-end{margin:0 0 0 var(--instui-spacing-space-xs);inset-block-end:auto;inset-inline:100% auto;top:50%;transform:translateY(-50%)}.instui-range-input{-webkit-appearance:none;appearance:none;inline-size:100%;min-inline-size:var(--instui-component-range-input-min-width);block-size:var(--instui-component-range-input-handle-size);background:0 0}.instui-range-input::-webkit-slider-runnable-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}.instui-range-input::-moz-range-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}.instui-range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);background:var(--instui-component-range-input-handle-background);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);cursor:pointer;border-radius:50%;margin-block-start:calc((.25rem - var(--instui-component-range-input-handle-size)) / 2)}.instui-range-input::-moz-range-thumb{inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);background:var(--instui-component-range-input-handle-background);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);cursor:pointer;border-radius:50%}.instui-range-input:hover::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-hover-background)}.instui-range-input:hover::-moz-range-thumb{background:var(--instui-component-range-input-handle-hover-background)}.instui-range-input:focus-visible{outline:none}.instui-range-input:focus-visible::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}.instui-range-input:focus-visible::-moz-range-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}.instui-range-input-value{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-radius:var(--instui-border-radius-md);padding:var(--instui-component-range-input-value-medium-padding);font-family:var(--instui-component-range-input-value-font-family);font-size:var(--instui-component-range-input-value-medium-font-size);font-weight:var(--instui-component-range-input-value-font-weight);align-self:center;align-items:center;margin-inline-start:.5rem;line-height:1;display:inline-flex;position:relative}.instui-range-input-value:before{content:"";border-block:.375rem solid #0000;border-inline-end:.375rem solid var(--instui-color-background-inverse);border-inline-start:0;position:absolute;inset-block-start:50%;inset-inline-start:-.375rem;transform:translateY(-50%)}.instui-range-input-value.-size-sm{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}.instui-range-input-value.-size-lg{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}.instui-range-input-value.-size-small{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}.instui-range-input-value.-size-large{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}.instui-mask{background:var(--instui-component-mask-background-color);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.instui-mask.-fullscreen{z-index:999;position:fixed}.instui-mask.-blur{backdrop-filter:blur(.5rem)}.instui-screen-reader-content{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-heading{font-family:var(--instui-component-heading-h1-font-family);color:var(--instui-component-heading-base-color);line-height:var(--instui-component-heading-line-height);font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight);margin:0;display:block}.instui-heading.-level-h1{font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight)}.instui-heading.-level-h2{font-size:var(--instui-component-heading-h2-font-size);font-weight:var(--instui-component-heading-h2-font-weight)}.instui-heading.-level-h3{font-size:var(--instui-component-heading-h3-font-size);font-weight:var(--instui-component-heading-h3-font-weight)}.instui-heading.-level-h4{font-size:var(--instui-component-heading-h4-font-size);font-weight:var(--instui-component-heading-h4-font-weight)}.instui-heading.-level-h5{font-size:var(--instui-component-heading-h5-font-size);font-weight:var(--instui-component-heading-h5-font-weight)}.instui-heading.-level-h6{font-size:var(--instui-component-heading-h6-font-size);font-weight:var(--instui-component-heading-h6-font-weight)}.instui-heading.-variant-title-page{font-size:var(--instui-component-heading-title-page-desktop-font-size);font-weight:var(--instui-component-heading-title-page-desktop-font-weight)}.instui-heading.-variant-title-section{font-size:var(--instui-component-heading-title-section-font-size);font-weight:var(--instui-component-heading-title-section-font-weight)}.instui-heading.-variant-title-card-section{font-size:var(--instui-component-heading-title-card-section-font-size);font-weight:var(--instui-component-heading-title-card-section-font-weight)}.instui-heading.-variant-title-card-regular{font-size:var(--instui-component-heading-title-card-regular-font-size);font-weight:var(--instui-component-heading-title-card-regular-font-weight)}.instui-heading.-variant-title-card-mini{font-size:var(--instui-component-heading-title-card-mini-font-size);font-weight:var(--instui-component-heading-title-card-mini-font-weight)}.instui-heading.-variant-label{font-size:var(--instui-component-heading-label-font-size);font-weight:var(--instui-component-heading-label-font-weight)}.instui-heading.-color-secondary{color:var(--instui-component-heading-muted-color)}.instui-heading.-color-primary-inverse{color:var(--instui-component-heading-inverse-color)}.instui-heading.-color-ai{background:linear-gradient(to bottom, var(--instui-component-heading-ai-text-top-gradient-color) 0%, var(--instui-component-heading-ai-text-bottom-gradient-color) 100%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.instui-heading.-border-bottom{border-bottom:var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);padding-bottom:var(--instui-component-heading-border-padding)}.instui-heading.-border-top{border-top:var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);padding-top:var(--instui-component-heading-border-padding)}.instui-text{font-family:var(--instui-component-text-content-font-family);color:var(--instui-component-text-base-color);font-size:var(--instui-component-text-font-size-medium);font-weight:var(--instui-component-text-font-weight-normal);line-height:var(--instui-component-text-content-line-height)}.instui-text.-size-xs{font-size:var(--instui-component-text-font-size-x-small)}.instui-text.-size-sm{font-size:var(--instui-component-text-font-size-small)}.instui-text.-size-lg{font-size:var(--instui-component-text-font-size-large)}.instui-text.-size-xl{font-size:var(--instui-component-text-font-size-x-large)}.instui-text.-weight-bold{font-weight:var(--instui-component-text-font-weight-bold)}.instui-text.-style-italic{font-style:italic}.instui-text.-color-secondary{color:var(--instui-component-text-muted-color)}.instui-text.-color-brand{color:var(--instui-component-text-primary-color)}.instui-text.-color-success{color:var(--instui-component-text-success-color)}.instui-text.-color-danger{color:var(--instui-component-text-error-color)}.instui-text.-color-warning{color:var(--instui-component-text-warning-color)}.instui-text.-color-primary-inverse{color:var(--instui-component-text-inverse-color)}.instui-text.-color-ai{color:var(--instui-component-text-ai-color);background:var(--instui-component-text-ai-background-color)}.instui-text.-variant-description-page{font-size:var(--instui-component-text-description-page-font-size);line-height:var(--instui-component-text-description-page-line-height)}.instui-text.-variant-description-section{font-size:var(--instui-component-text-description-section-font-size);line-height:var(--instui-component-text-description-section-line-height)}.instui-text.-variant-content-small{font-size:var(--instui-component-text-content-small-font-size);line-height:var(--instui-component-text-content-small-line-height)}.instui-text.-variant-legend{font-size:var(--instui-component-text-legend-font-size);line-height:var(--instui-component-text-legend-line-height)}.instui-text.-transform-uppercase{text-transform:uppercase}.instui-text.-transform-lowercase{text-transform:lowercase}.instui-text.-transform-capitalize{text-transform:capitalize}.instui-text.-size-x-small{font-size:var(--instui-component-text-font-size-x-small)}.instui-text.-size-small{font-size:var(--instui-component-text-font-size-small)}.instui-text.-size-large{font-size:var(--instui-component-text-font-size-large)}.instui-text.-size-x-large{font-size:var(--instui-component-text-font-size-x-large)}.instui-close-button{aspect-ratio:1;min-height:var(--instui-component-base-button-medium-height);padding:var(--instui-spacing-space-xs);border-radius:var(--instui-component-base-button-border-radius);color:var(--instui-color-text-interactive-action-secondary-base);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.instui-close-button:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-x) center / contain no-repeat;mask:var(--instui-icon-x) center / contain no-repeat;background:currentColor}.instui-close-button:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)}.instui-close-button:active{background:var(--instui-color-background-interactive-action-tertiary-active)}.instui-close-button.-size-sm{min-height:var(--instui-component-base-button-small-height)}.instui-close-button.-size-lg{min-height:var(--instui-component-base-button-large-height)}.instui-close-button.-color-inverse{color:var(--instui-component-base-button-primary-inverse-ghost-color)}.instui-close-button.-size-small{min-height:var(--instui-component-base-button-small-height)}.instui-close-button.-size-large{min-height:var(--instui-component-base-button-large-height)}.instui-form-field{gap:var(--instui-component-form-field-layout-gap-inputs);color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);grid-template-columns:1fr;grid-template-areas:"label""controls""messages";display:grid}@scope(.instui-form-field){:scope>.label{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-area:label}:scope>.controls{grid-area:controls}}.instui-form-field>.instui-form-field-messages{grid-area:messages}.instui-form-field .instui-form-field-message.-type-error,.instui-form-field .instui-form-field-message.-type-new-error{display:none}.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-error,.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-new-error,.instui-form-field.-invalid .instui-form-field-message.-type-error,.instui-form-field.-invalid .instui-form-field-message.-type-new-error{display:inline-flex}.instui-form-field:is(.-required,:has(:required)) .label:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-form-field.-readonly .label{color:var(--instui-component-form-field-layout-readonly-text-color)}.instui-form-field.-layout-stacked{grid-template-columns:1fr;grid-template-areas:"label""controls""messages"}.instui-form-field.-layout-inline{align-items:center;column-gap:var(--instui-component-form-field-layout-gap-primitives);grid-template-columns:auto 1fr;grid-template-areas:"label controls"".messages"}.instui-form-field.-layout-inline.-v-align-top{align-items:start}.instui-form-field.-layout-inline.-v-align-bottom{align-items:end}.instui-form-field.-layout-inline.-label-align-start .label{text-align:start}.instui-form-field.-layout-inline.-label-align-end .label{text-align:end}.instui-form-field.-inline{inline-size:auto;display:inline-grid}.instui-form-field-group{gap:var(--instui-component-form-field-layout-gap-inputs);border:0;grid-template-columns:1fr;min-inline-size:0;margin:0;padding:0;display:grid}.instui-form-field-group>legend{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-column:1/-1;margin-block-end:var(--instui-component-form-field-layout-gap-primitives);padding:0}.instui-form-field-group.-required>legend:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-form-field-group.-layout-columns,.instui-form-field-group.-layout-inline{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.instui-form-field-group.-row-spacing-none{row-gap:0}.instui-form-field-group.-row-spacing-small{row-gap:var(--instui-spacing-space-sm)}.instui-form-field-group.-row-spacing-medium{row-gap:var(--instui-spacing-space-md)}.instui-form-field-group.-row-spacing-large{row-gap:var(--instui-spacing-space-lg)}.instui-form-field-group.-col-spacing-none{column-gap:0}.instui-form-field-group.-col-spacing-small{column-gap:var(--instui-spacing-space-sm)}.instui-form-field-group.-col-spacing-medium{column-gap:var(--instui-spacing-space-md)}.instui-form-field-group.-col-spacing-large{column-gap:var(--instui-spacing-space-lg)}.instui-form-field-group.-v-align-top{align-items:start}.instui-form-field-group.-v-align-middle{align-items:center}.instui-form-field-group.-v-align-bottom{align-items:end}@supports (grid-template-columns:subgrid){.instui-form-field-group.-layout-aligned{grid-template-columns:auto 1fr;align-items:center}.instui-form-field-group.-layout-aligned>.instui-form-field{grid-column:1/-1;grid-template-columns:subgrid;grid-template-areas:"label controls"".messages";align-items:center;display:grid}}.instui-radio-input-group{gap:var(--instui-component-form-field-layout-gap-inputs);border:0;flex-direction:column;min-inline-size:0;margin:0;padding:0;display:flex}.instui-radio-input-group>legend{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);margin-block-end:var(--instui-component-form-field-layout-gap-primitives);padding:0}.instui-radio-input-group.-required>legend:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-radio-input-group.-layout-columns,.instui-radio-input-group.-layout-inline{align-items:center;column-gap:var(--instui-spacing-space-md);flex-flow:wrap}.instui-radio-input-group.-layout-columns>legend,.instui-radio-input-group.-layout-inline>legend{flex-basis:100%}.instui-radio-input-group.-variant-toggle{flex-flow:wrap;align-items:center;gap:0}.instui-radio-input-group.-variant-toggle>legend{flex-basis:100%}.instui-radio-input-group.-variant-toggle>.instui-radio:has(input:focus-visible){z-index:1}.instui-form-field-messages{gap:var(--instui-component-form-field-layout-gap-primitives);flex-direction:column;display:flex}.instui-form-field-message{font-family:var(--instui-component-form-field-message-font-family);font-size:var(--instui-component-form-field-message-font-size);font-weight:var(--instui-component-form-field-message-font-weight);line-height:var(--instui-component-form-field-message-line-height);color:var(--instui-component-form-field-message-hint-text-color);align-items:center;gap:.25rem;display:inline-flex}.instui-form-field-message.-type-hint{color:var(--instui-component-form-field-message-hint-text-color)}.instui-form-field-message.-type-error{color:var(--instui-component-form-field-message-error-text-color)}.instui-form-field-message.-type-success{color:var(--instui-component-form-field-message-success-text-color)}.instui-form-field-message.-type-error:before,.instui-form-field-message.-type-success:before{content:"";background:currentColor;flex:none;block-size:1em;inline-size:1em}.instui-form-field-message.-type-error:before{-webkit-mask:var(--instui-icon-circle-alert) center / contain no-repeat;mask:var(--instui-icon-circle-alert) center / contain no-repeat}.instui-form-field-message.-type-success:before{-webkit-mask:var(--instui-icon-circle-check) center / contain no-repeat;mask:var(--instui-icon-circle-check) center / contain no-repeat}.instui-form-field-message.-type-screenreader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-form-field-message.-type-new-error{color:var(--instui-component-form-field-message-error-text-color)}.instui-form-field-message.-type-new-error:before,.instui-form-field-message.-type-success:before{content:"";background:currentColor;flex:none;block-size:1em;inline-size:1em}.instui-form-field-message.-type-new-error:before{-webkit-mask:var(--instui-icon-circle-alert) center / contain no-repeat;mask:var(--instui-icon-circle-alert) center / contain no-repeat}.instui-text-input{box-sizing:border-box;inline-size:100%;font-family:var(--instui-component-text-input-font-family);font-weight:var(--instui-component-text-input-font-weight);color:var(--instui-component-text-input-text-color);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);display:block}.instui-text-input::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-text-input:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-text-input:hover::placeholder{color:var(--instui-component-text-input-placeholder-hover-color)}.instui-text-input:disabled,.instui-text-input.-disabled{background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-text-input.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-text-input.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-text-input.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-text-input:is(.-invalid,:user-invalid):focus-visible{outline-color:var(--instui-focus-outline-color-danger)}.instui-text-input.-success:focus-visible{outline-color:var(--instui-focus-outline-color-success)}.instui-text-input{block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);font-size:var(--instui-component-text-input-font-size-md)}.instui-text-input.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-text-input.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-text-input.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-text-input.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-text-area{box-sizing:border-box;inline-size:100%;font-family:var(--instui-component-text-area-font-family);font-weight:var(--instui-component-text-area-font-weight);color:var(--instui-component-text-area-text-color);background-color:var(--instui-component-text-area-background-color);border:var(--instui-component-text-area-border-width) solid var(--instui-component-text-area-border-color);border-radius:var(--instui-component-text-area-border-radius);display:block}.instui-text-area::placeholder{color:var(--instui-component-text-area-placeholder-color)}.instui-text-area:hover{background-color:var(--instui-component-text-area-background-hover-color);border-color:var(--instui-component-text-area-border-hover-color)}.instui-text-area:hover::placeholder{color:var(--instui-component-text-area-placeholder-hover-color)}.instui-text-area:disabled,.instui-text-area.-disabled{background-color:var(--instui-component-text-area-background-disabled-color);border-color:var(--instui-component-text-area-border-disabled-color);color:var(--instui-component-text-area-text-disabled-color);cursor:not-allowed}.instui-text-area.-readonly{background-color:var(--instui-component-text-area-background-readonly-color);border-color:var(--instui-component-text-area-border-readonly-color);color:var(--instui-component-text-area-text-readonly-color)}.instui-text-area.-invalid{border-color:var(--instui-component-text-area-error-border-color)}.instui-text-area.-success{border-color:var(--instui-component-text-area-success-border-color)}.instui-text-area:is(.-invalid,:user-invalid):focus-visible{outline-color:var(--instui-focus-outline-color-danger)}.instui-text-area.-success:focus-visible{outline-color:var(--instui-focus-outline-color-success)}.instui-text-area{padding:var(--instui-component-text-area-padding);font-size:var(--instui-component-text-area-font-size-md);resize:vertical;min-block-size:4rem;line-height:1.5}.instui-text-area.-size-sm{font-size:var(--instui-component-text-area-font-size-sm)}.instui-text-area.-size-lg{font-size:var(--instui-component-text-area-font-size-lg)}.instui-text-area.-size-small{font-size:var(--instui-component-text-area-font-size-sm)}.instui-text-area.-size-large{font-size:var(--instui-component-text-area-font-size-lg)}.instui-simple-select{box-sizing:border-box;inline-size:100%;font-family:var(--instui-component-text-input-font-family);font-weight:var(--instui-component-text-input-font-weight);color:var(--instui-component-text-input-text-color);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);display:block}.instui-simple-select::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-simple-select:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-simple-select:hover::placeholder{color:var(--instui-component-text-input-placeholder-hover-color)}.instui-simple-select:disabled,.instui-simple-select.-disabled{background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-simple-select.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-simple-select.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-simple-select.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-simple-select:is(.-invalid,:user-invalid):focus-visible{outline-color:var(--instui-focus-outline-color-danger)}.instui-simple-select.-success:focus-visible{outline-color:var(--instui-focus-outline-color-success)}.instui-simple-select{block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);font-size:var(--instui-component-text-input-font-size-md);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--instui-component-text-input-padding-horizontal-md) center;background-size:1em;padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem)}.instui-simple-select.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem)}.instui-simple-select.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem)}.instui-simple-select.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem)}.instui-simple-select.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg);padding-inline-end:calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem)}.instui-input-group{box-sizing:border-box;inline-size:100%;block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);align-items:center;gap:var(--instui-component-text-input-gap-content);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-component-text-input-text-color);font-family:var(--instui-component-text-input-font-family);font-size:var(--instui-component-text-input-font-size-md);display:flex}.instui-input-group:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-input-group>input,.instui-input-group .instui-text-input{block-size:auto;min-inline-size:0;font:inherit;color:inherit;background:0 0;border:0;outline:none;flex:1;padding:0}.instui-input-group>input::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-input-group .before,.instui-input-group .after{color:var(--instui-component-text-input-text-color);flex:none;align-items:center;display:inline-flex}.instui-input-group.-disabled,.instui-input-group:has(>input:disabled){background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-input-group.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-input-group.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-input-group.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-input-group:has(:focus-visible){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset);border-radius:var(--instui-focus-outline-radius)}.instui-input-group:is(.-invalid,:has(>input:user-invalid)):has(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)}.instui-input-group.-success:has(:focus-visible){outline-color:var(--instui-focus-outline-color-success)}.instui-input-group.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-input-group.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-input-group.-should-not-wrap{flex-wrap:nowrap}.instui-input-group.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-input-group.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-number-input{box-sizing:border-box;inline-size:100%;block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);align-items:center;gap:var(--instui-component-text-input-gap-content);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-component-text-input-text-color);font-family:var(--instui-component-text-input-font-family);font-size:var(--instui-component-text-input-font-size-md);display:flex}.instui-number-input:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}.instui-number-input>input,.instui-number-input .instui-text-input{block-size:auto;min-inline-size:0;font:inherit;color:inherit;background:0 0;border:0;outline:none;flex:1;padding:0}.instui-number-input>input::placeholder{color:var(--instui-component-text-input-placeholder-color)}.instui-number-input .before,.instui-number-input .after{color:var(--instui-component-text-input-text-color);flex:none;align-items:center;display:inline-flex}.instui-number-input.-disabled,.instui-number-input:has(>input:disabled){background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}.instui-number-input.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}.instui-number-input.-invalid{border-color:var(--instui-component-text-input-error-border-color)}.instui-number-input.-success{border-color:var(--instui-component-text-input-success-border-color)}.instui-number-input:has(:focus-visible){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset);border-radius:var(--instui-focus-outline-radius)}.instui-number-input:is(.-invalid,:has(>input:user-invalid)):has(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)}.instui-number-input.-success:has(:focus-visible){outline-color:var(--instui-focus-outline-color-success)}.instui-number-input.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-number-input.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-number-input{padding-inline-end:0;overflow:hidden}.instui-number-input>input::-webkit-outer-spin-button,.instui-number-input>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.instui-number-input>input[type=number]{-moz-appearance:textfield;appearance:textfield}.instui-number-input .arrows{border-inline-start:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);flex-direction:column;flex:none;align-self:stretch;inline-size:1.5rem;display:flex}.instui-number-input .arrows button{background:var(--instui-component-text-input-arrows-background-color);color:var(--instui-color-icon-interactive-action-secondary-base);cursor:pointer;border:0;flex:1;justify-content:center;align-items:center;padding:0;display:flex}.instui-number-input .arrows button+button{border-block-start:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color)}.instui-number-input .arrows button:hover{background:var(--instui-component-text-input-arrows-background-hover-color)}.instui-number-input .arrows button:active{background:var(--instui-component-text-input-arrows-background-active-color)}.instui-number-input .arrows button:disabled{background:var(--instui-component-text-input-arrows-background-disabled-color);cursor:not-allowed}.instui-number-input .arrows button:before{content:"";block-size:.875em;inline-size:.875em;-webkit-mask:var(--instui-icon-chevron-up) center / contain no-repeat;mask:var(--instui-icon-chevron-up) center / contain no-repeat;background:currentColor}.instui-number-input .arrows button.down:before{-webkit-mask:var(--instui-icon-chevron-down) center / contain no-repeat;mask:var(--instui-icon-chevron-down) center / contain no-repeat}.instui-number-input.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}.instui-number-input.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}.instui-in-place-edit{min-inline-size:2rem;padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);border:var(--instui-component-text-input-border-width) solid transparent;border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-color-text-base);font:inherit;cursor:text;display:inline-block}.instui-in-place-edit:hover{background:var(--instui-color-background-muted)}.instui-in-place-edit:focus{background:var(--instui-component-text-input-background-color);border-color:var(--instui-component-text-input-border-color);outline:none}.instui-in-place-edit:focus-visible{outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-in-place-edit.-readonly{cursor:default}.instui-in-place-edit.-readonly:hover{background:0 0}
|
package/dist/index.mjs
CHANGED
|
@@ -216,9 +216,9 @@ const defineRule = (input) => make("rule", input);
|
|
|
216
216
|
*/
|
|
217
217
|
const SENTINEL = "pfx-";
|
|
218
218
|
const alert$1 = {
|
|
219
|
-
"rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
220
|
-
"canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
221
|
-
"canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
|
|
219
|
+
"rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
220
|
+
"canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
221
|
+
"canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
|
|
222
222
|
}.rebrand;
|
|
223
223
|
const avatar$1 = {
|
|
224
224
|
"rebrand": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid\n var(--instui-component-avatar-border-color);\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n",
|
|
@@ -277,9 +277,9 @@ const formFieldGroup$1 = {
|
|
|
277
277
|
"canvasHighContrast": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n"
|
|
278
278
|
}.rebrand;
|
|
279
279
|
const formFieldMessages$1 = {
|
|
280
|
-
"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
281
|
-
"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
282
|
-
"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
|
|
280
|
+
"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
281
|
+
"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
282
|
+
"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
|
|
283
283
|
}.rebrand;
|
|
284
284
|
const formField$1 = {
|
|
285
285
|
"rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n :scope > .controls {\n grid-area: controls;\n }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n",
|
|
@@ -357,9 +357,9 @@ const radio$1 = {
|
|
|
357
357
|
"canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n"
|
|
358
358
|
}.rebrand;
|
|
359
359
|
const rangeInput$1 = {
|
|
360
|
-
"rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
|
|
361
|
-
"canvas": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
|
|
362
|
-
"canvasHighContrast": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n"
|
|
360
|
+
"rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
|
|
361
|
+
"canvas": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
|
|
362
|
+
"canvasHighContrast": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n"
|
|
363
363
|
}.rebrand;
|
|
364
364
|
const rating$1 = {
|
|
365
365
|
"rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n",
|
|
@@ -442,9 +442,9 @@ const mask$1 = {
|
|
|
442
442
|
"canvasHighContrast": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n * <div class=\"instui-mask\">\n * <span class=\"instui-spinner\"></span>\n * </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n token (see modalRules). */\n.pfx-mask {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n"
|
|
443
443
|
}.rebrand;
|
|
444
444
|
const screenReaderContent$1 = {
|
|
445
|
-
"rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
446
|
-
"canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
447
|
-
"canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
|
|
445
|
+
"rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
446
|
+
"canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
|
|
447
|
+
"canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
|
|
448
448
|
}.rebrand;
|
|
449
449
|
const base$1 = {
|
|
450
450
|
"rebrand": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n * <body>\n * <a href=\"/\">A styled link on the base surface.</a>\n * </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n:where(html) {\n color-scheme: light dark;\n background: var(--instui-color-background-page);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n margin: 0;\n}\n:where(a) {\n color: var(--instui-color-text-interactive-navigation-primary-base);\n text-decoration: underline;\n}\n:where(a:hover) {\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n background: color-mix(\n in srgb,\n var(--instui-color-text-interactive-navigation-primary-base) 25%,\n transparent\n );\n}\n",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pantoken/components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.9",
|
|
4
4
|
"description": "An InstUI-look CSS component library from the pantoken tokens: prose/content styling plus class-based components (button, alert, badge).",
|
|
5
5
|
"homepage": "https://pantoken.iywahl.com",
|
|
6
6
|
"bugs": "https://github.com/thedannywahl/pantoken/issues",
|
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
"@cssdoc/config": "catalog:",
|
|
50
50
|
"@cssdoc/core": "catalog:",
|
|
51
51
|
"@pantoken/icons": "workspace:*",
|
|
52
|
+
"@pantoken/plugin-props-minify": "workspace:*",
|
|
52
53
|
"@pantoken/plugin-theme-custom-media": "workspace:*",
|
|
53
54
|
"@pantoken/tokens": "workspace:*",
|
|
54
55
|
"@types/node": "catalog:",
|