filepond 5.0.0-alpha.5 → 5.0.0-alpha.7

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 (27) hide show
  1. package/dist/esm/elements/FilePondBase/index.css.js +1 -34
  2. package/dist/esm/elements/FilePondDefault/index.css.js +1 -1
  3. package/dist/esm/elements/FilePondDropArea/index.css.js +1 -1
  4. package/dist/esm/elements/FilePondDropIndicator/index.css.js +1 -1
  5. package/dist/esm/elements/FilePondEntryList/components/Entry/index.css.js +1 -1
  6. package/dist/esm/elements/FilePondEntryList/components/EntryActivityIndicator/index.css.js +1 -1
  7. package/dist/esm/elements/FilePondEntryList/components/EntryList/index.css.js +1 -1
  8. package/dist/esm/elements/FilePondEntryList/components/EntryStatus/index.css.js +1 -1
  9. package/dist/esm/elements/FilePondEntryList/components/MediaImage/index.css.js +1 -1
  10. package/dist/esm/elements/FilePondEntryList/components/MediaPane/index.css.js +1 -1
  11. package/dist/esm/elements/FilePondEntryList/components/MediaTimeIndicator/index.css.js +1 -1
  12. package/dist/esm/elements/FilePondEntryList/components/MediaVideo/index.css.js +1 -1
  13. package/dist/esm/elements/FilePondEntryList/index.css.js +1 -1
  14. package/dist/esm/elements/components/BooleanInput/index.css.js +1 -1
  15. package/dist/esm/elements/components/Button/index.css.js +1 -1
  16. package/dist/esm/elements/components/ElementPane/index.css.js +1 -1
  17. package/dist/esm/elements/components/ElementSkeleton/index.css.js +1 -1
  18. package/dist/esm/elements/components/FilenameInput/index.css.js +1 -1
  19. package/dist/esm/elements/components/ProgressIndicator/index.css.js +1 -1
  20. package/dist/esm/elements/components/RangeInput/index.css.js +1 -1
  21. package/dist/esm/elements/components/TextInput/index.css.js +1 -1
  22. package/dist/esm/locales/index.js +5 -4
  23. package/dist/esm/locales/it-it.js +157 -0
  24. package/dist/types/locales/index.d.ts +2 -2
  25. package/dist/types/locales/ja-jp.d.ts +309 -0
  26. package/package.json +2 -2
  27. /package/dist/esm/locales/{js-jp.js → ja-jp.js} +0 -0
@@ -1,37 +1,4 @@
1
- const defaultStyles = `:host {
2
- /* default effects duration */
3
- --animate: 1;
4
-
5
- /* improve font rendering */
6
- -webkit-font-smoothing: antialiased;
7
-
8
- /* default styles */
9
- display: block;
10
- position: relative;
11
- isolation: isolate;
12
- line-height: var(--default-line-height, 1.5);
13
- font-family: var(--default-font-family, inherit);
14
- padding: var(--default-padding, 0);
15
-
16
- /* needs to have a height for form validation to work */
17
- min-height: 1px;
18
-
19
- /* */
20
- & slot {
21
- display: block;
22
- }
23
- }
24
-
25
- /* apply "never" animation state */
26
- :host([animations='never']) {
27
- --animate: 0;
28
- }
29
-
30
- /* move to top when dragging */
31
- :host([dragging]) {
32
- z-index: 2147483647;
33
- }
34
- `;
1
+ const defaultStyles = ':host{--animate: 1;-webkit-font-smoothing:antialiased;display:block;position:relative;isolation:isolate;line-height:var(--default-line-height, 1.5);font-family:var(--default-font-family, inherit);padding:var(--default-padding, 0);min-height:1px}:host slot{display:block}:host([animations="never"]){--animate: 0}:host([dragging]){z-index:2147483647}';
35
2
  export {
36
3
  defaultStyles as default
37
4
  };
