npm - @rogieking/figui3 - Versions diffs - 11.6.3 → 11.6.5 - Mend

@rogieking/figui3 11.6.3 → 11.6.5

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.

Files changed (11) hide show

package/dist/fig-editor.css CHANGED Viewed

	@@ -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)}fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[selected]:not([selected=false]){background-color:var(--figma-color-bg-selected)}&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}fig-gradient-editor{--fig-gradient-editor-overflow-show-rows:6.5;width:100%;min-width:0;display:block;& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) 2);margin:var(--spacer-3) var(--spacer-3) 0;background:0 0;overflow:visible;&:after{display:none}}& fig-header.fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{flex:none}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header>span{flex:1}}& .fig-fill-picker-gradient-stops-list{flex-direction:column;display:flex;& fig-reorder{display:block!important}& fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-gradient-editor-overflow-show-rows) * 2rem)}}& .fig-fill-picker-gradient-stop-row{&.dragging{background-color:var(--figma-color-bg-selected)}& .fig-fill-picker-gradient-stop-inputs{width:100%;min-width:0}& .fig-fill-picker-stop-position{flex:0 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-palette-editor{--fig-palette-editor-overflow-show-rows:6.5;flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:block!important}&>fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-palette-editor-overflow-show-rows) * 2rem)}& .fig-palette-editor-add{width:100%}}dialog[is=fig-popup-easing]{pointer-events:auto;width:12rem;min-width:0;padding:0;padding:0 var(--spacer-2-5)}dialog[is=fig-popup-gradient]{pointer-events:auto;width:15rem;min-width:0;padding:0;& .fig-gradient-editor-content{padding-top:var(--spacer-1)}}dialog[is=fig-popup-palette]{pointer-events:auto;width:12rem;min-width:0;padding:0}fig-input-point{width:8.9375rem;display:inline-flex;&[full]:not([full=false]){width:100%}&>fig-input-combo{width:100%;&>fig-input-number{flex:1 1 0;width:auto}}}: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:3}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;row-gap:var(--spacer-2);column-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{& .fig-fill-picker-input-mode{flex:unset;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-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([slot=leading]):not([slot=trailing]):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}&[icon]:not([icon=false]){--fig-select-icon-size:var(--spacer-4);flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);&[size=large]{--fig-select-icon-size:var(--spacer-5)}&::part(trigger){flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);justify-content:center;padding:0}&::part(label),&::part(prepend){display:none}&:after{left:50%;right:auto;transform:translate(-50%,-50%)}}&[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]):not([open]:not([open=false])){background-color:var(--figma-color-bg-secondary)}}&[variant=input]{box-shadow:none;background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text);&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-transparent)}&:active:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text)}&:focus-within{background-color:var(--figma-color-bg-secondary)}}&[open]:not([open=false]){color:var(--figma-color-text-selected);background-color:var(--figma-color-bg-selected);box-shadow:none;&:after{background-color:var(--figma-color-icon-selected)}}&: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:var(--spacer-3);--fig-separator-padding-inline:var(--spacer-3,.75rem);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{max-width:100%;color:var(--figma-color-text-menu);user-select:none;text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden;& h3,& label{text-overflow:ellipsis;overflow:hidden}&>fig-icon[data-fig-select-checkmark]{margin:0 var(--spacer-1);visibility:hidden;order:-1}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary)}fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false])>fig-icon[data-fig-select-checkmark],&[aria-selected=true]>fig-icon[data-fig-select-checkmark]{visibility:visible}}fig-reorder{display:contents;&:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]{cursor:grab;&>fig-header,&>fig-header ,&>label{cursor:grab}}&>.dragging{background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}}[data-reorder-handle]{cursor:grab}body.fig-reorder-dragging{&,& {-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}}.fig-reorder-indicator{pointer-events:none;z-index:1000000;border-radius:1px;position:fixed;&:before{content:"";background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute;top:0;left:0}&.fig-reorder-indicator-ring{&[data-axis=vertical]:before{left:var(--spacer-1);width:calc(100% - var(--spacer-1))}&[data-axis=horizontal]:before{top:var(--spacer-1);height:calc(100% - var(--spacer-1))}&:after{content:"";width:var(--spacer-2);height:var(--spacer-2);border:2px solid var(--figma-color-border-selected);border-radius:50%;position:absolute;top:1px;left:0;transform:translate(-50%,-50%)}&[data-axis=horizontal]:after{top:0;left:1px}}&[data-axis=vertical]{height:2px}&[data-axis=horizontal]{width:2px}}
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)}fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[selected]:not([selected=false]){background-color:var(--figma-color-bg-selected)}&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}fig-gradient-editor{--fig-gradient-editor-overflow-show-rows:6.5;width:100%;min-width:0;display:block;& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) 2);margin:var(--spacer-3) var(--spacer-3) 0;background:0 0;overflow:visible;&:after{display:none}}& fig-header.fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{flex:none}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header>span{flex:1}}& .fig-fill-picker-gradient-stops-list{flex-direction:column;display:flex;& fig-reorder{display:block!important}& fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-gradient-editor-overflow-show-rows) * 2rem)}}& .fig-fill-picker-gradient-stop-row{&.dragging{background-color:var(--figma-color-bg-selected)}& .fig-fill-picker-gradient-stop-inputs{width:100%;min-width:0}& .fig-fill-picker-stop-position{flex:0 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-palette-editor{--fig-palette-editor-overflow-show-rows:6.5;flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:block!important}&>fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-palette-editor-overflow-show-rows) * 2rem)}& .fig-palette-editor-add{width:100%}}dialog[is=fig-popup-easing]{pointer-events:auto;width:12rem;min-width:0;padding:0;padding:0 var(--spacer-2-5)}dialog[is=fig-popup-gradient]{pointer-events:auto;width:15rem;min-width:0;padding:0;& .fig-gradient-editor-content{padding-top:var(--spacer-1)}}dialog[is=fig-popup-palette]{pointer-events:auto;width:12rem;min-width:0;padding:0}fig-input-point{width:8.9375rem;display:inline-flex;&[full]:not([full=false]){width:100%}&>fig-input-combo{width:100%;&>fig-input-number{flex:1 1 0;width:auto}}}: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:3}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;row-gap:var(--spacer-2);column-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{& .fig-fill-picker-input-mode{align-self:center;width:3.5rem;min-width:3.5rem;flex:0 0 3.5rem!important}& .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-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([slot=leading]):not([slot=trailing]):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}&[icon]:not([icon=false]){--fig-select-icon-size:var(--spacer-4);flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);&[size=large]{--fig-select-icon-size:var(--spacer-5)}&::part(trigger){flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);justify-content:center;padding:0}&::part(label),&::part(prepend){display:none}&:after{left:50%;right:auto;transform:translate(-50%,-50%)}}&[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]):not([open]:not([open=false])){background-color:var(--figma-color-bg-secondary)}}&[variant=input]{box-shadow:none;background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text);&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-transparent)}&:active:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text)}&:focus-within{background-color:var(--figma-color-bg-secondary)}}&[open]:not([open=false]){color:var(--figma-color-text-selected);background-color:var(--figma-color-bg-selected);box-shadow:none;&:after{background-color:var(--figma-color-icon-selected)}}&: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:var(--spacer-3);--fig-separator-padding-inline:var(--spacer-3,.75rem);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{max-width:100%;color:var(--figma-color-text-menu);user-select:none;text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden;& h3,& label{text-overflow:ellipsis;overflow:hidden}&>fig-icon[data-fig-select-checkmark]{margin:0 var(--spacer-1);visibility:hidden;order:-1}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary)}fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false])>fig-icon[data-fig-select-checkmark],&[aria-selected=true]>fig-icon[data-fig-select-checkmark]{visibility:visible}}fig-reorder{display:contents;&:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]{cursor:grab;&>fig-header,&>fig-header ,&>label{cursor:grab}}&>.dragging{background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}}[data-reorder-handle]{cursor:grab}body.fig-reorder-dragging{&,& {-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}}.fig-reorder-indicator{pointer-events:none;z-index:1000000;border-radius:1px;position:fixed;&:before{content:"";background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute;top:0;left:0}&.fig-reorder-indicator-ring{&[data-axis=vertical]:before{left:var(--spacer-1);width:calc(100% - var(--spacer-1))}&[data-axis=horizontal]:before{top:var(--spacer-1);height:calc(100% - var(--spacer-1))}&:after{content:"";width:var(--spacer-2);height:var(--spacer-2);border:2px solid var(--figma-color-border-selected);border-radius:50%;position:absolute;top:1px;left:0;transform:translate(-50%,-50%)}&[data-axis=horizontal]:after{top:0;left:1px}}&[data-axis=vertical]{height:2px}&[data-axis=horizontal]{width:2px}}

