@rogieking/figui3 9.0.8 → 9.0.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/components.css +41 -19
- package/dist/components.css +1 -1
- package/dist/fig-editor.css +1 -1
- package/dist/fig-editor.js +1 -1
- package/dist/fig.css +1 -1
- package/dist/fig.js +3 -3
- package/fig-editor.css +1 -1
- package/fig-editor.js +2 -1
- package/fig.js +8 -0
- package/package.json +1 -1
package/dist/fig-editor.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}:root,:host{--icon-24-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E")}fig-interpolation-swatch{width:1.5rem;height:1.5rem;color:var(--figma-color-bordertranslucent);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible;&[size=large]{width:2rem;height:2rem;& .fig-interpolation-swatch-svg,& .fig-interpolation-swatch-fill{width:1.25rem;height:1.25rem}}& .fig-interpolation-swatch-svg{width:1rem;height:1rem;display:block;overflow:visible}& .fig-interpolation-swatch-fill{background:linear-gradient(90deg,red,#4f9eff);width:1rem;height:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}dialog[is=fig-toast]{--fig-toast-bg-color:var(--figma-color-bg);--z-index:999999;z-index:var(--z-index);box-shadow:var(--figma-elevation-100);border-radius:var(--radius-large);padding:var(--spacer-2) var(--spacer-3);align-items:center;gap:var(--spacer-2-5);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--fig-toast-bg-color);flex-wrap:nowrap;justify-content:center;&[icon]{&>fig-icon:first-child{margin-inline:calc(var(--spacer-2) * -1)}}&>fig-spinner:first-child{margin-inline:calc(var(--spacer-2) * -1)}&[open]:not([open=false]){flex-direction:row;display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}&>fig-separator[data-fig-toast-dismiss-separator]{--fig-separator-color:var(--figma-color-bordertranslucent);flex:none;align-self:stretch;margin:0}& fig-button:last-child{margin-inline:calc(var(--spacer-2) * -1);margin-left:calc(var(--spacer-1) * -1)}&>fig-icon[data-fig-toast-icon]{--size:var(--spacer-4);flex:none}&>fig-button[data-fig-toast-dismiss]{flex:none}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=danger]{background-color:var(--figma-color-bg-danger);color-scheme:dark}&[theme=brand]{background-color:var(--figma-color-bg-brand);color-scheme:dark}&[theme=success]{background-color:var(--figma-color-bg-success);color-scheme:dark}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{width:240px;padding:0;&>fig-content{padding-bottom:var(--spacer-2-5);padding-top:var(--spacer-2)}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-tab:is([data-tab=solid],[data-tab=gradient]){& fig-preview{overflow:visible}}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{&:not([direction=vertical]):not(:has(>label)){grid-template-columns:var(--fig-field-left-padding) 3.5rem var(--spacer-2) minmax(0, 1fr) var(--fig-field-right-padding)}& .fig-fill-picker-input-mode{flex-shrink:0;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);margin-top:calc(var(--spacer-4) + var(--spacer-1));background:0 0;margin-bottom:0;&:after{display:none}}& fig-field.fig-fill-picker-gradient-header{grid-template-columns:unset;grid-template-areas:unset;padding-right:var(--spacer-2);padding-left:var(--spacer-3);align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{align-items:center;gap:var(--spacer-1);flex-shrink:0;margin-left:auto;display:flex}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& fig-field.fig-fill-picker-gradient-interpolation-field{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);align-items:center;gap:var(--spacer-1);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}}& .fig-fill-picker-gradient-interpolation-modes{flex:auto;min-width:0;& fig-interpolation-swatch{pointer-events:none}}& .fig-fill-picker-gradient-interpolation-more{flex:none;display:inline-flex;position:relative;&>fig-button{pointer-events:none}& .fig-fill-picker-gradient-space{opacity:0;width:100%;position:absolute;inset:0}&:has(.fig-fill-picker-gradient-space:hover)>fig-button,&:has(.fig-fill-picker-gradient-space[open])>fig-button{background-color:var(--figma-color-bg-transparent-hover)}&:has(.fig-fill-picker-gradient-space:focus-within)>fig-button{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}}& .fig-fill-picker-gradient-space{&::part(prepend){display:none}& fig-select-option{min-height:3rem;&:hover:before,&:focus-visible:before{background-color:var(--figma-color-bg-tertiary)}}& .fig-fill-picker-gradient-interpolation-label{flex-direction:column;justify-content:center;min-width:0;line-height:1.25;display:flex}& .fig-fill-picker-gradient-interpolation-title,& .fig-fill-picker-gradient-interpolation-subtitle{text-overflow:ellipsis;display:block;overflow:hidden}& .fig-fill-picker-gradient-interpolation-subtitle{color:var(--figma-color-text-tertiary)}& fig-select-options.fig-fill-picker-gradient-interpolation-collapsed{overflow:hidden}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex;& fig-reorder{display:contents}}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;&.dragging{background-color:var(--figma-color-bg-selected)}&>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-preview fig-button,& fig-input-file fig-button{visibility:hidden}&:hover{& fig-preview fig-button,& fig-input-file fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}fig-select{min-width:0;height:var(--spacer-4);border-radius:var(--radius-medium);background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:inset 0 0 0 1px var(--figma-color-border);align-items:center;display:inline-flex;position:relative;&[size=large]{height:var(--spacer-5)}&[full]:not([full=false]){width:100%;display:flex}&[disabled]:not([disabled=false]){pointer-events:none;color:var(--figma-color-text-tertiary);&:after{background-color:var(--figma-color-icon-disabled)}}&[variant=ghost]{box-shadow:none;background-color:#0000;&:hover:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-secondary)}}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-16-chevron);background-color:var(--figma-color-icon);pointer-events:none;z-index:1;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}fig-select::part(listbox){--z-index:999999;--fig-popup-radius:var(--radius-large);--fig-popup-bg-color:var(--figma-color-bg-menu);z-index:var(--z-index);border-radius:var(--fig-popup-radius);background-color:var(--fig-popup-bg-color);color:var(--figma-color-text-menu);color-scheme:dark;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0;height:max-content;max-height:calc(100vh - 1rem);margin:0;padding:0;position:fixed;overflow:hidden}fig-select-options>:is(fig-separator,fig-menu-separator){&[label]:not([label=""]){--fig-menu-inline-padding:0 var(--spacer-2) 0 var(--spacer-5);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{box-sizing:border-box;min-width:0;max-width:100%;min-height:var(--spacer-4);height:auto;padding:var(--spacer-1) var(--spacer-2);padding-right:var(--spacer-3);border-radius:var(--radius-medium);color:var(--figma-color-text-menu);cursor:default;user-select:none;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:0;display:flex;position:relative;overflow:hidden;&:not(:has(>:not([slot=prepend]):not([slot=append]))){display:block}& h3{margin:0 0 var(--spacer-1) 0;text-overflow:ellipsis;overflow:hidden}& label{text-overflow:ellipsis;overflow:hidden}&:before{content:"";inset:0 var(--spacer-2);border-radius:var(--radius-medium);z-index:-1;background-color:#0000;display:block;position:absolute}&:after{content:"";float:left;width:1rem;height:1rem;margin-left:var(--spacer-1);margin-right:var(--spacer-1);-webkit-mask-image:var(--icon-16-checkmark);mask-image:var(--icon-16-checkmark);visibility:hidden;background-color:currentColor;flex:0 0 1rem;order:-1;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}&>[slot=prepend]{margin-top:calc(var(--spacer-1) * -1);margin-bottom:calc(var(--spacer-1) * -1);margin-right:var(--spacer-1)}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=prepend]{vertical-align:middle;display:inline-flex}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary);flex:none;margin-inline-start:auto}&:hover,&:focus-visible{outline:none;&:before{background-color:var(--figma-color-bg-menu-hover)}}&[subtle]:not([subtle=false]),fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false]):after,&[aria-selected=true]:after{visibility:visible}&[disabled]:not([disabled=false]),&[aria-disabled=true]{opacity:.4;pointer-events:none}}
|
|
1
|
+
fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}:root,:host{--icon-24-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E")}fig-interpolation-swatch{width:1.5rem;height:1.5rem;color:var(--figma-color-bordertranslucent);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible;&[size=large]{width:2rem;height:2rem;& .fig-interpolation-swatch-svg,& .fig-interpolation-swatch-fill{width:1.25rem;height:1.25rem}}& .fig-interpolation-swatch-svg{width:1rem;height:1rem;display:block;overflow:visible}& .fig-interpolation-swatch-fill{background:linear-gradient(90deg,red,#4f9eff);width:1rem;height:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}dialog[is=fig-toast]{--fig-toast-bg-color:var(--figma-color-bg);--z-index:999999;z-index:var(--z-index);box-shadow:var(--figma-elevation-100);border-radius:var(--radius-large);padding:var(--spacer-2) var(--spacer-3);align-items:center;gap:var(--spacer-2-5);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--fig-toast-bg-color);flex-wrap:nowrap;justify-content:center;&[icon]{&>fig-icon:first-child{margin-inline:calc(var(--spacer-2) * -1)}}&>fig-spinner:first-child{margin-inline:calc(var(--spacer-2) * -1)}&[open]:not([open=false]){flex-direction:row;display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}&>fig-separator[data-fig-toast-dismiss-separator]{--fig-separator-color:var(--figma-color-bordertranslucent);flex:none;align-self:stretch;margin:0}& fig-button:last-child{margin-inline:calc(var(--spacer-2) * -1);margin-left:calc(var(--spacer-1) * -1)}&>fig-icon[data-fig-toast-icon]{--size:var(--spacer-4);flex:none}&>fig-button[data-fig-toast-dismiss]{flex:none}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=danger]{background-color:var(--figma-color-bg-danger);color-scheme:dark}&[theme=brand]{background-color:var(--figma-color-bg-brand);color-scheme:dark}&[theme=success]{background-color:var(--figma-color-bg-success);color-scheme:dark}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{width:240px;padding:0;&>fig-content{padding-bottom:var(--spacer-2-5);padding-top:var(--spacer-2)}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-tab:is([data-tab=solid],[data-tab=gradient]){& fig-preview{overflow:visible}}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{&:not([direction=vertical]):not(:has(>label)){grid-template-columns:var(--fig-field-left-padding) 3.5rem var(--spacer-2) minmax(0, 1fr) var(--fig-field-right-padding)}& .fig-fill-picker-input-mode{flex-shrink:0;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);margin-top:calc(var(--spacer-4) + var(--spacer-1));background:0 0;margin-bottom:0;&:after{display:none}}& fig-field.fig-fill-picker-gradient-header{grid-template-columns:unset;grid-template-areas:unset;padding-right:var(--spacer-2);padding-left:var(--spacer-2);align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{align-items:center;gap:var(--spacer-1);flex-shrink:0;margin-left:auto;display:flex}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& fig-field.fig-fill-picker-gradient-interpolation-field{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);align-items:center;gap:var(--spacer-1);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}}& .fig-fill-picker-gradient-interpolation-modes{flex:auto;min-width:0;& fig-interpolation-swatch{pointer-events:none}}& .fig-fill-picker-gradient-interpolation-more{flex:none;display:inline-flex;position:relative;&>fig-button{pointer-events:none}& .fig-fill-picker-gradient-space{opacity:0;width:100%;position:absolute;inset:0}&:has(.fig-fill-picker-gradient-space:hover)>fig-button,&:has(.fig-fill-picker-gradient-space[open])>fig-button{background-color:var(--figma-color-bg-transparent-hover)}&:has(.fig-fill-picker-gradient-space:focus-within)>fig-button{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}}& .fig-fill-picker-gradient-space{&::part(prepend){display:none}& fig-select-option{min-height:3rem;&:hover:before,&:focus-visible:before{background-color:var(--figma-color-bg-tertiary)}}& .fig-fill-picker-gradient-interpolation-label{flex-direction:column;justify-content:center;min-width:0;line-height:1.25;display:flex}& .fig-fill-picker-gradient-interpolation-title,& .fig-fill-picker-gradient-interpolation-subtitle{text-overflow:ellipsis;display:block;overflow:hidden}& .fig-fill-picker-gradient-interpolation-subtitle{color:var(--figma-color-text-tertiary)}& fig-select-options.fig-fill-picker-gradient-interpolation-collapsed{overflow:hidden}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex;& fig-reorder{display:contents}}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;&.dragging{background-color:var(--figma-color-bg-selected)}&>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-preview fig-button,& fig-input-file fig-button{visibility:hidden}&:hover{& fig-preview fig-button,& fig-input-file fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}fig-select{min-width:0;height:var(--spacer-4);border-radius:var(--radius-medium);background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:inset 0 0 0 1px var(--figma-color-border);align-items:center;display:inline-flex;position:relative;&[size=large]{height:var(--spacer-5)}&[full]:not([full=false]){width:100%;display:flex}&[disabled]:not([disabled=false]){pointer-events:none;color:var(--figma-color-text-tertiary);&:after{background-color:var(--figma-color-icon-disabled)}}&[variant=ghost]{box-shadow:none;background-color:#0000;&:hover:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-secondary)}}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-16-chevron);background-color:var(--figma-color-icon);pointer-events:none;z-index:1;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}fig-select::part(listbox){--z-index:999999;--fig-popup-radius:var(--radius-large);--fig-popup-bg-color:var(--figma-color-bg-menu);z-index:var(--z-index);border-radius:var(--fig-popup-radius);background-color:var(--fig-popup-bg-color);color:var(--figma-color-text-menu);color-scheme:dark;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0;height:max-content;max-height:calc(100vh - 1rem);margin:0;padding:0;position:fixed;overflow:hidden}fig-select-options>:is(fig-separator,fig-menu-separator){&[label]:not([label=""]){--fig-menu-inline-padding:0 var(--spacer-2) 0 var(--spacer-5);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{box-sizing:border-box;min-width:0;max-width:100%;min-height:var(--spacer-4);height:auto;padding:var(--spacer-1) var(--spacer-2);padding-right:var(--spacer-3);border-radius:var(--radius-medium);color:var(--figma-color-text-menu);cursor:default;user-select:none;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:0;display:flex;position:relative;overflow:hidden;&:not(:has(>:not([slot=prepend]):not([slot=append]))){display:block}& h3{margin:0 0 var(--spacer-1) 0;text-overflow:ellipsis;overflow:hidden}& label{text-overflow:ellipsis;overflow:hidden}&:before{content:"";inset:0 var(--spacer-2);border-radius:var(--radius-medium);z-index:-1;background-color:#0000;display:block;position:absolute}&:after{content:"";float:left;width:1rem;height:1rem;margin-left:var(--spacer-1);margin-right:var(--spacer-1);-webkit-mask-image:var(--icon-16-checkmark);mask-image:var(--icon-16-checkmark);visibility:hidden;background-color:currentColor;flex:0 0 1rem;order:-1;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}&>[slot=prepend]{margin-top:calc(var(--spacer-1) * -1);margin-bottom:calc(var(--spacer-1) * -1);margin-right:var(--spacer-1)}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=prepend]{vertical-align:middle;display:inline-flex}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary);flex:none;margin-inline-start:auto}&:hover,&:focus-visible{outline:none;&:before{background-color:var(--figma-color-bg-menu-hover)}}&[subtle]:not([subtle=false]),fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false]):after,&[aria-selected=true]:after{visibility:visible}&[disabled]:not([disabled=false]),&[aria-disabled=true]{opacity:.4;pointer-events:none}}
|
package/dist/fig-editor.js
CHANGED
|
@@ -105,4 +105,4 @@ import"./fig.js";import"./fig-lab.js";function A(J,Q){if(!customElements.get(J))
|
|
|
105
105
|
min-height: 0;
|
|
106
106
|
max-height: inherit;
|
|
107
107
|
}
|
|
108
|
-
`,J.appendChild(Q);let Z=document.createElement("fig-button");Z.className="fig-select-trigger",Z.setAttribute("part","trigger"),Z.setAttribute("variant","ghost"),Z.setAttribute("aria-haspopup","listbox"),Z.setAttribute("aria-expanded","false");let $=document.createElement("span");$.className="fig-select-prepend",$.setAttribute("part","prepend"),$.setAttribute("aria-hidden","true");let X=document.createElement("slot");X.setAttribute("name","prepend-trigger"),X.hidden=!0;let Y=document.createElement("span");Y.className="fig-select-prepend-fallback",$.append(X,Y);let j=document.createElement("span");j.className="fig-select-label",j.setAttribute("part","label");let K=document.createElement("slot");K.setAttribute("name","trigger"),K.hidden=!0,Z.append($,j,K);let W=document.createElement("dialog",{is:"fig-popup"});if(W.setAttribute("is","fig-popup"),W.setAttribute("part","listbox"),W.setAttribute("theme","menu"),W.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)W.setAttribute("popover","manual");W.id=p(),Z.setAttribute("aria-controls",W.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),W.appendChild(U),J.append(Z,W),this.#Y=Z,this.#j=$,this.#W=X,this.#J=Y,this.#N=K,this.#L=j,this.#K=W,this.#z=U,W.anchor=Z,this.#A(),this.#i(),!this.hasAttribute("value")){let L=this.#p().find((z)=>T(z,"selected"));if(L)this.setAttribute("value",L.value)}}#i(){if(!this.#K||this.#U)return;if(typeof this.#K.positionPopup!=="function")return;this.#Q=this.#K.positionPopup.bind(this.#K),this.#K.positionPopup=()=>{if(!this.open){this.#Q?.();return}this.#qJ()},this.#U=!0}#l(J){if(!J)return null;let Q=document.createRange();Q.selectNodeContents(J);let Z=[...Q.getClientRects()].filter(($)=>$.width>0&&$.height>0);if(Z.length)return Z[0];return J.getBoundingClientRect()}#QJ(){if(typeof this.#K?.parseViewportMargins==="function")return this.#K.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#P(){let J=this.#L?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Q=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Q?.width&&Q?.height)return Q;return this.#j?.getBoundingClientRect()??null}#r(){let J=this.#P();if(!J)return null;return{x:J.x,y:J.y,width:J.width,height:J.height}}#c(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#b(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.x-Q.x)>Z||Math.abs(J.y-Q.y)>Z||Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z}#ZJ(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z||Math.abs(J.offsetLeft-Q.offsetLeft)>Z||Math.abs(J.offsetTop-Q.offsetTop)>Z}#VJ(){if(!this.#$)return!1;let J=this.#b(this.#E,this.#r()),Q=this.#ZJ(this.#y,this.#c());return!J&&!Q}#fJ(){this.#E=this.#r(),this.#y=this.#c()}#qJ(){if(this.#VJ())return;let J=this.#K,Q=this.#L;if(!J||!Q){this.#Q?.();return}let Z=this.#p(),$=Z.find((R)=>this.#C(R)===this.value)||Z[0];if(!$){this.#Q?.();return}this.#Q?.();let X=J.getBoundingClientRect(),Y=this.#P(),j=this.#l($);if(!X.width||!X.height||!Y.width||!j)return;let K=j.left-X.left,W=j.top-X.top,L=T(this,"full")?this.getBoundingClientRect().left:Y.left-K,z=Y.top-W,O=this.#QJ();if(typeof J.clampToViewport==="function")({left:L,top:z}=J.clampToViewport({left:L,top:z},X,O));else{let{left:R,top:_}=O,k=window.innerWidth-X.width-O.right,V=window.innerHeight-X.height-O.bottom;L=Math.min(Math.max(L,R),Math.max(R,k)),z=Math.min(Math.max(z,_),Math.max(_,V))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(L)}px`,"important"),J.style.setProperty("top",`${Math.round(z)}px`,"important");let f=this.#F(),H=this.#l($);if(H&&f&&f.scrollHeight>f.clientHeight+1){let R=H.top-Y.top;if(Math.abs(R)>0.5)f.scrollTop+=R;f.syncOverflow?.()}if(this.#$||this.open)this.#fJ()}#yJ(){this.#Y?.addEventListener("click",this.#_),this.#Y?.addEventListener("keydown",this.#V),this.addEventListener("click",this.#w),this.addEventListener("pointerover",this.#q),this.#K?.addEventListener("keydown",this.#V),this.#K?.addEventListener("close",this.#M),this.#z?.addEventListener("slotchange",this.#B)}#zJ(){this.#Y?.removeEventListener("click",this.#_),this.#Y?.removeEventListener("keydown",this.#V),this.removeEventListener("click",this.#w),this.removeEventListener("pointerover",this.#q),this.#K?.removeEventListener("keydown",this.#V),this.#K?.removeEventListener("close",this.#M),this.#z?.removeEventListener("slotchange",this.#B)}#DJ(){this.#A(),this.#g()}#FJ(){if(this.#H)return;this.#H=new MutationObserver((J)=>{if(this.#X||this.#T)return;let Q=!1;for(let Z of J){if(Z.type==="childList"){if([...Z.addedNodes].some(($)=>this.#R($))||[...Z.removedNodes].some(($)=>this.#R($))||Z.target?.closest?.("fig-select-option"))Q=!0}if(Z.type==="attributes"&&Z.target?.tagName==="FIG-SELECT-OPTION"){if(Z.attributeName==="value"||Z.attributeName==="disabled"||Z.attributeName==="label")Q=!0;else if(Z.attributeName==="selected"){if(T(Z.target,"selected")){let $=this.#C(Z.target);if((this.getAttribute("value")??"")!==$)this.setAttribute("value",$),Q=!0}else if(this.#C(Z.target)===(this.getAttribute("value")??""))Q=!0}}if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#g()}),this.#H.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#p({enabledOnly:J=!1}={}){let Q=this.#F(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!T($,"disabled"))}#C(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Q=J.getAttribute?.("value");if(Q!=null)return Q;return(J.textContent||"").trim()}#CJ(J){if(!J)return"";let Q=J.getAttribute?.("label");if(Q!=null&&Q!=="")return Q.trim();let Z=[];for(let $ of J.childNodes){if($.nodeType===Node.TEXT_NODE){let j=$.textContent?.trim();if(j)Z.push(j);continue}if(!($ instanceof Element))continue;let X=$.getAttribute("slot");if(X==="prepend"||X==="append")continue;let Y=$.textContent?.trim();if(Y)Z.push(Y)}if(Z.length)return Z.join(" ").trim();return(J.textContent||"").trim()}#HJ(J){if(!this.#j||!this.#W||!this.#J||!this.#N)return;let Q=this.querySelector(':scope > [slot="trigger"]'),Z=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),$=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),X=J?.querySelector?.(':scope > [slot="prepend"]');if(this.#N.hidden=!Q,this.#L.hidden=Boolean(Q),this.#j.hidden=Boolean(Q),Q){Z?.remove(),this.#j.classList.remove("has-content"),this.#W.hidden=!0,this.#J.replaceChildren();return}if(!$&&X?.childNodes.length){let j=Z||document.createElement("span");if(j.setAttribute("slot","prepend-trigger"),j.setAttribute("data-fig-select-generated",""),j.replaceChildren(...Array.from(X.childNodes,(K)=>K.cloneNode(!0))),j.parentElement!==this)this.append(j);$=j}else if($)Z?.remove();else Z?.remove();let Y=Boolean($);if(this.#j.classList.toggle("has-content",Y),this.#W.hidden=!$,this.#J.hidden=Boolean($),$){this.#J.replaceChildren();return}this.#J.replaceChildren()}#BJ(){if(!this.#K)return;this.#K.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#K.setAttribute("offset",J);else this.#K.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#K.setAttribute("closedby",Q);else this.#K.removeAttribute("closedby")}#k(){let J=T(this,"disabled");if(this.#Y)if(J)this.#Y.setAttribute("disabled","");else this.#Y.removeAttribute("disabled");if(J&&this.open)this.open=!1}#EJ(J){if(!J.length)return null;let Q=J.find((Z)=>T(Z,"selected"));if(Q&&!T(Q,"disabled"))return Q;return J.find((Z)=>!T(Z,"disabled"))||J[0]||null}#RJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#g(){if(this.#X)return;this.#X=!0;try{let J=this.#p(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((K)=>this.#C(K)===Z):null,X=!1;if(!$){if(Q){if(!J.length){if(this.#L)this.#L.textContent=Z||this.getAttribute("label")||"";return}if($=this.#EJ(J),$){let K=this.#C($);if(Z!==K)this.setAttribute("value",K),X=!0}else this.removeAttribute("value"),X=!0}else if($=J.find((K)=>T(K,"selected")),$)this.setAttribute("value",this.#C($)),X=!0}for(let K of J){let W=K===$;if(K.setAttribute("aria-selected",W?"true":"false"),W)K.setAttribute("selected","");else K.removeAttribute("selected")}let Y=$&&this.#CJ($)||this.getAttribute("label")||"";if(this.#L)this.#L.textContent=Y;this.#HJ($);let j=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Y?.setAttribute("aria-label",j),this.#F()?.syncOverflow?.(),X)this.#RJ(this.getAttribute("value")??"")}finally{this.#X=!1}}#$J(J){if(T(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=!this.open;if(Q&&this.#K&&this.#Y)this.#K.anchor=this.#Y;this.open=Q}#S(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(T(Z,"disabled"))return;this.#f(Z)}#AJ(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(T(Z,"disabled"))return;if(J.relatedTarget instanceof Node&&Z.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#C(Z),bubbles:!0,composed:!0}))}#PJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#K?.matches?.(":open")??!1))){if(this.#Y?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" ")){if(J.preventDefault(),this.#K&&this.#Y)this.#K.anchor=this.#Y;this.open=!0,requestAnimationFrame(()=>{let X=this.#p({enabledOnly:!0}).findIndex((Y)=>this.#C(Y)===this.value);this.#h(X>=0?X:0)})}return}let Z=this.#p({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#d(),this.#h(this.#G+1);break;case"ArrowUp":J.preventDefault(),this.#d(),this.#h(this.#G-1);break;case"Home":J.preventDefault(),this.#h(0);break;case"End":J.preventDefault(),this.#h(Z.length-1);break;case"Escape":J.preventDefault(),this.open=!1,this.#Y?.focus();break;case"Enter":case" ":{this.#d();let $=Z[this.#G];if(!$)return;J.preventDefault(),this.#f($);break}}}#_J(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Y?.setAttribute("aria-expanded","false"),this.#Y?.focus(),this.#G=-1}#f(J){let Q=this.#C(J);this.setAttribute("value",Q),this.#g(),this.#RJ(Q),this.open=!1}#n(){return this.#p({enabledOnly:!0})}#d(){let J=this.#n();if(!J.length){this.#G=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#G=Z>=0?Z:this.#G}#h(J){let Q=this.#n();if(!Q.length)return;let Z=(J%Q.length+Q.length)%Q.length;this.#G=Z,Q[Z]?.focus()}#UJ(){if(!this.#K||!this.#Y)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#Y.getBoundingClientRect().width),Z=Math.max(J,Q,96);this.#K.style.setProperty("width","max-content","important"),this.#K.style.setProperty("min-width",`${Z}px`,"important"),this.#K.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#OJ(){if(!this.#K||T(this,"disabled"))return;if(this.#Y)this.#K.anchor=this.#Y;this.#i(),this.#$=!1,this.#E=null,this.#y=null,this.#g(),this.#UJ(),this.#K.open=!0,document.addEventListener("keydown",this.#V,!0),this.#Y?.setAttribute("aria-expanded","true"),this.#G=-1,requestAnimationFrame(()=>{this.#UJ(),this.#qJ();let J=this.#F(),Z=this.#n().findIndex(($)=>this.#C($)===this.value);if(Z>=0)this.#h(Z);else if(this.#Y?.hasAttribute("data-focus-visible")||this.#Y?.matches?.(":focus-visible"))this.#h(0);J?.syncOverflow?.(),this.#$=!0,this.#fJ()})}#o(){if(!this.#K)return;this.#$=!1,this.#E=null,this.#y=null,document.removeEventListener("keydown",this.#V,!0),this.#K.open=!1,this.#Y?.setAttribute("aria-expanded","false")}}A("fig-select",c);var ZJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],$J=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function N(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase();if(!ZJ.includes(Z))Z="srgb";Q.interpolationSpace=Z;let $=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=$J.includes($)?$:"shorter",Q}function S(J){let Q=N(J);return Q.interpolationSpace="srgb",delete Q.hueInterpolation,Q}function P(J){let Q=S(J),Z={...Q,interpolationSpace:Q.interpolationSpace};if(E.has(Q.interpolationSpace))Z.hueInterpolation=Q.hueInterpolation;else delete Z.hueInterpolation;return Z}function XJ(J){let Q=N(J);if(Q.interpolationSpace==="srgb")return"";if(E.has(Q.interpolationSpace))return`in ${Q.interpolationSpace} ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}function g(J){let Q=N(J);if(E.has(Q.interpolationSpace))return`${Q.interpolationSpace}-${Q.hueInterpolation||"shorter"}`;return Q.interpolationSpace}function F(J){let Q=String(J??"");for(let Z of E){let $=`${Z}-`;if(Q.startsWith($))return{interpolationSpace:Z,hueInterpolation:Q.slice($.length)||"shorter"}}return{interpolationSpace:Q||"srgb",hueInterpolation:"shorter"}}var YJ=0;class y extends HTMLElement{static#Y=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#K(J){let Q=y.#Y,Z=Q.find((K)=>K.value===J);if(Z)return Z;let $=F(J),X=Q.find((K)=>K.space===$.interpolationSpace),Y=X?.subtitle.split(" ")[0]??$.interpolationSpace.toUpperCase(),j=$.hueInterpolation;return{value:J,space:$.interpolationSpace,title:X?.title??"Custom",subtitle:E.has($.interpolationSpace)?`${Y} ${j.charAt(0).toUpperCase()}${j.slice(1)}`:Y}}#j=null;#W=null;#J=null;#N=`fig-fill-picker-dialog-${++YJ}`;#L="solid";anchorElement=null;#z="solid";#H="srgb";#Z={h:0,s:0,v:85,a:1};#G="hex";#X={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#U={url:null,scaleMode:"fill",scale:50};#Q={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#$={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#E=null;#y=!1;#T=null;#_={};#w={};#q=null;#V=null;#M=null;#B=null;#D=!1;#R=!1;#A=null;#F=null;#e=null;#u=null;#JJ=null;#m=0;#i=null;#l=null;#QJ=new Set;#P=new Set;#r=null;#c=null;constructor(){super();this.#i=this.#AJ.bind(this),this.#l=this.#PJ.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#k(()=>{this.#g(),this.#_J(),this.#f(),this.#iJ()})}disconnectedCallback(){if(this.#UJ({stopWebcam:!0}),this.#EJ(),this.#RJ(),this.#W)this.#W.removeAttribute("selected");if(this.#j)this.#j.removeEventListener("click",this.#i),this.#j.removeEventListener("keydown",this.#l);this.#j=null,this.#W=null}#b(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#ZJ(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#VJ(){return this.#z==="webcam"&&this.#ZJ()==="live"&&this.#$.live!==!1}#fJ(){return{live:this.#ZJ()==="live"&&this.#$.live!==!1,snapshot:this.#$.snapshot??null,deviceId:this.#$.deviceId??null,scaleMode:this.#$.scaleMode||"fill",scale:this.#$.scale??50,opacity:this.#$.opacity??1}}#qJ(){let J=this.#Q.url??null;return{url:J,poster:this.#Q.poster??null,scaleMode:this.#Q.scaleMode||"fill",scale:this.#Q.scale??50,opacity:this.#Q.opacity??1,...J?{}:{missing:!0}}}#yJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Q,snapshot:Z,...$}=J.webcam;if(Object.assign(this.#$,$),typeof Z==="string"&&Z)this.#$.snapshot=Z;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#$.snapshot=J.image.url;if(J.image.scaleMode)this.#$.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#$.scale=J.image.scale}}#zJ(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#$.stream,deviceId:this.#$.deviceId??null}}))}get webcamStream(){return this.#$.stream}releaseWebcam(){this.#o()}#DJ(J){if(!J)return null;if(this.#$.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#$.snapshot),this.#P.delete(this.#$.snapshot);return this.#$.snapshot=URL.createObjectURL(J),this.#P.add(this.#$.snapshot),this.#$.snapshot}#FJ(J,Q,Z){if(typeof J.getImageData!=="function")return!1;let $;try{$=J.getImageData(0,0,Q,Z).data}catch{return!1}let X=Math.max(1,Math.floor(Q*Z/256)),Y=0,j=0,K=0;for(let W=0;W<$.length;W+=X*4){let U=Math.max($[W],$[W+1],$[W+2]);if(Y=Math.max(Y,U),K+=1,U>24)j+=1}if(!K)return!0;return Y<=40||j/K<0.04}async#p(J){let Q=[],Z=this.#$.stream?.getVideoTracks?.()?.[0];if(Z&&typeof ImageCapture==="function")try{if(this.#T?.track!==Z)this.#T=new ImageCapture(Z);Q.push(await this.#T.grabFrame())}catch{this.#T=null}if(typeof createImageBitmap==="function")try{Q.push(await createImageBitmap(J))}catch{}return Q.push(J),Q.filter(Boolean)}async#C(J,Q,Z,$){let X=await this.#p(Q);for(let Y of X){try{J.drawImage(Y,0,0,Z,$)}catch{continue}finally{Y.close?.()}if(!this.#FJ(J,Z,$))return!0}return!1}#CJ(J){return new Promise((Q)=>{if(typeof J.requestVideoFrameCallback==="function"){let Z=setTimeout(()=>Q(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout(Z),Q(!0)});return}setTimeout(()=>Q(!1),200)})}async#HJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Q=document.createElement("canvas");Q.width=J.videoWidth,Q.height=J.videoHeight;let Z=Q.getContext("2d",{willReadFrequently:!0});if(!Z)return null;if(!await this.#C(Z,J,Q.width,Q.height))return null;let X=await new Promise((Y)=>Q.toBlob(Y,"image/png"));return this.#DJ(X)}#BJ(J){if(this.#z!=="webcam")return;let Q=this.#$.stream;if(!Q)return;if(this.#E===Q&&this.#$.snapshot){this.#f();return}if(this.#y)return;this.#y=!0;let Z=(X)=>{if(this.#y=!1,!X||this.#z!=="webcam"||this.#$.stream!==Q)return;this.#E=Q,this.#f()},$=async()=>{let X=await this.#HJ(J);if(X){Z(X);return}if(this.#z!=="webcam"||this.#$.stream!==Q){this.#y=!1;return}return await this.#CJ(J),$()};$()}#k(J){let Q=requestAnimationFrame(()=>{if(this.#QJ.delete(Q),this.isConnected)J()});return this.#QJ.add(Q),Q}#EJ(){this.#QJ.forEach((J)=>cancelAnimationFrame(J)),this.#QJ.clear()}#RJ(){let J=new Set([this.#$.snapshot,this.#Q.poster,this.#U.url].filter((Q)=>typeof Q==="string"&&Q.startsWith("blob:")));this.#P.forEach((Q)=>{if(!J.has(Q))URL.revokeObjectURL(Q)}),this.#P.clear(),J.forEach((Q)=>this.#P.add(Q))}#g(){let J=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#W=document.createElement("fig-swatch"),this.#W.setAttribute("background","#D9D9D9"),this.appendChild(this.#W),this.#j=this.#W;else if(J.matches("fig-swatch, fig-chit"))this.#W=J,this.#j=J;else this.#j=J,this.#W=null;if(this.#S(),this.#j.removeEventListener("click",this.#i),this.#j.addEventListener("click",this.#i),this.#j.removeEventListener("keydown",this.#l),this.#j.addEventListener("keydown",this.#l),this.#W)this.#k(()=>{let Q=this.#W.querySelector('input[type="color"]');if(Q)Q.remove();this.#S()})}#$J(){return this.getAttribute("aria-label")||"Fill picker"}#S(){if(!this.#j)return;let J=this.#b(),Q=this.getAttribute("aria-labelledby");if(!this.#j.hasAttribute("role"))this.#j.setAttribute("role","button");if(this.#j.setAttribute("tabindex",J?"-1":"0"),this.#j.setAttribute("aria-disabled",J?"true":"false"),this.#j.setAttribute("aria-haspopup","dialog"),this.#j.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#j.setAttribute("aria-controls",this.#N),this.#j.removeAttribute("aria-hidden"),Q)this.#j.setAttribute("aria-labelledby",Q),this.#j.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#$J()}`),this.#j.removeAttribute("aria-labelledby");else if(this.#j.removeAttribute("aria-labelledby"),!this.#j.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#$J()}`);let Z=this.getAttribute("aria-describedby");if(Z)this.#j.setAttribute("aria-describedby",Z);else this.#j.removeAttribute("aria-describedby")}#AJ(J){if(this.#b())return;J.stopPropagation(),J.preventDefault(),this.#d()}#PJ(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#b())return;J.preventDefault(),J.stopPropagation(),this.#d()}#_J(){let J=this.getAttribute("value");if(!J)return;let Q=["solid","gradient","image","video","webcam"];try{let Z=JSON.parse(J);if(Z.type)this.#z=Z.type;if(Z.color){if(typeof Z.color==="string")this.#Z=this.#WJ(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#Z=Z.color}let $=Z.alpha!==void 0?Number(Z.alpha):Z.opacity!==void 0?Number(Z.opacity)/100:void 0;if(Number.isFinite($))this.#Z.a=Math.max(0,Math.min(1,$));if(this.#H="srgb",Z.gradient)this.#X=S({...this.#X,...Z.gradient});if(Z.image)this.#U={...this.#U,...Z.image};if(Z.video){let X=this.#Q.url;if(this.#Q={...this.#Q,...Z.video},this.#Q.missing=!this.#Q.url,Z.video.poster!=null&&Z.video.poster!=="")this.#c=this.#Q.url;else if(this.#Q.url!==X)this.#jJ();else this.#kJ()}if(this.#yJ(Z),Z.type&&!Q.includes(Z.type)){let{type:X,...Y}=Z;this.#w[Z.type]=Y}}catch(Z){if(J.startsWith("#")){this.#z="solid",this.#Z=this.#WJ(J);return}if(d(J)){let $=this.#Q.url;if(this.#z="video",this.#Q.url=J.trim(),this.#Q.missing=!1,this.#Q.url!==$)this.#jJ();else this.#kJ()}}}#f(){if(!this.#W)return;let J,Q="cover",Z="center";switch(this.#z){case"solid":J=this.#s(this.#Z);break;case"gradient":J=this.#sJ();break;case"image":if(this.#U.url){J=I(this.#U.url);let $=this.#n(this.#U.scaleMode,this.#U.scale);Q=$.size,Z=$.position}else J="";break;case"video":if(this.#Q.poster){J=I(this.#Q.poster);let $=this.#n(this.#Q.scaleMode,this.#Q.scale);Q=$.size,Z=$.position}else J="";break;case"webcam":if(this.#$.snapshot){J=I(this.#$.snapshot);let $=this.#n(this.#$.scaleMode,this.#$.scale);Q=$.size,Z=$.position}else J="";break;default:{J=(this.#_[this.#z]?.element||this.querySelector(`[slot="mode-${this.#z}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#W.setAttribute("background",J),this.#W.style.setProperty("--swatch-bg-size",Q),this.#W.style.setProperty("--swatch-bg-position",Z),this.#z==="solid")this.#W.setAttribute("alpha",this.#Z.a);else this.#W.removeAttribute("alpha")}#n(J,Q){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#d(){if(this.#b())return;if(!this.#J)this.#nJ();else this.#J.anchor=this.anchorElement||this.#j;if(this.#TJ(this.#z,{emit:!1}),this.#e=JSON.stringify(this.value),this.#u=this.#e,this.#W)this.#W.setAttribute("selected","true");this.#J.open=!0,this.#S(),this.#k(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#k(()=>{this.#a(),this.#v()})})}open(){this.#d()}close(){if(this.#J)this.#J.open=!1,this.#S()}#h(){if(!this.#J)return;for(let[J,{element:Q}]of Object.entries(this.#_)){let Z=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find(($)=>$.dataset.tab===J);if(!Z)continue;while(Z.firstChild)Q.appendChild(Z.firstChild)}}#UJ({stopWebcam:J=!1}={}){if(this.#A)this.#A(),this.#A=null;if(this.#F?.disconnect(),this.#F=null,!J&&this.#VJ())this.#OJ();else this.#o();if(!this.#J)return;this.#h(),this.#J.remove(),this.#J=null,this.#JJ=null,this.#e=null,this.#u=null,this.#q=null,this.#V=null,this.#M=null,this.#B=null,this.#R=!1,this.#S()}#OJ(){this.#m+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#o({emit:J=!0}={}){this.#m+=1;let Q=Boolean(this.#$.stream);if(this.#$.stream)this.#$.stream.getTracks().forEach(($)=>$.stop()),this.#$.stream=null;this.#E=null,this.#y=!1,this.#T=null;let Z=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(Z)Z.srcObject=null;if(Q&&J)this.#zJ()}#nJ(){this.#_={},this.querySelectorAll('[slot^="mode-"]').forEach((O)=>{let f=O.getAttribute("slot").slice(5);this.#_[f]={element:O,label:O.getAttribute("label")||f.charAt(0).toUpperCase()+f.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#N,this.#J.setAttribute("aria-label",this.#$J()),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#j;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},$=this.getAttribute("mode"),X;if($){if(X=$.split(",").map((f)=>f.trim().toLowerCase()).filter((f)=>Q.includes(f)||this.#_[f]),X.length===0)X=[...Q]}else X=[...Q];let Y={...Z};for(let[O,{label:f}]of Object.entries(this.#_))Y[O]=f;if(!X.includes(this.#z))this.#z=X[0],this.#L=X[0];let j;if(X.length===1)j=G("h3",{className:"fig-fill-picker-type-label"},Y[X[0]]);else{let O=G("fig-select-options",{},X.map((f)=>G("fig-select-option",{value:f},Y[f])));j=G("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#z},O)}let K=X.map((O)=>G("div",{className:"fig-fill-picker-tab","data-tab":O})),W=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},C("close"));this.#J.replaceChildren(G("fig-header",{},[j,W]),G("fig-content",{},K)),document.body.appendChild(this.#J);for(let[O,{element:f}]of Object.entries(this.#_)){let H=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((R)=>R.dataset.tab===O);if(!H)continue;while(f.firstChild)H.appendChild(f.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:O,container:H}}))}let U=this.#J.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(O)=>{let f=typeof O.detail==="string"?O.detail:O.target?.value;if(f)this.#TJ(f)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let L=()=>{if(this.#W)this.#W.removeAttribute("selected");if(this.#VJ())this.#OJ();else this.#o();let O=JSON.stringify(this.value);if(this.#u!==null&&this.#u!==O)this.#x();this.#e=null,this.#u=null,this.#S();let f=this.#j;this.#k(()=>{if(f?.isConnected)HTMLElement.prototype.focus.call(f)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",L);let z={solid:()=>this.#aJ(),gradient:()=>this.#QQ(),image:()=>this.#zQ(),video:()=>this.#OQ(),webcam:()=>this.#fQ()};for(let[O,f]of Object.entries(z))if(!this.#_[O]&&X.includes(O))f();for(let O of Object.keys(this.#_)){if(Q.includes(O))continue;let f=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((H)=>H.dataset.tab===O);if(!f)continue;f.addEventListener("input",(H)=>{if(H.target===this)return;if(H.stopPropagation(),H.detail)this.#w[O]=H.detail;this.#O()}),f.addEventListener("change",(H)=>{if(H.target===this)return;if(H.stopPropagation(),H.detail)this.#w[O]=H.detail;this.#x()})}}#TJ(J,{emit:Q=!0}={}){let Z=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!Z)return;let $=this.#L;if(this.#L=J,this.#z=J,$==="webcam"&&J!=="webcam")this.#o();let X=this.#J.querySelector(".fig-fill-picker-type");if(X&&X.value!==J)X.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((K)=>{if(K.dataset.tab===J)K.style.display="block";else K.style.display="none"});let j=this.#J.querySelector("fig-content");if(j)j.style.padding=this.#_[J]?"0":"";if(J==="gradient")this.#k(()=>{this.#I();let K=Z.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#k(()=>{K?.refreshLayout?.()})});if(J==="video")this.#MJ({emit:!1});if(J==="webcam")this.#$.live=this.#ZJ()==="live",this.#JJ?.(this.#$.deviceId);if(this.#f(),Q)this.#O()}#oJ(){if(!this.#J?.open)return;if(this.#TJ(this.#z,{emit:!1}),this.#a(),this.#v(),this.#XJ(),this.#M)this.#M.setAttribute("value",this.#Z.h);if(this.#B)this.#B.setAttribute("value",this.#Z.a*100),this.#B.setAttribute("color",this.#s(this.#Z));this.#I();let J=this.#J.querySelector('[data-tab="image"]'),Q=J?.querySelector(".fig-fill-picker-scale-mode"),Z=J?.querySelector(".fig-fill-picker-scale"),$=J?.querySelector(".fig-fill-picker-image-preview");if(Q)Q.value=this.#U.scaleMode;if(Z)Z.setAttribute("value",this.#U.scale),Z.style.display=this.#U.scaleMode==="tile"?"block":"none";if($)this.#t($);let X=this.#J.querySelector('[data-tab="video"]'),Y=X?.querySelector(".fig-fill-picker-scale-mode"),j=X?.querySelector(".fig-fill-picker-video-preview");if(Y)Y.value=this.#Q.scaleMode;if(j)this.#YJ(j)}#aJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Q=this.getAttribute("alpha")!=="false",Z=G("canvas",{width:"200",height:"200"}),$=G("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#s({...this.#Z,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),X=G("fig-preview",{className:"fig-fill-picker-color-area"},[Z,$]),Y=G("fig-tooltip",{text:"Sample color"},G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},C("eyedropper"))),j=G("div",{className:`fig-fill-picker-sliders${Q?"":" is-hue-only"}`},[Y,G("fig-slider",{type:"hue",variant:"classic",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#Z.h}),Q?G("fig-slider",{type:"opacity",variant:"classic",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#Z.a*100,color:this.#s(this.#Z)}):null]),K=G("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([z,O])=>G("fig-select-option",{value:z},O))),W=G("fig-field",{className:"fig-fill-picker-inputs"},[G("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#G},K),G("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(X,j,W),this.#q=J.querySelector("canvas"),this.#V=J.querySelector("fig-handle"),this.#SJ(),this.#a(),this.#v(),this.#vJ(),this.#M=J.querySelector('fig-slider[type="hue"]'),this.#M.addEventListener("input",(z)=>{this.#Z.h=parseFloat(z.target.value),this.#a(),this.#v(),this.#XJ(),this.#O()}),this.#M.addEventListener("change",()=>{this.#x()}),Q)this.#B=J.querySelector('fig-slider[type="opacity"]'),this.#B.addEventListener("input",(z)=>{this.#Z.a=parseFloat(z.target.value)/100,this.#XJ(),this.#O()}),this.#B.addEventListener("change",()=>{this.#x()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(!O)return;this.#G=O,this.#mJ()}),this.#mJ();let L=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)L.addEventListener("click",async()=>{try{let O=await new EyeDropper().open();this.#Z={...this.#WJ(O.sRGBHex),a:this.#Z.a},this.#a(),this.#v(),this.#XJ(),this.#O()}catch(z){}});else L.setAttribute("disabled",""),L.title="EyeDropper not supported in this browser"}#DQ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Q=J.querySelector("canvas");if(Q){let Z=document.createElement("canvas");Z.width=Q.width,Z.height=Q.height,Q.replaceWith(Z),this.#q=Z,this.#vJ()}this.#a(),this.#v()}this.#LJ(),this.#O()}#a(){if(!this.#q&&this.#J)this.#q=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#q)return;let J=this.#H==="display-p3"?"display-p3":"srgb",Q=this.#q.getContext("2d",{colorSpace:J});if(!Q)return;let Z=this.#q.width,$=this.#q.height;Q.clearRect(0,0,Z,$);let X=this.#Z.h,Y=this.#H==="display-p3",j=Q.createLinearGradient(0,0,Z,0);if(Y){j.addColorStop(0,"color(display-p3 1 1 1)");let[W,U,L]=hslToP3(X,100,50);j.addColorStop(1,`color(display-p3 ${W} ${U} ${L})`)}else j.addColorStop(0,"#FFFFFF"),j.addColorStop(1,`hsl(${X}, 100%, 50%)`);Q.fillStyle=j,Q.fillRect(0,0,Z,$);let K=Q.createLinearGradient(0,0,0,$);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=K,Q.fillRect(0,0,Z,$)}#v(J=0){if(!this.#V||!this.#q)return;this.#SJ();let Q=this.#q.getBoundingClientRect();if((Q.width===0||Q.height===0)&&J<5){this.#k(()=>this.#v(J+1));return}let Z=Math.max(0,Math.min(100,this.#Z.s)),$=Math.max(0,Math.min(100,100-this.#Z.v));this.#V.setAttribute("value",`${Z}% ${$}%`),this.#V.setAttribute("color",this.#s({...this.#Z,a:1}))}#SJ(){if(!this.#V)return;this.#V.setAttribute("aria-valuenow",String(Math.round(this.#Z.v))),this.#V.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#Z.s)}%, brightness ${Math.round(this.#Z.v)}%`),this.#V.removeAttribute("aria-pressed")}#IJ(J,Q,Z={}){let{updateHandle:$=!0,emitInput:X=!0,emitChange:Y=!1}=Z;if(this.#Z.s=Math.max(0,Math.min(100,J*100)),this.#Z.v=Math.max(0,Math.min(100,(1-Q)*100)),this.#V)this.#V.setAttribute("color",this.#s({...this.#Z,a:1})),this.#SJ();if($)this.#v();if(this.#XJ(),X)this.#O();if(Y)this.#x()}#vJ(){if(this.#A)this.#A(),this.#A=null;if(!this.#q||!this.#V)return;let J=this.#q.parentElement||this.#q,Q=this.#V,Z=!1,$=(U,L={})=>{let z=J.getBoundingClientRect();if(z.width===0||z.height===0)return;let O=Math.max(0,Math.min(U.clientX-z.left,z.width)),f=Math.max(0,Math.min(U.clientY-z.top,z.height));this.#IJ(O/z.width,f/z.height,L)},X=(U)=>{if(U.button!==0)return;if(U.target===Q||Q.contains(U.target))return;Z=!0,this.#D=!0,J.setPointerCapture(U.pointerId),$(U,{updateHandle:!0,emitInput:!0})},Y=(U)=>{if(!Z)return;if(U.buttons===0){j();return}$(U,{updateHandle:!0,emitInput:!0})},j=()=>{if(!Z)return;Z=!1,this.#D=!1,this.#x()},K=(U)=>{this.#D=!0;let L=U.detail?.px,z=U.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(z))return;Q.setAttribute("value",`${L*100}% ${z*100}%`),this.#IJ(L,z,{updateHandle:!1,emitInput:!0})},W=(U)=>{let L=U.detail?.px,z=U.detail?.py;if(Number.isFinite(L)&&Number.isFinite(z))Q.setAttribute("value",`${L*100}% ${z*100}%`),this.#IJ(L,z,{updateHandle:!1,emitInput:!1});this.#D=!1,this.#x()};J.addEventListener("pointerdown",X),J.addEventListener("pointermove",Y),J.addEventListener("pointerup",j),J.addEventListener("pointercancel",j),J.addEventListener("lostpointercapture",j),Q.addEventListener("input",K),Q.addEventListener("change",W),this.#A=()=>{J.removeEventListener("pointerdown",X),J.removeEventListener("pointermove",Y),J.removeEventListener("pointerup",j),J.removeEventListener("pointercancel",j),J.removeEventListener("lostpointercapture",j),Q.removeEventListener("input",K),Q.removeEventListener("change",W),this.#D=!1}}#mJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=(K,W)=>G("fig-tooltip",{text:K},W),Z=(K,W,U,L,z,O)=>G("fig-input-number",{className:K,"aria-label":W,min:U,max:L,step:z,units:O}),$=this.getAttribute("alpha")!=="false",X=()=>$?Q("Alpha",Z("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Y=(K,W="")=>G("div",{className:["input-combo",W].filter(Boolean).join(" ")},K),j;switch(this.#G){case"rgb":j=Y([Q("Red",Z("fig-fill-picker-ci-r","Red",0,255)),Q("Green",Z("fig-fill-picker-ci-g","Green",0,255)),Q("Blue",Z("fig-fill-picker-ci-b","Blue",0,255)),X()]);break;case"hsl":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Lightness",Z("fig-fill-picker-ci-l","Lightness",0,100)),X()]);break;case"hsb":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Brightness",Z("fig-fill-picker-ci-v","Brightness",0,100)),X()]);break;case"lab":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Green-Red axis",Z("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Q("Blue-Yellow axis",Z("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),X()]);break;case"lch":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Chroma",Z("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Q("Hue",Z("fig-fill-picker-ci-okh","Hue",0,360)),X()]);break;case"css":j=G("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=G("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});j=$?Y([K,X()],"fig-fill-picker-ci-hex-row"):K}break}J.replaceChildren(j),this.#tJ(),this.#k(()=>this.#XJ())}#tJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=()=>{if(this.#D)return;let X=this.#JQ();if(!X)return;let Y=Number.isFinite(X.a)?X.a:this.#Z.a;if(this.#Z={...X,a:Y},this.#a(),this.#v(),this.#M)this.#M.setAttribute("value",this.#Z.h);if(this.#B&&Number.isFinite(X.a))this.#B.setAttribute("value",this.#Z.a*100);this.#O()},Z=()=>this.#x();J.querySelectorAll("fig-input-number, fig-input-text").forEach((X)=>{X.addEventListener("input",Q),X.addEventListener("change",Z)})}#eJ(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Q=parseFloat(J.value);if(!Number.isFinite(Q))return;return Math.max(0,Math.min(1,Q/100))}#JQ(){let J=($)=>this.#J?.querySelector(`.${$}`),Q=($)=>parseFloat(J($)?.value??0),Z=($)=>{if(!$)return null;let X=this.#eJ();return{...$,a:X??$.a??this.#Z.a}};switch(this.#G){case"rgb":return Z(this.#KJ({r:Q("fig-fill-picker-ci-r"),g:Q("fig-fill-picker-ci-g"),b:Q("fig-fill-picker-ci-b")}));case"hsl":{let $=this.#MQ({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),l:Q("fig-fill-picker-ci-l")});return Z(this.#KJ($))}case"hsb":return Z({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),v:Q("fig-fill-picker-ci-v")});case"lab":{let $=this.#rJ({l:Q("fig-fill-picker-ci-okl")/100,a:Q("fig-fill-picker-ci-oka"),b:Q("fig-fill-picker-ci-okb")});return Z(this.#KJ($))}case"lch":{let $=this.#yQ({l:Q("fig-fill-picker-ci-okl")/100,c:Q("fig-fill-picker-ci-okc"),h:Q("fig-fill-picker-ci-okh")});return Z(this.#KJ($))}case"css":{let $=J("fig-fill-picker-ci-css");if(!$)return null;return this.#_Q($.value)}default:{let $=J("fig-fill-picker-ci-hex");if(!$)return null;let X=$.value.replace(/^#/,"");if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];if(X.length===8){let Y=parseInt(X.slice(6,8),16)/255;if(X=X.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(X))return null;return{...this.#WJ(`#${X}`),a:Y}}if(X.length!==6||!/^[0-9a-fA-F]{6}$/.test(X))return null;return Z(this.#WJ(`#${X}`))}}}#XJ(){if(!this.#J)return;let J=this.#s(this.#Z),Q=this.#hJ(this.#Z),Z=(X)=>this.#J.querySelector(`.${X}`),$=(X,Y)=>{let j=Z(X);if(j)j.setAttribute("value",Y)};switch(this.#G){case"rgb":$("fig-fill-picker-ci-r",Q.r),$("fig-fill-picker-ci-g",Q.g),$("fig-fill-picker-ci-b",Q.b);break;case"hsl":{let X=this.#kQ(Q);$("fig-fill-picker-ci-h",Math.round(X.h)),$("fig-fill-picker-ci-s",Math.round(X.s)),$("fig-fill-picker-ci-l",Math.round(X.l));break}case"hsb":$("fig-fill-picker-ci-h",Math.round(this.#Z.h)),$("fig-fill-picker-ci-s",Math.round(this.#Z.s)),$("fig-fill-picker-ci-v",Math.round(this.#Z.v));break;case"lab":{let X=this.#lJ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-oka",+X.a.toFixed(3)),$("fig-fill-picker-ci-okb",+X.b.toFixed(3));break}case"lch":{let X=this.#NQ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-okc",+X.c.toFixed(3)),$("fig-fill-picker-ci-okh",Math.round(X.h));break}case"css":$("fig-fill-picker-ci-css",this.#RQ(this.#Z));break;default:$("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#G!=="css"){let X=Math.round(this.#Z.a*1000)/10;$("fig-fill-picker-ci-a",Number.isInteger(X)?X:+X.toFixed(1))}if(this.#B)this.#B.setAttribute("color",J);this.#f()}#QQ(){let J=this.#J.querySelector('[data-tab="gradient"]'),Q=G("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#X.type},G("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,L])=>G("fig-select-option",{value:U},L)))),Z=(U,L,z)=>G("fig-tooltip",{text:U},G("fig-button",{icon:!0,variant:"ghost",className:L,"aria-label":U},C(z))),$=G("div",{className:"fig-fill-picker-gradient-actions"},[Z("Flip gradient","fig-fill-picker-gradient-flip","swap"),Z("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),X=G("fig-field",{className:"fig-fill-picker-gradient-header"},[Q,$]),Y=G("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:P(this.#X)})}),j=G("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),K=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},C("add")),W=G("div",{className:"fig-fill-picker-gradient-stops"},[G("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[G("span",{},"Stops"),K]),G("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(X,j,W),this.#I(),this.#ZQ(J)}#FQ(){let J=({value:$,title:X,subtitle:Y,advanced:j=!1})=>G("fig-select-option",{value:$,label:`${X} — ${Y}`,className:j?"fig-fill-picker-gradient-interpolation-advanced":null},[G("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),G("span",{className:"fig-fill-picker-gradient-interpolation-label"},[G("span",{className:"fig-fill-picker-gradient-interpolation-title"},X),G("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Y)])]),Q=G("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),Z=y.#Y;return[...Z.filter(($)=>!$.advanced).map(J),Q,...Z.filter(($)=>$.advanced).map(J)]}#ZQ(J){let Q=(V)=>typeof V.detail==="string"?V.detail:V.target?.value,Z=J.querySelector(".fig-fill-picker-gradient-bar-input"),$=(V)=>{if(!Z)return;this.#R=!0;try{Z.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(V)}))}finally{this.#R=!1}},X=()=>{$(this.#X)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(V)=>{let q=Q(V);if(!q)return;this.#X.type=q,this.#I(),this.#O()});let j=J.querySelector(".fig-fill-picker-gradient-space"),K=j?.querySelector("fig-select-options"),W="fig-fill-picker-gradient-interpolation-collapsed",U=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),L=()=>Boolean(K?.classList.contains(W)),z=(V)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",V?"Show all color interpolation options":"Scroll down")},O=()=>{if(!K)return;K.classList.remove(W),K.style.removeProperty("max-height"),z(!1),K.syncOverflow?.()},f=()=>{if(!K||!U)return;K.style.removeProperty("max-height"),K.classList.add(W),K.scrollTop=0;let V=K.getBoundingClientRect().top,q=U.getBoundingClientRect().top,M=K.querySelector(".fig-overflow-end")?.offsetHeight||0,D=q-V;if(D>0)K.style.maxHeight=`${Math.round(D+M)}px`;z(!0),K.syncOverflow?.()},H=(V)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${V}"]`)),R=()=>{if(H(g(this.#X)))O();else f()};if(K?.addEventListener("click",(V)=>{if(!L())return;if(!V.target?.closest?.(".fig-overflow-end"))return;V.preventDefault(),V.stopPropagation(),O()},!0),K?.addEventListener("focusin",(V)=>{if(!L())return;if(V.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))O()}),K?.addEventListener("scroll",()=>{if(L()&&K.scrollTop!==0)K.scrollTop=0}),j?.querySelectorAll("fig-select-option").forEach((V)=>{let q=()=>{let M=F(V.getAttribute("value")||"srgb");$(N({...this.#X,...M}))};V.addEventListener("pointerenter",q),V.addEventListener("pointerleave",()=>{if(document.activeElement!==V)X()}),V.addEventListener("focus",q),V.addEventListener("blur",()=>{if(!V.matches(":hover"))X()})}),this.#F?.disconnect(),j)this.#F=new MutationObserver(()=>{if(!j.hasAttribute("open"))X();else this.#k(R)}),this.#F.observe(j,{attributes:!0,attributeFilter:["open"]});let _=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(_?.addEventListener("change",(V)=>{let q=typeof V.detail==="string"?V.detail:V.target?.value;if(!q)return;let M=F(q);this.#X=N({...this.#X,...M}),this.#I(),this.#O()}),_?.querySelectorAll("fig-segment").forEach((V)=>{let q=()=>{$(N({...this.#X,...F(V.getAttribute("value")||"srgb")}))};V.addEventListener("pointerenter",q),V.addEventListener("pointerleave",X)}),j?.addEventListener("change",(V)=>{let q=Q(V);if(!q)return;let M=F(q);this.#X=N({...this.#X,...M}),this.#I(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#X.angle=(Number(this.#X.angle)+90)%360,this.#I(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#X.stops.forEach((V)=>{V.position=100-V.position}),this.#X.stops.sort((V,q)=>V.position-q.position),this.#I(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#X.stops.push({position:50,color:"#888888",opacity:100}),this.#X.stops.sort((q,M)=>q.position-M.position),this.#I(),this.#O()}),Z){let V=(q)=>{if(q.stopPropagation(),this.#R)return;let M=q.detail;if(!M?.gradient)return;this.#X=S({...this.#X,...M.gradient}),this.#f(),this.#GJ(),this.#cJ()};Z.addEventListener("input",(q)=>{V(q),this.#O()}),Z.addEventListener("change",(q)=>{V(q),this.#x()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(V)=>{this.#jQ(V)})}#xJ(J){let Q=String(J.color||"#888888").replace(/^#/,"").slice(0,6),Z=J.opacity??100;if(Z>=100)return`#${Q}`;let $=Math.round(Z/100*255).toString(16).padStart(2,"0");return`#${Q}${$}`}#$Q(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#wJ(J.hexOpaque);let Q=J.value;if(typeof Q==="string"&&Q.startsWith("#"))return this.#wJ(Q.length>7?Q.slice(0,7):Q);let Z=J.querySelector('fig-input-text:not([type="number"])'),$=String(Z?.value??Z?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test($))return`#${$.toUpperCase()}`;let X=J.getAttribute("value");if(typeof X==="string"&&X.startsWith("#"))return this.#wJ(X.length>7?X.slice(0,7):X);return"#888888"}#wJ(J){let Q=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Q))return"#888888";return`#${Q.toUpperCase()}`}#XQ(J){let Q=J.querySelector(".fig-fill-picker-stop-position"),Z=J.querySelector(".fig-fill-picker-stop-color"),$=parseFloat(Q?.value??Q?.getAttribute("value")??"0")||0,X=this.#$Q(Z),Y=100;if(Z instanceof HTMLElement&&Z.rgba?.a!==void 0)Y=Math.round(Z.rgba.a*100);else{let j=parseInt(J.dataset.index,10);if(!isNaN(j)&&this.#X.stops[j])Y=this.#X.stops[j].opacity??100}return{position:$,color:X,opacity:Y}}#uJ(J){let Q=parseInt(J.dataset.index,10);if(isNaN(Q)||Q<0||Q>=this.#X.stops.length)return;let Z={...this.#X.stops[Q],...this.#XQ(J)};this.#X.stops[Q]=Z,this.#YQ(J,Z)}#YQ(J,Q){let Z=J.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",String(Q.position));let $=J.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#xJ(Q))}#jQ(J){let{oldIndex:Q,newIndex:Z}=J.detail??{};if(Q==null||Z==null||Q===Z||Q<0||Z<0||Q>=this.#X.stops.length||Z>=this.#X.stops.length)return;let X=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");X.forEach((j)=>this.#uJ(j));let[Y]=this.#X.stops.splice(Q,1);this.#X.stops.splice(Z,0,Y),X.forEach((j,K)=>{j.dataset.index=String(K)}),this.#R=!0;try{this.#GJ(),this.#LJ(),this.#O()}finally{this.#R=!1}}#I(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#X=S(this.#X);let Q=g(this.#X),Z=J.querySelector(".fig-fill-picker-gradient-space");if(Z)Z.value=Q;let $=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if($){let X=y.#K(Q),Y=$.querySelector(`fig-segment[value="${Q}"]`)||$.querySelector(`fig-segment[data-space="${X.space}"]`);if(Y){let j=`${X.title} — ${X.subtitle}`;Y.setAttribute("value",Q),Y.setAttribute("aria-label",j);let K=Y.closest("fig-tooltip");if(K)K.setAttribute("text",j);$.value=Q}}this.#GJ(),this.#LJ(),this.#cJ()}#KQ(){let J=Array.isArray(this.#X.stops)?[...this.#X.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Q)=>({color:String(Q.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q.position??0}))}#GJ(){if(!this.#J)return;let J=this.#KQ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Q)=>{let Z=Q.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",$=F(Z),X={type:"linear",stops:J,interpolationSpace:$.interpolationSpace};if(E.has($.interpolationSpace))X.hueInterpolation=$.hueInterpolation;Q.value={type:"gradient",gradient:X}})}#LJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#R=!0,J.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(this.#X)})),this.#R=!1;this.#f()}#cJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Q=J?.querySelector("fig-reorder");if(!J||!Q)return;let Z=Q.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Z.length===this.#X.stops.length){this.#X.stops.forEach(($,X)=>{let Y=Z[X];Y.dataset.index=X;let j=Y.querySelector(".fig-fill-picker-stop-position");if(j)j.setAttribute("value",$.position);let K=Y.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#xJ($));let W=Y.querySelector(".fig-fill-picker-stop-remove");if(W)if(this.#X.stops.length<=2)W.setAttribute("disabled","");else W.removeAttribute("disabled")});return}this.#WQ(J)}#WQ(J){let Q=J.querySelector("fig-reorder");if(!Q)return;let Z=this.#X.stops.map(($,X)=>G("fig-field",{className:"fig-fill-picker-gradient-stop-row","data-index":X},[G("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:$.position,units:"%"}),G("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#xJ($)}),G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-stop-remove",disabled:this.#X.stops.length<=2,"aria-label":"Remove gradient stop"},C("minus"))]));Q.replaceChildren(...Z),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#uJ($),this.#GJ(),this.#LJ(),this.#O()});let X=$.querySelector(".fig-fill-picker-stop-color"),Y=X.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J;else this.#k(()=>{let K=X.querySelector("fig-fill-picker");if(K)K.anchorElement=this.#J});let j=()=>{this.#uJ($),this.#R=!0;try{this.#GJ(),this.#LJ(),this.#O()}finally{this.#R=!1}};X.addEventListener("input",j),X.addEventListener("change",j),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let K=parseInt($.dataset.index,10);if(this.#X.stops.length>2)this.#X.stops.splice(K,1),this.#I(),this.#O()})})}#bJ(J,Q=!0){let Z=N({...this.#X,interpolationSpace:J??this.#X.interpolationSpace}),$=this.#H==="display-p3",X=Z.stops.map((K)=>{let W=(K.opacity??100)/100;return`${$?this.#TQ(K.color,W):this.#HQ(K.color,W)} ${K.position}%`}).join(", "),Y=XJ(Z),j=Q&&Y?` ${Y}`:"";switch(Z.type){case"linear":return`linear-gradient(${Z.angle}deg${j}, ${X})`;case"radial":return`radial-gradient(circle at ${Z.centerX}% ${Z.centerY}%${j}, ${X})`;case"angular":return`conic-gradient(from ${Z.angle}deg${j}, ${X})`;default:return`linear-gradient(${Z.angle}deg${j}, ${X})`}}static#pJ=new Map;#dJ(J){let Q=y.#pJ.get(J);if(Q!==void 0)return Q;let Z=document.createElement("div");Z.style.background=J;let $=!!Z.style.background;return y.#pJ.set(J,$),$}#sJ(){let J=this.#bJ(void 0,!0);if(this.#dJ(J))return J;let Q=this.#bJ("oklab",!0);if(this.#dJ(Q))return Q;return this.#bJ("oklab",!1)}#zQ(){let J=this.#J.querySelector('[data-tab="image"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#U.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Y,j])=>G("fig-select-option",{value:Y},j)))),Z=G("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#U.scale,units:"%"});if(this.#U.scaleMode!=="tile")Z.style.display="none";let $=G("fig-field",{className:"fig-fill-picker-media-header"},[Q,Z]),X=G("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});J.replaceChildren($,X),this.#UQ(J)}#UQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-scale"),$=J.querySelector(".fig-fill-picker-image-preview");Q.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#U.scaleMode=Y,Z.style.display=Y==="tile"?"block":"none",this.#t($),this.#f(),this.#O()}),Z.addEventListener("input",(X)=>{this.#U.scale=parseFloat(X.target.value)||100,this.#t($),this.#f(),this.#O()}),$.addEventListener("loaded",(X)=>{let Y=X.detail?.src||$.src;if(!Y)return;let j=Y!==this.#U.url;if(this.#U.url=Y,this.#t($),this.#f(),j)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),$.addEventListener("change",()=>{if($.src)return;this.#U.url=null,this.#t($),this.#f(),this.#O()}),this.#t($)}#t(J){if(!this.#U.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#U.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#U.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#U.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#U.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#YJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#Q.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#Q.url),this.#Q.poster)J.setAttribute("poster",this.#Q.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#Q.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#Q.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#OQ(){let J=this.#J.querySelector('[data-tab="video"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#Q.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([X,Y])=>G("fig-select-option",{value:X},Y)))),Z=G("fig-field",{className:"fig-fill-picker-media-header"},Q),$=G("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});J.replaceChildren(Z,$),this.#VQ(J),this.#MJ({emit:!1})}#jJ(){if(this.#Q.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#Q.poster),this.#P.delete(this.#Q.poster);this.#Q.poster=null,this.#c=null}#kJ(){if(!this.#Q.poster)return;if(this.#c&&this.#c===this.#Q.url)return;this.#jJ()}#gJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#YJ(J)}#MJ({emit:J=!1}={}){if(this.#Q.url){if(this.#Q.missing=!1,this.#kJ(),!this.#Q.poster)this.#NJ(this.#Q.url);else this.#gJ();return}let Q=this.getAttribute("default-video");if(!Q){this.#Q.missing=!0;return}if(this.#Q.url=Q,this.#Q.missing=!1,this.#gJ(),this.#NJ(Q),J)this.#O()}#iJ(){if(this.#z!=="video")return;let J=this.#Q.url;if(!J)return;if(this.#kJ(),this.#Q.poster)return;this.#NJ(J)}async#GQ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Q)=>J.requestVideoFrameCallback(()=>Q())),new Promise((Q)=>setTimeout(Q,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#LQ(J){let Q=await this.#GQ(J),Z=Q?.width||J.videoWidth,$=Q?.height||J.videoHeight;if(!Z||!$)return Q?.close?.(),null;let X=typeof OffscreenCanvas==="function"?new OffscreenCanvas(Z,$):Object.assign(document.createElement("canvas"),{width:Z,height:$}),Y=X.getContext("2d");if(!Y)return Q?.close?.(),null;try{Y.drawImage(Q||J,0,0,Z,$)}finally{Q?.close?.()}return X.convertToBlob?X.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((j)=>X.toBlob(j,"image/jpeg",0.85))}async#NJ(J,{emit:Q=!1}={}){if(!J||this.#r===J)return;this.#r=J;let Z=document.createElement("video");Z.muted=!0,Z.playsInline=!0,Z.preload="auto",Z.crossOrigin="anonymous";try{if(await new Promise((X,Y)=>{let j=()=>Y(Error("video poster failed"));Z.addEventListener("error",j,{once:!0}),Z.addEventListener("loadeddata",X,{once:!0}),Z.src=J}),!Z.videoWidth||!Z.videoHeight)return;let $=await this.#LQ(Z);if(!$||this.#Q.url!==J)return;if(this.#jJ(),this.#Q.poster=URL.createObjectURL($),this.#c=J,this.#P.add(this.#Q.poster),this.#f(),this.#gJ(),Q)this.#O()}catch{}finally{if(Z.removeAttribute("src"),Z.load(),this.#r===J)this.#r=null}}#VQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-video-preview");Q.addEventListener("change",($)=>{let X=typeof $.detail==="string"?$.detail:$.target?.value;if(!X)return;this.#Q.scaleMode=X,this.#YJ(Z),this.#f(),this.#O()}),Z.addEventListener("loaded",($)=>{let X=$.detail?.src||Z.src;if(!X)return;let Y=X!==this.#Q.url;if(Y)this.#jJ();if(this.#Q.url=X,this.#Q.missing=!1,this.#YJ(Z),this.#NJ(X),this.#f(),Y)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:$.detail??{src:X}}))}),Z.addEventListener("change",()=>{if(Z.src)return;this.#Q.url=null,this.#jJ(),this.#MJ(),this.#YJ(Z),this.#f(),this.#O()}),this.#YJ(Z)}#fQ(){let J=this.#J.querySelector('[data-tab="webcam"]'),Q=G("fig-field",{className:"fig-fill-picker-webcam-camera"},G("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Q.style.display="none";let Z=G("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});Z.muted=!0;let $=G("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},G("span",{},"Camera access required")),X=G("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[Z,$]),Y=G("div",{className:"fig-fill-picker-webcam-controls"},G("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Q,X,Y),this.#qQ(J)}#qQ(J){let Q=J.querySelector(".fig-fill-picker-webcam-video"),Z=J.querySelector(".fig-fill-picker-webcam-status"),$=J.querySelector(".fig-fill-picker-webcam-capture"),X=J.querySelector(".fig-fill-picker-webcam-camera"),Y=J.querySelector(".fig-fill-picker-camera-select"),j=(z)=>{if(z)$.removeAttribute("disabled");else $.setAttribute("disabled","")},K=()=>{let z=!!this.#$.stream&&Q.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Q.videoWidth>0&&Q.videoHeight>0;if(j(z),z)Z.querySelector("span").textContent="Camera ready",Z.style.display="none",this.#BJ(Q)};Q.addEventListener("loadedmetadata",K),Q.addEventListener("canplay",K),Q.addEventListener("playing",K);let W=(z)=>{this.#$.stream=z,Q.srcObject=z,Q.muted=!0,Q.playsInline=!0,Q.style.display="block";let O=Q.play?.();if(O?.catch)O.catch(()=>{});K()},U=async(z,O)=>{let f=await navigator.mediaDevices.enumerateDevices();if(z!=null&&z!==this.#m)return;let H=f.filter((R)=>R.kind==="videoinput");if(H.length>1){X.style.display="";let R=Y.querySelector(":scope > fig-select-options");if(!R)R=document.createElement("fig-select-options"),Y.append(R);if(R.replaceChildren(),H.forEach((_,k)=>{let V=document.createElement("fig-select-option");V.value=_.deviceId;let q=_.label||(H.length>1?`Camera ${k+1}`:"Camera");V.textContent=q.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(M,D)=>{return` ${/^\d+$/.test(D)?Number.parseInt(D,10).toString():D.replace(/^0+/,"")||"0"}`}),R.append(V)}),O)Y.value=O}else X.style.display="none",Y.querySelector(":scope > fig-select-options")?.replaceChildren()},L=async(z=null)=>{let O=z||this.#$.deviceId||null,f=this.#$.stream,H=f?.getTracks?.().filter((_)=>_.readyState!=="ended")??[];if(f&&H.length){let _=f.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#$.deviceId||null;if(!O||O===_){W(f),this.#zJ(),U(null,O||_);return}}this.#o({emit:Boolean(f)});let R=this.#m;j(!1),Z.querySelector("span").textContent="Starting camera",Z.style.display="flex";try{let _={video:O?{deviceId:{exact:O}}:!0},k=await navigator.mediaDevices.getUserMedia(_);if(R!==this.#m||!this.isConnected||this.#L!=="webcam"){k.getTracks().forEach((q)=>q.stop());return}let V=k.getVideoTracks?.()?.[0];this.#$.deviceId=O||V?.getSettings?.()?.deviceId||null,this.#$.live=this.#ZJ()==="live",W(k),this.#zJ(),await U(R,O)}catch(_){if(R!==this.#m)return;console.error("Webcam error:",_.name,_.message);let k="Camera access denied";if(_.name==="NotAllowedError")k="Camera permission denied";else if(_.name==="NotFoundError")k="No camera found";else if(_.name==="NotReadableError")k="Camera in use by another app";else if(_.name==="OverconstrainedError")k="Camera constraints not supported";else if(!window.isSecureContext)k="Camera requires secure context";Z.replaceChildren();let V=document.createElement("span");V.textContent=k,Z.appendChild(V),Z.style.display="flex",Q.style.display="none",j(!1)}};this.#JJ=L,Y.addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(!O||O===this.#$.deviceId)return;L(O)}),$.addEventListener("click",async()=>{if(!this.#$.stream)return;let z=await this.#HJ(Q);if(!z)return;this.#U.url=z,this.#$.live=!1;let O=this.#J.querySelector(".fig-fill-picker-image-preview");if(O)this.#t(O);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((H)=>H.dataset.tab==="image"))this.#TJ("image");else this.#f(),this.#O();this.#x()})}#hJ(J){let Q=J.h/360,Z=J.s/100,$=J.v/100,X,Y,j,K=Math.floor(Q*6),W=Q*6-K,U=$*(1-Z),L=$*(1-W*Z),z=$*(1-(1-W)*Z);switch(K%6){case 0:X=$,Y=z,j=U;break;case 1:X=L,Y=$,j=U;break;case 2:X=U,Y=$,j=z;break;case 3:X=U,Y=L,j=$;break;case 4:X=z,Y=U,j=$;break;case 5:X=$,Y=U,j=L;break}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#KJ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j=X-Y,K=0,W=X===0?0:j/X,U=X;if(X!==Y){switch(X){case Q:K=(Z-$)/j+(Z<$?6:0);break;case Z:K=($-Q)/j+2;break;case $:K=(Q-Z)/j+4;break}K/=6}return{h:K*360,s:W*100,v:U*100,a:1}}#s(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Q=this.#hJ(J),Z=($)=>{return(isNaN($)?217:Math.max(0,Math.min(255,Math.round($)))).toString(16).padStart(2,"0")};return`#${Z(Q.r)}${Z(Q.g)}${Z(Q.b)}`}#WJ(J){let Q=parseInt(J.slice(1,3),16),Z=parseInt(J.slice(3,5),16),$=parseInt(J.slice(5,7),16);return this.#KJ({r:Q,g:Z,b:$})}#HQ(J,Q=1){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return`rgba(${Z}, ${$}, ${X}, ${Q})`}#BQ(J){let Q=Math.max(0,Math.min(1,Number(J)||0)),Z=Math.round(Q*1000)/1000;return String(Z)}#RQ(J=this.#Z){let Q=this.#hJ(J);return`rgba(${Q.r}, ${Q.g}, ${Q.b}, ${this.#BQ(J.a)})`}#_Q(J){let Q=String(J??"").trim();if(!Q)return null;let Z=Q.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(Z){let X=Z[1];if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];let Y=1;if(X.length===8)Y=parseInt(X.slice(6,8),16)/255,X=X.slice(0,6);return{...this.#WJ(`#${X}`),a:Y}}let $=Q.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if($){let X=Math.max(0,Math.min(255,Math.round(parseFloat($[1])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat($[2])))),j=Math.max(0,Math.min(255,Math.round(parseFloat($[3])))),K=$[4]!==void 0?Math.max(0,Math.min(1,parseFloat($[4]))):1;if(![X,Y,j,K].every(Number.isFinite))return null;return{...this.#KJ({r:X,g:Y,b:j}),a:K}}return null}#TQ(J,Q=1){let Z=+(parseInt(J.slice(1,3),16)/255).toFixed(4),$=+(parseInt(J.slice(3,5),16)/255).toFixed(4),X=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${Z} ${$} ${X} / ${Q})`}#kQ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j,K,W=(X+Y)/2;if(X===Y)j=K=0;else{let U=X-Y;switch(K=W>0.5?U/(2-X-Y):U/(X+Y),X){case Q:j=((Z-$)/U+(Z<$?6:0))/6;break;case Z:j=(($-Q)/U+2)/6;break;case $:j=((Q-Z)/U+4)/6;break}}return{h:j*360,s:K*100,l:W*100}}#MQ(J){let Q=J.h/360,Z=J.s/100,$=J.l/100,X,Y,j;if(Z===0)X=Y=j=$;else{let K=(L,z,O)=>{if(O<0)O+=1;if(O>1)O-=1;if(O<0.16666666666666666)return L+(z-L)*6*O;if(O<0.5)return z;if(O<0.6666666666666666)return L+(z-L)*(0.6666666666666666-O)*6;return L},W=$<0.5?$*(1+Z):$+Z-$*Z,U=2*$-W;X=K(U,W,Q+0.3333333333333333),Y=K(U,W,Q),j=K(U,W,Q-0.3333333333333333)}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#lJ(J){let Q=(z)=>{return z=z/255,z<=0.04045?z/12.92:Math.pow((z+0.055)/1.055,2.4)},Z=Q(J.r),$=Q(J.g),X=Q(J.b),Y=0.4122214708*Z+0.5363325363*$+0.0514459929*X,j=0.2119034982*Z+0.6806995451*$+0.1073969566*X,K=0.0883024619*Z+0.2817188376*$+0.6299787005*X,W=Math.cbrt(Y),U=Math.cbrt(j),L=Math.cbrt(K);return{l:0.2104542553*W+0.793617785*U-0.0040720468*L,a:1.9779984951*W-2.428592205*U+0.4505937099*L,b:0.0259040371*W+0.7827717662*U-0.808675766*L}}#NQ(J){let Q=this.#lJ(J);return{l:Q.l,c:Math.sqrt(Q.a*Q.a+Q.b*Q.b),h:(Math.atan2(Q.b,Q.a)*180/Math.PI+360)%360}}#rJ(J){let Q=J.l+0.3963377774*J.a+0.2158037573*J.b,Z=J.l-0.1055613458*J.a-0.0638541728*J.b,$=J.l-0.0894841775*J.a-1.291485548*J.b,X=Q*Q*Q,Y=Z*Z*Z,j=$*$*$,K=(W)=>{let U=W<=0.0031308?12.92*W:1.055*Math.pow(W,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,U))*255)};return{r:K(4.0767416621*X-3.3077115913*Y+0.2309699292*j),g:K(-1.2684380046*X+2.6097574011*Y-0.3413193965*j),b:K(-0.0041960863*X-0.7034186147*Y+1.707614701*j)}}#yQ(J){let Q=J.h*Math.PI/180;return this.#rJ({l:J.l,a:J.c*Math.cos(Q),b:J.c*Math.sin(Q)})}#O(){if(this.#b())return;this.#f(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#x(){if(this.#b())return;this.#u=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#z,colorSpace:this.#H};switch(this.#z){case"solid":return{...J,color:this.#s(this.#Z),alpha:this.#Z.a,hsv:{...this.#Z}};case"gradient":return{...J,gradient:P(this.#X),css:this.#sJ()};case"image":return{...J,image:{...this.#U}};case"video":return{...J,video:this.#qJ()};case"webcam":return{...J,webcam:this.#fJ()};default:return{...J,...this.#w[this.#z]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":if(this.#_J(),this.#f(),this.#iJ(),this.#J?.open&&!this.#D)this.#oJ(),this.#u=JSON.stringify(this.value);break;case"disabled":if(this.#S(),this.#b()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let $=this.#J.open;if(this.#UJ(),$&&this.isConnected)this.#d();break}case"webcam-mode":if(this.#z==="webcam")this.#f();break;case"default-video":if(this.#z==="video")this.#MJ({emit:!1}),this.#f();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#$J());case"aria-labelledby":case"aria-describedby":this.#S();break}}}A("fig-fill-picker",y);class B extends HTMLElement{static#Y=new Set(["oklch","hsl"]);static#K=10;static#j=10;static#W=8;static#J=3;static#N=210;static#L={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#z=!1;#H=null;#Z=null;#G={...B.#L};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#G}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#X(),this.#U(),this.#D(),this.#R()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J!=="value")return;if(this.#U(),this.#z)this.#R()}#X(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#U(){let J=this.getAttribute("value");if(!J){this.#G={...B.#L,stops:B.#L.stops.map((Q)=>({...Q}))};return}try{let Q=JSON.parse(J),Z=Q?.type==="gradient"&&Q.gradient?Q.gradient:Q?.gradient?Q.gradient:Q;if(!Z||typeof Z!=="object")return;this.#G=this.#Q({...B.#L,...Z})}catch{}}#Q(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase(),$=String(Q.hueInterpolation??"shorter").toLowerCase(),X=Array.isArray(Q.stops)?Q.stops.map((Y)=>({color:String(Y?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Y?.position??0,opacity:Y?.opacity??100})):B.#L.stops.map((Y)=>({...Y}));if(X.length<2)return{...B.#L,stops:B.#L.stops.map((Y)=>({...Y}))};return{type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):135,interpolationSpace:Z,hueInterpolation:$,stops:X}}#$(){return B.#Y.has(this.#G.interpolationSpace||"srgb")}#E(J){let{r:Q,g:Z,b:$}=l(J);if(this.#G.interpolationSpace==="hsl")return r(Q,Z,$).h;let X=n(Q,Z,$);return(o(X.l,X.a,X.b).h%360+360)%360}#y(){let J=this.#V(),Q=this.#E(J[0]?.color||"#FF0000"),Z=this.#E(J[J.length-1]?.color||"#4F9EFF"),$=B.#N-Q,Y=((B.#N-Z-$)%360+360)%360,j=Y===0?0:Y-360,K=this.#G.hueInterpolation||"shorter",W;if(K==="increasing")W=j;else if(K==="decreasing")W=Y;else if(K==="longer")W=Y<180?j:Y;else W=Y<=180?Y:j;let U=Math.sign(W),L=Math.asin(B.#J/2/B.#W)*180/Math.PI,z=Math.min(L,Math.max(0,(Math.abs(W)-0.01)/2));return{startDeg:$+U*z,sweepDeg:W-U*z*2}}#T(J){let Q=J*Math.PI/180;return{x:B.#K+B.#W*Math.cos(Q),y:B.#j+B.#W*Math.sin(Q)}}#_(J,Q){let Z=J+Q,$=this.#T(J),X=this.#T(Z),Y=Math.abs(Q)>180?1:0,j=Q>=0?1:0;return`M ${$.x} ${$.y} A ${B.#W} ${B.#W} 0 ${Y} ${j} ${X.x} ${X.y}`}#w(){let J=this.#T(180),Q=this.#T(0);return`M ${J.x} ${J.y} L ${Q.x} ${Q.y}`}#q(J){let Q=B.#J,Z=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Q}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(Z)}")`}#V(){return[...this.#G.stops].sort((J,Q)=>(J.position??0)-(Q.position??0))}#M(){let J=this.#G.interpolationSpace||"srgb";if(J==="srgb")return"";if(B.#Y.has(J))return` in ${J} ${this.#G.hueInterpolation||"shorter"} hue`;return` in ${J}`}#B(){let J=this.#V(),Q=this.#M();if(this.#$()){let $=(B.#N+90)%360,X=this.#G.interpolationSpace,Y=(K)=>X==="oklch"?`oklch(65% 0.25 ${K})`:`hsl(${K} 100% 50%)`,j=[0,300,240,180,120,60,0].map(Y).join(", ");return`conic-gradient(from ${$}deg in ${X} decreasing hue, ${j})`}let Z=J.map(($)=>`${$.color} ${$.position??0}%`).join(", ");return`linear-gradient(90deg${Q}, ${Z})`}#D(){if(this.#z)return;let J=B.#J,Q=u("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},u("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),Z=G("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Q,Z),this.#H=Q,this.#Z=Z,this.#z=!0}#R(){if(!this.#Z)return;let J=this.#$();if(this.#H)this.#H.style.display=J?"":"none";let Q=J?(()=>{let{startDeg:$,sweepDeg:X}=this.#y();return this.#_($,X)})():this.#w(),Z=this.#q(Q);this.#Z.style.setProperty("-webkit-mask-image",Z),this.#Z.style.maskImage=Z,this.#Z.style.background=this.#B()}}A("fig-interpolation-swatch",B);
|
|
108
|
+
`,J.appendChild(Q);let Z=document.createElement("fig-button");Z.className="fig-select-trigger",Z.setAttribute("part","trigger"),Z.setAttribute("variant","ghost"),Z.setAttribute("aria-haspopup","listbox"),Z.setAttribute("aria-expanded","false");let $=document.createElement("span");$.className="fig-select-prepend",$.setAttribute("part","prepend"),$.setAttribute("aria-hidden","true");let X=document.createElement("slot");X.setAttribute("name","prepend-trigger"),X.hidden=!0;let Y=document.createElement("span");Y.className="fig-select-prepend-fallback",$.append(X,Y);let j=document.createElement("span");j.className="fig-select-label",j.setAttribute("part","label");let K=document.createElement("slot");K.setAttribute("name","trigger"),K.hidden=!0,Z.append($,j,K);let W=document.createElement("dialog",{is:"fig-popup"});if(W.setAttribute("is","fig-popup"),W.setAttribute("part","listbox"),W.setAttribute("theme","menu"),W.setAttribute("role","listbox"),"popover"in HTMLElement.prototype)W.setAttribute("popover","manual");W.id=p(),Z.setAttribute("aria-controls",W.id);let U=document.createElement("slot");if(U.setAttribute("name","panel"),W.appendChild(U),J.append(Z,W),this.#Y=Z,this.#j=$,this.#W=X,this.#J=Y,this.#N=K,this.#L=j,this.#K=W,this.#z=U,W.anchor=Z,this.#A(),this.#i(),!this.hasAttribute("value")){let L=this.#p().find((z)=>T(z,"selected"));if(L)this.setAttribute("value",L.value)}}#i(){if(!this.#K||this.#U)return;if(typeof this.#K.positionPopup!=="function")return;this.#Q=this.#K.positionPopup.bind(this.#K),this.#K.positionPopup=()=>{if(!this.open){this.#Q?.();return}this.#qJ()},this.#U=!0}#l(J){if(!J)return null;let Q=document.createRange();Q.selectNodeContents(J);let Z=[...Q.getClientRects()].filter(($)=>$.width>0&&$.height>0);if(Z.length)return Z[0];return J.getBoundingClientRect()}#QJ(){if(typeof this.#K?.parseViewportMargins==="function")return this.#K.parseViewportMargins();return{top:8,right:8,bottom:8,left:8}}#P(){let J=this.#L?.getBoundingClientRect();if(J?.width&&J?.height)return J;let Q=this.querySelector(':scope > [slot="trigger"]')?.getBoundingClientRect();if(Q?.width&&Q?.height)return Q;return this.#j?.getBoundingClientRect()??null}#r(){let J=this.#P();if(!J)return null;return{x:J.x,y:J.y,width:J.width,height:J.height}}#c(){let J=window.visualViewport;return{width:J?.width??window.innerWidth,height:J?.height??window.innerHeight,offsetLeft:J?.offsetLeft??0,offsetTop:J?.offsetTop??0}}#b(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.x-Q.x)>Z||Math.abs(J.y-Q.y)>Z||Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z}#ZJ(J,Q,Z=0.25){if(!J&&!Q)return!1;if(!J||!Q)return!0;return Math.abs(J.width-Q.width)>Z||Math.abs(J.height-Q.height)>Z||Math.abs(J.offsetLeft-Q.offsetLeft)>Z||Math.abs(J.offsetTop-Q.offsetTop)>Z}#VJ(){if(!this.#$)return!1;let J=this.#b(this.#E,this.#r()),Q=this.#ZJ(this.#y,this.#c());return!J&&!Q}#fJ(){this.#E=this.#r(),this.#y=this.#c()}#qJ(){if(this.#VJ())return;let J=this.#K,Q=this.#L;if(!J||!Q){this.#Q?.();return}let Z=this.#p(),$=Z.find((R)=>this.#C(R)===this.value)||Z[0];if(!$){this.#Q?.();return}this.#Q?.();let X=J.getBoundingClientRect(),Y=this.#P(),j=this.#l($);if(!X.width||!X.height||!Y.width||!j)return;let K=j.left-X.left,W=j.top-X.top,L=T(this,"full")?this.getBoundingClientRect().left:Y.left-K,z=Y.top-W,O=this.#QJ();if(typeof J.clampToViewport==="function")({left:L,top:z}=J.clampToViewport({left:L,top:z},X,O));else{let{left:R,top:_}=O,k=window.innerWidth-X.width-O.right,V=window.innerHeight-X.height-O.bottom;L=Math.min(Math.max(L,R),Math.max(R,k)),z=Math.min(Math.max(z,_),Math.max(_,V))}J.style.setProperty("right","auto","important"),J.style.setProperty("bottom","auto","important"),J.style.setProperty("left",`${Math.round(L)}px`,"important"),J.style.setProperty("top",`${Math.round(z)}px`,"important");let f=this.#F(),H=this.#l($);if(H&&f&&f.scrollHeight>f.clientHeight+1){let R=H.top-Y.top;if(Math.abs(R)>0.5)f.scrollTop+=R;f.syncOverflow?.()}if(this.#$||this.open)this.#fJ()}#yJ(){this.#Y?.addEventListener("click",this.#_),this.#Y?.addEventListener("keydown",this.#V),this.addEventListener("click",this.#w),this.addEventListener("pointerover",this.#q),this.#K?.addEventListener("keydown",this.#V),this.#K?.addEventListener("close",this.#M),this.#z?.addEventListener("slotchange",this.#B)}#zJ(){this.#Y?.removeEventListener("click",this.#_),this.#Y?.removeEventListener("keydown",this.#V),this.removeEventListener("click",this.#w),this.removeEventListener("pointerover",this.#q),this.#K?.removeEventListener("keydown",this.#V),this.#K?.removeEventListener("close",this.#M),this.#z?.removeEventListener("slotchange",this.#B)}#DJ(){this.#A(),this.#g()}#FJ(){if(this.#H)return;this.#H=new MutationObserver((J)=>{if(this.#X||this.#T)return;let Q=!1;for(let Z of J){if(Z.type==="childList"){if([...Z.addedNodes].some(($)=>this.#R($))||[...Z.removedNodes].some(($)=>this.#R($))||Z.target?.closest?.("fig-select-option"))Q=!0}if(Z.type==="attributes"&&Z.target?.tagName==="FIG-SELECT-OPTION"){if(Z.attributeName==="value"||Z.attributeName==="disabled"||Z.attributeName==="label")Q=!0;else if(Z.attributeName==="selected"){if(T(Z.target,"selected")){let $=this.#C(Z.target);if((this.getAttribute("value")??"")!==$)this.setAttribute("value",$),Q=!0}else if(this.#C(Z.target)===(this.getAttribute("value")??""))Q=!0}}if(Z.type==="characterData"&&Z.target?.parentElement?.tagName==="FIG-SELECT-OPTION")Q=!0}if(Q)this.#g()}),this.#H.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["value","disabled","selected","label"]})}#p({enabledOnly:J=!1}={}){let Q=this.#F(),Z=Q?Array.from(Q.querySelectorAll(":scope > fig-select-option")):[];if(!J)return Z;return Z.filter(($)=>!T($,"disabled"))}#C(J){if(!J)return"";if(typeof J.value==="string")return J.value;let Q=J.getAttribute?.("value");if(Q!=null)return Q;return(J.textContent||"").trim()}#CJ(J){if(!J)return"";let Q=J.getAttribute?.("label");if(Q!=null&&Q!=="")return Q.trim();let Z=[];for(let $ of J.childNodes){if($.nodeType===Node.TEXT_NODE){let j=$.textContent?.trim();if(j)Z.push(j);continue}if(!($ instanceof Element))continue;let X=$.getAttribute("slot");if(X==="prepend"||X==="append")continue;let Y=$.textContent?.trim();if(Y)Z.push(Y)}if(Z.length)return Z.join(" ").trim();return(J.textContent||"").trim()}#HJ(J){if(!this.#j||!this.#W||!this.#J||!this.#N)return;let Q=this.querySelector(':scope > [slot="trigger"]'),Z=this.querySelector(':scope > [slot="prepend-trigger"][data-fig-select-generated]'),$=this.querySelector(':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])'),X=J?.querySelector?.(':scope > [slot="prepend"]');if(this.#N.hidden=!Q,this.#L.hidden=Boolean(Q),this.#j.hidden=Boolean(Q),Q){Z?.remove(),this.#j.classList.remove("has-content"),this.#W.hidden=!0,this.#J.replaceChildren();return}if(!$&&X?.childNodes.length){let j=Z||document.createElement("span");if(j.setAttribute("slot","prepend-trigger"),j.setAttribute("data-fig-select-generated",""),j.replaceChildren(...Array.from(X.childNodes,(K)=>K.cloneNode(!0))),j.parentElement!==this)this.append(j);$=j}else if($)Z?.remove();else Z?.remove();let Y=Boolean($);if(this.#j.classList.toggle("has-content",Y),this.#W.hidden=!$,this.#J.hidden=Boolean($),$){this.#J.replaceChildren();return}this.#J.replaceChildren()}#BJ(){if(!this.#K)return;this.#K.setAttribute("position",this.getAttribute("position")||"bottom left");let J=this.getAttribute("offset");if(J)this.#K.setAttribute("offset",J);else this.#K.removeAttribute("offset");let Q=this.getAttribute("closedby");if(Q)this.#K.setAttribute("closedby",Q);else this.#K.removeAttribute("closedby")}#k(){let J=T(this,"disabled");if(this.#Y)if(J)this.#Y.setAttribute("disabled","");else this.#Y.removeAttribute("disabled");if(J&&this.open)this.open=!1}#EJ(J){if(!J.length)return null;let Q=J.find((Z)=>T(Z,"selected"));if(Q&&!T(Q,"disabled"))return Q;return J.find((Z)=>!T(Z,"disabled"))||J[0]||null}#RJ(J){this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,composed:!0}))}#g(){if(this.#X)return;this.#X=!0;try{let J=this.#p(),Q=this.hasAttribute("value"),Z=Q?this.getAttribute("value"):null,$=Q?J.find((K)=>this.#C(K)===Z):null,X=!1;if(!$){if(Q){if(!J.length){if(this.#L)this.#L.textContent=Z||this.getAttribute("label")||"";return}if($=this.#EJ(J),$){let K=this.#C($);if(Z!==K)this.setAttribute("value",K),X=!0}else this.removeAttribute("value"),X=!0}else if($=J.find((K)=>T(K,"selected")),$)this.setAttribute("value",this.#C($)),X=!0}for(let K of J){let W=K===$;if(K.setAttribute("aria-selected",W?"true":"false"),W)K.setAttribute("selected","");else K.removeAttribute("selected")}let Y=$&&this.#CJ($)||this.getAttribute("label")||"";if(this.#L)this.#L.textContent=Y;this.#HJ($);let j=this.getAttribute("aria-label")||this.getAttribute("label")||"Select";if(this.#Y?.setAttribute("aria-label",j),this.#F()?.syncOverflow?.(),X)this.#RJ(this.getAttribute("value")??"")}finally{this.#X=!1}}#$J(J){if(T(this,"disabled"))return;J.preventDefault(),J.stopPropagation();let Q=!this.open;if(Q&&this.#K&&this.#Y)this.#K.anchor=this.#Y;this.open=Q}#S(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(T(Z,"disabled"))return;this.#f(Z)}#AJ(J){let Z=(typeof J.composedPath==="function"?J.composedPath():[]).find(($)=>$?.tagName==="FIG-SELECT-OPTION");if(!Z||!this.contains(Z))return;if(T(Z,"disabled"))return;if(J.relatedTarget instanceof Node&&Z.contains(J.relatedTarget))return;this.dispatchEvent(new CustomEvent("optionhover",{detail:this.#C(Z),bubbles:!0,composed:!0}))}#PJ(J){if(J.currentTarget===document&&J.key!=="Escape")return;if(!(this.open&&(this.#K?.matches?.(":open")??!1))){if(this.#Y?.contains(J.target)&&(J.key==="ArrowDown"||J.key==="Enter"||J.key===" ")){if(J.preventDefault(),this.#K&&this.#Y)this.#K.anchor=this.#Y;this.open=!0,requestAnimationFrame(()=>{let X=this.#p({enabledOnly:!0}).findIndex((Y)=>this.#C(Y)===this.value);this.#h(X>=0?X:0)})}return}let Z=this.#p({enabledOnly:!0});if(!Z.length)return;switch(J.key){case"ArrowDown":J.preventDefault(),this.#d(),this.#h(this.#G+1);break;case"ArrowUp":J.preventDefault(),this.#d(),this.#h(this.#G-1);break;case"Home":J.preventDefault(),this.#h(0);break;case"End":J.preventDefault(),this.#h(Z.length-1);break;case"Escape":J.preventDefault(),this.open=!1,this.#Y?.focus();break;case"Enter":case" ":{this.#d();let $=Z[this.#G];if(!$)return;J.preventDefault(),this.#f($);break}}}#_J(){if(this.hasAttribute("open"))this.removeAttribute("open");this.#Y?.setAttribute("aria-expanded","false"),this.#Y?.focus(),this.#G=-1}#f(J){let Q=this.#C(J);this.setAttribute("value",Q),this.#g(),this.#RJ(Q),this.open=!1}#n(){return this.#p({enabledOnly:!0})}#d(){let J=this.#n();if(!J.length){this.#G=-1;return}let Q=J.find(($)=>$===document.activeElement),Z=Q?J.indexOf(Q):-1;this.#G=Z>=0?Z:this.#G}#h(J){let Q=this.#n();if(!Q.length)return;let Z=(J%Q.length+Q.length)%Q.length;this.#G=Z,Q[Z]?.focus()}#UJ(){if(!this.#K||!this.#Y)return;let J=Math.ceil(this.getBoundingClientRect().width),Q=Math.ceil(this.#Y.getBoundingClientRect().width),Z=Math.max(J,Q,96);this.#K.style.setProperty("width","max-content","important"),this.#K.style.setProperty("min-width",`${Z}px`,"important"),this.#K.style.setProperty("max-width","min(20rem, calc(100vw - 1rem))","important")}#OJ(){if(!this.#K||T(this,"disabled"))return;if(this.#Y)this.#K.anchor=this.#Y;this.#i(),this.#$=!1,this.#E=null,this.#y=null,this.#g(),this.#UJ(),this.#K.open=!0,document.addEventListener("keydown",this.#V,!0),this.#Y?.setAttribute("aria-expanded","true"),this.#G=-1,requestAnimationFrame(()=>{this.#UJ(),this.#qJ();let J=this.#F(),Z=this.#n().findIndex(($)=>this.#C($)===this.value);if(Z>=0)this.#h(Z);else if(this.#Y?.hasAttribute("data-focus-visible")||this.#Y?.matches?.(":focus-visible"))this.#h(0);J?.syncOverflow?.(),this.#$=!0,this.#fJ()})}#o(){if(!this.#K)return;this.#$=!1,this.#E=null,this.#y=null,document.removeEventListener("keydown",this.#V,!0),this.#K.open=!1,this.#Y?.setAttribute("aria-expanded","false")}}A("fig-select",c);var ZJ=["srgb","srgb-linear","display-p3","oklab","oklch","hsl"],$J=["shorter","longer","increasing","decreasing"],E=new Set(["oklch","hsl"]);function N(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase();if(!ZJ.includes(Z))Z="srgb";Q.interpolationSpace=Z;let $=String(Q.hueInterpolation??"shorter").toLowerCase();return Q.hueInterpolation=$J.includes($)?$:"shorter",Q}function S(J){let Q=N(J);return Q.interpolationSpace="srgb",delete Q.hueInterpolation,Q}function P(J){let Q=S(J),Z={...Q,interpolationSpace:Q.interpolationSpace};if(E.has(Q.interpolationSpace))Z.hueInterpolation=Q.hueInterpolation;else delete Z.hueInterpolation;return Z}function XJ(J){let Q=N(J);if(Q.interpolationSpace==="srgb")return"";if(E.has(Q.interpolationSpace))return`in ${Q.interpolationSpace} ${Q.hueInterpolation} hue`;return`in ${Q.interpolationSpace}`}function g(J){let Q=N(J);if(E.has(Q.interpolationSpace))return`${Q.interpolationSpace}-${Q.hueInterpolation||"shorter"}`;return Q.interpolationSpace}function F(J){let Q=String(J??"");for(let Z of E){let $=`${Z}-`;if(Q.startsWith($))return{interpolationSpace:Z,hueInterpolation:Q.slice($.length)||"shorter"}}return{interpolationSpace:Q||"srgb",hueInterpolation:"shorter"}}var YJ=0;class y extends HTMLElement{static#Y=[{value:"srgb",space:"srgb",title:"Classic",subtitle:"sRGB Linear"},{value:"oklab",space:"oklab",title:"Smooth",subtitle:"OKLab"},{value:"oklch-increasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Increasing"},{value:"hsl-increasing",space:"hsl",title:"Vivid",subtitle:"HSL Increasing"},{value:"oklch-decreasing",space:"oklch",title:"Vibrant",subtitle:"OKLCH Decreasing",advanced:!0},{value:"hsl-decreasing",space:"hsl",title:"Vivid",subtitle:"HSL Decreasing",advanced:!0}];static#K(J){let Q=y.#Y,Z=Q.find((K)=>K.value===J);if(Z)return Z;let $=F(J),X=Q.find((K)=>K.space===$.interpolationSpace),Y=X?.subtitle.split(" ")[0]??$.interpolationSpace.toUpperCase(),j=$.hueInterpolation;return{value:J,space:$.interpolationSpace,title:X?.title??"Custom",subtitle:E.has($.interpolationSpace)?`${Y} ${j.charAt(0).toUpperCase()}${j.slice(1)}`:Y}}#j=null;#W=null;#J=null;#N=`fig-fill-picker-dialog-${++YJ}`;#L="solid";anchorElement=null;#z="solid";#H="srgb";#Z={h:0,s:0,v:85,a:1};#G="hex";#X={type:"linear",angle:0,centerX:50,centerY:50,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};#U={url:null,scaleMode:"fill",scale:50};#Q={url:null,poster:null,scaleMode:"fill",scale:50,opacity:1,missing:!0};#$={stream:null,live:!0,snapshot:null,deviceId:null,scaleMode:"fill",scale:50,opacity:1};#E=null;#y=!1;#T=null;#_={};#w={};#q=null;#V=null;#M=null;#B=null;#D=!1;#R=!1;#A=null;#F=null;#e=null;#u=null;#JJ=null;#m=0;#i=null;#l=null;#QJ=new Set;#P=new Set;#r=null;#c=null;constructor(){super();this.#i=this.#AJ.bind(this),this.#l=this.#PJ.bind(this)}static get observedAttributes(){return["value","disabled","alpha","mode","webcam-mode","default-video","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){this.style.display="contents",this.#k(()=>{this.#g(),this.#_J(),this.#f(),this.#iJ()})}disconnectedCallback(){if(this.#UJ({stopWebcam:!0}),this.#EJ(),this.#RJ(),this.#W)this.#W.removeAttribute("selected");if(this.#j)this.#j.removeEventListener("click",this.#i),this.#j.removeEventListener("keydown",this.#l);this.#j=null,this.#W=null}#b(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#ZJ(){return this.getAttribute("webcam-mode")==="snapshot"?"snapshot":"live"}#VJ(){return this.#z==="webcam"&&this.#ZJ()==="live"&&this.#$.live!==!1}#fJ(){return{live:this.#ZJ()==="live"&&this.#$.live!==!1,snapshot:this.#$.snapshot??null,deviceId:this.#$.deviceId??null,scaleMode:this.#$.scaleMode||"fill",scale:this.#$.scale??50,opacity:this.#$.opacity??1}}#qJ(){let J=this.#Q.url??null;return{url:J,poster:this.#Q.poster??null,scaleMode:this.#Q.scaleMode||"fill",scale:this.#Q.scale??50,opacity:this.#Q.opacity??1,...J?{}:{missing:!0}}}#yJ(J){if(J.webcam&&typeof J.webcam==="object"){let{stream:Q,snapshot:Z,...$}=J.webcam;if(Object.assign(this.#$,$),typeof Z==="string"&&Z)this.#$.snapshot=Z;return}if(J.type==="webcam"&&J.image){if(J.image.url!=null)this.#$.snapshot=J.image.url;if(J.image.scaleMode)this.#$.scaleMode=J.image.scaleMode;if(J.image.scale!=null)this.#$.scale=J.image.scale}}#zJ(){this.dispatchEvent(new CustomEvent("webcamstream",{bubbles:!0,composed:!0,detail:{stream:this.#$.stream,deviceId:this.#$.deviceId??null}}))}get webcamStream(){return this.#$.stream}releaseWebcam(){this.#o()}#DJ(J){if(!J)return null;if(this.#$.snapshot?.startsWith("blob:"))URL.revokeObjectURL(this.#$.snapshot),this.#P.delete(this.#$.snapshot);return this.#$.snapshot=URL.createObjectURL(J),this.#P.add(this.#$.snapshot),this.#$.snapshot}#FJ(J,Q,Z){if(typeof J.getImageData!=="function")return!1;let $;try{$=J.getImageData(0,0,Q,Z).data}catch{return!1}let X=Math.max(1,Math.floor(Q*Z/256)),Y=0,j=0,K=0;for(let W=0;W<$.length;W+=X*4){let U=Math.max($[W],$[W+1],$[W+2]);if(Y=Math.max(Y,U),K+=1,U>24)j+=1}if(!K)return!0;return Y<=40||j/K<0.04}async#p(J){let Q=[],Z=this.#$.stream?.getVideoTracks?.()?.[0];if(Z&&typeof ImageCapture==="function")try{if(this.#T?.track!==Z)this.#T=new ImageCapture(Z);Q.push(await this.#T.grabFrame())}catch{this.#T=null}if(typeof createImageBitmap==="function")try{Q.push(await createImageBitmap(J))}catch{}return Q.push(J),Q.filter(Boolean)}async#C(J,Q,Z,$){let X=await this.#p(Q);for(let Y of X){try{J.drawImage(Y,0,0,Z,$)}catch{continue}finally{Y.close?.()}if(!this.#FJ(J,Z,$))return!0}return!1}#CJ(J){return new Promise((Q)=>{if(typeof J.requestVideoFrameCallback==="function"){let Z=setTimeout(()=>Q(!1),400);J.requestVideoFrameCallback(()=>{clearTimeout(Z),Q(!0)});return}setTimeout(()=>Q(!1),200)})}async#HJ(J){if(!J?.videoWidth||!J.videoHeight)return null;let Q=document.createElement("canvas");Q.width=J.videoWidth,Q.height=J.videoHeight;let Z=Q.getContext("2d",{willReadFrequently:!0});if(!Z)return null;if(!await this.#C(Z,J,Q.width,Q.height))return null;let X=await new Promise((Y)=>Q.toBlob(Y,"image/png"));return this.#DJ(X)}#BJ(J){if(this.#z!=="webcam")return;let Q=this.#$.stream;if(!Q)return;if(this.#E===Q&&this.#$.snapshot){this.#f();return}if(this.#y)return;this.#y=!0;let Z=(X)=>{if(this.#y=!1,!X||this.#z!=="webcam"||this.#$.stream!==Q)return;this.#E=Q,this.#f()},$=async()=>{let X=await this.#HJ(J);if(X){Z(X);return}if(this.#z!=="webcam"||this.#$.stream!==Q){this.#y=!1;return}return await this.#CJ(J),$()};$()}#k(J){let Q=requestAnimationFrame(()=>{if(this.#QJ.delete(Q),this.isConnected)J()});return this.#QJ.add(Q),Q}#EJ(){this.#QJ.forEach((J)=>cancelAnimationFrame(J)),this.#QJ.clear()}#RJ(){let J=new Set([this.#$.snapshot,this.#Q.poster,this.#U.url].filter((Q)=>typeof Q==="string"&&Q.startsWith("blob:")));this.#P.forEach((Q)=>{if(!J.has(Q))URL.revokeObjectURL(Q)}),this.#P.clear(),J.forEach((Q)=>this.#P.add(Q))}#g(){let J=Array.from(this.children).find((Q)=>!Q.getAttribute("slot")?.startsWith("mode-"));if(!J)this.#W=document.createElement("fig-swatch"),this.#W.setAttribute("background","#D9D9D9"),this.appendChild(this.#W),this.#j=this.#W;else if(J.matches("fig-swatch, fig-chit"))this.#W=J,this.#j=J;else this.#j=J,this.#W=null;if(this.#S(),this.#j.removeEventListener("click",this.#i),this.#j.addEventListener("click",this.#i),this.#j.removeEventListener("keydown",this.#l),this.#j.addEventListener("keydown",this.#l),this.#W)this.#k(()=>{let Q=this.#W.querySelector('input[type="color"]');if(Q)Q.remove();this.#S()})}#$J(){return this.getAttribute("aria-label")||"Fill picker"}#S(){if(!this.#j)return;let J=this.#b(),Q=this.getAttribute("aria-labelledby");if(!this.#j.hasAttribute("role"))this.#j.setAttribute("role","button");if(this.#j.setAttribute("tabindex",J?"-1":"0"),this.#j.setAttribute("aria-disabled",J?"true":"false"),this.#j.setAttribute("aria-haspopup","dialog"),this.#j.setAttribute("aria-expanded",this.#J?.open?"true":"false"),this.#j.setAttribute("aria-controls",this.#N),this.#j.removeAttribute("aria-hidden"),Q)this.#j.setAttribute("aria-labelledby",Q),this.#j.removeAttribute("aria-label");else if(this.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#$J()}`),this.#j.removeAttribute("aria-labelledby");else if(this.#j.removeAttribute("aria-labelledby"),!this.#j.hasAttribute("aria-label"))this.#j.setAttribute("aria-label",`Open ${this.#$J()}`);let Z=this.getAttribute("aria-describedby");if(Z)this.#j.setAttribute("aria-describedby",Z);else this.#j.removeAttribute("aria-describedby")}#AJ(J){if(this.#b())return;J.stopPropagation(),J.preventDefault(),this.#d()}#PJ(J){if(J.key!=="Enter"&&J.key!==" ")return;if(this.#b())return;J.preventDefault(),J.stopPropagation(),this.#d()}#_J(){let J=this.getAttribute("value");if(!J)return;let Q=["solid","gradient","image","video","webcam"];try{let Z=JSON.parse(J);if(Z.type)this.#z=Z.type;if(Z.color){if(typeof Z.color==="string")this.#Z=this.#WJ(Z.color);else if(typeof Z.color==="object"&&Z.color.h!==void 0)this.#Z=Z.color}let $=Z.alpha!==void 0?Number(Z.alpha):Z.opacity!==void 0?Number(Z.opacity)/100:void 0;if(Number.isFinite($))this.#Z.a=Math.max(0,Math.min(1,$));if(this.#H="srgb",Z.gradient)this.#X=S({...this.#X,...Z.gradient});if(Z.image)this.#U={...this.#U,...Z.image};if(Z.video){let X=this.#Q.url;if(this.#Q={...this.#Q,...Z.video},this.#Q.missing=!this.#Q.url,Z.video.poster!=null&&Z.video.poster!=="")this.#c=this.#Q.url;else if(this.#Q.url!==X)this.#jJ();else this.#kJ()}if(this.#yJ(Z),Z.type&&!Q.includes(Z.type)){let{type:X,...Y}=Z;this.#w[Z.type]=Y}}catch(Z){if(J.startsWith("#")){this.#z="solid",this.#Z=this.#WJ(J);return}if(d(J)){let $=this.#Q.url;if(this.#z="video",this.#Q.url=J.trim(),this.#Q.missing=!1,this.#Q.url!==$)this.#jJ();else this.#kJ()}}}#f(){if(!this.#W)return;let J,Q="cover",Z="center";switch(this.#z){case"solid":J=this.#s(this.#Z);break;case"gradient":J=this.#sJ();break;case"image":if(this.#U.url){J=I(this.#U.url);let $=this.#n(this.#U.scaleMode,this.#U.scale);Q=$.size,Z=$.position}else J="";break;case"video":if(this.#Q.poster){J=I(this.#Q.poster);let $=this.#n(this.#Q.scaleMode,this.#Q.scale);Q=$.size,Z=$.position}else J="";break;case"webcam":if(this.#$.snapshot){J=I(this.#$.snapshot);let $=this.#n(this.#$.scaleMode,this.#$.scale);Q=$.size,Z=$.position}else J="";break;default:{J=(this.#_[this.#z]?.element||this.querySelector(`[slot="mode-${this.#z}"]`))?.getAttribute("swatch-background")||"";break}}if(this.#W.setAttribute("background",J),this.#W.style.setProperty("--swatch-bg-size",Q),this.#W.style.setProperty("--swatch-bg-position",Z),this.#z==="solid")this.#W.setAttribute("alpha",this.#Z.a);else this.#W.removeAttribute("alpha")}#n(J,Q){switch(J){case"fill":return{size:"cover",position:"center"};case"fit":return{size:"contain",position:"center"};case"crop":return{size:"cover",position:"center"};case"tile":return{size:`${Q}%`,position:"top left"};default:return{size:"cover",position:"center"}}}#d(){if(this.#b())return;if(!this.#J)this.#nJ();else this.#J.anchor=this.anchorElement||this.#j;if(this.#TJ(this.#z,{emit:!1}),this.#e=JSON.stringify(this.value),this.#u=this.#e,this.#W)this.#W.setAttribute("selected","true");this.#J.open=!0,this.#S(),this.#k(()=>{this.#J?.querySelector(".fig-fill-picker-close, .fig-fill-picker-type, fig-button, button, input, [tabindex='0']")?.focus?.(),this.#k(()=>{this.#a(),this.#v()})})}open(){this.#d()}close(){if(this.#J)this.#J.open=!1,this.#S()}#h(){if(!this.#J)return;for(let[J,{element:Q}]of Object.entries(this.#_)){let Z=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find(($)=>$.dataset.tab===J);if(!Z)continue;while(Z.firstChild)Q.appendChild(Z.firstChild)}}#UJ({stopWebcam:J=!1}={}){if(this.#A)this.#A(),this.#A=null;if(this.#F?.disconnect(),this.#F=null,!J&&this.#VJ())this.#OJ();else this.#o();if(!this.#J)return;this.#h(),this.#J.remove(),this.#J=null,this.#JJ=null,this.#e=null,this.#u=null,this.#q=null,this.#V=null,this.#M=null,this.#B=null,this.#R=!1,this.#S()}#OJ(){this.#m+=1;let J=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(J)J.srcObject=null}#o({emit:J=!0}={}){this.#m+=1;let Q=Boolean(this.#$.stream);if(this.#$.stream)this.#$.stream.getTracks().forEach(($)=>$.stop()),this.#$.stream=null;this.#E=null,this.#y=!1,this.#T=null;let Z=this.#J?.querySelector(".fig-fill-picker-webcam-video");if(Z)Z.srcObject=null;if(Q&&J)this.#zJ()}#nJ(){this.#_={},this.querySelectorAll('[slot^="mode-"]').forEach((O)=>{let f=O.getAttribute("slot").slice(5);this.#_[f]={element:O,label:O.getAttribute("label")||f.charAt(0).toUpperCase()+f.slice(1)}}),this.#J=document.createElement("dialog",{is:"fig-popup"}),this.#J.setAttribute("is","fig-popup"),this.#J.id=this.#N,this.#J.setAttribute("aria-label",this.#$J()),this.#J.setAttribute("drag","true"),this.#J.setAttribute("handle","fig-header"),this.#J.setAttribute("autoresize","false"),this.#J.classList.add("fig-fill-picker-dialog"),this.#J.anchor=this.anchorElement||this.#j;let J=this.getAttribute("dialog-position")||"left";this.#J.setAttribute("position",J),this.#J.setAttribute("offset",this.getAttribute("dialog-offset")||"8 8");let Q=["solid","gradient","image","video","webcam"],Z={solid:"Solid",gradient:"Gradient",image:"Image",video:"Video",webcam:"Webcam"},$=this.getAttribute("mode"),X;if($){if(X=$.split(",").map((f)=>f.trim().toLowerCase()).filter((f)=>Q.includes(f)||this.#_[f]),X.length===0)X=[...Q]}else X=[...Q];let Y={...Z};for(let[O,{label:f}]of Object.entries(this.#_))Y[O]=f;if(!X.includes(this.#z))this.#z=X[0],this.#L=X[0];let j;if(X.length===1)j=G("h3",{className:"fig-fill-picker-type-label"},Y[X[0]]);else{let O=G("fig-select-options",{},X.map((f)=>G("fig-select-option",{value:f},Y[f])));j=G("fig-select",{className:"fig-fill-picker-type",label:"Fill type",variant:"ghost",value:this.#z},O)}let K=X.map((O)=>G("div",{className:"fig-fill-picker-tab","data-tab":O})),W=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-close","aria-label":"Close fill picker"},C("close"));this.#J.replaceChildren(G("fig-header",{},[j,W]),G("fig-content",{},K)),document.body.appendChild(this.#J);for(let[O,{element:f}]of Object.entries(this.#_)){let H=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((R)=>R.dataset.tab===O);if(!H)continue;while(f.firstChild)H.appendChild(f.firstChild);this.dispatchEvent(new CustomEvent("modeready",{bubbles:!0,detail:{mode:O,container:H}}))}let U=this.#J.querySelector(".fig-fill-picker-type");if(U)U.addEventListener("change",(O)=>{let f=typeof O.detail==="string"?O.detail:O.target?.value;if(f)this.#TJ(f)});this.#J.querySelector(".fig-fill-picker-close").addEventListener("click",()=>{this.#J.open=!1});let L=()=>{if(this.#W)this.#W.removeAttribute("selected");if(this.#VJ())this.#OJ();else this.#o();let O=JSON.stringify(this.value);if(this.#u!==null&&this.#u!==O)this.#x();this.#e=null,this.#u=null,this.#S();let f=this.#j;this.#k(()=>{if(f?.isConnected)HTMLElement.prototype.focus.call(f)}),this.dispatchEvent(new CustomEvent("close"))};this.#J.addEventListener("close",L);let z={solid:()=>this.#aJ(),gradient:()=>this.#QQ(),image:()=>this.#zQ(),video:()=>this.#OQ(),webcam:()=>this.#fQ()};for(let[O,f]of Object.entries(z))if(!this.#_[O]&&X.includes(O))f();for(let O of Object.keys(this.#_)){if(Q.includes(O))continue;let f=Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).find((H)=>H.dataset.tab===O);if(!f)continue;f.addEventListener("input",(H)=>{if(H.target===this)return;if(H.stopPropagation(),H.detail)this.#w[O]=H.detail;this.#O()}),f.addEventListener("change",(H)=>{if(H.target===this)return;if(H.stopPropagation(),H.detail)this.#w[O]=H.detail;this.#x()})}}#TJ(J,{emit:Q=!0}={}){let Z=Array.from(this.#J?.querySelectorAll(".fig-fill-picker-tab")??[]).find((K)=>K.dataset.tab===J);if(!Z)return;let $=this.#L;if(this.#L=J,this.#z=J,$==="webcam"&&J!=="webcam")this.#o();let X=this.#J.querySelector(".fig-fill-picker-type");if(X&&X.value!==J)X.value=J;this.#J.querySelectorAll(".fig-fill-picker-tab").forEach((K)=>{if(K.dataset.tab===J)K.style.display="block";else K.style.display="none"});let j=this.#J.querySelector("fig-content");if(j)j.style.padding=this.#_[J]?"0":"";if(J==="gradient")this.#k(()=>{this.#I();let K=Z.querySelector(".fig-fill-picker-gradient-bar-input");K?.refreshLayout?.(),this.#k(()=>{K?.refreshLayout?.()})});if(J==="video")this.#MJ({emit:!1});if(J==="webcam")this.#$.live=this.#ZJ()==="live",this.#JJ?.(this.#$.deviceId);if(this.#f(),Q)this.#O()}#oJ(){if(!this.#J?.open)return;if(this.#TJ(this.#z,{emit:!1}),this.#a(),this.#v(),this.#XJ(),this.#M)this.#M.setAttribute("value",this.#Z.h);if(this.#B)this.#B.setAttribute("value",this.#Z.a*100),this.#B.setAttribute("color",this.#s(this.#Z));this.#I();let J=this.#J.querySelector('[data-tab="image"]'),Q=J?.querySelector(".fig-fill-picker-scale-mode"),Z=J?.querySelector(".fig-fill-picker-scale"),$=J?.querySelector(".fig-fill-picker-image-preview");if(Q)Q.value=this.#U.scaleMode;if(Z)Z.setAttribute("value",this.#U.scale),Z.style.display=this.#U.scaleMode==="tile"?"block":"none";if($)this.#t($);let X=this.#J.querySelector('[data-tab="video"]'),Y=X?.querySelector(".fig-fill-picker-scale-mode"),j=X?.querySelector(".fig-fill-picker-video-preview");if(Y)Y.value=this.#Q.scaleMode;if(j)this.#YJ(j)}#aJ(){let J=this.#J.querySelector('[data-tab="solid"]'),Q=this.getAttribute("alpha")!=="false",Z=G("canvas",{width:"200",height:"200"}),$=G("fig-handle",{"aria-label":"Color saturation and brightness",role:"slider","aria-valuemin":"0","aria-valuemax":"100",type:"color",color:this.#s({...this.#Z,a:1}),"data-no-color-picker":!0,drag:!0,"drag-surface":".fig-fill-picker-color-area","drag-axes":"x,y","drag-snapping":"modifier"}),X=G("fig-preview",{className:"fig-fill-picker-color-area"},[Z,$]),Y=G("fig-tooltip",{text:"Sample color"},G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-eyedropper","aria-label":"Sample color"},C("eyedropper"))),j=G("div",{className:`fig-fill-picker-sliders${Q?"":" is-hue-only"}`},[Y,G("fig-slider",{type:"hue",variant:"classic",text:"false",min:"0",max:"360","aria-label":"Hue",value:this.#Z.h}),Q?G("fig-slider",{type:"opacity",variant:"classic",text:"false",min:"0",max:"100","aria-label":"Opacity",value:this.#Z.a*100,color:this.#s(this.#Z)}):null]),K=G("fig-select-options",{},[["hex","Hex"],["rgb","RGB"],["css","CSS"],["hsl","HSL"],["hsb","HSB"],["lab","LAB"],["lch","LCH"]].map(([z,O])=>G("fig-select-option",{value:z},O))),W=G("fig-field",{className:"fig-fill-picker-inputs"},[G("fig-select",{className:"fig-fill-picker-input-mode",label:"Color value format",value:this.#G},K),G("span",{className:"fig-fill-picker-input-fields"})]);if(J.replaceChildren(X,j,W),this.#q=J.querySelector("canvas"),this.#V=J.querySelector("fig-handle"),this.#SJ(),this.#a(),this.#v(),this.#vJ(),this.#M=J.querySelector('fig-slider[type="hue"]'),this.#M.addEventListener("input",(z)=>{this.#Z.h=parseFloat(z.target.value),this.#a(),this.#v(),this.#XJ(),this.#O()}),this.#M.addEventListener("change",()=>{this.#x()}),Q)this.#B=J.querySelector('fig-slider[type="opacity"]'),this.#B.addEventListener("input",(z)=>{this.#Z.a=parseFloat(z.target.value)/100,this.#XJ(),this.#O()}),this.#B.addEventListener("change",()=>{this.#x()});J.querySelector(".fig-fill-picker-input-mode").addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(!O)return;this.#G=O,this.#mJ()}),this.#mJ();let L=J.querySelector(".fig-fill-picker-eyedropper");if("EyeDropper"in window)L.addEventListener("click",async()=>{try{let O=await new EyeDropper().open();this.#Z={...this.#WJ(O.sRGBHex),a:this.#Z.a},this.#a(),this.#v(),this.#XJ(),this.#O()}catch(z){}});else L.setAttribute("disabled",""),L.title="EyeDropper not supported in this browser"}#DQ(){let J=this.#J?.querySelector('[data-tab="solid"]');if(J){let Q=J.querySelector("canvas");if(Q){let Z=document.createElement("canvas");Z.width=Q.width,Z.height=Q.height,Q.replaceWith(Z),this.#q=Z,this.#vJ()}this.#a(),this.#v()}this.#LJ(),this.#O()}#a(){if(!this.#q&&this.#J)this.#q=this.#J.querySelector('[data-tab="solid"] canvas');if(!this.#q)return;let J=this.#H==="display-p3"?"display-p3":"srgb",Q=this.#q.getContext("2d",{colorSpace:J});if(!Q)return;let Z=this.#q.width,$=this.#q.height;Q.clearRect(0,0,Z,$);let X=this.#Z.h,Y=this.#H==="display-p3",j=Q.createLinearGradient(0,0,Z,0);if(Y){j.addColorStop(0,"color(display-p3 1 1 1)");let[W,U,L]=hslToP3(X,100,50);j.addColorStop(1,`color(display-p3 ${W} ${U} ${L})`)}else j.addColorStop(0,"#FFFFFF"),j.addColorStop(1,`hsl(${X}, 100%, 50%)`);Q.fillStyle=j,Q.fillRect(0,0,Z,$);let K=Q.createLinearGradient(0,0,0,$);K.addColorStop(0,"rgba(0,0,0,0)"),K.addColorStop(1,"rgba(0,0,0,1)"),Q.fillStyle=K,Q.fillRect(0,0,Z,$)}#v(J=0){if(!this.#V||!this.#q)return;this.#SJ();let Q=this.#q.getBoundingClientRect();if((Q.width===0||Q.height===0)&&J<5){this.#k(()=>this.#v(J+1));return}let Z=Math.max(0,Math.min(100,this.#Z.s)),$=Math.max(0,Math.min(100,100-this.#Z.v));this.#V.setAttribute("value",`${Z}% ${$}%`),this.#V.setAttribute("color",this.#s({...this.#Z,a:1}))}#SJ(){if(!this.#V)return;this.#V.setAttribute("aria-valuenow",String(Math.round(this.#Z.v))),this.#V.setAttribute("aria-valuetext",`Saturation ${Math.round(this.#Z.s)}%, brightness ${Math.round(this.#Z.v)}%`),this.#V.removeAttribute("aria-pressed")}#IJ(J,Q,Z={}){let{updateHandle:$=!0,emitInput:X=!0,emitChange:Y=!1}=Z;if(this.#Z.s=Math.max(0,Math.min(100,J*100)),this.#Z.v=Math.max(0,Math.min(100,(1-Q)*100)),this.#V)this.#V.setAttribute("color",this.#s({...this.#Z,a:1})),this.#SJ();if($)this.#v();if(this.#XJ(),X)this.#O();if(Y)this.#x()}#vJ(){if(this.#A)this.#A(),this.#A=null;if(!this.#q||!this.#V)return;let J=this.#q.parentElement||this.#q,Q=this.#V,Z=!1,$=(U,L={})=>{let z=J.getBoundingClientRect();if(z.width===0||z.height===0)return;let O=Math.max(0,Math.min(U.clientX-z.left,z.width)),f=Math.max(0,Math.min(U.clientY-z.top,z.height));this.#IJ(O/z.width,f/z.height,L)},X=(U)=>{if(U.button!==0)return;if(U.target===Q||Q.contains(U.target))return;Z=!0,this.#D=!0,J.setPointerCapture(U.pointerId),$(U,{updateHandle:!0,emitInput:!0})},Y=(U)=>{if(!Z)return;if(U.buttons===0){j();return}$(U,{updateHandle:!0,emitInput:!0})},j=()=>{if(!Z)return;Z=!1,this.#D=!1,this.#x()},K=(U)=>{this.#D=!0;let L=U.detail?.px,z=U.detail?.py;if(!Number.isFinite(L)||!Number.isFinite(z))return;Q.setAttribute("value",`${L*100}% ${z*100}%`),this.#IJ(L,z,{updateHandle:!1,emitInput:!0})},W=(U)=>{let L=U.detail?.px,z=U.detail?.py;if(Number.isFinite(L)&&Number.isFinite(z))Q.setAttribute("value",`${L*100}% ${z*100}%`),this.#IJ(L,z,{updateHandle:!1,emitInput:!1});this.#D=!1,this.#x()};J.addEventListener("pointerdown",X),J.addEventListener("pointermove",Y),J.addEventListener("pointerup",j),J.addEventListener("pointercancel",j),J.addEventListener("lostpointercapture",j),Q.addEventListener("input",K),Q.addEventListener("change",W),this.#A=()=>{J.removeEventListener("pointerdown",X),J.removeEventListener("pointermove",Y),J.removeEventListener("pointerup",j),J.removeEventListener("pointercancel",j),J.removeEventListener("lostpointercapture",j),Q.removeEventListener("input",K),Q.removeEventListener("change",W),this.#D=!1}}#mJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=(K,W)=>G("fig-tooltip",{text:K},W),Z=(K,W,U,L,z,O)=>G("fig-input-number",{className:K,"aria-label":W,min:U,max:L,step:z,units:O}),$=this.getAttribute("alpha")!=="false",X=()=>$?Q("Alpha",Z("fig-fill-picker-ci-a","Alpha",0,100,0.1,"%")):null,Y=(K,W="")=>G("div",{className:["input-combo",W].filter(Boolean).join(" ")},K),j;switch(this.#G){case"rgb":j=Y([Q("Red",Z("fig-fill-picker-ci-r","Red",0,255)),Q("Green",Z("fig-fill-picker-ci-g","Green",0,255)),Q("Blue",Z("fig-fill-picker-ci-b","Blue",0,255)),X()]);break;case"hsl":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Lightness",Z("fig-fill-picker-ci-l","Lightness",0,100)),X()]);break;case"hsb":j=Y([Q("Hue",Z("fig-fill-picker-ci-h","Hue",0,360)),Q("Saturation",Z("fig-fill-picker-ci-s","Saturation",0,100)),Q("Brightness",Z("fig-fill-picker-ci-v","Brightness",0,100)),X()]);break;case"lab":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Green-Red axis",Z("fig-fill-picker-ci-oka","Green-Red axis",-0.4,0.4,0.001)),Q("Blue-Yellow axis",Z("fig-fill-picker-ci-okb","Blue-Yellow axis",-0.4,0.4,0.001)),X()]);break;case"lch":j=Y([Q("Lightness",Z("fig-fill-picker-ci-okl","Lightness",0,100)),Q("Chroma",Z("fig-fill-picker-ci-okc","Chroma",0,0.4,0.001)),Q("Hue",Z("fig-fill-picker-ci-okh","Hue",0,360)),X()]);break;case"css":j=G("fig-input-text",{className:"fig-fill-picker-ci-css","aria-label":"CSS color",placeholder:"rgba(0, 0, 0, 1)"});break;default:{let K=G("fig-input-text",{className:"fig-fill-picker-ci-hex","aria-label":"Hex color",placeholder:"FFFFFF"});j=$?Y([K,X()],"fig-fill-picker-ci-hex-row"):K}break}J.replaceChildren(j),this.#tJ(),this.#k(()=>this.#XJ())}#tJ(){let J=this.#J?.querySelector(".fig-fill-picker-input-fields");if(!J)return;let Q=()=>{if(this.#D)return;let X=this.#JQ();if(!X)return;let Y=Number.isFinite(X.a)?X.a:this.#Z.a;if(this.#Z={...X,a:Y},this.#a(),this.#v(),this.#M)this.#M.setAttribute("value",this.#Z.h);if(this.#B&&Number.isFinite(X.a))this.#B.setAttribute("value",this.#Z.a*100);this.#O()},Z=()=>this.#x();J.querySelectorAll("fig-input-number, fig-input-text").forEach((X)=>{X.addEventListener("input",Q),X.addEventListener("change",Z)})}#eJ(){let J=this.#J?.querySelector(".fig-fill-picker-ci-a");if(!J)return;let Q=parseFloat(J.value);if(!Number.isFinite(Q))return;return Math.max(0,Math.min(1,Q/100))}#JQ(){let J=($)=>this.#J?.querySelector(`.${$}`),Q=($)=>parseFloat(J($)?.value??0),Z=($)=>{if(!$)return null;let X=this.#eJ();return{...$,a:X??$.a??this.#Z.a}};switch(this.#G){case"rgb":return Z(this.#KJ({r:Q("fig-fill-picker-ci-r"),g:Q("fig-fill-picker-ci-g"),b:Q("fig-fill-picker-ci-b")}));case"hsl":{let $=this.#MQ({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),l:Q("fig-fill-picker-ci-l")});return Z(this.#KJ($))}case"hsb":return Z({h:Q("fig-fill-picker-ci-h"),s:Q("fig-fill-picker-ci-s"),v:Q("fig-fill-picker-ci-v")});case"lab":{let $=this.#rJ({l:Q("fig-fill-picker-ci-okl")/100,a:Q("fig-fill-picker-ci-oka"),b:Q("fig-fill-picker-ci-okb")});return Z(this.#KJ($))}case"lch":{let $=this.#yQ({l:Q("fig-fill-picker-ci-okl")/100,c:Q("fig-fill-picker-ci-okc"),h:Q("fig-fill-picker-ci-okh")});return Z(this.#KJ($))}case"css":{let $=J("fig-fill-picker-ci-css");if(!$)return null;return this.#_Q($.value)}default:{let $=J("fig-fill-picker-ci-hex");if(!$)return null;let X=$.value.replace(/^#/,"");if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];if(X.length===8){let Y=parseInt(X.slice(6,8),16)/255;if(X=X.slice(0,6),!/^[0-9a-fA-F]{6}$/.test(X))return null;return{...this.#WJ(`#${X}`),a:Y}}if(X.length!==6||!/^[0-9a-fA-F]{6}$/.test(X))return null;return Z(this.#WJ(`#${X}`))}}}#XJ(){if(!this.#J)return;let J=this.#s(this.#Z),Q=this.#hJ(this.#Z),Z=(X)=>this.#J.querySelector(`.${X}`),$=(X,Y)=>{let j=Z(X);if(j)j.setAttribute("value",Y)};switch(this.#G){case"rgb":$("fig-fill-picker-ci-r",Q.r),$("fig-fill-picker-ci-g",Q.g),$("fig-fill-picker-ci-b",Q.b);break;case"hsl":{let X=this.#kQ(Q);$("fig-fill-picker-ci-h",Math.round(X.h)),$("fig-fill-picker-ci-s",Math.round(X.s)),$("fig-fill-picker-ci-l",Math.round(X.l));break}case"hsb":$("fig-fill-picker-ci-h",Math.round(this.#Z.h)),$("fig-fill-picker-ci-s",Math.round(this.#Z.s)),$("fig-fill-picker-ci-v",Math.round(this.#Z.v));break;case"lab":{let X=this.#lJ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-oka",+X.a.toFixed(3)),$("fig-fill-picker-ci-okb",+X.b.toFixed(3));break}case"lch":{let X=this.#NQ(Q);$("fig-fill-picker-ci-okl",Math.round(X.l*100)),$("fig-fill-picker-ci-okc",+X.c.toFixed(3)),$("fig-fill-picker-ci-okh",Math.round(X.h));break}case"css":$("fig-fill-picker-ci-css",this.#RQ(this.#Z));break;default:$("fig-fill-picker-ci-hex",J.replace(/^#/,"").toUpperCase());break}if(this.#G!=="css"){let X=Math.round(this.#Z.a*1000)/10;$("fig-fill-picker-ci-a",Number.isInteger(X)?X:+X.toFixed(1))}if(this.#B)this.#B.setAttribute("color",J);this.#f()}#QQ(){let J=this.#J.querySelector('[data-tab="gradient"]'),Q=G("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",value:this.#X.type,variant:"ghost"},G("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([U,L])=>G("fig-select-option",{value:U},L)))),Z=(U,L,z)=>G("fig-tooltip",{text:U},G("fig-button",{icon:!0,variant:"ghost",className:L,"aria-label":U},C(z))),$=G("div",{className:"fig-fill-picker-gradient-actions"},[Z("Flip gradient","fig-fill-picker-gradient-flip","swap"),Z("Rotate gradient","fig-fill-picker-gradient-rotate","rotate")]),X=G("fig-field",{className:"fig-fill-picker-gradient-header"},[Q,$]),Y=G("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large",value:JSON.stringify({type:"gradient",gradient:P(this.#X)})}),j=G("fig-preview",{className:"fig-fill-picker-gradient-preview"},Y),K=G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},C("add")),W=G("div",{className:"fig-fill-picker-gradient-stops"},[G("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[G("h3",{},"Stops"),K]),G("div",{className:"fig-fill-picker-gradient-stops-list"},document.createElement("fig-reorder"))]);J.replaceChildren(X,j,W),this.#I(),this.#ZQ(J)}#FQ(){let J=({value:$,title:X,subtitle:Y,advanced:j=!1})=>G("fig-select-option",{value:$,label:`${X} — ${Y}`,className:j?"fig-fill-picker-gradient-interpolation-advanced":null},[G("fig-interpolation-swatch",{slot:"prepend",size:"large","aria-hidden":"true"}),G("span",{className:"fig-fill-picker-gradient-interpolation-label"},[G("span",{className:"fig-fill-picker-gradient-interpolation-title"},X),G("span",{className:"fig-fill-picker-gradient-interpolation-subtitle"},Y)])]),Q=G("fig-separator",{className:"fig-fill-picker-gradient-interpolation-advanced"}),Z=y.#Y;return[...Z.filter(($)=>!$.advanced).map(J),Q,...Z.filter(($)=>$.advanced).map(J)]}#ZQ(J){let Q=(V)=>typeof V.detail==="string"?V.detail:V.target?.value,Z=J.querySelector(".fig-fill-picker-gradient-bar-input"),$=(V)=>{if(!Z)return;this.#R=!0;try{Z.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(V)}))}finally{this.#R=!1}},X=()=>{$(this.#X)};J.querySelector(".fig-fill-picker-gradient-type")?.addEventListener("change",(V)=>{let q=Q(V);if(!q)return;this.#X.type=q,this.#I(),this.#O()});let j=J.querySelector(".fig-fill-picker-gradient-space"),K=j?.querySelector("fig-select-options"),W="fig-fill-picker-gradient-interpolation-collapsed",U=K?.querySelector(".fig-fill-picker-gradient-interpolation-advanced"),L=()=>Boolean(K?.classList.contains(W)),z=(V)=>{K?.querySelector(".fig-overflow-end")?.setAttribute("aria-label",V?"Show all color interpolation options":"Scroll down")},O=()=>{if(!K)return;K.classList.remove(W),K.style.removeProperty("max-height"),z(!1),K.syncOverflow?.()},f=()=>{if(!K||!U)return;K.style.removeProperty("max-height"),K.classList.add(W),K.scrollTop=0;let V=K.getBoundingClientRect().top,q=U.getBoundingClientRect().top,M=K.querySelector(".fig-overflow-end")?.offsetHeight||0,D=q-V;if(D>0)K.style.maxHeight=`${Math.round(D+M)}px`;z(!0),K.syncOverflow?.()},H=(V)=>Boolean(K?.querySelector(`fig-select-option.fig-fill-picker-gradient-interpolation-advanced[value="${V}"]`)),R=()=>{if(H(g(this.#X)))O();else f()};if(K?.addEventListener("click",(V)=>{if(!L())return;if(!V.target?.closest?.(".fig-overflow-end"))return;V.preventDefault(),V.stopPropagation(),O()},!0),K?.addEventListener("focusin",(V)=>{if(!L())return;if(V.target?.closest?.(".fig-fill-picker-gradient-interpolation-advanced"))O()}),K?.addEventListener("scroll",()=>{if(L()&&K.scrollTop!==0)K.scrollTop=0}),j?.querySelectorAll("fig-select-option").forEach((V)=>{let q=()=>{let M=F(V.getAttribute("value")||"srgb");$(N({...this.#X,...M}))};V.addEventListener("pointerenter",q),V.addEventListener("pointerleave",()=>{if(document.activeElement!==V)X()}),V.addEventListener("focus",q),V.addEventListener("blur",()=>{if(!V.matches(":hover"))X()})}),this.#F?.disconnect(),j)this.#F=new MutationObserver(()=>{if(!j.hasAttribute("open"))X();else this.#k(R)}),this.#F.observe(j,{attributes:!0,attributeFilter:["open"]});let _=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if(_?.addEventListener("change",(V)=>{let q=typeof V.detail==="string"?V.detail:V.target?.value;if(!q)return;let M=F(q);this.#X=N({...this.#X,...M}),this.#I(),this.#O()}),_?.querySelectorAll("fig-segment").forEach((V)=>{let q=()=>{$(N({...this.#X,...F(V.getAttribute("value")||"srgb")}))};V.addEventListener("pointerenter",q),V.addEventListener("pointerleave",X)}),j?.addEventListener("change",(V)=>{let q=Q(V);if(!q)return;let M=F(q);this.#X=N({...this.#X,...M}),this.#I(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-rotate")?.addEventListener("click",()=>{this.#X.angle=(Number(this.#X.angle)+90)%360,this.#I(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-flip").addEventListener("click",()=>{this.#X.stops.forEach((V)=>{V.position=100-V.position}),this.#X.stops.sort((V,q)=>V.position-q.position),this.#I(),this.#O()}),J.querySelector(".fig-fill-picker-gradient-add").addEventListener("click",()=>{this.#X.stops.push({position:50,color:"#888888",opacity:100}),this.#X.stops.sort((q,M)=>q.position-M.position),this.#I(),this.#O()}),Z){let V=(q)=>{if(q.stopPropagation(),this.#R)return;let M=q.detail;if(!M?.gradient)return;this.#X=S({...this.#X,...M.gradient}),this.#f(),this.#GJ(),this.#cJ()};Z.addEventListener("input",(q)=>{V(q),this.#O()}),Z.addEventListener("change",(q)=>{V(q),this.#x()})}J.querySelector(".fig-fill-picker-gradient-stops-list > fig-reorder")?.addEventListener("reorder",(V)=>{this.#jQ(V)})}#xJ(J){let Q=String(J.color||"#888888").replace(/^#/,"").slice(0,6),Z=J.opacity??100;if(Z>=100)return`#${Q}`;let $=Math.round(Z/100*255).toString(16).padStart(2,"0");return`#${Q}${$}`}#$Q(J){if(!(J instanceof HTMLElement))return"#888888";if(J.hexOpaque)return this.#wJ(J.hexOpaque);let Q=J.value;if(typeof Q==="string"&&Q.startsWith("#"))return this.#wJ(Q.length>7?Q.slice(0,7):Q);let Z=J.querySelector('fig-input-text:not([type="number"])'),$=String(Z?.value??Z?.getAttribute("value")??"").replace(/#/g,"").slice(0,6);if(/^[0-9A-Fa-f]{6}$/.test($))return`#${$.toUpperCase()}`;let X=J.getAttribute("value");if(typeof X==="string"&&X.startsWith("#"))return this.#wJ(X.length>7?X.slice(0,7):X);return"#888888"}#wJ(J){let Q=String(J||"#888888").replace(/^#/,"").slice(0,6);if(!/^[0-9A-Fa-f]{6}$/.test(Q))return"#888888";return`#${Q.toUpperCase()}`}#XQ(J){let Q=J.querySelector(".fig-fill-picker-stop-position"),Z=J.querySelector(".fig-fill-picker-stop-color"),$=parseFloat(Q?.value??Q?.getAttribute("value")??"0")||0,X=this.#$Q(Z),Y=100;if(Z instanceof HTMLElement&&Z.rgba?.a!==void 0)Y=Math.round(Z.rgba.a*100);else{let j=parseInt(J.dataset.index,10);if(!isNaN(j)&&this.#X.stops[j])Y=this.#X.stops[j].opacity??100}return{position:$,color:X,opacity:Y}}#uJ(J){let Q=parseInt(J.dataset.index,10);if(isNaN(Q)||Q<0||Q>=this.#X.stops.length)return;let Z={...this.#X.stops[Q],...this.#XQ(J)};this.#X.stops[Q]=Z,this.#YQ(J,Z)}#YQ(J,Q){let Z=J.querySelector(".fig-fill-picker-stop-position");if(Z)Z.setAttribute("value",String(Q.position));let $=J.querySelector(".fig-fill-picker-stop-color");if($)$.setAttribute("value",this.#xJ(Q))}#jQ(J){let{oldIndex:Q,newIndex:Z}=J.detail??{};if(Q==null||Z==null||Q===Z||Q<0||Z<0||Q>=this.#X.stops.length||Z>=this.#X.stops.length)return;let X=J.currentTarget.querySelectorAll(".fig-fill-picker-gradient-stop-row");X.forEach((j)=>this.#uJ(j));let[Y]=this.#X.stops.splice(Q,1);this.#X.stops.splice(Z,0,Y),X.forEach((j,K)=>{j.dataset.index=String(K)}),this.#R=!0;try{this.#GJ(),this.#LJ(),this.#O()}finally{this.#R=!1}}#I(){if(!this.#J)return;let J=this.#J.querySelector('[data-tab="gradient"]');if(!J)return;this.#X=S(this.#X);let Q=g(this.#X),Z=J.querySelector(".fig-fill-picker-gradient-space");if(Z)Z.value=Q;let $=J.querySelector(".fig-fill-picker-gradient-interpolation-modes");if($){let X=y.#K(Q),Y=$.querySelector(`fig-segment[value="${Q}"]`)||$.querySelector(`fig-segment[data-space="${X.space}"]`);if(Y){let j=`${X.title} — ${X.subtitle}`;Y.setAttribute("value",Q),Y.setAttribute("aria-label",j);let K=Y.closest("fig-tooltip");if(K)K.setAttribute("text",j);$.value=Q}}this.#GJ(),this.#LJ(),this.#cJ()}#KQ(){let J=Array.isArray(this.#X.stops)?[...this.#X.stops].sort((Q,Z)=>(Q.position??0)-(Z.position??0)):[];if(J.length<2)return[{color:"#FF0000",position:0},{color:"#4F9EFF",position:100}];return J.map((Q)=>({color:String(Q.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Q.position??0}))}#GJ(){if(!this.#J)return;let J=this.#KQ();this.#J.querySelectorAll("fig-interpolation-swatch").forEach((Q)=>{let Z=Q.closest("fig-select-option, fig-segment")?.getAttribute("value")||"srgb",$=F(Z),X={type:"linear",stops:J,interpolationSpace:$.interpolationSpace};if(E.has($.interpolationSpace))X.hueInterpolation=$.hueInterpolation;Q.value={type:"gradient",gradient:X}})}#LJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-bar-input");if(J)this.#R=!0,J.setAttribute("value",JSON.stringify({type:"gradient",gradient:P(this.#X)})),this.#R=!1;this.#f()}#cJ(){if(!this.#J)return;let J=this.#J.querySelector(".fig-fill-picker-gradient-stops-list"),Q=J?.querySelector("fig-reorder");if(!J||!Q)return;let Z=Q.querySelectorAll(".fig-fill-picker-gradient-stop-row");if(Z.length===this.#X.stops.length){this.#X.stops.forEach(($,X)=>{let Y=Z[X];Y.dataset.index=X;let j=Y.querySelector(".fig-fill-picker-stop-position");if(j)j.setAttribute("value",$.position);let K=Y.querySelector(".fig-fill-picker-stop-color");if(K)K.setAttribute("value",this.#xJ($));let W=Y.querySelector(".fig-fill-picker-stop-remove");if(W)if(this.#X.stops.length<=2)W.setAttribute("disabled","");else W.removeAttribute("disabled")});return}this.#WQ(J)}#WQ(J){let Q=J.querySelector("fig-reorder");if(!Q)return;let Z=this.#X.stops.map(($,X)=>G("fig-field",{className:"fig-fill-picker-gradient-stop-row","data-index":X},[G("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",value:$.position,units:"%"}),G("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right",value:this.#xJ($)}),G("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-stop-remove",disabled:this.#X.stops.length<=2,"aria-label":"Remove gradient stop"},C("minus"))]));Q.replaceChildren(...Z),Q.querySelectorAll(".fig-fill-picker-gradient-stop-row").forEach(($)=>{$.querySelector(".fig-fill-picker-stop-position").addEventListener("input",()=>{this.#uJ($),this.#GJ(),this.#LJ(),this.#O()});let X=$.querySelector(".fig-fill-picker-stop-color"),Y=X.querySelector("fig-fill-picker");if(Y)Y.anchorElement=this.#J;else this.#k(()=>{let K=X.querySelector("fig-fill-picker");if(K)K.anchorElement=this.#J});let j=()=>{this.#uJ($),this.#R=!0;try{this.#GJ(),this.#LJ(),this.#O()}finally{this.#R=!1}};X.addEventListener("input",j),X.addEventListener("change",j),$.querySelector(".fig-fill-picker-stop-remove").addEventListener("click",()=>{let K=parseInt($.dataset.index,10);if(this.#X.stops.length>2)this.#X.stops.splice(K,1),this.#I(),this.#O()})})}#bJ(J,Q=!0){let Z=N({...this.#X,interpolationSpace:J??this.#X.interpolationSpace}),$=this.#H==="display-p3",X=Z.stops.map((K)=>{let W=(K.opacity??100)/100;return`${$?this.#TQ(K.color,W):this.#HQ(K.color,W)} ${K.position}%`}).join(", "),Y=XJ(Z),j=Q&&Y?` ${Y}`:"";switch(Z.type){case"linear":return`linear-gradient(${Z.angle}deg${j}, ${X})`;case"radial":return`radial-gradient(circle at ${Z.centerX}% ${Z.centerY}%${j}, ${X})`;case"angular":return`conic-gradient(from ${Z.angle}deg${j}, ${X})`;default:return`linear-gradient(${Z.angle}deg${j}, ${X})`}}static#pJ=new Map;#dJ(J){let Q=y.#pJ.get(J);if(Q!==void 0)return Q;let Z=document.createElement("div");Z.style.background=J;let $=!!Z.style.background;return y.#pJ.set(J,$),$}#sJ(){let J=this.#bJ(void 0,!0);if(this.#dJ(J))return J;let Q=this.#bJ("oklab",!0);if(this.#dJ(Q))return Q;return this.#bJ("oklab",!1)}#zQ(){let J=this.#J.querySelector('[data-tab="image"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Image scale mode",value:this.#U.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"],["tile","Tile"]].map(([Y,j])=>G("fig-select-option",{value:Y},j)))),Z=G("fig-input-number",{className:"fig-fill-picker-scale","aria-label":"Image tile scale",min:"1",max:"200",value:this.#U.scale,units:"%"});if(this.#U.scaleMode!=="tile")Z.style.display="none";let $=G("fig-field",{className:"fig-fill-picker-media-header"},[Q,Z]),X=G("fig-image",{className:"fig-fill-picker-media-preview fig-fill-picker-image-preview",upload:"true",label:"Upload from computer",alt:"Image fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true"});J.replaceChildren($,X),this.#UQ(J)}#UQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-scale"),$=J.querySelector(".fig-fill-picker-image-preview");Q.addEventListener("change",(X)=>{let Y=typeof X.detail==="string"?X.detail:X.target?.value;if(!Y)return;this.#U.scaleMode=Y,Z.style.display=Y==="tile"?"block":"none",this.#t($),this.#f(),this.#O()}),Z.addEventListener("input",(X)=>{this.#U.scale=parseFloat(X.target.value)||100,this.#t($),this.#f(),this.#O()}),$.addEventListener("loaded",(X)=>{let Y=X.detail?.src||$.src;if(!Y)return;let j=Y!==this.#U.url;if(this.#U.url=Y,this.#t($),this.#f(),j)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:X.detail??{src:Y}}))}),$.addEventListener("change",()=>{if($.src)return;this.#U.url=null,this.#t($),this.#f(),this.#O()}),this.#t($)}#t(J){if(!this.#U.url){J.removeAttribute("src"),J.classList.remove("has-media","is-tiled"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="";return}J.setAttribute("src",this.#U.url),J.classList.add("has-media"),J.style.backgroundImage="",J.style.backgroundPosition="",J.style.backgroundRepeat="",J.style.backgroundSize="",J.mediaEl?.style.removeProperty("opacity");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#U.scaleMode){case"fill":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"crop":J.classList.remove("is-tiled"),J.setAttribute("fit","cover");break;case"fit":J.classList.remove("is-tiled"),J.setAttribute("fit","contain");break;case"tile":if(J.classList.add("is-tiled"),J.setAttribute("fit","none"),J.style.backgroundImage=`url(${this.#U.url})`,J.style.backgroundPosition="top left",J.style.backgroundSize=`${this.#U.scale}%`,J.style.backgroundRepeat="repeat",J.mediaEl)J.mediaEl.style.opacity="0";break}}#YJ(J){if(J.tagName==="FIG-MEDIA"){if(!this.#Q.url){J.removeAttribute("src"),J.classList.remove("has-media");return}if(J.setAttribute("src",this.#Q.url),this.#Q.poster)J.setAttribute("poster",this.#Q.poster);else J.removeAttribute("poster");J.classList.add("has-media");let Q=J.querySelector("fig-input-file[data-generated]");if(Q)Q.setAttribute("label","Replace"),Q.removeAttribute("url");switch(this.#Q.scaleMode){case"fill":case"crop":J.setAttribute("fit","cover");break;case"fit":J.setAttribute("fit","contain");break}return}switch(J.style.objectPosition="center",J.style.width="100%",J.style.height="100%",this.#Q.scaleMode){case"fill":case"crop":J.style.objectFit="cover";break;case"fit":J.style.objectFit="contain";break}}#OQ(){let J=this.#J.querySelector('[data-tab="video"]'),Q=G("fig-select",{className:"fig-fill-picker-scale-mode",label:"Video scale mode",value:this.#Q.scaleMode},G("fig-select-options",{},[["fill","Fill"],["fit","Fit"],["crop","Crop"]].map(([X,Y])=>G("fig-select-option",{value:X},Y)))),Z=G("fig-field",{className:"fig-fill-picker-media-header"},Q),$=G("fig-media",{className:"fig-fill-picker-media-preview fig-fill-picker-video-preview",type:"video",upload:"true",label:"Upload from computer","aria-label":"Video fill preview",size:"auto","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",controls:!0,muted:"true",loop:"true"});J.replaceChildren(Z,$),this.#VQ(J),this.#MJ({emit:!1})}#jJ(){if(this.#Q.poster?.startsWith("blob:"))URL.revokeObjectURL(this.#Q.poster),this.#P.delete(this.#Q.poster);this.#Q.poster=null,this.#c=null}#kJ(){if(!this.#Q.poster)return;if(this.#c&&this.#c===this.#Q.url)return;this.#jJ()}#gJ(){let J=this.#J?.querySelector(".fig-fill-picker-video-preview");if(J)this.#YJ(J)}#MJ({emit:J=!1}={}){if(this.#Q.url){if(this.#Q.missing=!1,this.#kJ(),!this.#Q.poster)this.#NJ(this.#Q.url);else this.#gJ();return}let Q=this.getAttribute("default-video");if(!Q){this.#Q.missing=!0;return}if(this.#Q.url=Q,this.#Q.missing=!1,this.#gJ(),this.#NJ(Q),J)this.#O()}#iJ(){if(this.#z!=="video")return;let J=this.#Q.url;if(!J)return;if(this.#kJ(),this.#Q.poster)return;this.#NJ(J)}async#GQ(J){if(typeof J.requestVideoFrameCallback==="function")await Promise.race([new Promise((Q)=>J.requestVideoFrameCallback(()=>Q())),new Promise((Q)=>setTimeout(Q,80))]);else try{await J.play(),J.pause()}catch{}if(typeof createImageBitmap==="function")try{return await createImageBitmap(J)}catch{}return null}async#LQ(J){let Q=await this.#GQ(J),Z=Q?.width||J.videoWidth,$=Q?.height||J.videoHeight;if(!Z||!$)return Q?.close?.(),null;let X=typeof OffscreenCanvas==="function"?new OffscreenCanvas(Z,$):Object.assign(document.createElement("canvas"),{width:Z,height:$}),Y=X.getContext("2d");if(!Y)return Q?.close?.(),null;try{Y.drawImage(Q||J,0,0,Z,$)}finally{Q?.close?.()}return X.convertToBlob?X.convertToBlob({type:"image/jpeg",quality:0.85}):new Promise((j)=>X.toBlob(j,"image/jpeg",0.85))}async#NJ(J,{emit:Q=!1}={}){if(!J||this.#r===J)return;this.#r=J;let Z=document.createElement("video");Z.muted=!0,Z.playsInline=!0,Z.preload="auto",Z.crossOrigin="anonymous";try{if(await new Promise((X,Y)=>{let j=()=>Y(Error("video poster failed"));Z.addEventListener("error",j,{once:!0}),Z.addEventListener("loadeddata",X,{once:!0}),Z.src=J}),!Z.videoWidth||!Z.videoHeight)return;let $=await this.#LQ(Z);if(!$||this.#Q.url!==J)return;if(this.#jJ(),this.#Q.poster=URL.createObjectURL($),this.#c=J,this.#P.add(this.#Q.poster),this.#f(),this.#gJ(),Q)this.#O()}catch{}finally{if(Z.removeAttribute("src"),Z.load(),this.#r===J)this.#r=null}}#VQ(J){let Q=J.querySelector(".fig-fill-picker-scale-mode"),Z=J.querySelector(".fig-fill-picker-video-preview");Q.addEventListener("change",($)=>{let X=typeof $.detail==="string"?$.detail:$.target?.value;if(!X)return;this.#Q.scaleMode=X,this.#YJ(Z),this.#f(),this.#O()}),Z.addEventListener("loaded",($)=>{let X=$.detail?.src||Z.src;if(!X)return;let Y=X!==this.#Q.url;if(Y)this.#jJ();if(this.#Q.url=X,this.#Q.missing=!1,this.#YJ(Z),this.#NJ(X),this.#f(),Y)this.#O();this.dispatchEvent(new CustomEvent("loaded",{bubbles:!0,detail:$.detail??{src:X}}))}),Z.addEventListener("change",()=>{if(Z.src)return;this.#Q.url=null,this.#jJ(),this.#MJ(),this.#YJ(Z),this.#f(),this.#O()}),this.#YJ(Z)}#fQ(){let J=this.#J.querySelector('[data-tab="webcam"]'),Q=G("fig-field",{className:"fig-fill-picker-webcam-camera"},G("fig-select",{className:"fig-fill-picker-camera-select",label:"Camera",full:!0},document.createElement("fig-select-options")));Q.style.display="none";let Z=G("video",{className:"fig-fill-picker-webcam-video",autoplay:!0,muted:!0,playsinline:!0});Z.muted=!0;let $=G("div",{className:"fig-fill-picker-webcam-status",role:"status","aria-live":"polite"},G("span",{},"Camera access required")),X=G("fig-video",{className:"fig-fill-picker-webcam-preview","aria-label":"Webcam preview","aspect-ratio":"1/1",fit:"cover",checkerboard:"true",autoplay:"true",muted:"true"},[Z,$]),Y=G("div",{className:"fig-fill-picker-webcam-controls"},G("fig-button",{className:"fig-fill-picker-webcam-capture",variant:"secondary",full:!0,disabled:!0},"Capture"));J.replaceChildren(Q,X,Y),this.#qQ(J)}#qQ(J){let Q=J.querySelector(".fig-fill-picker-webcam-video"),Z=J.querySelector(".fig-fill-picker-webcam-status"),$=J.querySelector(".fig-fill-picker-webcam-capture"),X=J.querySelector(".fig-fill-picker-webcam-camera"),Y=J.querySelector(".fig-fill-picker-camera-select"),j=(z)=>{if(z)$.removeAttribute("disabled");else $.setAttribute("disabled","")},K=()=>{let z=!!this.#$.stream&&Q.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&Q.videoWidth>0&&Q.videoHeight>0;if(j(z),z)Z.querySelector("span").textContent="Camera ready",Z.style.display="none",this.#BJ(Q)};Q.addEventListener("loadedmetadata",K),Q.addEventListener("canplay",K),Q.addEventListener("playing",K);let W=(z)=>{this.#$.stream=z,Q.srcObject=z,Q.muted=!0,Q.playsInline=!0,Q.style.display="block";let O=Q.play?.();if(O?.catch)O.catch(()=>{});K()},U=async(z,O)=>{let f=await navigator.mediaDevices.enumerateDevices();if(z!=null&&z!==this.#m)return;let H=f.filter((R)=>R.kind==="videoinput");if(H.length>1){X.style.display="";let R=Y.querySelector(":scope > fig-select-options");if(!R)R=document.createElement("fig-select-options"),Y.append(R);if(R.replaceChildren(),H.forEach((_,k)=>{let V=document.createElement("fig-select-option");V.value=_.deviceId;let q=_.label||(H.length>1?`Camera ${k+1}`:"Camera");V.textContent=q.replace(/\s*\((?:[0-9a-f]{4}:)*([0-9a-f]{4})\)$/i,(M,D)=>{return` ${/^\d+$/.test(D)?Number.parseInt(D,10).toString():D.replace(/^0+/,"")||"0"}`}),R.append(V)}),O)Y.value=O}else X.style.display="none",Y.querySelector(":scope > fig-select-options")?.replaceChildren()},L=async(z=null)=>{let O=z||this.#$.deviceId||null,f=this.#$.stream,H=f?.getTracks?.().filter((_)=>_.readyState!=="ended")??[];if(f&&H.length){let _=f.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId||this.#$.deviceId||null;if(!O||O===_){W(f),this.#zJ(),U(null,O||_);return}}this.#o({emit:Boolean(f)});let R=this.#m;j(!1),Z.querySelector("span").textContent="Starting camera",Z.style.display="flex";try{let _={video:O?{deviceId:{exact:O}}:!0},k=await navigator.mediaDevices.getUserMedia(_);if(R!==this.#m||!this.isConnected||this.#L!=="webcam"){k.getTracks().forEach((q)=>q.stop());return}let V=k.getVideoTracks?.()?.[0];this.#$.deviceId=O||V?.getSettings?.()?.deviceId||null,this.#$.live=this.#ZJ()==="live",W(k),this.#zJ(),await U(R,O)}catch(_){if(R!==this.#m)return;console.error("Webcam error:",_.name,_.message);let k="Camera access denied";if(_.name==="NotAllowedError")k="Camera permission denied";else if(_.name==="NotFoundError")k="No camera found";else if(_.name==="NotReadableError")k="Camera in use by another app";else if(_.name==="OverconstrainedError")k="Camera constraints not supported";else if(!window.isSecureContext)k="Camera requires secure context";Z.replaceChildren();let V=document.createElement("span");V.textContent=k,Z.appendChild(V),Z.style.display="flex",Q.style.display="none",j(!1)}};this.#JJ=L,Y.addEventListener("change",(z)=>{let O=typeof z.detail==="string"?z.detail:z.target?.value;if(!O||O===this.#$.deviceId)return;L(O)}),$.addEventListener("click",async()=>{if(!this.#$.stream)return;let z=await this.#HJ(Q);if(!z)return;this.#U.url=z,this.#$.live=!1;let O=this.#J.querySelector(".fig-fill-picker-image-preview");if(O)this.#t(O);if(Array.from(this.#J.querySelectorAll(".fig-fill-picker-tab")).some((H)=>H.dataset.tab==="image"))this.#TJ("image");else this.#f(),this.#O();this.#x()})}#hJ(J){let Q=J.h/360,Z=J.s/100,$=J.v/100,X,Y,j,K=Math.floor(Q*6),W=Q*6-K,U=$*(1-Z),L=$*(1-W*Z),z=$*(1-(1-W)*Z);switch(K%6){case 0:X=$,Y=z,j=U;break;case 1:X=L,Y=$,j=U;break;case 2:X=U,Y=$,j=z;break;case 3:X=U,Y=L,j=$;break;case 4:X=z,Y=U,j=$;break;case 5:X=$,Y=U,j=L;break}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#KJ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j=X-Y,K=0,W=X===0?0:j/X,U=X;if(X!==Y){switch(X){case Q:K=(Z-$)/j+(Z<$?6:0);break;case Z:K=($-Q)/j+2;break;case $:K=(Q-Z)/j+4;break}K/=6}return{h:K*360,s:W*100,v:U*100,a:1}}#s(J){if(!J||typeof J.h!=="number"||typeof J.s!=="number"||typeof J.v!=="number")return"#D9D9D9";let Q=this.#hJ(J),Z=($)=>{return(isNaN($)?217:Math.max(0,Math.min(255,Math.round($)))).toString(16).padStart(2,"0")};return`#${Z(Q.r)}${Z(Q.g)}${Z(Q.b)}`}#WJ(J){let Q=parseInt(J.slice(1,3),16),Z=parseInt(J.slice(3,5),16),$=parseInt(J.slice(5,7),16);return this.#KJ({r:Q,g:Z,b:$})}#HQ(J,Q=1){let Z=parseInt(J.slice(1,3),16),$=parseInt(J.slice(3,5),16),X=parseInt(J.slice(5,7),16);return`rgba(${Z}, ${$}, ${X}, ${Q})`}#BQ(J){let Q=Math.max(0,Math.min(1,Number(J)||0)),Z=Math.round(Q*1000)/1000;return String(Z)}#RQ(J=this.#Z){let Q=this.#hJ(J);return`rgba(${Q.r}, ${Q.g}, ${Q.b}, ${this.#BQ(J.a)})`}#_Q(J){let Q=String(J??"").trim();if(!Q)return null;let Z=Q.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(Z){let X=Z[1];if(X.length===3)X=X[0]+X[0]+X[1]+X[1]+X[2]+X[2];let Y=1;if(X.length===8)Y=parseInt(X.slice(6,8),16)/255,X=X.slice(0,6);return{...this.#WJ(`#${X}`),a:Y}}let $=Q.match(/^rgba?\(\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))(?:\s*,\s*([+-]?(?:\d+\.?\d*|\.\d+))\s*)?\)$/i);if($){let X=Math.max(0,Math.min(255,Math.round(parseFloat($[1])))),Y=Math.max(0,Math.min(255,Math.round(parseFloat($[2])))),j=Math.max(0,Math.min(255,Math.round(parseFloat($[3])))),K=$[4]!==void 0?Math.max(0,Math.min(1,parseFloat($[4]))):1;if(![X,Y,j,K].every(Number.isFinite))return null;return{...this.#KJ({r:X,g:Y,b:j}),a:K}}return null}#TQ(J,Q=1){let Z=+(parseInt(J.slice(1,3),16)/255).toFixed(4),$=+(parseInt(J.slice(3,5),16)/255).toFixed(4),X=+(parseInt(J.slice(5,7),16)/255).toFixed(4);return`color(display-p3 ${Z} ${$} ${X} / ${Q})`}#kQ(J){let Q=J.r/255,Z=J.g/255,$=J.b/255,X=Math.max(Q,Z,$),Y=Math.min(Q,Z,$),j,K,W=(X+Y)/2;if(X===Y)j=K=0;else{let U=X-Y;switch(K=W>0.5?U/(2-X-Y):U/(X+Y),X){case Q:j=((Z-$)/U+(Z<$?6:0))/6;break;case Z:j=(($-Q)/U+2)/6;break;case $:j=((Q-Z)/U+4)/6;break}}return{h:j*360,s:K*100,l:W*100}}#MQ(J){let Q=J.h/360,Z=J.s/100,$=J.l/100,X,Y,j;if(Z===0)X=Y=j=$;else{let K=(L,z,O)=>{if(O<0)O+=1;if(O>1)O-=1;if(O<0.16666666666666666)return L+(z-L)*6*O;if(O<0.5)return z;if(O<0.6666666666666666)return L+(z-L)*(0.6666666666666666-O)*6;return L},W=$<0.5?$*(1+Z):$+Z-$*Z,U=2*$-W;X=K(U,W,Q+0.3333333333333333),Y=K(U,W,Q),j=K(U,W,Q-0.3333333333333333)}return{r:Math.round(X*255),g:Math.round(Y*255),b:Math.round(j*255)}}#lJ(J){let Q=(z)=>{return z=z/255,z<=0.04045?z/12.92:Math.pow((z+0.055)/1.055,2.4)},Z=Q(J.r),$=Q(J.g),X=Q(J.b),Y=0.4122214708*Z+0.5363325363*$+0.0514459929*X,j=0.2119034982*Z+0.6806995451*$+0.1073969566*X,K=0.0883024619*Z+0.2817188376*$+0.6299787005*X,W=Math.cbrt(Y),U=Math.cbrt(j),L=Math.cbrt(K);return{l:0.2104542553*W+0.793617785*U-0.0040720468*L,a:1.9779984951*W-2.428592205*U+0.4505937099*L,b:0.0259040371*W+0.7827717662*U-0.808675766*L}}#NQ(J){let Q=this.#lJ(J);return{l:Q.l,c:Math.sqrt(Q.a*Q.a+Q.b*Q.b),h:(Math.atan2(Q.b,Q.a)*180/Math.PI+360)%360}}#rJ(J){let Q=J.l+0.3963377774*J.a+0.2158037573*J.b,Z=J.l-0.1055613458*J.a-0.0638541728*J.b,$=J.l-0.0894841775*J.a-1.291485548*J.b,X=Q*Q*Q,Y=Z*Z*Z,j=$*$*$,K=(W)=>{let U=W<=0.0031308?12.92*W:1.055*Math.pow(W,0.4166666666666667)-0.055;return Math.round(Math.max(0,Math.min(1,U))*255)};return{r:K(4.0767416621*X-3.3077115913*Y+0.2309699292*j),g:K(-1.2684380046*X+2.6097574011*Y-0.3413193965*j),b:K(-0.0041960863*X-0.7034186147*Y+1.707614701*j)}}#yQ(J){let Q=J.h*Math.PI/180;return this.#rJ({l:J.l,a:J.c*Math.cos(Q),b:J.c*Math.sin(Q)})}#O(){if(this.#b())return;this.#f(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:this.value}))}#x(){if(this.#b())return;this.#u=JSON.stringify(this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.value}))}get value(){let J={type:this.#z,colorSpace:this.#H};switch(this.#z){case"solid":return{...J,color:this.#s(this.#Z),alpha:this.#Z.a,hsv:{...this.#Z}};case"gradient":return{...J,gradient:P(this.#X),css:this.#sJ()};case"image":return{...J,image:{...this.#U}};case"video":return{...J,video:this.#qJ()};case"webcam":return{...J,webcam:this.#fJ()};default:return{...J,...this.#w[this.#z]}}}set value(J){if(typeof J==="string")this.setAttribute("value",J);else this.setAttribute("value",JSON.stringify(J))}attributeChangedCallback(J,Q,Z){if(Q===Z)return;switch(J){case"value":if(this.#_J(),this.#f(),this.#iJ(),this.#J?.open&&!this.#D)this.#oJ(),this.#u=JSON.stringify(this.value);break;case"disabled":if(this.#S(),this.#b()&&this.#J?.open)this.close();break;case"alpha":case"mode":{if(!this.#J)break;let $=this.#J.open;if(this.#UJ(),$&&this.isConnected)this.#d();break}case"webcam-mode":if(this.#z==="webcam")this.#f();break;case"default-video":if(this.#z==="video")this.#MJ({emit:!1}),this.#f();break;case"aria-label":if(this.#J)this.#J.setAttribute("aria-label",this.#$J());case"aria-labelledby":case"aria-describedby":this.#S();break}}}A("fig-fill-picker",y);class B extends HTMLElement{static#Y=new Set(["oklch","hsl"]);static#K=10;static#j=10;static#W=8;static#J=3;static#N=210;static#L={type:"linear",angle:135,interpolationSpace:"srgb",hueInterpolation:"shorter",stops:[{color:"#FF0000",position:0,opacity:100},{color:"#4F9EFF",position:100,opacity:100}]};#z=!1;#H=null;#Z=null;#G={...B.#L};static get observedAttributes(){return["value"]}get value(){return{type:"gradient",gradient:{...this.#G}}}set value(J){if(J==null||J===""){this.removeAttribute("value");return}if(typeof J==="string"){this.setAttribute("value",J);return}this.setAttribute("value",JSON.stringify(J))}connectedCallback(){this.#X(),this.#U(),this.#D(),this.#R()}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J!=="value")return;if(this.#U(),this.#z)this.#R()}#X(){if(!(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))&&!this.hasAttribute("aria-hidden"))this.setAttribute("aria-hidden","true")}#U(){let J=this.getAttribute("value");if(!J){this.#G={...B.#L,stops:B.#L.stops.map((Q)=>({...Q}))};return}try{let Q=JSON.parse(J),Z=Q?.type==="gradient"&&Q.gradient?Q.gradient:Q?.gradient?Q.gradient:Q;if(!Z||typeof Z!=="object")return;this.#G=this.#Q({...B.#L,...Z})}catch{}}#Q(J){let Q={...J??{}},Z=String(Q.interpolationSpace??"srgb").toLowerCase(),$=String(Q.hueInterpolation??"shorter").toLowerCase(),X=Array.isArray(Q.stops)?Q.stops.map((Y)=>({color:String(Y?.color||"#D9D9D9").replace(/^(#(?:[0-9a-f]{6})).*/i,"$1"),position:Y?.position??0,opacity:Y?.opacity??100})):B.#L.stops.map((Y)=>({...Y}));if(X.length<2)return{...B.#L,stops:B.#L.stops.map((Y)=>({...Y}))};return{type:["linear","radial","angular"].includes(Q.type)?Q.type:"linear",angle:Number.isFinite(Number(Q.angle))?Number(Q.angle):135,interpolationSpace:Z,hueInterpolation:$,stops:X}}#$(){return B.#Y.has(this.#G.interpolationSpace||"srgb")}#E(J){let{r:Q,g:Z,b:$}=l(J);if(this.#G.interpolationSpace==="hsl")return r(Q,Z,$).h;let X=n(Q,Z,$);return(o(X.l,X.a,X.b).h%360+360)%360}#y(){let J=this.#V(),Q=this.#E(J[0]?.color||"#FF0000"),Z=this.#E(J[J.length-1]?.color||"#4F9EFF"),$=B.#N-Q,Y=((B.#N-Z-$)%360+360)%360,j=Y===0?0:Y-360,K=this.#G.hueInterpolation||"shorter",W;if(K==="increasing")W=j;else if(K==="decreasing")W=Y;else if(K==="longer")W=Y<180?j:Y;else W=Y<=180?Y:j;let U=Math.sign(W),L=Math.asin(B.#J/2/B.#W)*180/Math.PI,z=Math.min(L,Math.max(0,(Math.abs(W)-0.01)/2));return{startDeg:$+U*z,sweepDeg:W-U*z*2}}#T(J){let Q=J*Math.PI/180;return{x:B.#K+B.#W*Math.cos(Q),y:B.#j+B.#W*Math.sin(Q)}}#_(J,Q){let Z=J+Q,$=this.#T(J),X=this.#T(Z),Y=Math.abs(Q)>180?1:0,j=Q>=0?1:0;return`M ${$.x} ${$.y} A ${B.#W} ${B.#W} 0 ${Y} ${j} ${X.x} ${X.y}`}#w(){let J=this.#T(180),Q=this.#T(0);return`M ${J.x} ${J.y} L ${Q.x} ${Q.y}`}#q(J){let Q=B.#J,Z=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="${J}" fill="none" stroke="white" stroke-width="${Q}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(Z)}")`}#V(){return[...this.#G.stops].sort((J,Q)=>(J.position??0)-(Q.position??0))}#M(){let J=this.#G.interpolationSpace||"srgb";if(J==="srgb")return"";if(B.#Y.has(J))return` in ${J} ${this.#G.hueInterpolation||"shorter"} hue`;return` in ${J}`}#B(){let J=this.#V(),Q=this.#M();if(this.#$()){let $=(B.#N+90)%360,X=this.#G.interpolationSpace,Y=(K)=>X==="oklch"?`oklch(65% 0.25 ${K})`:`hsl(${K} 100% 50%)`,j=[0,300,240,180,120,60,0].map(Y).join(", ");return`conic-gradient(from ${$}deg in ${X} decreasing hue, ${j})`}let Z=J.map(($)=>`${$.color} ${$.position??0}%`).join(", ");return`linear-gradient(90deg${Q}, ${Z})`}#D(){if(this.#z)return;let J=B.#J,Q=u("svg",{className:"fig-interpolation-swatch-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},u("circle",{className:"fig-interpolation-swatch-rim",cx:"10",cy:"10",r:"8",fill:"none",stroke:"currentColor","stroke-width":J})),Z=G("div",{className:"fig-interpolation-swatch-fill","aria-hidden":"true"});this.replaceChildren(Q,Z),this.#H=Q,this.#Z=Z,this.#z=!0}#R(){if(!this.#Z)return;let J=this.#$();if(this.#H)this.#H.style.display=J?"":"none";let Q=J?(()=>{let{startDeg:$,sweepDeg:X}=this.#y();return this.#_($,X)})():this.#w(),Z=this.#q(Q);this.#Z.style.setProperty("-webkit-mask-image",Z),this.#Z.style.maskImage=Z,this.#Z.style.background=this.#B()}}A("fig-interpolation-swatch",B);
|