@@ -1,4 +1,4 @@
1
- const defaultStyles = "/* Default FilePond Styles */\n:host {\n /* Default colors */\n --default-color: FieldText;\n --default-background-color: color-mix(in srgb, FieldText 10%, Canvas 100%);\n --default-padding: 1em;\n --default-border-radius: 1.25em;\n --default-backdrop-filter: blur(20px) saturate(1.25);\n --default-primary-color: AccentColor;\n --default-border: 1px solid rgb(from FieldText r g b / 0.1);\n\n /* Layout */\n display: flex;\n flex-direction: column;\n gap: var(--default-padding);\n\n /* Slot layout */\n & slot {\n position: relative;\n isolation: isolate;\n }\n}\n\n/* slot and slotted element styles */\n::slotted(input[type='file']) {\n position: absolute;\n width: 100%;\n padding: 0;\n margin: 0;\n z-index: -1;\n pointer-events: none;\n user-select: none;\n\n /* hide from view */\n mask: linear-gradient(transparent, transparent);\n\n /* we align it to the top so Safari tooltip points to the field */\n top: 0;\n left: 0;\n}\n\n::slotted(label) {\n --width-px: calc(var(--width) * 1px);\n --center-px: calc((var(--width-px) - (2 * var(--default-padding))) * 0.5);\n\n display: inline-block;\n transform: translateX(calc(var(--center-px) - 50%));\n align-self: flex-start;\n text-align: center;\n\n padding-top: var(--default-padding);\n padding-bottom: var(--default-padding);\n}\n\n/* sub elements */\nfile-pond-drop-area {\n --border-radius: var(--default-border-radius);\n --border: var(--default-border);\n}\n\nfile-pond-drop-indicator {\n --border-radius: var(--default-border-radius);\n --background-color: rgb(from var(--default-color) r g b / 0.1);\n}\n\nfile-pond-entry-list {\n --entry-color: var(--default-color);\n --entry-background-color: var(--default-background-color);\n\n --entry-shadow: 0 1px 4px rgb(0 0 0 / 0.2);\n --entry-lifted-shadow: 0 4px 8px rgb(0 0 0 / 0.5);\n\n --entry-button-outline: 0 0 0 1.5px currentColor;\n\n &[empty] {\n margin-top: calc(-1 * var(--default-padding));\n }\n\n &::part(entry-button) {\n --btn-size: 1.5em;\n --btn-border-radius: calc(var(--entry-border-radius) - var(--entry-padding) * 0.625);\n --btn-background-color: rgb(from var(--entry-color) r g b / 0.15);\n --btn-icon-stroke: 2.5;\n\n box-shadow: 0 0 0 0 transparent;\n transition:\n box-shadow var(--_150ms, 0) ease-in-out,\n background-color var(--_150ms, 0) ease-in-out;\n }\n\n &::part(entry-button):hover {\n background-color: rgb(from var(--entry-color) r g b / 0.25);\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(entry-button):focus-visible {\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(media-button) {\n --btn-border-radius: var(--panel-border-radius);\n transition:\n box-shadow var(--_150ms, 0) ease-in-out,\n background-color var(--_150ms, 0) ease-in-out;\n }\n\n &::part(media-button):hover {\n background-color: rgb(from currentColor r g b / 0.15);\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(media-button):focus-visible {\n box-shadow: var(--entry-button-outline);\n }\n\n &::part(list) {\n display: flex;\n flex-direction: column;\n gap: calc(var(--default-padding) * 0.5);\n }\n\n &::part(entry) {\n display: grid;\n grid: min-content 1fr min-content / min-content 1fr min-content;\n }\n\n &::part(entry-load-state) {\n grid-row: 1;\n grid-column: 1;\n padding: var(--entry-padding);\n }\n\n &::part(entry-info) {\n grid-row: 1;\n grid-column: 2;\n padding-top: var(--entry-padding);\n padding-bottom: var(--entry-padding);\n }\n\n &::part(entry-store-state) {\n grid-row: 1;\n grid-column: 3;\n padding: var(--entry-padding);\n }\n\n &::part(entry-status) {\n grid-row: 2;\n grid-column: 1 / 4;\n }\n\n &::part(entry-media) {\n grid-row: 2;\n grid-column: 1 / 4;\n }\n\n &::part(media-controls) {\n grid-row: 2;\n grid-column: 1 / 4;\n align-self: end;\n color: #fff;\n margin: 0.6125em;\n\n /* style for buttons in this component */\n --btn-size: 1.25em;\n --btn-icon-stroke: 2.5;\n --btn-icon-size: 0.75em;\n\n /* panel style in this component */\n --panel-border-radius: 0.25em;\n --panel-border-radius: calc(var(--entry-border-radius) - 0.3125em);\n --panel-background-color: rgb(0 0 0 / 0.35);\n --panel-backdrop-filter: var(--default-backdrop-filter);\n }\n}\n\n/* Powered by FilePond */\n:host a {\n --font-size: 0.625;\n --inset: calc(var(--default-padding) / var(--font-size));\n --text-opacity: 0.5;\n --line-opacity: 0.2;\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n line-height: 2;\n transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px))\n translateX(calc(-100% - var(--inset)));\n font-size: calc(var(--font-size) * 1em);\n color: rgb(from var(--default-color) r g b / var(--text-opacity));\n text-underline-offset: 1px;\n text-decoration-color: rgb(from var(--default-color) r g b / var(--line-opacity));\n text-transform: lowercase;\n transition: color var(--_150ms) ease-in-out;\n user-select: none;\n &:hover {\n --text-opacity: 0.75;\n --line-opacity: 0.25;\n }\n}\n";
1
+ const defaultStyles = ':host{--default-color: FieldText;--default-background-color: color-mix(in srgb, FieldText 10%, Canvas 100%);--default-padding: 1em;--default-border-radius: 1.25em;--default-backdrop-filter: blur(20px) saturate(1.25);--default-primary-color: AccentColor;--default-border: 1px solid rgb(from FieldText r g b / .1);display:flex;flex-direction:column;gap:var(--default-padding)}:host slot{position:relative;isolation:isolate}::slotted(input[type="file"]){position:absolute;width:100%;padding:0;margin:0;z-index:-1;pointer-events:none;-webkit-user-select:none;user-select:none;mask:linear-gradient(transparent,transparent);top:0;left:0}::slotted(label){--width-px: calc(var(--width) * 1px);--center-px: calc((var(--width-px) - (2 * var(--default-padding))) * .5);display:inline-block;transform:translate(calc(var(--center-px) - 50%));align-self:flex-start;text-align:center;padding-top:var(--default-padding);padding-bottom:var(--default-padding)}file-pond-drop-area{--border-radius: var(--default-border-radius);--border: var(--default-border)}file-pond-drop-indicator{--border-radius: var(--default-border-radius);--background-color: rgb(from var(--default-color) r g b / .1)}file-pond-entry-list{--entry-color: var(--default-color);--entry-background-color: var(--default-background-color);--entry-shadow: 0 1px 4px rgb(0 0 0 / .2);--entry-lifted-shadow: 0 4px 8px rgb(0 0 0 / .5);--entry-button-outline: 0 0 0 1.5px currentColor}file-pond-entry-list[empty]{margin-top:calc(-1 * var(--default-padding))}file-pond-entry-list::part(entry-button){--btn-size: 1.5em;--btn-border-radius: calc(var(--entry-border-radius) - var(--entry-padding) * .625);--btn-background-color: rgb(from var(--entry-color) r g b / .15);--btn-icon-stroke: 2.5;box-shadow:0 0 0 0 transparent;transition:box-shadow var(--_150ms, 0) ease-in-out,background-color var(--_150ms, 0) ease-in-out}file-pond-entry-list::part(entry-button):hover{background-color:rgb(from var(--entry-color) r g b / .25);box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(entry-button):focus-visible{box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(media-button){--btn-border-radius: var(--panel-border-radius);transition:box-shadow var(--_150ms, 0) ease-in-out,background-color var(--_150ms, 0) ease-in-out}file-pond-entry-list::part(media-button):hover{background-color:rgb(from currentColor r g b / .15);box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(media-button):focus-visible{box-shadow:var(--entry-button-outline)}file-pond-entry-list::part(list){display:flex;flex-direction:column;gap:calc(var(--default-padding) * .5)}file-pond-entry-list::part(entry){display:grid;grid:min-content 1fr min-content / min-content 1fr min-content}file-pond-entry-list::part(entry-load-state){grid-row:1;grid-column:1;padding:var(--entry-padding)}file-pond-entry-list::part(entry-info){grid-row:1;grid-column:2;padding-top:var(--entry-padding);padding-bottom:var(--entry-padding)}file-pond-entry-list::part(entry-store-state){grid-row:1;grid-column:3;padding:var(--entry-padding)}file-pond-entry-list::part(entry-status){grid-row:2;grid-column:1 / 4}file-pond-entry-list::part(entry-media){grid-row:2;grid-column:1 / 4}file-pond-entry-list::part(media-controls){grid-row:2;grid-column:1 / 4;align-self:end;color:#fff;margin:.6125em;--btn-size: 1.25em;--btn-icon-stroke: 2.5;--btn-icon-size: .75em;--panel-border-radius: .25em;--panel-border-radius: calc(var(--entry-border-radius) - .3125em);--panel-background-color: rgb(0 0 0 / .35);--panel-backdrop-filter: var(--default-backdrop-filter)}:host a{--font-size: .625;--inset: calc(var(--default-padding) / var(--font-size));--text-opacity: .5;--line-opacity: .2;position:absolute;z-index:-1;top:0;left:0;line-height:2;transform:translate(calc(var(--x, 0) * 1px),calc(var(--y, 0) * 1px)) translate(calc(-100% - var(--inset)));font-size:calc(var(--font-size) * 1em);color:rgb(from var(--default-color) r g b / var(--text-opacity));text-underline-offset:1px;text-decoration-color:rgb(from var(--default-color) r g b / var(--line-opacity));text-transform:lowercase;transition:color var(--_150ms) ease-in-out;-webkit-user-select:none;user-select:none}:host a:hover{--text-opacity: .75;--line-opacity: .25}';
2
2
  export {
3
3
  defaultStyles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "/*\n\nCustom properties passed to `element-pane`\n\n--border: none;\n--border-radius: none;\n--background-color: none;\n\n*/\n:host {\n contain: layout;\n}\n\n:host,\n.root {\n position: absolute;\n inset: 0;\n}\n";
1
+ const styles = ":host{contain:layout}:host,.root{position:absolute;inset:0}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "/*\n\nCustom properties passed to `.root` and `element-pane`\n\n--border: none;\n--border-radius: none;\n--background-color: none;\n\n*/\n\n:host {\n /* no user interaction with this element */\n pointer-events: none;\n\n /* always render behind items */\n contain: layout;\n}\n\n:host,\n.root {\n /* expand to fill parent */\n position: absolute;\n inset: 0;\n}\n\n.root {\n /* mask drop indicator with container edges */\n border-radius: calc(var(--border-radius) - 1px);\n overflow: hidden;\n\n & > div {\n position: absolute;\n top: 0;\n left: 0;\n transform-origin: center center;\n }\n}\n";
1
+ const styles = ":host{pointer-events:none;contain:layout}:host,.root{position:absolute;inset:0}.root{border-radius:calc(var(--border-radius) - 1px);overflow:hidden}.root>div{position:absolute;top:0;left:0;transform-origin:center center}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "/* Default entry styles */\n.entry {\n isolation: isolate;\n\n /* Use border box so we don't have to subtract padding from min-height */\n box-sizing: border-box;\n\n /* Minimum height so height animation is less extreme on load */\n min-height: var(--entry-min-height);\n\n /* so we respect max-height set on entry item */\n max-height: inherit;\n height: inherit;\n\n /* masking */\n clip-path: inset(var(--mask) round var(--entry-border-radius));\n\n /* line height for text items */\n line-height: 1.15;\n\n /* use entry color */\n color: var(--entry-color);\n\n /* entry selected state */\n &[data-selected='true'] ~ .entry-front {\n --_entry-selected: 2px solid var(--primary-color);\n --background-color: rgb(from var(--primary-color) r g b / 0.25);\n }\n}\n\n/* entry info items */\n.entry-info-main,\n.entry-info-sub {\n word-break: break-word;\n font-variant-numeric: tabular-nums;\n}\n\n.entry-info-main + .entry-info-sub {\n margin-top: 1px;\n}\n\n.entry-info-main {\n font-size: var(--font-size-m);\n\n /* skeleton sizing */\n --skeleton-width: 8em;\n --skeleton-max-width: 100%;\n\n /* clamp lines */\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--entry-name-max-lines, 1);\n overflow: hidden;\n}\n\n.entry-info-sub {\n --skeleton-max-width: 50%;\n font-size: var(--font-size-xs);\n font-weight: 400;\n color: rgb(from currentColor r g b / 0.5);\n}\n\n/* entry decorative elements */\n.entry-back,\n.entry-front,\n.entry-disabled-overlay {\n --border-radius: var(--entry-border-radius);\n}\n\n.entry-back {\n --box-shadow: var(--entry-shadow);\n --background-color: var(--entry-background-color);\n --transition: box-shadow var(--_250ms) ease-out;\n}\n\n.entry-front {\n z-index: 1;\n --transition-duration: var(--_100ms);\n --transition: border var(--transition-duration) ease-out,\n background-color var(--transition-duration) ease-in-out;\n --border-top: var(--_entry-selected, var(--entry-border-top));\n --border-right: var(--_entry-selected, var(--entry-border-right));\n --border-bottom: var(--_entry-selected, var(--entry-border-bottom));\n --border-left: var(--_entry-selected, var(--entry-border-left));\n}\n\n.entry-disabled {\n --background-color: color-mix(\n in srgb,\n var(--entry-background-color) calc(var(--disabled-state) * 40%),\n transparent\n );\n}\n\n/* Default entry layout */\n.entry {\n container-type: inline-size;\n container-name: entry;\n\n & .entry-checkable {\n grid-row: 1;\n grid-column: 1;\n padding: var(--entry-padding);\n }\n\n &[data-selected='true'] .entry-checkable {\n --background-color: var(--primary-color);\n }\n\n & .entry-info {\n pointer-events: none;\n & > [layout='split'] > *:nth-child(2) {\n /* alignment of content in second child (storage state) */\n text-align: right;\n\n /* we need to scale the box to fit the content so when the parent entry width changes the spring that wraps this element is moved correctly */\n min-width: fit-content;\n }\n }\n\n & .entry-media {\n min-width: 0;\n min-height: 0;\n }\n\n & .entry-media-controls {\n /* item spacing */\n gap: var(--gap, var(--entry-padding));\n\n /* fade in media controls */\n --opacity: 0;\n &[data-media-is-visible] {\n --opacity: 1;\n }\n\n & .media-control > element-stack,\n & .media-control-group > element-stack {\n --_transition: opacity var(--_250ms) var(--_100ms) ease-in-out;\n\n /* cannot set opacity directly on pane as that would cause backdrop blur to flicker */\n & > .media-control-pane {\n --transition: var(--_transition);\n }\n\n /* all other children _are_ animated directly */\n & > *:not(.media-control-pane) {\n opacity: var(--opacity);\n transition: var(--_transition);\n }\n }\n }\n\n & .media-control-pane {\n --border-radius: var(--panel-border-radius);\n --backdrop-filter: var(--panel-backdrop-filter);\n --background-color: var(--panel-background-color);\n }\n\n & .media-control-group {\n flex: 1;\n & > element-stack {\n gap: var(--entry-padding);\n }\n }\n\n & .justify-content-start {\n justify-content: start;\n }\n\n & .justify-content-end {\n justify-content: end;\n }\n\n & .media-scrubber {\n flex: 1;\n }\n\n /* If the container is larger than 700px */\n @container entry (width < 200px) {\n & .media-time-indicator {\n display: none;\n }\n }\n\n /* If the container is larger than 700px */\n @container entry (width < 120px) {\n & .media-scrubber {\n display: none;\n }\n }\n}\n\n/* Data Transfer layout */\n.entry.entry-data-transfer {\n & ~ .entry-back {\n --border: none;\n --box-shadow: none;\n --background-color: var(--data-transfer-background-color);\n }\n\n & ~ .entry-front {\n display: none;\n }\n\n & .entry-info {\n grid-row: 1;\n grid-column: 2/4;\n padding-right: var(--entry-padding);\n }\n}\n\n/* Entry layout where media underlays controls \n.entry {\n\n & .button {\n --backdrop-filter: var(--media-backdrop-filter);\n --background-color: rgb(from var(--media-background-color) r g b / 0.35);\n }\n\n & .media-overlay {\n z-index: 1;\n --border-radius: 0;\n --backdrop-filter: var(--media-backdrop-filter);\n --background-color: rgb(from var(--media-background-color) r g b / 0.35);\n mask: linear-gradient(black 10%, transparent);\n max-height: 4em !important;\n }\n\n & .entry-media {\n grid-row: 1 / 3;\n grid-column: 1 / 4;\n z-index: -1;\n }\n}\n*/\n";
1
+ const styles = ".entry{isolation:isolate;box-sizing:border-box;min-height:var(--entry-min-height);max-height:inherit;height:inherit;clip-path:inset(var(--mask) round var(--entry-border-radius));line-height:1.15;color:var(--entry-color)}.entry[data-selected=true]~.entry-front{--_entry-selected: 2px solid var(--primary-color);--background-color: rgb(from var(--primary-color) r g b / .25)}.entry-info-main,.entry-info-sub{word-break:break-word;font-variant-numeric:tabular-nums}.entry-info-main+.entry-info-sub{margin-top:1px}.entry-info-main{font-size:var(--font-size-m);--skeleton-width: 8em;--skeleton-max-width: 100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--entry-name-max-lines, 1);overflow:hidden}.entry-info-sub{--skeleton-max-width: 50%;font-size:var(--font-size-xs);font-weight:400;color:rgb(from currentColor r g b / .5)}.entry-back,.entry-front,.entry-disabled-overlay{--border-radius: var(--entry-border-radius)}.entry-back{--box-shadow: var(--entry-shadow);--background-color: var(--entry-background-color);--transition: box-shadow var(--_250ms) ease-out}.entry-front{z-index:1;--transition-duration: var(--_100ms);--transition: border var(--transition-duration) ease-out, background-color var(--transition-duration) ease-in-out;--border-top: var(--_entry-selected, var(--entry-border-top));--border-right: var(--_entry-selected, var(--entry-border-right));--border-bottom: var(--_entry-selected, var(--entry-border-bottom));--border-left: var(--_entry-selected, var(--entry-border-left))}.entry-disabled{--background-color: color-mix( in srgb, var(--entry-background-color) calc(var(--disabled-state) * 40%), transparent )}.entry{container-type:inline-size;container-name:entry}.entry .entry-checkable{grid-row:1;grid-column:1;padding:var(--entry-padding)}.entry[data-selected=true] .entry-checkable{--background-color: var(--primary-color)}.entry .entry-info{pointer-events:none}.entry .entry-info>[layout=split]>*:nth-child(2){text-align:right;min-width:fit-content}.entry .entry-media{min-width:0;min-height:0}.entry .entry-media-controls{gap:var(--gap, var(--entry-padding));--opacity: 0}.entry .entry-media-controls[data-media-is-visible]{--opacity: 1}.entry .entry-media-controls .media-control>element-stack,.entry .entry-media-controls .media-control-group>element-stack{--_transition: opacity var(--_250ms) var(--_100ms) ease-in-out}:is(.entry .entry-media-controls .media-control>element-stack,.entry .entry-media-controls .media-control-group>element-stack)>.media-control-pane{--transition: var(--_transition)}:is(.entry .entry-media-controls .media-control>element-stack,.entry .entry-media-controls .media-control-group>element-stack)>*:not(.media-control-pane){opacity:var(--opacity);transition:var(--_transition)}.entry .media-control-pane{--border-radius: var(--panel-border-radius);--backdrop-filter: var(--panel-backdrop-filter);--background-color: var(--panel-background-color)}.entry .media-control-group{flex:1}.entry .media-control-group>element-stack{gap:var(--entry-padding)}.entry .justify-content-start{justify-content:start}.entry .justify-content-end{justify-content:end}.entry .media-scrubber{flex:1}@container entry (width < 200px){.entry .media-time-indicator{display:none}}@container entry (width < 120px){.entry .media-scrubber{display:none}}.entry.entry-data-transfer~.entry-back{--border: none;--box-shadow: none;--background-color: var(--data-transfer-background-color)}.entry.entry-data-transfer~.entry-front{display:none}.entry.entry-data-transfer .entry-info{grid-row:1;grid-column:2/4;padding-right:var(--entry-padding)}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "entry-activity-indicator {\n display: block;\n\n /* the file background color is moved to the button container */\n & .button {\n --btn-background-color: transparent;\n --btn-backdrop-filter: none;\n }\n\n & .button[data-state='intro'] {\n opacity: 0;\n --btn-icon-transform: scale(0.9) var(--indicator-button-intro, translateX(0));\n }\n\n & .button[data-state='idle'] {\n --btn-icon-transform: scale(1) var(--indicator-button-idle, translateX(0));\n }\n\n & .button[data-state='outro'] {\n opacity: 0;\n --btn-icon-transform: scale(0.9) var(--indicator-button-outro, translateX(0));\n }\n\n /* this mimics the button fill */\n & .button-pile {\n z-index: 1;\n background-color: var(--btn-background-color);\n border-radius: var(--btn-border-radius);\n backdrop-filter: var(--btn-backdrop-filter);\n }\n\n & progress-indicator {\n --progress-color: var(--btn-color, currentColor);\n --track-size: calc(var(--btn-size, 1.5em) - 0.25em);\n --border-radius: calc(var(--btn-border-radius) - 0.125em);\n\n transition: none;\n pointer-events: none;\n }\n\n & element-stack {\n & > *:not(element-stack) {\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n pointer-events: none;\n }\n\n /* component root intro animation */\n opacity: 0;\n transition: opacity var(--_200ms) ease-out;\n &:not(:empty) {\n opacity: 1;\n }\n }\n}\n";
1
+ const styles = "entry-activity-indicator{display:block}entry-activity-indicator .button{--btn-background-color: transparent;--btn-backdrop-filter: none}entry-activity-indicator .button[data-state=intro]{opacity:0;--btn-icon-transform: scale(.9) var(--indicator-button-intro, translateX(0))}entry-activity-indicator .button[data-state=idle]{--btn-icon-transform: scale(1) var(--indicator-button-idle, translateX(0))}entry-activity-indicator .button[data-state=outro]{opacity:0;--btn-icon-transform: scale(.9) var(--indicator-button-outro, translateX(0))}entry-activity-indicator .button-pile{z-index:1;background-color:var(--btn-background-color);border-radius:var(--btn-border-radius);-webkit-backdrop-filter:var(--btn-backdrop-filter);backdrop-filter:var(--btn-backdrop-filter)}entry-activity-indicator progress-indicator{--progress-color: var(--btn-color, currentColor);--track-size: calc(var(--btn-size, 1.5em) - .25em);--border-radius: calc(var(--btn-border-radius) - .125em);transition:none;pointer-events:none}entry-activity-indicator element-stack{opacity:0;transition:opacity var(--_200ms) ease-out}entry-activity-indicator element-stack>*:not(element-stack){display:flex;justify-content:center;align-items:center;z-index:1;pointer-events:none}entry-activity-indicator element-stack:not(:empty){opacity:1}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = ".entry-list {\n contain: layout;\n\n /* when an item is detached we pad the bottom so scroll isn't affected */\n padding-bottom: var(--_detached-entry-spacing);\n}\n\n.entry-list-item {\n /* Creates new stacking context without explicit positioning */\n isolation: isolate;\n\n /* We remove the item from the flow so other elements take its place */\n &[data-detach] {\n position: fixed;\n width: var(--_detached-entry-width);\n height: var(--_detached-entry-height);\n }\n\n /* While dragging position on top of other elements */\n &[data-render-above] {\n z-index: 1;\n }\n\n /* While dragging position on top of other elements */\n &[data-render-below] {\n z-index: -1;\n }\n\n /* While dragging disable hover effects on elements in subtree */\n &[data-dragging] * {\n pointer-events: none !important;\n }\n\n /* While dragging we switch to lifted shadow */\n &[data-dragging] {\n --entry-shadow: var(--entry-lifted-shadow);\n & > div {\n z-index: 2147483647;\n }\n }\n\n /* we make room for placeholder */\n &[data-placeholder] {\n min-height: 1em;\n }\n}\n\n/* virtual list item */\n.entry-list-item:not([data-placeholder]):empty {\n min-height: var(--entry-min-height);\n background-color: var(--entry-background-color);\n border-radius: var(--entry-border-radius);\n}\n";
1
+ const styles = ".entry-list{contain:layout;padding-bottom:var(--_detached-entry-spacing)}.entry-list-item{isolation:isolate}.entry-list-item[data-detach]{position:fixed;width:var(--_detached-entry-width);height:var(--_detached-entry-height)}.entry-list-item[data-render-above]{z-index:1}.entry-list-item[data-render-below]{z-index:-1}.entry-list-item[data-dragging] *{pointer-events:none!important}.entry-list-item[data-dragging]{--entry-shadow: var(--entry-lifted-shadow)}.entry-list-item[data-dragging]>div{z-index:2147483647}.entry-list-item[data-placeholder]{min-height:1em}.entry-list-item:not([data-placeholder]):empty{min-height:var(--entry-min-height);background-color:var(--entry-background-color);border-radius:var(--entry-border-radius)}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "entry-status {\n isolation: isolate;\n z-index: 1;\n pointer-events: none;\n}\n\n.entry-status-message {\n --ci: color-mix(in hsl, var(--cb) 60%, black);\n --cf: color-mix(in srgb, var(--cb) 40%, black);\n\n &[data-type='info'] {\n --cb: var(--status-info);\n --i: var(--status-info-icon, var(--ci));\n --f: var(--status-info-foreground, var(--cf));\n --b: var(--status-info-background, var(--cb));\n }\n\n &[data-type='success'] {\n --cb: var(--status-success);\n --i: var(--status-success-icon, var(--ci));\n --f: var(--status-success-foreground, var(--cf));\n --b: var(--status-success-background, var(--cb));\n }\n\n &[data-type='warning'] {\n --cb: var(--status-warning);\n --i: var(--status-warning-icon, var(--ci));\n --f: var(--status-warning-foreground, var(--cf));\n --b: var(--status-warning-background, var(--cb));\n }\n\n &[data-type='error'] {\n --cb: var(--status-error);\n --i: var(--status-error-icon, var(--ci));\n --f: var(--status-error-foreground, var(--cf));\n --b: var(--status-error-background, var(--cb));\n }\n\n &[data-type='system'] {\n --cb: var(--status-system);\n --i: var(--status-system-icon, var(--ci));\n --f: var(--status-system-foreground, var(--cf));\n --b: var(--status-system-background, var(--cb));\n }\n}\n\n.entry-status-message-content {\n display: flex;\n align-items: center;\n line-height: 1.25;\n padding: var(--entry-padding);\n color: var(--f);\n\n & svg {\n color: var(--i);\n stroke-width: 1.5;\n flex-shrink: 0;\n width: 1.5em;\n height: 1em;\n margin-right: 0.5em;\n }\n\n & span {\n font-size: var(--font-size-m);\n pointer-events: auto;\n }\n}\n\n.entry-status-message element-pane {\n background-color: var(--b);\n --border-radius: unset;\n --border: unset;\n}\n";
1
+ const styles = "entry-status{isolation:isolate;z-index:1;pointer-events:none}.entry-status-message{--ci: color-mix(in hsl, var(--cb) 60%, black);--cf: color-mix(in srgb, var(--cb) 40%, black)}.entry-status-message[data-type=info]{--cb: var(--status-info);--i: var(--status-info-icon, var(--ci));--f: var(--status-info-foreground, var(--cf));--b: var(--status-info-background, var(--cb))}.entry-status-message[data-type=success]{--cb: var(--status-success);--i: var(--status-success-icon, var(--ci));--f: var(--status-success-foreground, var(--cf));--b: var(--status-success-background, var(--cb))}.entry-status-message[data-type=warning]{--cb: var(--status-warning);--i: var(--status-warning-icon, var(--ci));--f: var(--status-warning-foreground, var(--cf));--b: var(--status-warning-background, var(--cb))}.entry-status-message[data-type=error]{--cb: var(--status-error);--i: var(--status-error-icon, var(--ci));--f: var(--status-error-foreground, var(--cf));--b: var(--status-error-background, var(--cb))}.entry-status-message[data-type=system]{--cb: var(--status-system);--i: var(--status-system-icon, var(--ci));--f: var(--status-system-foreground, var(--cf));--b: var(--status-system-background, var(--cb))}.entry-status-message-content{display:flex;align-items:center;line-height:1.25;padding:var(--entry-padding);color:var(--f)}.entry-status-message-content svg{color:var(--i);stroke-width:1.5;flex-shrink:0;width:1.5em;height:1em;margin-right:.5em}.entry-status-message-content span{font-size:var(--font-size-m);pointer-events:auto}.entry-status-message element-pane{background-color:var(--b);--border-radius: unset;--border: unset}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "media-image {\n display: block;\n height: inherit;\n\n /* this prevents image from upscaling grid cells */\n min-width: 0;\n min-height: 0;\n}\n\nmedia-image-item {\n position: absolute;\n inset: 0;\n height: inherit;\n\n &[complete]:last-of-type {\n position: relative;\n }\n\n &:not([active]):not([poster]) {\n transition: opacity var(--_150ms) var(--_500ms) ease-in;\n opacity: 0;\n }\n}\n";
1
+ const styles = "media-image{display:block;height:inherit;min-width:0;min-height:0}media-image-item{position:absolute;inset:0;height:inherit}media-image-item[complete]:last-of-type{position:relative}media-image-item:not([active]):not([poster]){transition:opacity var(--_150ms) var(--_500ms) ease-in;opacity:0}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "/* media-pane */\nmedia-pane {\n position: relative;\n display: block;\n pointer-events: none;\n\n /* allows item to shrink so fits max grid width/height (if set) */\n min-width: 0;\n min-height: 0;\n width: 100%;\n height: 100%;\n\n /* So scales to contain image */\n aspect-ratio: var(--_aspect-ratio);\n\n /* mask for when in contain mode */\n clip-path: inset(\n var(--_mask-top) var(--_mask-right) var(--_mask-bottom) var(--_mask-left) round\n var(--media-border-radius, 0)\n );\n\n /* Scale to use for media */\n --_px: calc(var(--_pan-x) * var(--_overflow-amount));\n --_py: calc(var(--_pan-y) * var(--_overflow-amount));\n --_s: calc(var(--_scale) + (var(--_scalar) * var(--_overflow-scale)));\n --_tx: calc(var(--_x) + var(--_px));\n --_ty: calc(var(--_y) + var(--_py));\n\n /* Media itself */\n & canvas,\n & video {\n /* This dramatically improves render performance, pixelation doesn't really show because we're scaling with transforms */\n image-rendering: pixelated;\n\n /* So we can transform this element */\n position: absolute;\n left: 0;\n top: 0;\n max-width: none;\n width: auto;\n opacity: var(--_opacity);\n transform-origin: center center;\n transform: translate3d(var(--_tx), var(--_ty), 0) scale(var(--_s));\n }\n}\n\n/* define media backdrop style here as this is conditionally loaded */\n.media-pane {\n --background-color: var(--media-background-color);\n --border-radius: 0;\n}\n";
1
+ const styles = "media-pane{position:relative;display:block;pointer-events:none;min-width:0;min-height:0;width:100%;height:100%;aspect-ratio:var(--_aspect-ratio);clip-path:inset(var(--_mask-top) var(--_mask-right) var(--_mask-bottom) var(--_mask-left) round var(--media-border-radius, 0));--_px: calc(var(--_pan-x) * var(--_overflow-amount));--_py: calc(var(--_pan-y) * var(--_overflow-amount));--_s: calc(var(--_scale) + (var(--_scalar) * var(--_overflow-scale)));--_tx: calc(var(--_x) + var(--_px));--_ty: calc(var(--_y) + var(--_py))}media-pane canvas,media-pane video{image-rendering:pixelated;position:absolute;left:0;top:0;max-width:none;width:auto;opacity:var(--_opacity);transform-origin:center center;transform:translate3d(var(--_tx),var(--_ty),0) scale(var(--_s))}.media-pane{--background-color: var(--media-background-color);--border-radius: 0}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "media-time-indicator {\n white-space: nowrap;\n font-variant: tabular-nums;\n letter-spacing: -0.5px;\n}\n";
1
+ const styles = "media-time-indicator{white-space:nowrap;font-variant:tabular-nums;letter-spacing:-.5px}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "media-video {\n display: block;\n height: inherit;\n\n /* this prevents video from upscaling grid cell */\n min-width: 0;\n min-height: 0;\n}\n\n.media-time-indicator {\n color: currentColor;\n font-size: var(--font-size-xs);\n font-weight: 600;\n}\n\n/* this aligns the text inside these controls */\n.media-scrubber > div,\n.media-time-indicator > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & range-input {\n flex: 1;\n }\n}\n";
1
+ const styles = "media-video{display:block;height:inherit;min-width:0;min-height:0}.media-time-indicator{color:currentColor;font-size:var(--font-size-xs);font-weight:600}.media-scrubber>div,.media-time-indicator>div{display:flex;flex-direction:row;align-items:center}:is(.media-scrubber>div,.media-time-indicator>div) range-input{flex:1}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "/* No nested styles in this CSS file as for some weird reason this crashed Safari (tested on 17.6 Sonoma) */\n\n/* Used to animate disabled between true/false */\n@property --disabled-state {\n syntax: '<number>';\n inherits: true;\n initial-value: 0;\n}\n\n.root {\n /* create new stacking context for FilePondEntryList and its subtree */\n isolation: isolate;\n\n /* Default styles */\n text-align: left;\n font-weight: 500;\n}\n\n:host {\n --entry-padding: calc(var(--default-padding) * 0.5);\n --entry-shadow: none;\n --entry-lifted-shadow: none;\n --entry-min-height: 2.5em;\n --entry-color: currentColor;\n --entry-background-color: inherit;\n --entry-border-radius: calc(var(--default-border-radius, 0) * 0.5);\n --entry-border: var(--default-border, none);\n --entry-border-top: var(--entry-border);\n --entry-border-right: var(--entry-border);\n --entry-border-bottom: var(--entry-border);\n --entry-border-left: var(--entry-border);\n\n --data-transfer-background-color: color-mix(\n in srgb,\n var(--entry-color) 10%,\n var(--entry-background-color)\n );\n\n --media-background-color: black;\n\n --font-size-m: 0.75em;\n --font-size-s: 0.625em;\n --font-size-xs: 0.5em;\n\n --status-info: #a7d6fb;\n --status-success: #97e1a8;\n --status-warning: #f9db82;\n --status-error: #f7938c;\n --status-system: #d3d3d3;\n\n --_100ms: calc(100ms * var(--animate));\n --_150ms: calc(150ms * var(--animate));\n --_200ms: calc(200ms * var(--animate));\n --_250ms: calc(250ms * var(--animate));\n --_500ms: calc(500ms * var(--animate));\n}\n\n/* basic style reset */\n* {\n margin: 0;\n padding: 0;\n border: 0;\n user-select: none;\n -webkit-user-select: none;\n}\n\nli {\n /* for some reason, if the li is displayed as a list-item, the animation in the skeleton component triggers nodes to be endlessly generated in Chrome & Safari */\n display: block;\n}\n\nlabel,\nbutton,\nselect,\ntextarea,\ninput {\n -webkit-user-select: none;\n -webkit-tap-highlight-color: transparent;\n font: inherit;\n box-sizing: content-box;\n}\n\nelement-stack {\n display: flex;\n flex-direction: row;\n}\n\nelement-stack[layout='split'] {\n justify-content: space-between;\n}\n\nelement-stack[layout='col'] {\n flex-direction: column;\n}\n\nelement-stack[layout='pile'] {\n display: grid;\n grid-template: 1fr / 1fr;\n}\n\nelement-stack[layout='pile'] > * {\n grid-area: 1 / 1;\n}\n\n/* disabled state */\n.root {\n --disabled-state: 0;\n --disabled-state-duration: var(--_150ms);\n transition: --disabled-state var(--disabled-state-duration) ease-in-out;\n}\n\n.root[disabled] {\n --disabled-state: 1;\n filter: grayscale(var(--disabled-state));\n}\n\n.root[disabled] * {\n pointer-events: none !important;\n}\n\n/* Hide element from screen but still leave accessible to screenreader */\n.implicit {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n/* Covers the parent element, useful for expanding buttons or labels so an entire element is clickable */\n.cover {\n position: absolute;\n inset: 0;\n background: transparent;\n color: transparent;\n}\n";
1
+ const styles = '@property --disabled-state{syntax: "<number>"; inherits: true; initial-value: 0;}.root{isolation:isolate;text-align:left;font-weight:500}:host{--entry-padding: calc(var(--default-padding) * .5);--entry-shadow: none;--entry-lifted-shadow: none;--entry-min-height: 2.5em;--entry-color: currentColor;--entry-background-color: inherit;--entry-border-radius: calc(var(--default-border-radius, 0) * .5);--entry-border: var(--default-border, none);--entry-border-top: var(--entry-border);--entry-border-right: var(--entry-border);--entry-border-bottom: var(--entry-border);--entry-border-left: var(--entry-border);--data-transfer-background-color: color-mix( in srgb, var(--entry-color) 10%, var(--entry-background-color) );--media-background-color: black;--font-size-m: .75em;--font-size-s: .625em;--font-size-xs: .5em;--status-info: #a7d6fb;--status-success: #97e1a8;--status-warning: #f9db82;--status-error: #f7938c;--status-system: #d3d3d3;--_100ms: calc(.1s * var(--animate));--_150ms: calc(.15s * var(--animate));--_200ms: calc(.2s * var(--animate));--_250ms: calc(.25s * var(--animate));--_500ms: calc(.5s * var(--animate))}*{margin:0;padding:0;border:0;user-select:none;-webkit-user-select:none}li{display:block}label,button,select,textarea,input{-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font:inherit;box-sizing:content-box}element-stack{display:flex;flex-direction:row}element-stack[layout=split]{justify-content:space-between}element-stack[layout=col]{flex-direction:column}element-stack[layout=pile]{display:grid;grid-template:1fr / 1fr}element-stack[layout=pile]>*{grid-area:1 / 1}.root{--disabled-state: 0;--disabled-state-duration: var(--_150ms);transition:--disabled-state var(--disabled-state-duration) ease-in-out}.root[disabled]{--disabled-state: 1;filter:grayscale(var(--disabled-state))}.root[disabled] *{pointer-events:none!important}.implicit{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.cover{position:absolute;inset:0;background:transparent;color:transparent}';
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "boolean-input {\n --input-size: 1em;\n --input-padding: 0.25em;\n\n --input-icon-size: var(--icon-size, calc(var(--input-size) * 2 / 3));\n --input-icon-stroke: var(--icon-stroke, 3.5);\n --input-icon-color: var(--icon-color, currentColor);\n\n --input-focus-color: var(--focus-color, currentColor);\n --input-focus-width: 2px;\n\n --input-font-size: 0.75em;\n --input-background-color: var(--background-color, rgb(from currentColor r g b / 0.15));\n\n --input-transition-duration: var(--_100ms);\n\n display: inline-grid;\n align-items: center;\n justify-items: center;\n grid-template-columns: auto auto;\n grid-template-rows: auto;\n\n /* no interaction with root */\n pointer-events: auto;\n user-select: none;\n\n & input,\n & label {\n cursor: pointer;\n font-size: var(--input-font-size);\n }\n\n /* if label is visible we enable gap */\n &:has(label:not(.implicit)) {\n gap: 0.375em;\n }\n\n & .icon,\n & input {\n font-size: 1em;\n display: block;\n margin: 0;\n padding: 0;\n width: var(--input-size);\n height: var(--input-size);\n border: 0;\n grid-row: 1;\n grid-column: 1;\n outline: none;\n }\n\n & input {\n margin: var(--input-padding);\n appearance: none;\n border-radius: 0.25em;\n background-color: var(--input-background-color);\n box-shadow: 0 0 0 0 transparent;\n transition:\n box-shadow var(--input-transition-duration) ease-in-out,\n background-color var(--input-transition-duration) ease-in-out;\n }\n\n /* focus ring */\n & input:hover,\n & input:focus-visible {\n box-shadow: 0 0 0 var(--input-focus-width) var(--input-focus-color);\n }\n\n /* check icon */\n & .icon {\n /* No need for interacting with icon */\n pointer-events: none;\n stroke-width: var(--input-icon-stroke);\n width: var(--input-icon-size);\n height: var(--input-icon-size);\n\n /* SVG always covers icon element */\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n }\n\n & .icon {\n pointer-events: none;\n color: transparent;\n transform: scale(0.75);\n transition:\n color var(--input-transition-duration) ease-in-out,\n transform var(--_200ms) ease-in-out;\n }\n\n & input:checked + .icon {\n color: var(--input-icon-color);\n transform: scale(1);\n }\n}\n";
1
+ const styles = "boolean-input{--input-size: 1em;--input-padding: .25em;--input-icon-size: var(--icon-size, calc(var(--input-size) * 2 / 3));--input-icon-stroke: var(--icon-stroke, 3.5);--input-icon-color: var(--icon-color, currentColor);--input-focus-color: var(--focus-color, currentColor);--input-focus-width: 2px;--input-font-size: .75em;--input-background-color: var(--background-color, rgb(from currentColor r g b / .15));--input-transition-duration: var(--_100ms);display:inline-grid;align-items:center;justify-items:center;grid-template-columns:auto auto;grid-template-rows:auto;pointer-events:auto;-webkit-user-select:none;user-select:none}boolean-input input,boolean-input label{cursor:pointer;font-size:var(--input-font-size)}boolean-input:has(label:not(.implicit)){gap:.375em}boolean-input .icon,boolean-input input{font-size:1em;display:block;margin:0;padding:0;width:var(--input-size);height:var(--input-size);border:0;grid-row:1;grid-column:1;outline:none}boolean-input input{margin:var(--input-padding);appearance:none;border-radius:.25em;background-color:var(--input-background-color);box-shadow:0 0 0 0 transparent;transition:box-shadow var(--input-transition-duration) ease-in-out,background-color var(--input-transition-duration) ease-in-out}boolean-input input:hover,boolean-input input:focus-visible{box-shadow:0 0 0 var(--input-focus-width) var(--input-focus-color)}boolean-input .icon{pointer-events:none;stroke-width:var(--input-icon-stroke);width:var(--input-icon-size);height:var(--input-icon-size)}boolean-input .icon>svg{display:block;width:100%;height:100%}boolean-input .icon{pointer-events:none;color:transparent;transform:scale(.75);transition:color var(--input-transition-duration) ease-in-out,transform var(--_200ms) ease-in-out}boolean-input input:checked+.icon{color:var(--input-icon-color);transform:scale(1)}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = ".button {\n /* springs powered by transitions */\n --spring: ease-out;\n @supports (animation: linear(1, 2 3%)) {\n /* prettier-ignore */\n --spring: linear(0,0.0066,0.105,0.268,0.452,0.635,0.8,0.936,1.04,1.11,1.14,1.15,1.15,1.13,1.1,1.07,1.04,1.02,1,0.989,0.981,0.978,0.977,0.979,0.983,0.987,0.991,0.995,0.998,1,1,1,1,1,1,1,1,1,1,1);\n }\n\n /* these need to be set directly on the button */\n --btn-opacity: 1;\n\n /* By default use `auto`, if `--btn-size` is set on one of the parents we use `--btn-size`. We have to create \"private\" style properties because using `--btn-size` as property overwrites any cascaded properties */\n --_btn-size: var(--btn-size, auto);\n --_btn-font-size: var(--font-size-m, auto);\n --_btn-border-radius: var(--btn-border-radius, 0);\n --_btn-color: var(--btn-color, currentColor);\n --_btn-background-color: var(--btn-background-color, transparent);\n --_btn-backdrop-filter: var(--btn-backdrop-filter, none);\n --_btn-shadow: var(--btn-shadow, none);\n\n --_btn-hover-color: var(--btn-hover-color, currentColor);\n --_btn-hover-shadow: var(--btn-hover-shadow, none);\n --_btn-hover-background-color: var(--btn-hover-background-color, transparent);\n --_btn-focus-color: var(--btn-focus-color, currentColor);\n --_btn-focus-shadow: var(--btn-focus-shadow, none);\n --_btn-focus-background-color: var(--btn-focus-background-color, transparent);\n --_btn-icon-size: var(--btn-icon-size, 1em);\n --_btn-icon-stroke: var(--btn-icon-stroke, 1.5);\n --_btn-icon-color: var(--btn-icon-color, currentColor);\n\n --_btn-icon-transform: var(--btn-icon-transform, scale(1));\n\n --_btn-icon-transition-duration: var(--btn-icon-transition-duration, var(--_500ms, 0));\n --_btn-icon-transition-easing: var(--btn-icon-transition-easing, var(--spring, linear));\n\n --_btn-transition-duration: var(--btn-transition-duration, var(--_150ms, 0));\n\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n user-select: none;\n pointer-events: all;\n width: var(--_btn-size);\n height: var(--_btn-size);\n border-radius: var(--_btn-border-radius);\n background-color: var(--_btn-background-color);\n backdrop-filter: var(--_btn-backdrop-filter);\n -webkit-backdrop-filter: var(--_btn-backdrop-filter);\n transition:\n color var(--_btn-transition-duration) ease-in-out,\n background-color var(--_btn-transition-duration) ease-in-out,\n box-shadow var(--_btn-transition-duration) ease-in-out,\n width var(--_btn-transition-duration) ease-in-out,\n height var(--_btn-transition-duration) ease-in-out,\n opacity var(--_btn-transition-duration) ease-in-out;\n\n opacity: var(--btn-opacity, 1);\n outline: none;\n box-shadow: var(--_btn-shadow);\n color: currentColor;\n\n & .icon {\n flex-shrink: 0;\n color: var(--_btn-icon-color);\n width: var(--_btn-icon-size);\n height: var(--_btn-icon-size);\n stroke-width: var(--_btn-icon-stroke);\n transform: var(--_btn-icon-transform);\n transition:\n transform var(--_btn-icon-transition-duration) var(--_btn-icon-transition-easing),\n opacity var(--_btn-icon-transition-duration) var(--_btn-icon-transition-easing);\n\n /* we create spacing around the icon so it takes up remaining space when button has a fixed size */\n margin: max(0px, calc((var(--_btn-size) - var(--_btn-icon-size)) * 0.5));\n\n /* No need for interacting with icon */\n pointer-events: none;\n\n /* SVG always covers icon element */\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n }\n\n & .label {\n flex-shrink: 1;\n overflow: hidden;\n color: currentColor;\n font-size: var(--_btn-font-size);\n }\n\n /* This _individual_ button is disabled */\n &[disabled] {\n pointer-events: none;\n & .icon,\n & .label {\n opacity: calc(var(--btn-opacity, 1) * 0.3);\n }\n }\n}\n\n/* Enlarge hit area for touch screens */\n@media (pointer: coarse) {\n .button {\n position: relative;\n &::after {\n --size: 44px;\n --offset: calc((var(--_btn-size) - var(--size)) * 0.5);\n content: '';\n position: absolute;\n top: var(--offset);\n left: var(--offset);\n width: var(--size);\n height: var(--size);\n z-index: 1;\n }\n }\n}\n";
1
+ const styles = '.button{--spring: ease-out;--btn-opacity: 1;--_btn-size: var(--btn-size, auto);--_btn-font-size: var(--font-size-m, auto);--_btn-border-radius: var(--btn-border-radius, 0);--_btn-color: var(--btn-color, currentColor);--_btn-background-color: var(--btn-background-color, transparent);--_btn-backdrop-filter: var(--btn-backdrop-filter, none);--_btn-shadow: var(--btn-shadow, none);--_btn-hover-color: var(--btn-hover-color, currentColor);--_btn-hover-shadow: var(--btn-hover-shadow, none);--_btn-hover-background-color: var(--btn-hover-background-color, transparent);--_btn-focus-color: var(--btn-focus-color, currentColor);--_btn-focus-shadow: var(--btn-focus-shadow, none);--_btn-focus-background-color: var(--btn-focus-background-color, transparent);--_btn-icon-size: var(--btn-icon-size, 1em);--_btn-icon-stroke: var(--btn-icon-stroke, 1.5);--_btn-icon-color: var(--btn-icon-color, currentColor);--_btn-icon-transform: var(--btn-icon-transform, scale(1));--_btn-icon-transition-duration: var(--btn-icon-transition-duration, var(--_500ms, 0));--_btn-icon-transition-easing: var(--btn-icon-transition-easing, var(--spring, linear));--_btn-transition-duration: var(--btn-transition-duration, var(--_150ms, 0));display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;pointer-events:all;width:var(--_btn-size);height:var(--_btn-size);border-radius:var(--_btn-border-radius);background-color:var(--_btn-background-color);backdrop-filter:var(--_btn-backdrop-filter);-webkit-backdrop-filter:var(--_btn-backdrop-filter);transition:color var(--_btn-transition-duration) ease-in-out,background-color var(--_btn-transition-duration) ease-in-out,box-shadow var(--_btn-transition-duration) ease-in-out,width var(--_btn-transition-duration) ease-in-out,height var(--_btn-transition-duration) ease-in-out,opacity var(--_btn-transition-duration) ease-in-out;opacity:var(--btn-opacity, 1);outline:none;box-shadow:var(--_btn-shadow);color:currentColor}@supports (animation: linear(1,2 3%)){.button{--spring: linear(0,.0066,.105,.268,.452,.635,.8,.936,1.04,1.11,1.14,1.15,1.15,1.13,1.1,1.07,1.04,1.02,1,.989,.981,.978,.977,.979,.983,.987,.991,.995,.998,1,1,1,1,1,1,1,1,1,1,1)}}.button .icon{flex-shrink:0;color:var(--_btn-icon-color);width:var(--_btn-icon-size);height:var(--_btn-icon-size);stroke-width:var(--_btn-icon-stroke);transform:var(--_btn-icon-transform);transition:transform var(--_btn-icon-transition-duration) var(--_btn-icon-transition-easing),opacity var(--_btn-icon-transition-duration) var(--_btn-icon-transition-easing);margin:max(0px,calc((var(--_btn-size) - var(--_btn-icon-size)) * .5));pointer-events:none}.button .icon>svg{display:block;width:100%;height:100%}.button .label{flex-shrink:1;overflow:hidden;color:currentColor;font-size:var(--_btn-font-size)}.button[disabled]{pointer-events:none}.button[disabled] .icon,.button[disabled] .label{opacity:calc(var(--btn-opacity, 1) * .3)}@media (pointer: coarse){.button{position:relative}.button:after{--size: 44px;--offset: calc((var(--_btn-size) - var(--size)) * .5);content:"";position:absolute;top:var(--offset);left:var(--offset);width:var(--size);height:var(--size);z-index:1}}';
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const elementPaneStyles = "element-pane {\n contain: size layout style;\n pointer-events: none;\n user-select: none;\n position: absolute;\n z-index: -1;\n inset: 0;\n\n & div {\n position: absolute;\n left: 0;\n top: 0;\n isolation: isolate;\n box-sizing: border-box;\n border-top: var(--border-top, var(--border));\n border-right: var(--border-right, var(--border));\n border-bottom: var(--border-bottom, var(--border));\n border-left: var(--border-left, var(--border));\n border-radius: var(--border-radius, 0);\n background-color: var(--background-color, transparent);\n box-shadow: var(--box-shadow, none);\n backdrop-filter: var(--backdrop-filter, none);\n -webkit-backdrop-filter: var(--backdrop-filter, none);\n transition: var(--transition, none);\n opacity: var(--opacity, 1);\n }\n}\n";
1
+ const elementPaneStyles = "element-pane{contain:size layout style;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;z-index:-1;inset:0}element-pane div{position:absolute;left:0;top:0;isolation:isolate;box-sizing:border-box;border-top:var(--border-top, var(--border));border-right:var(--border-right, var(--border));border-bottom:var(--border-bottom, var(--border));border-left:var(--border-left, var(--border));border-radius:var(--border-radius, 0);background-color:var(--background-color, transparent);box-shadow:var(--box-shadow, none);backdrop-filter:var(--backdrop-filter, none);-webkit-backdrop-filter:var(--backdrop-filter, none);transition:var(--transition, none);opacity:var(--opacity, 1)}";
2
2
  export {
3
3
  elementPaneStyles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "element-skeleton {\n --skeleton-color: currentColor;\n --skeleton-duration: var(--_500ms);\n --skeleton-radius: 0.125em;\n\n /* calculated based on amount of skeleton loaders on the page */\n --skeleton-delay: calc(var(--skeleton-offset, 0) * -0.1s);\n\n /* skeleton intro/outro */\n --skeleton-visibility: 0;\n --skeleton-rag: calc(mod(var(--skeleton-offset, 0), 4) * 1em);\n\n /* width of skeleton panel */\n --skeleton-width: 1em;\n --skeleton-max-width: 1em;\n\n /* box style */\n position: relative;\n display: block;\n\n /* just so it always takes up some space while loading*/\n min-height: 1lh;\n &:not([ready]) {\n min-width: var(--skeleton-width);\n }\n\n /* text fades in and --skeleton-visibility fades in background color */\n --transition-duration: var(--_250ms);\n transition: color var(--transition-duration) ease-out;\n\n & > skeleton-pane,\n & > skeleton-pane::before {\n position: absolute;\n inset: 0;\n }\n\n & > skeleton-pane {\n max-width: var(--skeleton-max-width);\n opacity: 0;\n transition: opacity var(--transition-duration)\n calc((0.1s + 0.025s * var(--skeleton-offset, 0)) * var(--animate, 1)) ease-in-out;\n\n /* the skeleton loader */\n &::before {\n content: '';\n\n box-sizing: border-box;\n background-clip: content-box;\n\n /* rag */\n right: calc(var(--skeleton-rag));\n\n /* skeletong style */\n border-radius: var(--skeleton-radius);\n background-color: var(--skeleton-color);\n\n animation-name: skeleton-busy;\n animation-duration: var(--skeleton-duration);\n animation-delay: var(--skeleton-delay);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n\n /* fade in out and animate */\n opacity: calc(var(--skeleton-opacity) * var(--skeleton-visibility));\n }\n }\n\n &[ready] {\n & > skeleton-pane {\n opacity: 0;\n max-width: none;\n }\n }\n\n &[ready]:has(skeleton-pane) {\n width: fit-content;\n }\n\n /* specific state styles */\n &[active],\n &[frozen] {\n & > skeleton-pane {\n opacity: 1;\n }\n }\n\n &[active] {\n color: transparent;\n }\n\n &[frozen] {\n & > skeleton-pane::before {\n animation-play-state: paused;\n }\n }\n}\n\n/* Skeleton loading animation */\n@keyframes skeleton-busy {\n from {\n opacity: 0.1;\n }\n\n to {\n opacity: 0.2;\n }\n}\n";
1
+ const styles = 'element-skeleton{--skeleton-color: currentColor;--skeleton-duration: var(--_500ms);--skeleton-radius: .125em;--skeleton-delay: calc(var(--skeleton-offset, 0) * -.1s);--skeleton-visibility: 0;--skeleton-rag: calc(mod(var(--skeleton-offset, 0), 4)*1em) ;--skeleton-width: 1em;--skeleton-max-width: 1em;position:relative;display:block;min-height:1lh;--transition-duration: var(--_250ms);transition:color var(--transition-duration) ease-out}element-skeleton:not([ready]){min-width:var(--skeleton-width)}element-skeleton>skeleton-pane,element-skeleton>skeleton-pane:before{position:absolute;inset:0}element-skeleton>skeleton-pane{max-width:var(--skeleton-max-width);opacity:0;transition:opacity var(--transition-duration) calc((.1s + 25ms * var(--skeleton-offset, 0)) * var(--animate, 1)) ease-in-out}element-skeleton>skeleton-pane:before{content:"";box-sizing:border-box;background-clip:content-box;right:calc(var(--skeleton-rag));border-radius:var(--skeleton-radius);background-color:var(--skeleton-color);animation-name:skeleton-busy;animation-duration:var(--skeleton-duration);animation-delay:var(--skeleton-delay);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;opacity:calc(var(--skeleton-opacity) * var(--skeleton-visibility))}element-skeleton[ready]>skeleton-pane{opacity:0;max-width:none}element-skeleton[ready]:has(skeleton-pane){width:fit-content}:is(element-skeleton[active],element-skeleton[frozen])>skeleton-pane{opacity:1}element-skeleton[active]{color:transparent}element-skeleton[frozen]>skeleton-pane:before{animation-play-state:paused}@keyframes skeleton-busy{0%{opacity:.1}to{opacity:.2}}';
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "filename-input {\n --input-transition-duration: var(--_150ms);\n\n display: inline-flex;\n width: min(var(--value-width), calc(100% + var(--extension-width)));\n white-space: nowrap;\n\n /* input that holds file name */\n & input {\n width: min(var(--value-width), 100%);\n transition: background-color var(--input-transition-duration) ease-out;\n &:focus,\n &:hover {\n background-color: rgb(from currentColor r g b / 0.15);\n }\n }\n\n &:focus-within {\n width: min(var(--value-width), 100%);\n }\n\n /* if text overflows we use ellipsis, when we focus the input, we show the extension */\n &[data-overflow] {\n & input {\n text-overflow: ellipsis;\n }\n\n & span {\n visibility: hidden;\n }\n\n /* show extension when focussed */\n & input:focus + span {\n visibility: visible;\n }\n }\n\n /* the file extension */\n & span {\n display: inline-block;\n color: currentColor;\n background-color: transparent;\n }\n\n /* text measure */\n & .measure-island {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n contain: strict;\n overflow: hidden;\n }\n\n & .measure {\n box-sizing: border-box;\n pointer-events: none;\n position: absolute;\n white-space: pre;\n }\n}\n";
1
+ const styles = "filename-input{--input-transition-duration: var(--_150ms);display:inline-flex;width:min(var(--value-width),calc(100% + var(--extension-width)));white-space:nowrap}filename-input input{width:min(var(--value-width),100%);transition:background-color var(--input-transition-duration) ease-out}filename-input input:focus,filename-input input:hover{background-color:rgb(from currentColor r g b / .15)}filename-input:focus-within{width:min(var(--value-width),100%)}filename-input[data-overflow] input{text-overflow:ellipsis}filename-input[data-overflow] span{visibility:hidden}filename-input[data-overflow] input:focus+span{visibility:visible}filename-input span{display:inline-block;color:currentColor;background-color:transparent}filename-input .measure-island{position:absolute;top:0;left:0;width:0;height:0;contain:strict;overflow:hidden}filename-input .measure{box-sizing:border-box;pointer-events:none;position:absolute;white-space:pre}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "progress-indicator {\n --progress-color: var(--progress-color, currentColor);\n\n --track-color: rgb(from var(--progress-color) r g b / 0.25);\n --track-size: var(--size, 1.5em);\n --track-border-radius: var(--border-radius, 0);\n\n --progress-cap: round;\n\n /* this variable is also used in .svelte file for calculating stroke-width on Safari */\n --_stroke-width: var(--progress-stroke, 1.75);\n\n /* base styles */\n display: block;\n background: transparent;\n pointer-events: none;\n overflow: hidden;\n border-radius: var(--track-border-radius);\n\n & div,\n & svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n /* hide progress indicator element */\n & progress {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n &[shape='line'] {\n width: 100%;\n height: calc(var(--_stroke-width) * 1px);\n\n & rect {\n x: 0;\n y: calc(50% - (var(--_stroke-width) * 0.5px));\n width: 100%;\n height: calc(var(--_stroke-width) * 1px);\n rx: calc(var(--_stroke-width) * 0.5px);\n fill: var(--progress-color);\n transition: width 0.5s linear;\n }\n\n & rect:first-of-type {\n fill: var(--track-color);\n }\n\n /* state where we have a value */\n & progress:not(:indeterminate) ~ div {\n & rect:last-of-type {\n x: calc(var(--_offset) * 1px);\n width: calc(var(--_progress) * 100%);\n transition: none;\n }\n }\n\n /* infinite bar */\n & progress:indeterminate ~ div {\n /* 0 for reverse / 1 for forwards */\n --_f: max(0, var(--_flip));\n --_from: translateX(calc(75% - (var(--_f) * 75%)));\n --_to: translateX(calc(var(--_f) * 75%));\n\n & rect:last-of-type {\n --_flip: 1;\n animation: progress-indicator-busy 0.75s infinite alternate ease-in-out;\n width: 25%;\n }\n }\n }\n\n &[shape='circle'],\n &[shape='rectangle'] {\n width: var(--track-size);\n height: var(--track-size);\n\n & div {\n transform-origin: center center;\n }\n\n & g rect,\n & g circle {\n fill: none;\n stroke: var(--progress-color);\n stroke-width: var(--_stroke-width);\n stroke-linecap: var(--progress-cap);\n }\n\n & g rect:first-of-type,\n & g circle:first-of-type {\n stroke: var(--track-color);\n }\n }\n\n &[shape='circle'] {\n /* for round progress indicators */\n & g circle {\n --r: calc(var(--_size) * 0.5);\n r: calc((var(--r) - var(--_stroke-width) * 0.5) * 1px);\n cx: calc(var(--r) * 1px);\n cy: calc(var(--r) * 1px);\n }\n\n /* state where we have a value */\n & progress:not(:indeterminate) ~ div {\n /* animates svg to origin using offset supplied by module */\n transform: scaleX(var(--_flip)) rotate(calc(var(--_offset) * 1rad));\n\n /* draw progress update */\n & g circle:last-of-type {\n stroke-dashoffset: calc(1 - var(--_progress));\n stroke-dasharray: 1;\n }\n }\n\n /* infinite spinner */\n & progress:indeterminate ~ div {\n --_from: rotate(0deg);\n --_to: rotate(360deg);\n\n /* we animate the div, animating the svg triggers occasional layout requests on Chrome */\n animation: progress-indicator-busy 0.5s infinite linear;\n\n /* 50/50 */\n & g circle:last-of-type {\n transition:\n stroke-dashoffset 0.5s ease-out,\n stroke-dasharray 0.5s ease-out;\n\n /* move counter clockwise */\n stroke-dashoffset: -1;\n\n /* 50% fill */\n stroke-dasharray: 0.5;\n }\n }\n }\n\n &[shape='rectangle'] {\n & div {\n transform: scaleX(var(--_flip));\n }\n\n & mask rect:last-of-type {\n stroke-width: var(--_stroke-width);\n }\n\n /* for rectangle progress indicators */\n & mask rect:last-of-type,\n & g rect {\n --_o: calc(var(--_stroke-width) * 0.5px);\n x: var(--_o);\n y: var(--_o);\n --_s: calc((var(--_size) - var(--_stroke-width)) * 1px);\n width: var(--_s);\n height: var(--_s);\n rx: var(--_border-radius);\n }\n\n /* state where we have a value */\n & progress:not(:indeterminate) ~ div {\n mask: none !important;\n\n & g rect:last-of-type {\n stroke-dashoffset: calc(var(--_offset) + var(--_center));\n stroke-dasharray: var(--_progress) calc(1 - var(--_progress));\n }\n }\n\n /* infinite spinner */\n & progress:indeterminate ~ div {\n & g rect:last-of-type {\n display: none;\n }\n\n &::before {\n --_from: rotate(-220deg);\n --_to: rotate(140deg);\n content: '';\n position: absolute;\n left: -25%;\n top: -25%;\n right: 50%;\n bottom: -25%;\n background: var(--progress-color);\n transform-origin: 100% center;\n animation: progress-indicator-busy 0.5s infinite linear;\n }\n }\n }\n}\n\n@keyframes progress-indicator-busy {\n from {\n transform: scaleX(var(--_flip)) var(--_from);\n }\n\n to {\n transform: scaleX(var(--_flip)) var(--_to);\n }\n}\n\n@keyframes progress-indicator-loop {\n from {\n stroke-dashoffset: 1;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n";
1
+ const styles = 'progress-indicator{--progress-color: var(--progress-color, currentColor);--track-color: rgb(from var(--progress-color) r g b / .25);--track-size: var(--size, 1.5em);--track-border-radius: var(--border-radius, 0);--progress-cap: round;--_stroke-width: var(--progress-stroke, 1.75);display:block;background:transparent;pointer-events:none;overflow:hidden;border-radius:var(--track-border-radius)}progress-indicator div,progress-indicator svg{display:block;width:100%;height:100%}progress-indicator progress{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}progress-indicator[shape=line]{width:100%;height:calc(var(--_stroke-width) * 1px)}progress-indicator[shape=line] rect{x:0;y:calc(50% - (var(--_stroke-width) * .5px));width:100%;height:calc(var(--_stroke-width) * 1px);rx:calc(var(--_stroke-width) * .5px);fill:var(--progress-color);transition:width .5s linear}progress-indicator[shape=line] rect:first-of-type{fill:var(--track-color)}progress-indicator[shape=line] progress:not(:indeterminate)~div rect:last-of-type{x:calc(var(--_offset) * 1px);width:calc(var(--_progress) * 100%);transition:none}progress-indicator[shape=line] progress:indeterminate~div{--_f: max(0, var(--_flip));--_from: translateX(calc(75% - (var(--_f) * 75%)));--_to: translateX(calc(var(--_f) * 75%))}progress-indicator[shape=line] progress:indeterminate~div rect:last-of-type{--_flip: 1;animation:progress-indicator-busy .75s infinite alternate ease-in-out;width:25%}progress-indicator[shape=circle],progress-indicator[shape=rectangle]{width:var(--track-size);height:var(--track-size)}:is(progress-indicator[shape=circle],progress-indicator[shape=rectangle]) div{transform-origin:center center}:is(progress-indicator[shape=circle],progress-indicator[shape=rectangle]) g rect,:is(progress-indicator[shape=circle],progress-indicator[shape=rectangle]) g circle{fill:none;stroke:var(--progress-color);stroke-width:var(--_stroke-width);stroke-linecap:var(--progress-cap)}:is(progress-indicator[shape=circle],progress-indicator[shape=rectangle]) g rect:first-of-type,:is(progress-indicator[shape=circle],progress-indicator[shape=rectangle]) g circle:first-of-type{stroke:var(--track-color)}progress-indicator[shape=circle] g circle{--r: calc(var(--_size) * .5);r:calc((var(--r) - var(--_stroke-width) * .5) * 1px);cx:calc(var(--r) * 1px);cy:calc(var(--r) * 1px)}progress-indicator[shape=circle] progress:not(:indeterminate)~div{transform:scaleX(var(--_flip)) rotate(calc(var(--_offset) * 1rad))}progress-indicator[shape=circle] progress:not(:indeterminate)~div g circle:last-of-type{stroke-dashoffset:calc(1 - var(--_progress));stroke-dasharray:1}progress-indicator[shape=circle] progress:indeterminate~div{--_from: rotate(0deg);--_to: rotate(360deg);animation:progress-indicator-busy .5s infinite linear}progress-indicator[shape=circle] progress:indeterminate~div g circle:last-of-type{transition:stroke-dashoffset .5s ease-out,stroke-dasharray .5s ease-out;stroke-dashoffset:-1;stroke-dasharray:.5}progress-indicator[shape=rectangle] div{transform:scaleX(var(--_flip))}progress-indicator[shape=rectangle] mask rect:last-of-type{stroke-width:var(--_stroke-width)}progress-indicator[shape=rectangle] mask rect:last-of-type,progress-indicator[shape=rectangle] g rect{--_o: calc(var(--_stroke-width) * .5px);x:var(--_o);y:var(--_o);--_s: calc((var(--_size) - var(--_stroke-width)) * 1px);width:var(--_s);height:var(--_s);rx:var(--_border-radius)}progress-indicator[shape=rectangle] progress:not(:indeterminate)~div{mask:none!important}progress-indicator[shape=rectangle] progress:not(:indeterminate)~div g rect:last-of-type{stroke-dashoffset:calc(var(--_offset) + var(--_center));stroke-dasharray:var(--_progress) calc(1 - var(--_progress))}progress-indicator[shape=rectangle] progress:indeterminate~div g rect:last-of-type{display:none}progress-indicator[shape=rectangle] progress:indeterminate~div:before{--_from: rotate(-220deg);--_to: rotate(140deg);content:"";position:absolute;inset:-25% 50% -25% -25%;background:var(--progress-color);transform-origin:100% center;animation:progress-indicator-busy .5s infinite linear}@keyframes progress-indicator-busy{0%{transform:scaleX(var(--_flip)) var(--_from)}to{transform:scaleX(var(--_flip)) var(--_to)}}@keyframes progress-indicator-loop{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}';
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "range-input {\n --transition-duration: var(--_150ms);\n --thumb-size: 0.5em;\n --thumb-color: currentColor;\n --track-color: rgb(from currentColor r g b / 0.25);\n --track-size: 0.1875em;\n --track-interaction-size: 1.25em;\n --progress-color: currentColor;\n\n display: block;\n position: relative;\n opacity: var(--opacity);\n\n /* we catch events with the input, then we draw the state using the Bar elements */\n & input {\n /* offsets the input so it aligns with the Bar element */\n --br-alignment: calc(var(--track-border-radius) * 1px);\n appearance: none;\n pointer-events: all;\n display: block;\n\n width: calc(100% + (var(--thumb-size) * 2) - (var(--br-alignment) * 2));\n margin-left: calc((var(--thumb-size) * -1) + var(--br-alignment));\n\n height: var(--track-interaction-size);\n cursor: pointer;\n background: transparent;\n }\n\n & input::-webkit-slider-thumb {\n opacity: 0;\n }\n}\n\n/* visual only */\n.range-input-bar,\n.range-input-knob {\n contain: layout;\n pointer-events: none;\n\n &,\n & div,\n &::before,\n &::after {\n position: absolute;\n top: 0;\n left: 0;\n transform-origin: 0 0;\n }\n}\n\n.range-input-bar {\n height: var(--track-size);\n\n /* inside input track */\n margin-top: calc((var(--track-interaction-size) * 0.5) - (var(--track-size) * 0.5));\n\n /* panes */\n & element-pane {\n --background-color: var(--fill);\n --backdrop-filter: var(--track-backdrop-filter, none);\n --border-radius: 9999px;\n }\n}\n\n.range-input-track {\n --fill: var(--track-color);\n}\n\n.range-input-progress {\n --fill: var(--progress-color);\n}\n\n.range-input-hover {\n transition: opacity var(--transition-duration) ease-out;\n opacity: 0;\n --fill: var(--progress-color);\n}\n\n.range-input-knob {\n /* move with progress */\n transform: translate3d(calc((var(--offset) + var(--track-border-radius)) * 1px), 0, 0);\n\n /* center vertically inside input element */\n margin-top: calc((var(--track-interaction-size) * 0.5));\n\n /* visual knob */\n &::after {\n transform-origin: center center;\n transition: transform var(--transition-duration) ease-out;\n content: '';\n position: absolute;\n background: var(--thumb-background-color);\n border-radius: 9999px;\n width: var(--thumb-size);\n height: var(--thumb-size);\n top: calc(var(--thumb-size) * -0.5);\n left: calc(var(--thumb-size) * -0.5);\n transform: scale(0);\n }\n}\n\n.range-input-title {\n position: absolute;\n left: 0;\n bottom: calc(100% - var(--track-interaction-size) * 0.25);\n transform: translateX(var(--title-x));\n transition: opacity var(--transition-duration) ease-out;\n opacity: var(--title-reveal);\n pointer-events: none;\n}\n\nrange-input:hover .range-input-hover {\n opacity: 0.5;\n}\n\nrange-input:hover .range-input-knob::after {\n transform: scale(1);\n}\n\n/* Firefox */\nrange-input {\n & input::-moz-range-thumb {\n opacity: 0;\n }\n}\n";
1
+ const styles = 'range-input{--transition-duration: var(--_150ms);--thumb-size: .5em;--thumb-color: currentColor;--track-color: rgb(from currentColor r g b / .25);--track-size: .1875em;--track-interaction-size: 1.25em;--progress-color: currentColor;display:block;position:relative;opacity:var(--opacity)}range-input input{--br-alignment: calc(var(--track-border-radius) * 1px);appearance:none;pointer-events:all;display:block;width:calc(100% + (var(--thumb-size) * 2) - (var(--br-alignment) * 2));margin-left:calc((var(--thumb-size) * -1) + var(--br-alignment));height:var(--track-interaction-size);cursor:pointer;background:transparent}range-input input::-webkit-slider-thumb{opacity:0}.range-input-bar,.range-input-knob{contain:layout;pointer-events:none}:is(.range-input-bar,.range-input-knob),:is(.range-input-bar,.range-input-knob) div,:is(.range-input-bar,.range-input-knob):before,:is(.range-input-bar,.range-input-knob):after{position:absolute;top:0;left:0;transform-origin:0 0}.range-input-bar{height:var(--track-size);margin-top:calc((var(--track-interaction-size) * .5) - (var(--track-size) * .5))}.range-input-bar element-pane{--background-color: var(--fill);--backdrop-filter: var(--track-backdrop-filter, none);--border-radius: 9999px}.range-input-track{--fill: var(--track-color)}.range-input-progress{--fill: var(--progress-color)}.range-input-hover{transition:opacity var(--transition-duration) ease-out;opacity:0;--fill: var(--progress-color)}.range-input-knob{transform:translate3d(calc((var(--offset) + var(--track-border-radius)) * 1px),0,0);margin-top:calc((var(--track-interaction-size) * .5))}.range-input-knob:after{transform-origin:center center;transition:transform var(--transition-duration) ease-out;content:"";position:absolute;background:var(--thumb-background-color);border-radius:9999px;width:var(--thumb-size);height:var(--thumb-size);top:calc(var(--thumb-size) * -.5);left:calc(var(--thumb-size) * -.5);transform:scale(0)}.range-input-title{position:absolute;left:0;bottom:calc(100% - var(--track-interaction-size) * .25);transform:translate(var(--title-x));transition:opacity var(--transition-duration) ease-out;opacity:var(--title-reveal);pointer-events:none}range-input:hover .range-input-hover{opacity:.5}range-input:hover .range-input-knob:after{transform:scale(1)}range-input input::-moz-range-thumb{opacity:0}';
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -1,4 +1,4 @@
1
- const styles = "input {\n box-sizing: border-box;\n pointer-events: all;\n height: 1lh;\n outline: none;\n background: transparent;\n color: currentColor;\n border-radius: 0.125em;\n}\n";
1
+ const styles = "input{box-sizing:border-box;pointer-events:all;height:1lh;outline:none;background:transparent;color:currentColor;border-radius:.125em}";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -3,12 +3,13 @@ import { locale as locale2 } from "./nl-nl.js";
3
3
  import { locale as locale3 } from "./de-de.js";
4
4
  import { locale as locale4 } from "./es-es.js";
5
5
  import { locale as locale5 } from "./fr-fr.js";
6
- import { locale as locale6, locale as locale7 } from "./pt-pt.js";
6
+ import { locale as locale6 } from "./pt-pt.js";
7
+ import { locale as locale7 } from "./it-it.js";
7
8
  import { locale as locale8 } from "./nb-no.js";
8
9
  import { locale as locale9 } from "./sv-se.js";
9
10
  import { locale as locale10 } from "./hi-in.js";
10
11
  import { locale as locale11 } from "./ko-kr.js";
11
- import { locale as locale12 } from "./js-jp.js";
12
+ import { locale as locale12 } from "./ja-jp.js";
12
13
  import { locale as locale13 } from "./zh-cn.js";
13
14
  export {
14
15
  locale3 as de_DE,
@@ -16,12 +17,12 @@ export {
16
17
  locale4 as es_ES,
17
18
  locale5 as fr_FR,
18
19
  locale10 as hi_IN,
19
- locale6 as it_IT,
20
+ locale7 as it_IT,
20
21
  locale12 as ja_JP,
21
22
  locale11 as ko_KR,
22
23
  locale8 as nb_NO,
23
24
  locale2 as nl_NL,
24
- locale7 as pt_PT,
25
+ locale6 as pt_PT,
25
26
  locale9 as sv_SE,
26
27
  locale13 as zh_CN
27
28
  };
@@ -0,0 +1,157 @@
1
+ const core = {
2
+ abort: "Interrompi",
3
+ remove: "Rimuovi",
4
+ reset: "Reimposta",
5
+ undo: "Annulla",
6
+ cancel: "Annulla",
7
+ store: "Salva",
8
+ revert: "Ripristina",
9
+ busy: "In corso",
10
+ loading: "Caricamento",
11
+ error: "Errore",
12
+ warning: "Avviso",
13
+ success: "Completato",
14
+ info: "Info",
15
+ system: "Sistema",
16
+ fileMainTypeImage: "immagine",
17
+ fileMainTypeVideo: "video",
18
+ fileMainTypeAudio: "audio",
19
+ fileMainTypeApplication: "file",
20
+ assistAbort: "Tocca per annullare",
21
+ assistUndo: "Tocca per annullare l’azione",
22
+ loadError: "Impossibile caricare il file.",
23
+ loadDataTranserProgress: "Caricamento dei file",
24
+ loadDataTranserInfo: "{{processedFiles}} di {{totalFiles}} file elaborati",
25
+ validationInvalid: "File non valido.",
26
+ validationFileNameMissing: "Nome file mancante",
27
+ validationInvalidEntries: "L’elenco contiene elementi non validi.",
28
+ validationInvalidState: "L’elenco dei file è in uno stato non valido.",
29
+ validationInvalidBusy: "L’elenco dei file è occupato.",
30
+ validationInvalidEmpty: "Compila questo campo."
31
+ };
32
+ const media = {
33
+ mediaEdit: "Modifica",
34
+ mediaPlay: "Riproduci",
35
+ mediaPause: "Pausa",
36
+ mediaSilent: "Senza audio",
37
+ mediaUnmute: "Attiva audio",
38
+ mediaMute: "Disattiva audio",
39
+ mediaFullscreen: "Schermo intero",
40
+ mediaLoadError: "Impossibile caricare la {{fileMainType}}.",
41
+ mediaPlayError: "Impossibile riprodurre il video."
42
+ };
43
+ const store = {
44
+ storeRestoreProgress: "Caricamento {{progress}}%",
45
+ storeStorageQueued: "In attesa di caricamento",
46
+ storeStorageProgress: "Caricamento {{progress}}%",
47
+ storeStorageComplete: "Caricamento completato",
48
+ storeError: "Impossibile salvare il file.",
49
+ storeAwaitingCompletion: "Non tutti i file sono stati salvati."
50
+ };
51
+ const transform = {
52
+ transformEditBusy: "Modifica del file in corso",
53
+ transformError: "Impossibile modificare il file. Riprova."
54
+ };
55
+ const validationFileMimeType = {
56
+ validationFileMimeTypeMismatch: {
57
+ template: "Questo tipo di file non è consentito. {{details}}.",
58
+ variables: {
59
+ details: {
60
+ context: "count",
61
+ map: {
62
+ 1: "Il file deve essere di tipo {{accept}}",
63
+ else: "I tipi consentiti sono: {{accept}}"
64
+ }
65
+ }
66
+ }
67
+ }
68
+ };
69
+ const validationFileExtension = {
70
+ validationFileExtensionMismatch: {
71
+ template: "Questa estensione file non è consentita. {{details}}.",
72
+ variables: {
73
+ details: {
74
+ context: "count",
75
+ map: {
76
+ 1: "Il file deve avere estensione {{accept}}",
77
+ else: "Le estensioni consentite sono: {{accept}}"
78
+ }
79
+ }
80
+ }
81
+ }
82
+ };
83
+ const validationFileName = {
84
+ validationFileNameMissing: "Nome file mancante",
85
+ validationFileNameMismatch: "Questo nome file non è valido."
86
+ };
87
+ const validationFileSize = {
88
+ validationFileSizeUnderflow: "Questo file è troppo piccolo. La dimensione minima è {{minSize}}.",
89
+ validationFileSizeOverflow: "Questo file è troppo grande. La dimensione massima è {{maxSize}}."
90
+ };
91
+ const validationListSize = {
92
+ validationListSizeUnderflow: "La dimensione totale dei file è troppo piccola. Il minimo richiesto è {minListSize}.",
93
+ validationListSizeOverflow: "La dimensione totale dei file è troppo grande. Il massimo consentito è {maxListSize}."
94
+ };
95
+ const validationMediaResolution = {
96
+ validationMediaSizeUnavailable: "Impossibile leggere le dimensioni del media.",
97
+ validationMediaWidthRangeMismatch: "La larghezza della {{fileMainType}} non è valida. Deve essere tra {{minWidth}} e {{maxWidth}}.",
98
+ validationMediaWidthUnderflow: "La {{fileMainType}} è troppo stretta. La larghezza minima è {{minWidth}}.",
99
+ validationMediaWidthOverflow: "La {{fileMainType}} è troppo larga. La larghezza massima è {{maxWidth}}.",
100
+ validationMediaHeightRangeMismatch: "L’altezza della {{fileMainType}} non è valida. Deve essere tra {{minHeight}} e {{maxHeight}}.",
101
+ validationMediaHeightUnderflow: "La {{fileMainType}} è troppo bassa. L’altezza minima è {{minHeight}}.",
102
+ validationMediaHeightOverflow: "La {{fileMainType}} è troppo alta. L’altezza massima è {{maxHeight}}.",
103
+ validationMediaResolutionRangeMismatch: "La risoluzione della {{fileMainType}} non è valida. Deve essere tra {{minResolution}} e {maxResolution}.",
104
+ validationMediaResolutionUnderflow: "La risoluzione della {{fileMainType}} non è valida. La risoluzione minima è {{minResolution}}.",
105
+ validationMediaResolutionOverflow: "La risoluzione della {{fileMainType}} non è valida. La risoluzione massima è {{maxResolution}}."
106
+ };
107
+ const validationListCount = {
108
+ validationListEntryCountUnderflow: {
109
+ template: "Troppi pochi file. Il minimo richiesto è {{minFiles}} {{files}}.",
110
+ variables: {
111
+ files: {
112
+ context: "minFiles",
113
+ map: { 1: "file", else: "file" }
114
+ }
115
+ }
116
+ },
117
+ validationListEntryCountOverflow: {
118
+ template: "Troppi file. Il massimo consentito è {{maxFiles}} {{files}}.",
119
+ variables: {
120
+ files: {
121
+ context: "minFiles",
122
+ map: { 1: "file", else: "file" }
123
+ }
124
+ }
125
+ }
126
+ };
127
+ const validation = {
128
+ ...validationFileSize,
129
+ ...validationFileMimeType,
130
+ ...validationFileExtension,
131
+ ...validationFileName,
132
+ ...validationMediaResolution,
133
+ ...validationListSize,
134
+ ...validationListCount
135
+ };
136
+ const locale = {
137
+ ...core,
138
+ ...store,
139
+ ...media,
140
+ ...validation,
141
+ ...transform
142
+ };
143
+ export {
144
+ core,
145
+ locale,
146
+ media,
147
+ store,
148
+ transform,
149
+ validation,
150
+ validationFileExtension,
151
+ validationFileMimeType,
152
+ validationFileName,
153
+ validationFileSize,
154
+ validationListCount,
155
+ validationListSize,
156
+ validationMediaResolution
157
+ };
@@ -4,10 +4,10 @@ export { locale as de_DE } from './de-de.js';
4
4
  export { locale as es_ES } from './es-es.js';
5
5
  export { locale as fr_FR } from './fr-fr.js';
6
6
  export { locale as pt_PT } from './pt-pt.js';
7
- export { locale as it_IT } from './pt-pt.js';
7
+ export { locale as it_IT } from './it-it.js';
8
8
  export { locale as nb_NO } from './nb-no.js';
9
9
  export { locale as sv_SE } from './sv-se.js';
10
10
  export { locale as hi_IN } from './hi-in.js';
11
11
  export { locale as ko_KR } from './ko-kr.js';
12
- export { locale as ja_JP } from './js-jp.js';
12
+ export { locale as ja_JP } from './ja-jp.js';
13
13
  export { locale as zh_CN } from './zh-cn.js';
@@ -0,0 +1,309 @@
1
+ export declare const core: {
2
+ abort: string;
3
+ remove: string;
4
+ reset: string;
5
+ undo: string;
6
+ cancel: string;
7
+ store: string;
8
+ revert: string;
9
+ busy: string;
10
+ loading: string;
11
+ error: string;
12
+ warning: string;
13
+ success: string;
14
+ info: string;
15
+ system: string;
16
+ fileMainTypeImage: string;
17
+ fileMainTypeVideo: string;
18
+ fileMainTypeAudio: string;
19
+ fileMainTypeApplication: string;
20
+ assistAbort: string;
21
+ assistUndo: string;
22
+ loadError: string;
23
+ loadDataTranserProgress: string;
24
+ loadDataTranserInfo: string;
25
+ validationInvalid: string;
26
+ validationFileNameMissing: string;
27
+ validationInvalidEntries: string;
28
+ validationInvalidState: string;
29
+ validationInvalidBusy: string;
30
+ validationInvalidEmpty: string;
31
+ };
32
+ export declare const media: {
33
+ mediaEdit: string;
34
+ mediaPlay: string;
35
+ mediaPause: string;
36
+ mediaSilent: string;
37
+ mediaUnmute: string;
38
+ mediaMute: string;
39
+ mediaFullscreen: string;
40
+ mediaLoadError: string;
41
+ mediaPlayError: string;
42
+ };
43
+ export declare const store: {
44
+ storeRestoreProgress: string;
45
+ storeStorageQueued: string;
46
+ storeStorageProgress: string;
47
+ storeStorageComplete: string;
48
+ storeError: string;
49
+ storeAwaitingCompletion: string;
50
+ };
51
+ export declare const transform: {
52
+ transformEditBusy: string;
53
+ transformError: string;
54
+ };
55
+ export declare const validationFileMimeType: {
56
+ validationFileMimeTypeMismatch: {
57
+ template: string;
58
+ variables: {
59
+ details: {
60
+ context: string;
61
+ map: {
62
+ 1: string;
63
+ else: string;
64
+ };
65
+ };
66
+ };
67
+ };
68
+ };
69
+ export declare const validationFileExtension: {
70
+ validationFileExtensionMismatch: {
71
+ template: string;
72
+ variables: {
73
+ details: {
74
+ context: string;
75
+ map: {
76
+ 1: string;
77
+ else: string;
78
+ };
79
+ };
80
+ };
81
+ };
82
+ };
83
+ export declare const validationFileName: {
84
+ validationFileNameMissing: string;
85
+ validationFileNameMismatch: string;
86
+ };
87
+ export declare const validationFileSize: {
88
+ validationFileSizeUnderflow: string;
89
+ validationFileSizeOverflow: string;
90
+ };
91
+ export declare const validationListSize: {
92
+ validationListSizeUnderflow: string;
93
+ validationListSizeOverflow: string;
94
+ };
95
+ export declare const validationMediaResolution: {
96
+ validationMediaSizeUnavailable: string;
97
+ validationMediaWidthRangeMismatch: string;
98
+ validationMediaWidthUnderflow: string;
99
+ validationMediaWidthOverflow: string;
100
+ validationMediaHeightRangeMismatch: string;
101
+ validationMediaHeightUnderflow: string;
102
+ validationMediaHeightOverflow: string;
103
+ validationMediaResolutionRangeMismatch: string;
104
+ validationMediaResolutionUnderflow: string;
105
+ validationMediaResolutionOverflow: string;
106
+ };
107
+ export declare const validationListCount: {
108
+ validationListEntryCountUnderflow: {
109
+ template: string;
110
+ variables: {
111
+ files: {
112
+ context: string;
113
+ map: {
114
+ 1: string;
115
+ else: string;
116
+ };
117
+ };
118
+ };
119
+ };
120
+ validationListEntryCountOverflow: {
121
+ template: string;
122
+ variables: {
123
+ files: {
124
+ context: string;
125
+ map: {
126
+ 1: string;
127
+ else: string;
128
+ };
129
+ };
130
+ };
131
+ };
132
+ };
133
+ export declare const validation: {
134
+ validationListEntryCountUnderflow: {
135
+ template: string;
136
+ variables: {
137
+ files: {
138
+ context: string;
139
+ map: {
140
+ 1: string;
141
+ else: string;
142
+ };
143
+ };
144
+ };
145
+ };
146
+ validationListEntryCountOverflow: {
147
+ template: string;
148
+ variables: {
149
+ files: {
150
+ context: string;
151
+ map: {
152
+ 1: string;
153
+ else: string;
154
+ };
155
+ };
156
+ };
157
+ };
158
+ validationListSizeUnderflow: string;
159
+ validationListSizeOverflow: string;
160
+ validationMediaSizeUnavailable: string;
161
+ validationMediaWidthRangeMismatch: string;
162
+ validationMediaWidthUnderflow: string;
163
+ validationMediaWidthOverflow: string;
164
+ validationMediaHeightRangeMismatch: string;
165
+ validationMediaHeightUnderflow: string;
166
+ validationMediaHeightOverflow: string;
167
+ validationMediaResolutionRangeMismatch: string;
168
+ validationMediaResolutionUnderflow: string;
169
+ validationMediaResolutionOverflow: string;
170
+ validationFileNameMissing: string;
171
+ validationFileNameMismatch: string;
172
+ validationFileExtensionMismatch: {
173
+ template: string;
174
+ variables: {
175
+ details: {
176
+ context: string;
177
+ map: {
178
+ 1: string;
179
+ else: string;
180
+ };
181
+ };
182
+ };
183
+ };
184
+ validationFileMimeTypeMismatch: {
185
+ template: string;
186
+ variables: {
187
+ details: {
188
+ context: string;
189
+ map: {
190
+ 1: string;
191
+ else: string;
192
+ };
193
+ };
194
+ };
195
+ };
196
+ validationFileSizeUnderflow: string;
197
+ validationFileSizeOverflow: string;
198
+ };
199
+ export declare const locale: {
200
+ transformEditBusy: string;
201
+ transformError: string;
202
+ validationListEntryCountUnderflow: {
203
+ template: string;
204
+ variables: {
205
+ files: {
206
+ context: string;
207
+ map: {
208
+ 1: string;
209
+ else: string;
210
+ };
211
+ };
212
+ };
213
+ };
214
+ validationListEntryCountOverflow: {
215
+ template: string;
216
+ variables: {
217
+ files: {
218
+ context: string;
219
+ map: {
220
+ 1: string;
221
+ else: string;
222
+ };
223
+ };
224
+ };
225
+ };
226
+ validationListSizeUnderflow: string;
227
+ validationListSizeOverflow: string;
228
+ validationMediaSizeUnavailable: string;
229
+ validationMediaWidthRangeMismatch: string;
230
+ validationMediaWidthUnderflow: string;
231
+ validationMediaWidthOverflow: string;
232
+ validationMediaHeightRangeMismatch: string;
233
+ validationMediaHeightUnderflow: string;
234
+ validationMediaHeightOverflow: string;
235
+ validationMediaResolutionRangeMismatch: string;
236
+ validationMediaResolutionUnderflow: string;
237
+ validationMediaResolutionOverflow: string;
238
+ validationFileNameMissing: string;
239
+ validationFileNameMismatch: string;
240
+ validationFileExtensionMismatch: {
241
+ template: string;
242
+ variables: {
243
+ details: {
244
+ context: string;
245
+ map: {
246
+ 1: string;
247
+ else: string;
248
+ };
249
+ };
250
+ };
251
+ };
252
+ validationFileMimeTypeMismatch: {
253
+ template: string;
254
+ variables: {
255
+ details: {
256
+ context: string;
257
+ map: {
258
+ 1: string;
259
+ else: string;
260
+ };
261
+ };
262
+ };
263
+ };
264
+ validationFileSizeUnderflow: string;
265
+ validationFileSizeOverflow: string;
266
+ mediaEdit: string;
267
+ mediaPlay: string;
268
+ mediaPause: string;
269
+ mediaSilent: string;
270
+ mediaUnmute: string;
271
+ mediaMute: string;
272
+ mediaFullscreen: string;
273
+ mediaLoadError: string;
274
+ mediaPlayError: string;
275
+ storeRestoreProgress: string;
276
+ storeStorageQueued: string;
277
+ storeStorageProgress: string;
278
+ storeStorageComplete: string;
279
+ storeError: string;
280
+ storeAwaitingCompletion: string;
281
+ abort: string;
282
+ remove: string;
283
+ reset: string;
284
+ undo: string;
285
+ cancel: string;
286
+ store: string;
287
+ revert: string;
288
+ busy: string;
289
+ loading: string;
290
+ error: string;
291
+ warning: string;
292
+ success: string;
293
+ info: string;
294
+ system: string;
295
+ fileMainTypeImage: string;
296
+ fileMainTypeVideo: string;
297
+ fileMainTypeAudio: string;
298
+ fileMainTypeApplication: string;
299
+ assistAbort: string;
300
+ assistUndo: string;
301
+ loadError: string;
302
+ loadDataTranserProgress: string;
303
+ loadDataTranserInfo: string;
304
+ validationInvalid: string;
305
+ validationInvalidEntries: string;
306
+ validationInvalidState: string;
307
+ validationInvalidBusy: string;
308
+ validationInvalidEmpty: string;
309
+ };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "tag": "alpha"
4
4
  },
5
5
  "name": "filepond",
6
- "version": "5.0.0-alpha.5",
6
+ "version": "5.0.0-alpha.7",
7
7
  "description": "FilePond, where files go to stretch their bits.",
8
8
  "author": "Rik Schennink",
9
9
  "license": "MIT",
@@ -68,7 +68,7 @@
68
68
  "svelte-check": "^4.3.1",
69
69
  "typescript": "^5.9.2",
70
70
  "unplugin-dts": "^1.0.0-beta.0",
71
- "vite": "^7.1.3",
71
+ "vite": "^7.2.6",
72
72
  "vite-plugin-dts": "^4.5.4",
73
73
  "vite-plugin-static-copy": "^3.1.2"
74
74
  }
File without changes