@rogieking/figui3 11.4.0 → 11.4.1
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/CHANGELOG.md +7 -0
- package/dist/fig-editor.css +1 -1
- package/dist/fig-editor.js +1 -1
- package/dist/fig.js +1 -1
- package/fig-editor.css +1 -5
- package/fig-editor.js +13 -0
- package/fig.js +3 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [11.4.1]
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Anchored the palette editor popup below its palette trigger, removed its header, and reduced its width.
|
|
10
|
+
- Focused and selected newly added palette color values for immediate editing.
|
|
11
|
+
|
|
5
12
|
## [11.4.0]
|
|
6
13
|
|
|
7
14
|
### Added
|
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-palette-editor-popup{pointer-events:auto;width:15rem;padding:0;&>fig-content{padding-top:0}}fig-palette-editor{flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:contents}& .fig-palette-editor-add{width:100%}}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;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:var(--spacer-4);background:0 0;margin-bottom:0;&: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-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[data-focus-visible])>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{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}&[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:"";top:0;left:var(--spacer-1);background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute}&.fig-reorder-indicator-ring{&: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=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)}: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-palette-editor-popup{pointer-events:auto;width:12rem;padding:0}fig-palette-editor{flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:contents}& .fig-palette-editor-add{width:100%}}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;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:var(--spacer-4);background:0 0;margin-bottom:0;&: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-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[data-focus-visible])>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{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}&[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:"";top:0;left:var(--spacer-1);background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute}&.fig-reorder-indicator-ring{&: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=vertical]{height:2px}&[data-axis=horizontal]{width:2px}}
|
package/dist/fig-editor.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"./fig.js";function P(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function k(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function i(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function x(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function r(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 F(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 p(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 n(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 q(J,Z,$){let X=document.createElement(J);return n(X,Z),p(X,$)}function v(J){let Z=J;if(typeof Z==="string"){let $=Z.trim();if(!$)return[];try{Z=JSON.parse($)}catch{Z=$.includes(",")?$.split(","):[$]}}if(!Array.isArray(Z))return[];return Z.map(($)=>{if(typeof $==="string"){let X=$.trim();return{color:X.slice(0,7)||"#D9D9D9",alpha:X.length>7?Math.max(0,Math.min(1,parseInt(X.slice(7,9),16)/255)):1}}if($&&typeof $==="object"){let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:1;return{color:String($.color||"#D9D9D9").slice(0,7),alpha:Number.isFinite(X)?Math.max(0,Math.min(1,X)):1}}return{color:"#D9D9D9",alpha:1}})}function a(J){let Z=String(J?.color||"#D9D9D9").slice(0,7),$=Math.max(0,Math.min(1,Number(J?.alpha??1)));if($>=1)return Z;return`${Z}${Math.round($*255).toString(16).padStart(2,"0")}`}function t(J,Z){if(!J&&!Z)return{color:"#D9D9D9",alpha:1};if(!J||!Z)return{...J||Z};let $=u(J.color),X=u(Z.color);return{color:`#${["r","g","b"].map((Y)=>Math.round(($[Y]+X[Y])/2).toString(16).padStart(2,"0")).join("").toUpperCase()}`,alpha:(Number(J.alpha??1)+Number(Z.alpha??1))/2}}var e="http://www.w3.org/2000/svg";function h(J,Z,$){let X=document.createElementNS(e,J);for(let[j,Y]of Object.entries(Z||{})){if(Y===null||Y===void 0||Y===!1)continue;if(j==="className")X.setAttribute("class",String(Y));else if(Y===!0)X.setAttribute(j,"");else X.setAttribute(j,String(Y))}return p(X,$)}function u(J){let Z=String(J||"").replace(/^#/,"");return{r:parseInt(Z.substring(0,2),16)||0,g:parseInt(Z.substring(2,4),16)||0,b:parseInt(Z.substring(4,6),16)||0}}function JJ(J,Z,$){let X=J/255,j=Z/255,Y=$/255,Q=Math.max(X,j,Y),W=Math.min(X,j,Y),K=(Q+W)/2;if(Q===W)return{h:0,s:0,l:K*100};let z=Q-W,G=K>0.5?z/(2-Q-W):z/(Q+W),U;switch(Q){case X:U=((j-Y)/z+(j<Y?6:0))/6;break;case j:U=((Y-X)/z+2)/6;break;default:U=((X-j)/z+4)/6;break}return{h:U*360,s:G*100,l:K*100}}function w(J){let Z=J/255;return Z<=0.04045?Z/12.92:Math.pow((Z+0.055)/1.055,2.4)}function ZJ(J,Z,$){let X=w(J),j=w(Z),Y=w($),Q=Math.cbrt(0.4122214708*X+0.5363325363*j+0.0514459929*Y),W=Math.cbrt(0.2119034982*X+0.6806995451*j+0.1073969566*Y),K=Math.cbrt(0.0883024619*X+0.2817188376*j+0.6299787005*Y);return{l:0.2104542553*Q+0.793617785*W-0.0040720468*K,a:1.9779984951*Q-2.428592205*W+0.4505937099*K,b:0.0259040371*Q+0.7827717662*W-0.808675766*K}}function $J(J,Z,$){return{l:J,c:Math.sqrt(Z*Z+$*$),h:Math.atan2($,Z)*180/Math.PI}}function XJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:j="",chevronClass:Y="",startLabel:Q="Scroll back",endLabel:W="Scroll forward"}={}){let K=(z,G)=>{let U=document.createElement("button");if(U.type="button",U.className=["fig-overflow",`fig-overflow-${z}`,z==="start"?X:j].filter(Boolean).join(" "),U.dataset.figOverflow=z,J)U.setAttribute(`data-fig-${J}-nav`,z);return U.setAttribute("tabindex","-1"),U.setAttribute("aria-label",z==="start"?Q:W),U.appendChild(F("chevron",{size:"small",className:["fig-overflow-chevron",Y].filter(Boolean).join(" ")})),U.addEventListener("click",(V)=>{V.preventDefault(),V.stopPropagation(),G?.(V)}),U};return{start:K("start",Z),end:K("end",$)}}function b(J,Z,$="x",X=2){if(!J||!Z)return!1;let j=$==="x",Y=j?Z.scrollWidth:Z.scrollHeight,Q=j?Z.clientWidth:Z.clientHeight,W=j?Z.scrollLeft:Z.scrollTop,K=Y-Q>X,z=!K||W<=X,G=!K||W+Q>=Y-X;return J.classList.toggle("overflow-start",!z),J.classList.toggle("overflow-end",!G),K}function g(J,Z="x",$=1){if(!J)return;let X=Z==="x",Y=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Y,behavior:"smooth"})}function jJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let j=$==="x",Y=j?J.scrollWidth:J.scrollHeight,Q=j?J.clientWidth:J.clientHeight;if(Y<=Q+1){b(J,J,$);return}let W=Z.getBoundingClientRect(),K=J.getBoundingClientRect(),z=j?J.scrollLeft:J.scrollTop,G=(j?W.left-K.left:W.top-K.top)+z,U=j?W.width:W.height,V=Y-Q,H=Math.max(0,Math.min(G+U/2-Q/2,V));J.scrollTo({[j?"left":"top"]:H,behavior:X}),b(J,J,$)})}class c extends HTMLElement{#Z=[];#$=!1;static get observedAttributes(){return["value","min","max","fixed","disabled"]}get#W(){let J=Number.parseInt(this.getAttribute("min"),10);return Number.isFinite(J)?Math.max(0,J):2}get#z(){let J=Number.parseInt(this.getAttribute("max"),10);return Number.isFinite(J)?Math.max(this.#W,J):1/0}get#J(){return k(this,"fixed")}get#f(){return k(this,"disabled")}get value(){return this.#Z.map((J)=>({...J}))}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??[]))}connectedCallback(){this.#Z=v(this.getAttribute("value")),this.#
|
|
1
|
+
import"./fig.js";function P(J,Z){if(!customElements.get(J))customElements.define(J,Z)}function k(J,Z){return J.hasAttribute(Z)&&J.getAttribute(Z)!=="false"}function i(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}function x(J){if(!J)return"";return`url("${String(J).replace(/\\/g,"\\\\").replace(/"/g,"\\\"")}")`}function r(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 F(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 p(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 n(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 q(J,Z,$){let X=document.createElement(J);return n(X,Z),p(X,$)}function v(J){let Z=J;if(typeof Z==="string"){let $=Z.trim();if(!$)return[];try{Z=JSON.parse($)}catch{Z=$.includes(",")?$.split(","):[$]}}if(!Array.isArray(Z))return[];return Z.map(($)=>{if(typeof $==="string"){let X=$.trim();return{color:X.slice(0,7)||"#D9D9D9",alpha:X.length>7?Math.max(0,Math.min(1,parseInt(X.slice(7,9),16)/255)):1}}if($&&typeof $==="object"){let X=$.alpha!==void 0?Number($.alpha):$.opacity!==void 0?Number($.opacity)/100:1;return{color:String($.color||"#D9D9D9").slice(0,7),alpha:Number.isFinite(X)?Math.max(0,Math.min(1,X)):1}}return{color:"#D9D9D9",alpha:1}})}function a(J){let Z=String(J?.color||"#D9D9D9").slice(0,7),$=Math.max(0,Math.min(1,Number(J?.alpha??1)));if($>=1)return Z;return`${Z}${Math.round($*255).toString(16).padStart(2,"0")}`}function t(J,Z){if(!J&&!Z)return{color:"#D9D9D9",alpha:1};if(!J||!Z)return{...J||Z};let $=u(J.color),X=u(Z.color);return{color:`#${["r","g","b"].map((Y)=>Math.round(($[Y]+X[Y])/2).toString(16).padStart(2,"0")).join("").toUpperCase()}`,alpha:(Number(J.alpha??1)+Number(Z.alpha??1))/2}}var e="http://www.w3.org/2000/svg";function h(J,Z,$){let X=document.createElementNS(e,J);for(let[j,Y]of Object.entries(Z||{})){if(Y===null||Y===void 0||Y===!1)continue;if(j==="className")X.setAttribute("class",String(Y));else if(Y===!0)X.setAttribute(j,"");else X.setAttribute(j,String(Y))}return p(X,$)}function u(J){let Z=String(J||"").replace(/^#/,"");return{r:parseInt(Z.substring(0,2),16)||0,g:parseInt(Z.substring(2,4),16)||0,b:parseInt(Z.substring(4,6),16)||0}}function JJ(J,Z,$){let X=J/255,j=Z/255,Y=$/255,Q=Math.max(X,j,Y),W=Math.min(X,j,Y),K=(Q+W)/2;if(Q===W)return{h:0,s:0,l:K*100};let z=Q-W,G=K>0.5?z/(2-Q-W):z/(Q+W),U;switch(Q){case X:U=((j-Y)/z+(j<Y?6:0))/6;break;case j:U=((Y-X)/z+2)/6;break;default:U=((X-j)/z+4)/6;break}return{h:U*360,s:G*100,l:K*100}}function w(J){let Z=J/255;return Z<=0.04045?Z/12.92:Math.pow((Z+0.055)/1.055,2.4)}function ZJ(J,Z,$){let X=w(J),j=w(Z),Y=w($),Q=Math.cbrt(0.4122214708*X+0.5363325363*j+0.0514459929*Y),W=Math.cbrt(0.2119034982*X+0.6806995451*j+0.1073969566*Y),K=Math.cbrt(0.0883024619*X+0.2817188376*j+0.6299787005*Y);return{l:0.2104542553*Q+0.793617785*W-0.0040720468*K,a:1.9779984951*Q-2.428592205*W+0.4505937099*K,b:0.0259040371*Q+0.7827717662*W-0.808675766*K}}function $J(J,Z,$){return{l:J,c:Math.sqrt(Z*Z+$*$),h:Math.atan2($,Z)*180/Math.PI}}function XJ({owner:J,onStart:Z,onEnd:$,startClass:X="",endClass:j="",chevronClass:Y="",startLabel:Q="Scroll back",endLabel:W="Scroll forward"}={}){let K=(z,G)=>{let U=document.createElement("button");if(U.type="button",U.className=["fig-overflow",`fig-overflow-${z}`,z==="start"?X:j].filter(Boolean).join(" "),U.dataset.figOverflow=z,J)U.setAttribute(`data-fig-${J}-nav`,z);return U.setAttribute("tabindex","-1"),U.setAttribute("aria-label",z==="start"?Q:W),U.appendChild(F("chevron",{size:"small",className:["fig-overflow-chevron",Y].filter(Boolean).join(" ")})),U.addEventListener("click",(V)=>{V.preventDefault(),V.stopPropagation(),G?.(V)}),U};return{start:K("start",Z),end:K("end",$)}}function b(J,Z,$="x",X=2){if(!J||!Z)return!1;let j=$==="x",Y=j?Z.scrollWidth:Z.scrollHeight,Q=j?Z.clientWidth:Z.clientHeight,W=j?Z.scrollLeft:Z.scrollTop,K=Y-Q>X,z=!K||W<=X,G=!K||W+Q>=Y-X;return J.classList.toggle("overflow-start",!z),J.classList.toggle("overflow-end",!G),K}function g(J,Z="x",$=1){if(!J)return;let X=Z==="x",Y=(X?J.clientWidth:J.clientHeight)*0.8*$;J.scrollBy({[X?"left":"top"]:Y,behavior:"smooth"})}function jJ(J,Z,$="y",X="auto"){if(!J||!Z||!J.contains(Z))return;requestAnimationFrame(()=>{if(!J.isConnected||!Z.isConnected)return;let j=$==="x",Y=j?J.scrollWidth:J.scrollHeight,Q=j?J.clientWidth:J.clientHeight;if(Y<=Q+1){b(J,J,$);return}let W=Z.getBoundingClientRect(),K=J.getBoundingClientRect(),z=j?J.scrollLeft:J.scrollTop,G=(j?W.left-K.left:W.top-K.top)+z,U=j?W.width:W.height,V=Y-Q,H=Math.max(0,Math.min(G+U/2-Q/2,V));J.scrollTo({[j?"left":"top"]:H,behavior:X}),b(J,J,$)})}class c extends HTMLElement{#Z=[];#$=!1;static get observedAttributes(){return["value","min","max","fixed","disabled"]}get#W(){let J=Number.parseInt(this.getAttribute("min"),10);return Number.isFinite(J)?Math.max(0,J):2}get#z(){let J=Number.parseInt(this.getAttribute("max"),10);return Number.isFinite(J)?Math.max(this.#W,J):1/0}get#J(){return k(this,"fixed")}get#f(){return k(this,"disabled")}get value(){return this.#Z.map((J)=>({...J}))}set value(J){this.setAttribute("value",typeof J==="string"?J:JSON.stringify(J??[]))}connectedCallback(){this.#Z=v(this.getAttribute("value")),this.#X()}attributeChangedCallback(J,Z,$){if(Z===$||this.#$)return;if(J==="value")this.#Z=v($);if(this.isConnected)this.#X()}#V(){this.#$=!0,this.setAttribute("value",JSON.stringify(this.#Z)),this.#$=!1}#K(J){this.dispatchEvent(new CustomEvent(J,{bubbles:!0,detail:this.value}))}#B(J,{rerender:Z=!1}={}){if(this.#V(),Z)this.#X();this.#K(J)}#j(J){let Z=q("fig-button",{className:"fig-palette-editor-remove",variant:"ghost",icon:!0,"aria-label":`Remove color ${J+1}`,disabled:this.#f||this.#Z.length<=this.#W||null},F("minus"));return Z.addEventListener("click",()=>{let $=Z.closest(".fig-palette-editor-color-row"),X=Number.parseInt($?.dataset.index??"",10);if(this.#f||this.#J||this.#Z.length<=this.#W||!Number.isInteger(X))return;this.#Z.splice(X,1),this.#V(),this.#X(),this.#K("input"),this.#K("change")}),Z}#q(J,Z){let $=q("fig-input-color",{className:"fig-palette-editor-color",value:a(J),text:!0,alpha:!0,full:!0,disabled:this.#f||null,"aria-label":`Palette color ${Z+1}`}),X=(j,Y)=>{j.stopPropagation();let Q=$.closest(".fig-palette-editor-color-row"),W=Number.parseInt(Q?.dataset.index??"",10);if(!Number.isInteger(W)||!this.#Z[W])return;this.#Z[W]={color:$.hexOpaque||this.#Z[W]?.color||"#D9D9D9",alpha:$.rgba?.a??this.#Z[W]?.alpha??1},this.#B(Y)};return $.addEventListener("input",(j)=>X(j,"input")),$.addEventListener("change",(j)=>X(j,"change")),q("fig-field",{className:"fig-palette-editor-color-row","data-index":Z},[$,...this.#J?[]:[this.#j(Z)]])}#Q=(J)=>{let Z=Number(J.detail?.oldIndex),$=Number(J.detail?.newIndex);if(!Number.isInteger(Z)||!Number.isInteger($)||Z===$||Z<0||$<0||Z>=this.#Z.length||$>=this.#Z.length)return;let[X]=this.#Z.splice(Z,1);this.#Z.splice($,0,X),this.querySelectorAll(".fig-palette-editor-color-row").forEach((j,Y)=>{j.dataset.index=String(Y),j.querySelector(".fig-palette-editor-color")?.setAttribute("aria-label",`Palette color ${Y+1}`),j.querySelector(".fig-palette-editor-remove")?.setAttribute("aria-label",`Remove color ${Y+1}`)}),this.#V(),this.#K("input"),this.#K("change")};#U(J){requestAnimationFrame(()=>{if(!this.isConnected)return;let Z=this.querySelector(`.fig-palette-editor-color-row[data-index="${J}"] .fig-palette-editor-color fig-input-text input`);Z?.focus(),Z?.select()})}#X(){let J=q("fig-reorder",{axis:"vertical",items:".fig-palette-editor-color-row","aria-label":"Palette colors",disabled:this.#f||null},this.#Z.map(($,X)=>this.#q($,X)));J.addEventListener("reorder",this.#Q);let Z=[J];if(!this.#J){let $=q("fig-button",{className:"fig-palette-editor-add",variant:"secondary",full:!0,disabled:this.#f||this.#Z.length>=this.#z||null},"Add color");$.addEventListener("click",()=>{if(this.#f||this.#Z.length>=this.#z)return;let X=this.#Z.length;this.#Z.push(t(this.#Z.at(-2),this.#Z.at(-1))),this.#V(),this.#X(),this.#K("input"),this.#K("change"),this.#U(X)}),Z.push(q("fig-field",{},$))}this.replaceChildren(...Z)}}P("fig-palette-editor",c);function YJ(J){let Z=J||"";if(Z.startsWith("["))try{let X=JSON.parse(Z);return Array.isArray(X)?X:[]}catch{}let $=Z.includes(`
|
|
2
2
|
`)?`
|
|
3
3
|
`:",";return Z.split($).map((X)=>X.trim()).filter(Boolean)}function QJ(J){if(J&&typeof J==="object")return String(J.value??J.label??"");return String(J??"")}function WJ(J){if(J&&typeof J==="object")return String(J.label??J.value??"");return String(J??"")}function s(J){let Z=J.querySelector(":scope > fig-icon[data-fig-select-checkmark]");if(Z)return Z;return Z=F("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 d 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 k(this,"disabled")}set disabled(J){if(J)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return k(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");s(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")}}P("fig-select-option",d);class l extends HTMLElement{#Z=null;#$=null;#W=null;#z=null;#J=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#f(),this.#V(),this.addEventListener("scroll",this.#J,{passive:!0}),this.#W?.disconnect(),this.#W=new ResizeObserver(()=>this.syncOverflow()),this.#W.observe(this),this.#z?.disconnect(),this.#z=new MutationObserver(()=>{if(!this.isConnected)return;this.#V(),this.syncOverflow()}),this.#z.observe(this,{childList:!0}),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#J),this.#W?.disconnect(),this.#W=null,this.#z?.disconnect(),this.#z=null,this.#B()}syncOverflow(){return b(this,this,"y")}scrollToOption(J,Z="auto"){jJ(this,J,"y",Z)}#f(){let J=this.querySelector(":scope > fig-chooser");if(!J)return;while(J.firstChild)this.insertBefore(J.firstChild,J);J.remove()}#V(){if(this.#Z&&this.#$&&this.contains(this.#Z)&&this.contains(this.#$)){this.#K();return}this.#B();let J=XJ({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>g(this,"y",-1),onEnd:()=>g(this,"y",1)});this.#Z=J.start,this.#$=J.end,this.#K()}#K(){if(this.firstElementChild!==this.#Z)this.prepend(this.#Z);if(this.lastElementChild!==this.#$)this.append(this.#$)}#B(){this.#Z?.remove(),this.#$?.remove(),this.#Z=null,this.#$=null,this.classList.remove("overflow-start","overflow-end")}}P("fig-select-options",l);class o extends HTMLElement{#Z=null;#$=null;#W=null;#z=null;#J=null;#f=null;#V=null;#K=null;#B=null;#j=!1;#q=-1;#Q=!1;#U=!1;#X=null;#Y=!1;#F=null;#R=null;#H=!1;#L=null;#w=this.#WJ.bind(this);#O=()=>{queueMicrotask(()=>{if(!this.#Z?.matches(":focus-within"))return;this.toggleAttribute("data-focus-visible",this.#Z.hasAttribute("data-focus-visible")||this.#Z.matches(":focus-visible"))})};#M=()=>this.removeAttribute("data-focus-visible");#D=this.#vJ.bind(this);#T=this.#GJ.bind(this);#k=this.#hJ.bind(this);#N=this.#gJ.bind(this);#C=this.#VJ.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 k(this,"open")}set open(J){if(J)this.setAttribute("open","");else this.removeAttribute("open")}get menuAnchor(){return this.#L??this.getAttribute("menu-anchor")}set menuAnchor(J){if(J instanceof Element){if(this.hasAttribute("menu-anchor"))this.removeAttribute("menu-anchor");this.#L=J}else if(typeof J==="string"&&J.trim())this.#L=null,this.setAttribute("menu-anchor",J);else this.#L=null,this.removeAttribute("menu-anchor");this.#c()}connectedCallback(){if(!this.#j)this.#e();if(this.#A(),this.#r(),this.#QJ(),this.#m(),this.#qJ(),this.#d(),this.#wJ(),this.#s(),this.open)this.#kJ()}disconnectedCallback(){this.#uJ(),document.removeEventListener("keydown",this.#k,!0),this.#B?.disconnect(),this.#B=null}attributeChangedCallback(J,Z,$){if(Z===$||!this.#j)return;if(J==="options"){this.#r(),this.#d();return}if(J==="value"||J==="label"||J==="aria-label"){this.#d();return}if(J==="disabled"){this.#QJ();return}if(J==="size"){this.#m();return}if(J==="open"){if($===null||$==="false")this.#yJ();else this.#kJ();return}if(J==="menu-anchor"){this.#L=null,this.#c();return}if(J==="position"||J==="offset"||J==="closedby"){if(this.#qJ(),this.open)this.#P()}}focus(J){this.#Z?.focus(J)}blur(){this.#Z?.blur()}#m(){if(!this.#Z)return;let J=this.getAttribute("size");if(J)this.#Z.setAttribute("size",J);else this.#Z.removeAttribute("size")}#u(J){return J?.nodeType===1&&(J.tagName==="FIG-SELECT-OPTION"||J.tagName==="FIG-SEPARATOR"||J.tagName==="FIG-SELECT-OPTIONS")}#A(){for(let J of this.querySelectorAll(":scope > fig-select-options"))if(!J.hasAttribute("slot"))J.setAttribute("slot","panel")}#I(){let Z=(this.#K?.assignedElements({flatten:!0})??[]).find(($)=>$.tagName==="FIG-SELECT-OPTIONS");if(Z)return Z;return this.querySelector(":scope > fig-select-options")}#b(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#t(){let J=this.#I();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}#r(){if(this.#b())return;let J=this.hasAttribute("options"),Z=J?this.#t():this.#I();if(!Z)return;this.#H=!0;try{for(let j of Z.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))j.remove();if(!J)return;let $=YJ(this.getAttribute("options")),X=Z.querySelector(":scope > .fig-overflow-end");for(let j of $){let Y=document.createElement("fig-select-option");if(Y.setAttribute("data-fig-generated",""),Y.setAttribute("value",QJ(j)),Y.textContent=WJ(j),X)Z.insertBefore(Y,X);else Z.appendChild(Y)}}finally{this.#H=!1}}#e(){this.#j=!0;let J=this.attachShadow({mode:"open"}),Z=document.createElement("style");Z.textContent=`
|
|
4
4
|
:host {
|