package/dist/fig-editor.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import"./fig.js";import"./fig-property.js";import{figConvertRGB as i,figHexToRGB as t,figHslToRGB as r,figHsvToRGB as _J,figOklabToOklch as LJ,figOklabToRGB as OJ,figOklchToRGB as HJ,figRGBToHsl as e,figRGBToHsv as MJ,figRGBToOklab as JJ,figRGBToOklch as VJ}from"./fig-color.js";import"./fig.js";import"./fig-property.js";import{figConvertRGB as KJ,figHexToRGB as jJ}from"./fig-color.js";var y={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};function N(J,Z={},$=[]){let X=document.createElement(J);for(let[Q,W]of Object.entries(Z)){if(W===null||W===void 0||W===!1)continue;if(Q==="className")X.className=String(W);else if(W===!0)X.setAttribute(Q,"");else X.setAttribute(Q,String(W))}let Y=Array.isArray($)?$:[$];for(let Q of Y){if(Q===null||Q===void 0||Q===!1)continue;X.append(Q instanceof Node?Q:String(Q))}return X}function s(J){return N("fig-icon",{name:J})}function UJ(J,Z){return{position:Number.isFinite(Number(J?.position))?Math.max(0,Math.min(100,Number(J.position))):Z*100,color:g(J?.color),opacity:Number.isFinite(Number(J?.opacity))?Math.max(0,Math.min(100,Number(J.opacity))):100}}function g(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);return/^[0-9A-Fa-f]{6}$/.test(Z)?`#${Z.toUpperCase()}`:"#888888"}function d(J,Z){return Number(J?.position)===Number(Z?.position)&&g(J?.color)===g(Z?.color)&&Number(J?.opacity??100)===Number(Z?.opacity??100)}function m(J){if(Array.isArray(J))return J.map(m);if(!J||typeof J!=="object")return J;return Object.fromEntries(Object.keys(J).filter((Z)=>J[Z]!==void 0).sort().map((Z)=>[Z,m(J[Z])]))}function h(J,Z){return!!J&&!!Z&&JSON.stringify(m(J))===JSON.stringify(m(Z))}function b(J){return J.map((Z)=>({...Z}))}function qJ(J,Z){let $=J.length,X=Z.length,Y=Array.from({length:$+1},()=>Array(X+1).fill(0));for(let j=$-1;j>=0;j-=1)for(let U=X-1;U>=0;U-=1)Y[j][U]=d(J[j],Z[U])?Y[j+1][U+1]+1:Math.max(Y[j+1][U],Y[j][U+1]);let Q=[],W=0,K=0;while(W<$&&K<X)if(d(J[W],Z[K]))Q.push([W,K]),W+=1,K+=1;else if(Y[W+1][K]>=Y[W][K+1])W+=1;else K+=1;return Q}function E(J){let Z=J;if(typeof Z==="string")try{Z=JSON.parse(Z)}catch{Z={}}if(Z?.type==="gradient"&&Z.gradient)Z=Z.gradient;let $=Z&&typeof Z==="object"?Z:{},X=Array.isArray($.stops)?$.stops.map(UJ):y.stops.map((Y)=>({...Y}));return{...y,...$,type:["linear","radial","angular"].includes($.type)?$.type:"linear",angle:Number.isFinite(Number($.angle))?Number($.angle):y.angle,centerX:Number.isFinite(Number($.centerX))?Number($.centerX):y.centerX,centerY:Number.isFinite(Number($.centerY))?Number($.centerY):y.centerY,interpolationSpace:"srgb",stops:X.length>=2?X:y.stops.map((Y)=>({...Y}))}}function zJ(J,Z,$){let{r:X,g:Y,b:Q}=jJ(J);if($==="display-p3"){let W=KJ(X,Y,Q,{from:"srgb",to:"display-p3"});return`color(display-p3 ${+(W.r/255).toFixed(4)} ${+(W.g/255).toFixed(4)} ${+(W.b/255).toFixed(4)} / ${Z})`}return`rgba(${X}, ${Y}, ${Q}, ${Z})`}function v(J,{colorSpace:Z="srgb"}={}){let $=E(J),X=$.stops.map((Y)=>`${zJ(Y.color,(Y.opacity??100)/100,Z)} ${Y.position}%`).join(", ");switch($.type){case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%, ${X})`;case"angular":return`conic-gradient(from ${$.angle}deg, ${X})`;default:return`linear-gradient(${$.angle}deg, ${X})`}}class l extends HTMLElement{#Z=E();#Y=!1;#K=!1;#U=null;#J=!1;#V=null;#q=null;#j=null;#L=null;#W=null;#_=null;#$=[];#z=[];#X=null;#Q=!1;#k=null;static get observedAttributes(){return["value","color-space","disabled","overflow","show-rows"]}get value(){return structuredClone(this.#Z)}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??{}))}get cssValue(){return v(this.#Z,{colorSpace:this.getAttribute("color-space")||"srgb"})}get pickerAnchor(){return this.#U}set pickerAnchor(J){this.#U=J instanceof Element?J:null,this.#KJ()}connectedCallback(){let J=E(this.getAttribute("value"));if(!h(this.#Z,J))this.#Z=J;this.#P(),this.#b()}attributeChangedCallback(J,Z,$){if(Z===$||this.#Y)return;if(J==="value"){let X=E($);if(h(this.#Z,X)){if(this.#Q)this.#k=null;return}if(this.#Q){this.#k=X;return}this.#k=null,this.#Z=X}if(this.isConnected&&this.#J)this.#b()}disconnectedCallback(){if(this.#_J({reconcile:!1}),this.#k)this.#Z=this.#k,this.#k=null,this.#E()}refreshLayout(){this.#q?.refreshLayout?.()}#F(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#H(){return this.getAttribute("overflow")==="visible"?"visible":"fade"}#M(){let J=Number(this.getAttribute("show-rows"));return Number.isFinite(J)&&J>0?J:null}#E(){this.#Y=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#Y=!1}#B(){return{type:"gradient",gradient:this.value,css:this.cssValue}}#N(J){this.#E(),this.dispatchEvent(new CustomEvent(J,{bubbles:!0,composed:!0,detail:this.#B()}))}#P(){if(this.#J)return;this.#V=N("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",variant:"ghost"},N("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([W,K])=>N("fig-select-option",{value:W},K))));let J=(W,K,j)=>{let U=N("fig-button",{icon:!0,variant:"ghost",className:K,"aria-label":W},s(j));return{button:U,tooltip:N("fig-tooltip",{text:W},U)}},Z=J("Flip gradient","fig-fill-picker-gradient-flip","swap"),$=J("Rotate gradient","fig-fill-picker-gradient-rotate","rotate");this.#L=Z.button,this.#W=$.button;let X=N("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[this.#V,N("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[Z.tooltip,$.tooltip])]);this.#q=N("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large"});let Y=N("fig-preview",{className:"fig-fill-picker-gradient-preview"},this.#q);this.#_=N("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},s("add")),this.#j=document.createElement("fig-reorder");let Q=N("div",{className:"fig-fill-picker-gradient-stops"},[N("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[N("h3",{},"Stops"),this.#_]),N("div",{className:"fig-fill-picker-gradient-stops-list"},this.#j)]);this.replaceChildren(X,Y,Q),this.#V.addEventListener("change",this.#i),this.#V.addEventListener("optionhover",(W)=>W.stopPropagation()),this.#W.addEventListener("click",this.#g),this.#L.addEventListener("click",this.#C),this.#_.addEventListener("click",this.#t),this.#q.addEventListener("input",this.#m),this.#q.addEventListener("change",this.#m),this.#q.addEventListener("pointerdown",this.#e),this.#q.addEventListener("focusin",this.#e),this.#q.addEventListener("click",this.#e),this.#q.addEventListener("keydown",this.#v),this.#j.addEventListener("reorder",this.#JJ),this.#j.addEventListener("keydown",this.#v),this.addEventListener("pointerdown",this.#fJ,!0),this.addEventListener("lostpointercapture",this.#u,!0),this.#J=!0}#T(J){if((J.opacity??100)>=100)return J.color;return`${J.color}${Math.round((J.opacity??100)/100*255).toString(16).padStart(2,"0")}`}#f(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=this.#Z.stops[Number(J.dataset.index)]??{},Y=Number(Z?.value??Z?.getAttribute("value")??0),Q=$?.hexOpaque||(typeof $?.value==="string"?$.value:"")||$?.getAttribute("value");return{position:Number.isFinite(Y)?Math.max(0,Math.min(100,Y)):0,color:g(String(Q||X.color).slice(0,7)),opacity:$?.rgba?.a!==void 0?Math.round($.rgba.a*100):X.opacity??100}}#D(J){let Z=this.#$.indexOf(J);if(!Number.isInteger(Z)||!this.#Z.stops[Z])return;this.#Z.stops[Z]={...this.#Z.stops[Z],...this.#f(J)}}#S(){this.#$.forEach((J)=>this.#D(J))}#d(){let J=N("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",units:"%"}),Z=N("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right"}),$=N("fig-property",{className:"fig-fill-picker-gradient-stop-row",leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},N("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[J,Z]));J.addEventListener("input",(X)=>{X.stopPropagation(),this.#p($,"input")}),J.addEventListener("change",(X)=>{X.stopPropagation(),this.#p($,"change")});for(let X of["input","change"])Z.addEventListener(X,(Y)=>{Y.stopPropagation(),this.#p($,X)});return $.addEventListener("remove",(X)=>{X.stopPropagation(),this.#r($)}),$.addEventListener("pointerdown",(X)=>{if(X.button===0)this.#A($)}),$.addEventListener("click",(X)=>{if(this.#A($),!X.composedPath().some((Q)=>Q instanceof Element&&Q.matches('input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])'))&&$.isConnected)$.focus({preventScroll:!0})}),$.addEventListener("focusin",()=>this.#A($)),$}#A(J){if(!J||!this.#$.includes(J))return;this.#X=J,this.#$.forEach((Z)=>{Z.toggleAttribute("selected",Z===J)}),this.#y(),J.scrollIntoView({block:"nearest"})}#y(){let J=this.#$.indexOf(this.#X);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)").forEach((Z,$)=>{if($===J)Z.select?.();else Z.deselect?.()})}#x(){if(!this.#j)return;let J=this.#Z.stops,Z=this.#$.filter((Y)=>Y.isConnected),$;if(Z.length===J.length)$=[...Z];else{$=Array(J.length).fill(null);let Y=qJ(this.#z,J),Q=new Set;for(let[j,U]of Y){let L=Z[j];if(!L)continue;$[U]=L,Q.add(j)}let W=Z.filter((j,U)=>!Q.has(U));$=$.map((j)=>j??W.shift()??this.#d());let K=new Set($);Z.forEach((j)=>{if(!K.has(j))j.remove()})}let X=this.#j.firstElementChild;for(let Y of $)if(Y===X)X=X.nextElementSibling;else this.#j.insertBefore(Y,X);if(this.#$=$,this.#$.forEach((Y,Q)=>{this.#h(Y,J[Q],Q)}),!this.#$.includes(this.#X))this.#X=this.#$[0]??null;this.#$.forEach((Y)=>{Y.toggleAttribute("selected",Y===this.#X)}),this.#y(),this.#z=b(J),this.#KJ()}#h(J,Z,$){let X=this.#F();J.dataset.index=String($);let Y=J.querySelector(".fig-fill-picker-stop-position"),Q=J.querySelector(".fig-fill-picker-stop-color");this.#l(Y,Z.position),this.#l(Q,this.#T(Z)),Y?.toggleAttribute("disabled",X),Q?.toggleAttribute("disabled",X);let W=J.querySelector(':scope > [data-fig-property-action="remove"]');if(W)W.classList.add("fig-fill-picker-stop-remove"),W.setAttribute("aria-label","Remove gradient stop"),W.toggleAttribute("disabled",X||this.#Z.stops.length<=2)}#l(J,Z){if(!J)return;let $=String(Z);if(J.getAttribute("value")===$)return;let X=J.contains(document.activeElement)?document.activeElement:null,Y=X&&"selectionStart"in X&&typeof X.selectionStart==="number"?{start:X.selectionStart,end:X.selectionEnd,direction:X.selectionDirection}:null;if(J.setAttribute("value",$),Y&&X===document.activeElement)try{X.setSelectionRange(Y.start,Y.end,Y.direction)}catch{}}#b(){if(!this.#J)return;let J=this.#F(),Z=this.#H()==="fade";this.#j.classList.toggle("fig-overflow-fade",Z);let $=this.#M();if($===null)this.#j.style.removeProperty("--fig-gradient-editor-overflow-show-rows");else this.#j.style.setProperty("--fig-gradient-editor-overflow-show-rows",String($));this.#l(this.#V,this.#Z.type),this.#V.toggleAttribute("disabled",J),this.#L.toggleAttribute("disabled",J),this.#W.toggleAttribute("disabled",J),this.#_.toggleAttribute("disabled",J),this.#j.toggleAttribute("disabled",J),this.#q.toggleAttribute("disabled",J);let X=E(this.#q.value);if(!h(X,this.#Z))this.#K=!0,this.#q.value={type:"gradient",gradient:this.#Z},this.#K=!1;this.#x()}#R(J,Z,{focusIndex:$=null}={}){let X=E(J),Y=!h(this.#Z,X);if(Y)this.#Z=X,this.#b();if(Z==="change"||Y)this.#N(Z);if($!==null)this.#w($)}#w(J){requestAnimationFrame(()=>{if(!this.isConnected)return;let Z=this.querySelector(`.fig-fill-picker-gradient-stop-row[data-index="${J}"]`),$=Z?.querySelector(".fig-fill-picker-stop-color fig-input-text input");this.#A(Z),$?.focus(),$?.select()})}#i=(J)=>{J.stopPropagation();let Z=typeof J.detail==="string"?J.detail:J.target?.value;if(!["linear","radial","angular"].includes(Z))return;this.#R({...this.#Z,type:Z},"input")};#g=()=>{this.#R({...this.#Z,angle:(Number(this.#Z.angle)+90)%360},"input")};#C=()=>{let J=this.#Z.stops.map((Z)=>({...Z,position:100-Z.position})).sort((Z,$)=>Z.position-$.position);this.#R({...this.#Z,stops:J},"input")};#t=()=>{let J=b(this.#Z.stops),Z=Math.max(0,this.#$.indexOf(this.#X)),$=Number(J[Z]?.position)||0,X=Number(J[Z+1]?.position??$),Y={position:($+X)/2,color:"#888888",opacity:100},Q=Z+1;J.splice(Q,0,Y),this.#R({...this.#Z,stops:J},"input",{focusIndex:Q})};#m=(J)=>{if(J.stopPropagation(),this.#K||!J.detail?.gradient)return;this.#R({...this.#Z,...J.detail.gradient},J.type)};#e=(J)=>{let Z=J.target?.closest?.("fig-handle:not(.fig-input-gradient-ghost)"),$=Number(Z?.dataset.stopIndex);if(!Number.isInteger($))return;this.#A(this.#$[$])};#v=(J)=>{if(J.defaultPrevented||!["Delete","Backspace"].includes(J.key)||this.#F()||this.#Z.stops.length<=2)return;let Z=J.target?.closest?.("fig-handle[selected]:not(.fig-input-gradient-ghost)"),$=J.target?.closest?.(".fig-fill-picker-gradient-stop-row[selected]"),X=Z&&this.#q.contains(Z),Y=J.composedPath().some((W)=>W instanceof Element&&W.matches('input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])')),Q=$===this.#X&&!Y;if(!X&&!Q)return;J.preventDefault(),this.#r(this.#X),requestAnimationFrame(()=>{let W=this.#$.indexOf(this.#X);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)")[W]?.focus()})};#JJ=(J)=>{J.stopPropagation();let{oldIndex:Z,newIndex:$}=J.detail??{};if(!Number.isInteger(Z)||!Number.isInteger($)||Z===$)return;this.#S();let X=b(this.#Z.stops),[Y]=X.splice(Z,1);X.splice($,0,Y);let[Q]=this.#$.splice(Z,1);this.#$.splice($,0,Q),this.#R({...this.#Z,stops:X},"input")};#p(J,Z){let $=this.#$.indexOf(J);if($<0)return;let X=b(this.#Z.stops);X[$]={...X[$],...this.#f(J)},this.#R({...this.#Z,stops:X},Z)}#r(J){if(this.#Z.stops.length<=2)return;let Z=this.#$.indexOf(J);if(Z<0)return;if(J.contains(document.activeElement))this.#_.focus();if(J===this.#X)this.#X=this.#$[Z+1]??this.#$[Z-1]??null;let $=b(this.#Z.stops);$.splice(Z,1),this.#R({...this.#Z,stops:$},"input")}#fJ=(J)=>{if(J.button!==0||this.#Q)return;this.#Q=!0,window.addEventListener("pointerup",this.#u,!0),window.addEventListener("pointercancel",this.#u,!0),window.addEventListener("blur",this.#u,!0)};#u=()=>{window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0),queueMicrotask(()=>this.#_J({reconcile:!0}))};#_J({reconcile:J}){window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0);let Z=this.#Q;if(this.#Q=!1,!J||!Z||!this.#k)return;let $=this.#k;this.#k=null,this.#Z=$,this.#E(),this.#b()}#KJ(){requestAnimationFrame(()=>{if(!this.isConnected)return;this.querySelectorAll(".fig-fill-picker-stop-color").forEach((J)=>{let Z=J.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#U})})}}if(!customElements.get("fig-gradient-editor"))customElements.define("fig-gradient-editor",l);function A(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function F(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function kJ(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function p(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function GJ(J){let Z=String(J??"").trim();if(!Z||Z.startsWith("{")||Z.startsWith("#"))return!1;if(Z.startsWith("data:video/"))return!0;try{let $=new URL(Z,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test($)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(Z)}}function I(J,Z={}){let $=document.createElement("fig-icon");if(J)$.setAttribute("name",J);if(Z.size)$.setAttribute("size",Z.size);if(Z.className)$.className=Z.className;return $}function ZJ(J,Z){let $=(X)=>{if(X===null||X===void 0||X===!1)return;if(Array.isArray(X)){X.forEach($);return}J.append(X instanceof Node?X:String(X))};return $(Z),J}function BJ(J,Z={}){for(let[$,X]of Object.entries(Z)){if(X===null||X===void 0||X===!1)continue;if($==="className")J.className=String(X);else if(X===!0)J.setAttribute($,"");else J.setAttribute($,String(X))}return J}function _(J,Z,$){let X=document.createElement(J);return BJ(X,Z),ZJ(X,$)}class $J extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#Y(),this.#K()}attributeChangedCallback(J,Z,$){if(Z===$||!this.isConnected)return;if(J==="units")this.#J();else this.#U(J)}get value(){return{x:this.#V("x"),y:this.#V("y")}}#Y(){if(this.#Z.x&&this.#Z.y)return;let J=(Z)=>{let $=Z.toUpperCase(),X=_("fig-input-number",{full:!0,"aria-label":`${$} coordinate`,"data-axis":Z},_("span",{slot:"prepend"},$));return X.addEventListener("input",(Y)=>this.#q(Z,Y)),X.addEventListener("change",(Y)=>this.#q(Z,Y)),this.#Z[Z]=X,X};this.replaceChildren(_("fig-input-combo",{full:!0},["x","y"].map(J)))}#K(){this.#U("x"),this.#U("y"),this.#J()}#U(J){let Z=this.#Z[J];if(!Z)return;let $=String(this.#V(J));if(Z.getAttribute("value")!==$)Z.setAttribute("value",$)}#J(){let J=this.getAttribute("units");for(let Z of Object.values(this.#Z))if(J===null)Z.removeAttribute("units");else Z.setAttribute("units",J)}#V(J){let Z=Number(this.getAttribute(J));return Number.isFinite(Z)?Z:0}#q(J,Z){Z.stopPropagation();let $=Number(Z.detail);this.setAttribute(J,String(Number.isFinite($)?$:0)),this.dispatchEvent(new CustomEvent(Z.type,{bubbles:!0,detail:this.value}))}}A("fig-input-point",$J);var NJ="http://www.w3.org/2000/svg";function o(J,Z,$){let X=document.createElementNS(NJ,J);for(let[Y,Q]of Object.entries(Z||{})){if(Q===null||Q===void 0||Q===!1)continue;if(Y==="className")X.setAttribute("class",String(Q));else if(Q===!0)X.setAttribute(Y,"");else X.setAttribute(Y,String(Q))}return ZJ(X,$)}function fJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:Y="",chevronClass:Q="",startLabel:W="Scroll back",endLabel:K="Scroll forward"}={}){let j=(U,L)=>{let q=document.createElement("button");if(q.type="button",q.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?X:Y].filter(Boolean).join(" "),q.dataset.figOverflow=U,J)q.setAttribute(`data-fig-${J}-nav`,U);return q.setAttribute("tabindex","-1"),q.setAttribute("aria-label",U==="start"?W:K),q.appendChild(I("chevron",{size:"small",className:["fig-overflow-chevron",Q].filter(Boolean).join(" ")})),q.addEventListener("click",(z)=>{z.preventDefault(),z.stopPropagation(),L?.(z)}),q};return{start:j("start",Z),end:j("end",$)}}function c(J,Z,$="x",X=2){if(!J||!Z)return!1;let Y=$==="x",Q=Y?Z.scrollWidth:Z.scrollHeight,W=Y?Z.clientWidth:Z.clientHeight,K=Y?Z.scrollLeft:Z.scrollTop,j=Q-W>X,U=!j||K<=X,L=!j||K+W>=Q-X;return J.classList.toggle("overflow-start",!U),J.classList.toggle("overflow-end",!L),j}function a(J,Z="x",$=1){if(!J)return;let X=Z==="x",Q=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Q,behavior:"smooth"})}function FJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let Y=$==="x",Q=Y?J.scrollWidth:J.scrollHeight,W=Y?J.clientWidth:J.clientHeight;if(Q<=W+1){c(J,J,$);return}let K=Z.getBoundingClientRect(),j=J.getBoundingClientRect(),U=Y?J.scrollLeft:J.scrollTop,L=(Y?K.left-j.left:K.top-j.top)+U,q=Y?K.width:K.height,z=Q-W,H=Math.max(0,Math.min(L+q/2-W/2,z));J.scrollTo({[Y?"left":"top"]:H,behavior:X}),c(J,J,$)})}function TJ(J){let Z=J||"";if(Z.startsWith("["))try{let X=JSON.parse(Z);return Array.isArray(X)?X:[]}catch{}let $=Z.includes(`
+import"./fig.js";import"./fig-property.js";import{figConvertRGB as i,figHexToRGB as t,figHslToRGB as r,figHsvToRGB as _J,figOklabToOklch as LJ,figOklabToRGB as OJ,figOklchToRGB as HJ,figRGBToHsl as e,figRGBToHsv as MJ,figRGBToOklab as JJ,figRGBToOklch as VJ}from"./fig-color.js";import"./fig.js";import"./fig-property.js";import{figConvertRGB as KJ,figHexToRGB as jJ}from"./fig-color.js";var y={type:"linear",angle:180,centerX:50,centerY:50,interpolationSpace:"srgb",stops:[{position:0,color:"#D9D9D9",opacity:100},{position:100,color:"#737373",opacity:100}]};function N(J,Z={},$=[]){let X=document.createElement(J);for(let[Q,W]of Object.entries(Z)){if(W===null||W===void 0||W===!1)continue;if(Q==="className")X.className=String(W);else if(W===!0)X.setAttribute(Q,"");else X.setAttribute(Q,String(W))}let Y=Array.isArray($)?$:[$];for(let Q of Y){if(Q===null||Q===void 0||Q===!1)continue;X.append(Q instanceof Node?Q:String(Q))}return X}function s(J){return N("fig-icon",{name:J})}function UJ(J,Z){return{position:Number.isFinite(Number(J?.position))?Math.max(0,Math.min(100,Number(J.position))):Z*100,color:g(J?.color),opacity:Number.isFinite(Number(J?.opacity))?Math.max(0,Math.min(100,Number(J.opacity))):100}}function g(J){let Z=String(J||"#888888").replace(/^#/,"").slice(0,6);return/^[0-9A-Fa-f]{6}$/.test(Z)?`#${Z.toUpperCase()}`:"#888888"}function d(J,Z){return Number(J?.position)===Number(Z?.position)&&g(J?.color)===g(Z?.color)&&Number(J?.opacity??100)===Number(Z?.opacity??100)}function m(J){if(Array.isArray(J))return J.map(m);if(!J||typeof J!=="object")return J;return Object.fromEntries(Object.keys(J).filter((Z)=>J[Z]!==void 0).sort().map((Z)=>[Z,m(J[Z])]))}function h(J,Z){return!!J&&!!Z&&JSON.stringify(m(J))===JSON.stringify(m(Z))}function b(J){return J.map((Z)=>({...Z}))}function qJ(J,Z){let $=J.length,X=Z.length,Y=Array.from({length:$+1},()=>Array(X+1).fill(0));for(let j=$-1;j>=0;j-=1)for(let U=X-1;U>=0;U-=1)Y[j][U]=d(J[j],Z[U])?Y[j+1][U+1]+1:Math.max(Y[j+1][U],Y[j][U+1]);let Q=[],W=0,K=0;while(W<$&&K<X)if(d(J[W],Z[K]))Q.push([W,K]),W+=1,K+=1;else if(Y[W+1][K]>=Y[W][K+1])W+=1;else K+=1;return Q}function E(J){let Z=J;if(typeof Z==="string")try{Z=JSON.parse(Z)}catch{Z={}}if(Z?.type==="gradient"&&Z.gradient)Z=Z.gradient;let $=Z&&typeof Z==="object"?Z:{},X=Array.isArray($.stops)?$.stops.map(UJ):y.stops.map((Y)=>({...Y}));return{...y,...$,type:["linear","radial","angular"].includes($.type)?$.type:"linear",angle:Number.isFinite(Number($.angle))?Number($.angle):y.angle,centerX:Number.isFinite(Number($.centerX))?Number($.centerX):y.centerX,centerY:Number.isFinite(Number($.centerY))?Number($.centerY):y.centerY,interpolationSpace:"srgb",stops:X.length>=2?X:y.stops.map((Y)=>({...Y}))}}function zJ(J,Z,$){let{r:X,g:Y,b:Q}=jJ(J);if($==="display-p3"){let W=KJ(X,Y,Q,{from:"srgb",to:"display-p3"});return`color(display-p3 ${+(W.r/255).toFixed(4)} ${+(W.g/255).toFixed(4)} ${+(W.b/255).toFixed(4)} / ${Z})`}return`rgba(${X}, ${Y}, ${Q}, ${Z})`}function v(J,{colorSpace:Z="srgb"}={}){let $=E(J),X=$.stops.map((Y)=>`${zJ(Y.color,(Y.opacity??100)/100,Z)} ${Y.position}%`).join(", ");switch($.type){case"radial":return`radial-gradient(circle at ${$.centerX}% ${$.centerY}%, ${X})`;case"angular":return`conic-gradient(from ${$.angle}deg, ${X})`;default:return`linear-gradient(${$.angle}deg, ${X})`}}class l extends HTMLElement{#Z=E();#Y=!1;#K=!1;#U=null;#J=!1;#V=null;#q=null;#j=null;#L=null;#W=null;#_=null;#$=[];#z=[];#X=null;#Q=!1;#k=null;static get observedAttributes(){return["value","color-space","disabled","overflow","show-rows"]}get value(){return structuredClone(this.#Z)}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??{}))}get cssValue(){return v(this.#Z,{colorSpace:this.getAttribute("color-space")||"srgb"})}get pickerAnchor(){return this.#U}set pickerAnchor(J){this.#U=J instanceof Element?J:null,this.#KJ()}connectedCallback(){let J=E(this.getAttribute("value"));if(!h(this.#Z,J))this.#Z=J;this.#P(),this.#b()}attributeChangedCallback(J,Z,$){if(Z===$||this.#Y)return;if(J==="value"){let X=E($);if(h(this.#Z,X)){if(this.#Q)this.#k=null;return}if(this.#Q){this.#k=X;return}this.#k=null,this.#Z=X}if(this.isConnected&&this.#J)this.#b()}disconnectedCallback(){if(this.#_J({reconcile:!1}),this.#k)this.#Z=this.#k,this.#k=null,this.#E()}refreshLayout(){this.#q?.refreshLayout?.()}#F(){return this.hasAttribute("disabled")&&this.getAttribute("disabled")!=="false"}#H(){return this.getAttribute("overflow")==="visible"?"visible":"fade"}#M(){let J=Number(this.getAttribute("show-rows"));return Number.isFinite(J)&&J>0?J:null}#E(){this.#Y=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#Y=!1}#B(){return{type:"gradient",gradient:this.value,css:this.cssValue}}#N(J){this.#E(),this.dispatchEvent(new CustomEvent(J,{bubbles:!0,composed:!0,detail:this.#B()}))}#P(){if(this.#J)return;this.#V=N("fig-select",{className:"fig-fill-picker-gradient-type",label:"Gradient type",variant:"ghost"},N("fig-select-options",{},[["linear","Linear"],["radial","Radial"],["angular","Angular"]].map(([W,K])=>N("fig-select-option",{value:W},K))));let J=(W,K,j)=>{let U=N("fig-button",{icon:!0,variant:"ghost",className:K,"aria-label":W},s(j));return{button:U,tooltip:N("fig-tooltip",{text:W},U)}},Z=J("Flip gradient","fig-fill-picker-gradient-flip","swap"),$=J("Rotate gradient","fig-fill-picker-gradient-rotate","rotate");this.#L=Z.button,this.#W=$.button;let X=N("fig-header",{className:"fig-fill-picker-gradient-header",borderless:!0,compact:!0},[this.#V,N("fig-stack",{className:"fig-fill-picker-gradient-actions",gap:"1"},[Z.tooltip,$.tooltip])]);this.#q=N("fig-input-gradient",{className:"fig-fill-picker-gradient-bar-input","aria-label":"Gradient stops",edit:"true",mode:"tip",size:"large"});let Y=N("fig-preview",{className:"fig-fill-picker-gradient-preview"},this.#q);this.#_=N("fig-button",{icon:!0,variant:"ghost",className:"fig-fill-picker-gradient-add","aria-label":"Add gradient stop",title:"Add stop"},s("add")),this.#j=document.createElement("fig-reorder");let Q=N("div",{className:"fig-fill-picker-gradient-stops"},[N("fig-header",{className:"fig-fill-picker-gradient-stops-header",borderless:!0},[N("h3",{},"Stops"),this.#_]),N("div",{className:"fig-fill-picker-gradient-stops-list"},this.#j)]);this.replaceChildren(X,Y,Q),this.#V.addEventListener("change",this.#i),this.#V.addEventListener("optionhover",(W)=>W.stopPropagation()),this.#W.addEventListener("click",this.#g),this.#L.addEventListener("click",this.#C),this.#_.addEventListener("click",this.#t),this.#q.addEventListener("input",this.#m),this.#q.addEventListener("change",this.#m),this.#q.addEventListener("pointerdown",this.#e),this.#q.addEventListener("focusin",this.#e),this.#q.addEventListener("click",this.#e),this.#q.addEventListener("keydown",this.#v),this.#j.addEventListener("reorder",this.#JJ),this.#j.addEventListener("keydown",this.#v),this.addEventListener("pointerdown",this.#fJ,!0),this.addEventListener("lostpointercapture",this.#u,!0),this.#J=!0}#T(J){if((J.opacity??100)>=100)return J.color;return`${J.color}${Math.round((J.opacity??100)/100*255).toString(16).padStart(2,"0")}`}#f(J){let Z=J.querySelector(".fig-fill-picker-stop-position"),$=J.querySelector(".fig-fill-picker-stop-color"),X=this.#Z.stops[Number(J.dataset.index)]??{},Y=Number(Z?.value??Z?.getAttribute("value")??0),Q=$?.hexOpaque||(typeof $?.value==="string"?$.value:"")||$?.getAttribute("value");return{position:Number.isFinite(Y)?Math.max(0,Math.min(100,Y)):0,color:g(String(Q||X.color).slice(0,7)),opacity:$?.rgba?.a!==void 0?Math.round($.rgba.a*100):X.opacity??100}}#D(J){let Z=this.#$.indexOf(J);if(!Number.isInteger(Z)||!this.#Z.stops[Z])return;this.#Z.stops[Z]={...this.#Z.stops[Z],...this.#f(J)}}#S(){this.#$.forEach((J)=>this.#D(J))}#d(){let J=N("fig-input-number",{className:"fig-fill-picker-stop-position","aria-label":"Gradient stop position",min:"0",max:"100",units:"%"}),Z=N("fig-input-color",{className:"fig-fill-picker-stop-color","aria-label":"Gradient stop color",text:"true",alpha:"true",picker:"figma","picker-dialog-position":"right"}),$=N("fig-property",{className:"fig-fill-picker-gradient-stop-row",leading:"drag",trailing:"remove","show-leading":"hover","show-trailing":!0},N("fig-stack",{className:"fig-fill-picker-gradient-stop-inputs",slot:"input",direction:"horizontal",gap:"2",full:!0},[J,Z]));J.addEventListener("input",(X)=>{X.stopPropagation(),this.#p($,"input")}),J.addEventListener("change",(X)=>{X.stopPropagation(),this.#p($,"change")});for(let X of["input","change"])Z.addEventListener(X,(Y)=>{Y.stopPropagation(),this.#p($,X)});return $.addEventListener("remove",(X)=>{X.stopPropagation(),this.#r($)}),$.addEventListener("pointerdown",(X)=>{if(X.button===0)this.#A($)}),$.addEventListener("click",(X)=>{if(this.#A($),!X.composedPath().some((Q)=>Q instanceof Element&&Q.matches('input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])'))&&$.isConnected)$.focus({preventScroll:!0})}),$.addEventListener("focusin",()=>this.#A($)),$}#A(J){if(!J||!this.#$.includes(J))return;this.#X=J,this.#$.forEach((Z)=>{Z.toggleAttribute("selected",Z===J)}),this.#y(),J.scrollIntoView({block:"nearest"})}#y(){let J=this.#$.indexOf(this.#X);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)").forEach((Z,$)=>{if($===J)Z.select?.();else Z.deselect?.()})}#x(){if(!this.#j)return;let J=this.#Z.stops,Z=this.#$.filter((Y)=>Y.isConnected),$;if(Z.length===J.length)$=[...Z];else{$=Array(J.length).fill(null);let Y=qJ(this.#z,J),Q=new Set;for(let[j,U]of Y){let L=Z[j];if(!L)continue;$[U]=L,Q.add(j)}let W=Z.filter((j,U)=>!Q.has(U));$=$.map((j)=>j??W.shift()??this.#d());let K=new Set($);Z.forEach((j)=>{if(!K.has(j))j.remove()})}let X=this.#j.firstElementChild;for(let Y of $)if(Y===X)X=X.nextElementSibling;else this.#j.insertBefore(Y,X);if(this.#$=$,this.#$.forEach((Y,Q)=>{this.#h(Y,J[Q],Q)}),!this.#$.includes(this.#X))this.#X=this.#$[0]??null;this.#$.forEach((Y)=>{Y.toggleAttribute("selected",Y===this.#X)}),this.#y(),this.#z=b(J),this.#KJ()}#h(J,Z,$){let X=this.#F();J.dataset.index=String($);let Y=J.querySelector(".fig-fill-picker-stop-position"),Q=J.querySelector(".fig-fill-picker-stop-color");this.#l(Y,Z.position),this.#l(Q,this.#T(Z)),Y?.toggleAttribute("disabled",X),Q?.toggleAttribute("disabled",X);let W=J.querySelector(':scope > [data-fig-property-action="remove"]');if(W)W.classList.add("fig-fill-picker-stop-remove"),W.setAttribute("aria-label","Remove gradient stop"),W.toggleAttribute("disabled",X||this.#Z.stops.length<=2)}#l(J,Z){if(!J)return;let $=String(Z);if(J.getAttribute("value")===$)return;let X=J.contains(document.activeElement)?document.activeElement:null,Y=X&&"selectionStart"in X&&typeof X.selectionStart==="number"?{start:X.selectionStart,end:X.selectionEnd,direction:X.selectionDirection}:null;if(J.setAttribute("value",$),Y&&X===document.activeElement)try{X.setSelectionRange(Y.start,Y.end,Y.direction)}catch{}}#b(){if(!this.#J)return;let J=this.#F(),Z=this.#H()==="fade";this.#j.classList.toggle("fig-overflow-fade",Z);let $=this.#M();if($===null)this.#j.style.removeProperty("--fig-gradient-editor-overflow-show-rows");else this.#j.style.setProperty("--fig-gradient-editor-overflow-show-rows",String($));this.#l(this.#V,this.#Z.type),this.#V.toggleAttribute("disabled",J),this.#L.toggleAttribute("disabled",J),this.#W.toggleAttribute("disabled",J),this.#_.toggleAttribute("disabled",J),this.#j.toggleAttribute("disabled",J),this.#q.toggleAttribute("disabled",J);let X=E(this.#q.value);if(!h(X,this.#Z))this.#K=!0,this.#q.value={type:"gradient",gradient:this.#Z},this.#K=!1;this.#x()}#R(J,Z,{focusIndex:$=null}={}){let X=E(J),Y=!h(this.#Z,X);if(Y)this.#Z=X,this.#b();if(Z==="change"||Y)this.#N(Z);if($!==null)this.#w($)}#w(J){requestAnimationFrame(()=>{if(!this.isConnected)return;let Z=this.querySelector(`.fig-fill-picker-gradient-stop-row[data-index="${J}"]`),$=Z?.querySelector(".fig-fill-picker-stop-color fig-input-text input");this.#A(Z),$?.focus(),$?.select()})}#i=(J)=>{J.stopPropagation();let Z=typeof J.detail==="string"?J.detail:J.target?.value;if(!["linear","radial","angular"].includes(Z))return;this.#R({...this.#Z,type:Z},"input")};#g=()=>{this.#R({...this.#Z,angle:(Number(this.#Z.angle)+90)%360},"input")};#C=()=>{let J=this.#Z.stops.map((Z)=>({...Z,position:100-Z.position})).sort((Z,$)=>Z.position-$.position);this.#R({...this.#Z,stops:J},"input")};#t=()=>{let J=b(this.#Z.stops),Z=Math.max(0,this.#$.indexOf(this.#X)),$=Number(J[Z]?.position)||0,X=Number(J[Z+1]?.position??$),Y={position:($+X)/2,color:"#888888",opacity:100},Q=Z+1;J.splice(Q,0,Y),this.#R({...this.#Z,stops:J},"input",{focusIndex:Q})};#m=(J)=>{if(J.stopPropagation(),this.#K||!J.detail?.gradient)return;this.#R({...this.#Z,...J.detail.gradient},J.type)};#e=(J)=>{let Z=J.target?.closest?.("fig-handle:not(.fig-input-gradient-ghost)"),$=Number(Z?.dataset.stopIndex);if(!Number.isInteger($))return;this.#A(this.#$[$])};#v=(J)=>{if(J.defaultPrevented||!["Delete","Backspace"].includes(J.key)||this.#F()||this.#Z.stops.length<=2)return;let Z=J.target?.closest?.("fig-handle[selected]:not(.fig-input-gradient-ghost)"),$=J.target?.closest?.(".fig-fill-picker-gradient-stop-row[selected]"),X=Z&&this.#q.contains(Z),Y=J.composedPath().some((W)=>W instanceof Element&&W.matches('input, textarea, select, fig-input-number, fig-input-color, fig-input-text, [contenteditable]:not([contenteditable="false"])')),Q=$===this.#X&&!Y;if(!X&&!Q)return;J.preventDefault(),this.#r(this.#X),requestAnimationFrame(()=>{let W=this.#$.indexOf(this.#X);this.#q?.querySelectorAll(".fig-input-gradient-track fig-handle:not(.fig-input-gradient-ghost)")[W]?.focus()})};#JJ=(J)=>{J.stopPropagation();let{oldIndex:Z,newIndex:$}=J.detail??{};if(!Number.isInteger(Z)||!Number.isInteger($)||Z===$)return;this.#S();let X=b(this.#Z.stops),Y=X.map((K)=>K.position),[Q]=X.splice(Z,1);X.splice($,0,Q),X.forEach((K,j)=>{K.position=Y[j]});let[W]=this.#$.splice(Z,1);this.#$.splice($,0,W),this.#R({...this.#Z,stops:X},"input")};#p(J,Z){let $=this.#$.indexOf(J);if($<0)return;let X=b(this.#Z.stops);X[$]={...X[$],...this.#f(J)},this.#R({...this.#Z,stops:X},Z)}#r(J){if(this.#Z.stops.length<=2)return;let Z=this.#$.indexOf(J);if(Z<0)return;if(J.contains(document.activeElement))this.#_.focus();if(J===this.#X)this.#X=this.#$[Z+1]??this.#$[Z-1]??null;let $=b(this.#Z.stops);$.splice(Z,1),this.#R({...this.#Z,stops:$},"input")}#fJ=(J)=>{if(J.button!==0||this.#Q)return;this.#Q=!0,window.addEventListener("pointerup",this.#u,!0),window.addEventListener("pointercancel",this.#u,!0),window.addEventListener("blur",this.#u,!0)};#u=()=>{window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0),queueMicrotask(()=>this.#_J({reconcile:!0}))};#_J({reconcile:J}){window.removeEventListener("pointerup",this.#u,!0),window.removeEventListener("pointercancel",this.#u,!0),window.removeEventListener("blur",this.#u,!0);let Z=this.#Q;if(this.#Q=!1,!J||!Z||!this.#k)return;let $=this.#k;this.#k=null,this.#Z=$,this.#E(),this.#b()}#KJ(){requestAnimationFrame(()=>{if(!this.isConnected)return;this.querySelectorAll(".fig-fill-picker-stop-color").forEach((J)=>{let Z=J.querySelector("fig-fill-picker");if(Z)Z.anchorElement=this.#U})})}}if(!customElements.get("fig-gradient-editor"))customElements.define("fig-gradient-editor",l);function A(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function F(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function kJ(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function p(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function GJ(J){let Z=String(J??"").trim();if(!Z||Z.startsWith("{")||Z.startsWith("#"))return!1;if(Z.startsWith("data:video/"))return!0;try{let $=new URL(Z,"https://fig.local").pathname;return/\.(mp4|webm|mov|m4v|ogv)$/i.test($)}catch{return/\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(Z)}}function I(J,Z={}){let $=document.createElement("fig-icon");if(J)$.setAttribute("name",J);if(Z.size)$.setAttribute("size",Z.size);if(Z.className)$.className=Z.className;return $}function ZJ(J,Z){let $=(X)=>{if(X===null||X===void 0||X===!1)return;if(Array.isArray(X)){X.forEach($);return}J.append(X instanceof Node?X:String(X))};return $(Z),J}function BJ(J,Z={}){for(let[$,X]of Object.entries(Z)){if(X===null||X===void 0||X===!1)continue;if($==="className")J.className=String(X);else if(X===!0)J.setAttribute($,"");else J.setAttribute($,String(X))}return J}function _(J,Z,$){let X=document.createElement(J);return BJ(X,Z),ZJ(X,$)}class $J extends HTMLElement{#Z={};static get observedAttributes(){return["x","y","units"]}connectedCallback(){this.#Y(),this.#K()}attributeChangedCallback(J,Z,$){if(Z===$||!this.isConnected)return;if(J==="units")this.#J();else this.#U(J)}get value(){return{x:this.#V("x"),y:this.#V("y")}}#Y(){if(this.#Z.x&&this.#Z.y)return;let J=(Z)=>{let $=Z.toUpperCase(),X=_("fig-input-number",{full:!0,"aria-label":`${$} coordinate`,"data-axis":Z},_("span",{slot:"prepend"},$));return X.addEventListener("input",(Y)=>this.#q(Z,Y)),X.addEventListener("change",(Y)=>this.#q(Z,Y)),this.#Z[Z]=X,X};this.replaceChildren(_("fig-input-combo",{full:!0},["x","y"].map(J)))}#K(){this.#U("x"),this.#U("y"),this.#J()}#U(J){let Z=this.#Z[J];if(!Z)return;let $=String(this.#V(J));if(Z.getAttribute("value")!==$)Z.setAttribute("value",$)}#J(){let J=this.getAttribute("units");for(let Z of Object.values(this.#Z))if(J===null)Z.removeAttribute("units");else Z.setAttribute("units",J)}#V(J){let Z=Number(this.getAttribute(J));return Number.isFinite(Z)?Z:0}#q(J,Z){Z.stopPropagation();let $=Number(Z.detail);this.setAttribute(J,String(Number.isFinite($)?$:0)),this.dispatchEvent(new CustomEvent(Z.type,{bubbles:!0,detail:this.value}))}}A("fig-input-point",$J);var NJ="http://www.w3.org/2000/svg";function o(J,Z,$){let X=document.createElementNS(NJ,J);for(let[Y,Q]of Object.entries(Z||{})){if(Q===null||Q===void 0||Q===!1)continue;if(Y==="className")X.setAttribute("class",String(Q));else if(Q===!0)X.setAttribute(Y,"");else X.setAttribute(Y,String(Q))}return ZJ(X,$)}function fJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:Y="",chevronClass:Q="",startLabel:W="Scroll back",endLabel:K="Scroll forward"}={}){let j=(U,L)=>{let q=document.createElement("button");if(q.type="button",q.className=["fig-overflow",`fig-overflow-${U}`,U==="start"?X:Y].filter(Boolean).join(" "),q.dataset.figOverflow=U,J)q.setAttribute(`data-fig-${J}-nav`,U);return q.setAttribute("tabindex","-1"),q.setAttribute("aria-label",U==="start"?W:K),q.appendChild(I("chevron",{size:"small",className:["fig-overflow-chevron",Q].filter(Boolean).join(" ")})),q.addEventListener("click",(z)=>{z.preventDefault(),z.stopPropagation(),L?.(z)}),q};return{start:j("start",Z),end:j("end",$)}}function c(J,Z,$="x",X=2){if(!J||!Z)return!1;let Y=$==="x",Q=Y?Z.scrollWidth:Z.scrollHeight,W=Y?Z.clientWidth:Z.clientHeight,K=Y?Z.scrollLeft:Z.scrollTop,j=Q-W>X,U=!j||K<=X,L=!j||K+W>=Q-X;return J.classList.toggle("overflow-start",!U),J.classList.toggle("overflow-end",!L),j}function a(J,Z="x",$=1){if(!J)return;let X=Z==="x",Q=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Q,behavior:"smooth"})}function FJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let Y=$==="x",Q=Y?J.scrollWidth:J.scrollHeight,W=Y?J.clientWidth:J.clientHeight;if(Q<=W+1){c(J,J,$);return}let K=Z.getBoundingClientRect(),j=J.getBoundingClientRect(),U=Y?J.scrollLeft:J.scrollTop,L=(Y?K.left-j.left:K.top-j.top)+U,q=Y?K.width:K.height,z=Q-W,H=Math.max(0,Math.min(L+q/2-W/2,z));J.scrollTo({[Y?"left":"top"]:H,behavior:X}),c(J,J,$)})}function TJ(J){let Z=J||"";if(Z.startsWith("["))try{let X=JSON.parse(Z);return Array.isArray(X)?X:[]}catch{}let $=Z.includes(`
 `)?`
 `:",";return Z.split($).map((X)=>X.trim()).filter(Boolean)}function DJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function CJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}function XJ(J){let Z=J.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if(Z)return Z;return Z=I("checkmark",{size:"small",className:"fig-select-option-checkmark"}),Z.setAttribute("slot","prepend"),Z.setAttribute("aria-hidden","true"),Z.setAttribute("data-fig-select-checkmark",""),J.append(Z),Z}class YJ extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let J=this.getAttribute("value");if(J!==null)return J;return(this.textContent||"").trim()}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get disabled(){return F(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return F(this,"selected")}set selected(J){if(J)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");XJ(this),this.#Z()}attributeChangedCallback(J,Z,$){if(Z===$)return;if(J==="disabled")this.#Z()}#Z(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}A("fig-select-option",YJ);class QJ extends HTMLElement{#Z=null;#Y=null;#K=null;#U=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#V(),this.#q(),this.addEventListener("scroll",this.#J,{passive:!0}),this.#K?.disconnect(),this.#K=new ResizeObserver(()=>this.syncOverflow()),this.#K.observe(this),this.#U?.disconnect(),this.#U=new MutationObserver(()=>{if(!this.isConnected)return;this.#q(),this.syncOverflow()}),this.#U.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#J),this.#K?.disconnect(),this.#K=null,this.#U?.disconnect(),this.#U=null,this.#L()}syncOverflow(){return c(this,this,"y")}scrollToOption(J,Z="auto"){FJ(this,J,"y",Z)}#V(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#q(){if(this.#Z&&this.#Y&&this.contains(this.#Z)&&this.contains(this.#Y)){this.#j();return}this.#L();let J=fJ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>a(this,"y",-1),onEnd:()=>a(this,"y",1)});this.#Z=J.start,this.#Y=J.end,this.#j()}#j(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#Y)this.append(this.#Y)}#L(){this.#Z?.remove(),this.#Y?.remove(),this.#Z=null,this.#Y=null,this.classList.remove("overflow-start","overflow-end")}}A("fig-select-options",QJ);class WJ extends HTMLElement{#Z=null;#Y=null;#K=null;#U=null;#J=null;#V=null;#q=null;#j=null;#L=null;#W=!1;#_=-1;#$=!1;#z=!1;#X=null;#Q=!1;#k=null;#F=null;#H=!1;#M=null;#E=this.#qJ.bind(this);#B=()=>{queueMicrotask(()=>{if(!this.#Z?.matches(":focus-within"))return;this.toggleAttribute("data-focus-visible",this.#Z.hasAttribute("data-focus-visible")||this.#Z.matches(":focus-visible"))})};#N=()=>this.removeAttribute("data-focus-visible");#P=this.#hJ.bind(this);#T=this.#MJ.bind(this);#f=this.#gJ.bind(this);#D=this.#mJ.bind(this);#S=this.#OJ.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open","variant","size","menu-anchor","aria-label"]}get value(){return this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get open(){return F(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#M??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#M=J}else if(typeof J==="string"&&J.trim())this.#M=null,this.setAttribute("menu-anchor",J);else this.#M=null,this.removeAttribute("menu-anchor");this.#v()}connectedCallback(){if(!this.#W)this.#R();if(this.#y(),this.#b(),this.#UJ(),this.#d(),this.#HJ(),this.#$J(),this.#bJ(),this.#ZJ(),this.open)this.#DJ()}disconnectedCallback(){this.#wJ(),document.removeEventListener("keydown",this.#f,!0),this.#L?.disconnect(),this.#L=null}attributeChangedCallback(J,Z,$){if(Z===$||!this.#W)return;if(J==="options"){this.#b(),this.#$J();return}if(J==="value"||J==="label"||J==="aria-label"){this.#$J();return}if(J==="disabled"){this.#UJ();return}if(J==="size"){this.#d();return}if(J==="open"){if($===null||$==="false")this.#RJ();else this.#DJ();return}if(J==="menu-anchor"){this.#M=null,this.#v();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#HJ(),this.open)this.#I()}}focus(J){this.#Z?.focus(J)}blur(){this.#Z?.blur()}#d(){if(!this.#Z)return;let J=this.getAttribute("size");if(J)this.#Z.setAttribute("size",J);else this.#Z.removeAttribute("size")}#A(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#y(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#x(){let Z=(this.#j?.assignedElements({flatten:!0})??[]).find(($)=>$.tagName==="FIG-SELECT-OPTIONS");if(Z)return Z;return this.querySelector(":scope > fig-select-options")}#h(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#l(){let J=this.#x();if(J){if(!J.hasAttribute("slot"))J.setAttribute("slot","panel");return J}return J=document.createElement("fig-select-options"),J.setAttribute("slot","panel"),J.setAttribute("data-fig-generated",""),this.appendChild(J),J}#b(){if(this.#h())return;let J=this.hasAttribute("options"),Z=J?this.#l():this.#x();if(!Z)return;this.#H=!0;try{for(let Y of Z.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))Y.remove();if(!J)return;let $=TJ(this.getAttribute("options")),X=Z.querySelector(":scope > .fig-overflow-end");for(let Y of $){let Q=document.createElement("fig-select-option");if(Q.setAttribute("data-fig-generated",""),Q.setAttribute("value",DJ(Y)),Q.textContent=CJ(Y),X)Z.insertBefore(Q,X);else Z.appendChild(Q)}}finally{this.#H=!1}}#R(){this.#W=!0;let J=this.attachShadow({mode:"open"}),Z=document.createElement("style");Z.textContent=`
         :host {