fluekit 2.2.3 → 2.2.5

package/dist/ActionChip.d.ts

@@ -1,11 +1,4 @@
-import { Component } from 'vue';
-import { Color } from './Color';
-interface Props {
-    label: string;
-    avatar?: Component;
-    backgroundColor?: string | Color;
-    labelColor?: string | Color;
-}
+import { ChilpProps } from './ChipProps';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -15,13 +8,13 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_component: import('vue').DefineComponent<ChilpProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    delete: () => any;
     pressed: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<ChilpProps> & Readonly<{
+    onDelete?: (() => any) | undefined;
     onPressed?: (() => any) | undefined;
-}>, {
-    backgroundColor: string | Color;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/Chip.d.ts

@@ -1,12 +1,7 @@
-import { Component } from 'vue';
+import { BoxDecoration } from './BoxDecoration';
 import { Color } from './Color';
-interface Props {
-    label: string;
-    avatar?: Component;
-    backgroundColor?: string | Color;
-    labelColor?: string | Color;
-    deletable?: boolean;
-}
+import { TextStyle } from './TextStyle';
+import { ChilpProps } from './ChipProps';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -17,14 +12,17 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_component: import('vue').DefineComponent<ChilpProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     delete: () => any;
     pressed: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<ChilpProps> & Readonly<{
     onDelete?: (() => any) | undefined;
     onPressed?: (() => any) | undefined;
 }>, {
+    size: "small" | "medium" | "large";
+    decoration: BoxDecoration;
     backgroundColor: string | Color;
+    labelStyle: TextStyle;
     labelColor: string | Color;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/ChipProps.d.ts

@@ -0,0 +1,28 @@
+import { Component } from 'vue';
+import { BoxDecoration } from './BoxDecoration';
+import { Color } from './Color';
+import { TextStyle } from './TextStyle';
+export interface ChilpProps {
+    label: string;
+    avatar?: Component;
+    backgroundColor?: string | Color;
+    labelColor?: string | Color;
+    deletable?: boolean;
+    size?: "small" | "medium" | "large";
+    width?: number | string;
+    height?: number | string;
+    decoration?: BoxDecoration;
+    labelStyle?: TextStyle;
+}
+export type ChipEmits = {
+    (e: "pressed"): void;
+    (e: "delete"): void;
+};
+export type ChoiceChipEmits = ChipEmits & {
+    (e: "selected", value: boolean): void;
+};
+export interface ChoiceChipProps extends ChilpProps {
+    selected: boolean;
+    selectedColor?: string | Color;
+    selectedTextColor?: string | Color;
+}

package/dist/ChoiceChip.d.ts

@@ -1,13 +1,4 @@
-import { Component } from 'vue';
-import { Color } from './Color';
-interface Props {
-    label: string;
-    selected: boolean;
-    avatar?: Component;
-    backgroundColor?: string | Color;
-    selectedColor?: string | Color;
-    labelColor?: string | Color;
-}
+import { ChoiceChipProps } from './ChipProps';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -17,14 +8,19 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_component: import('vue').DefineComponent<ChoiceChipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    delete: () => any;
+    pressed: () => any;
     selected: (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<ChoiceChipProps> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onPressed?: (() => any) | undefined;
     onSelected?: ((value: boolean) => any) | undefined;
 }>, {
-    backgroundColor: string | Color;
+    backgroundColor: string | import('./Color').Color;
     selected: boolean;
-    selectedColor: string | Color;
+    selectedColor: string | import('./Color').Color;
+    selectedTextColor: string | import('./Color').Color;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/index.css

@@ -1,2 +1,2 @@
-.fluekit-button[data-v-6944da7c]{appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:inherit;box-sizing:border-box;background:0 0;border:0;outline:0;margin:0;padding:0}.fluekit-button[data-v-6944da7c]:disabled{cursor:default}.fluekit-image[data-v-ce382550]{display:block}.fluekit-icon[data-v-96834c76]{-webkit-user-select:none;user-select:none;pointer-events:none}.icon-svg[data-v-96834c76]{fill:currentColor;width:100%;height:100%;display:block}[data-v-96834c76] svg{fill:currentColor;width:100%;height:100%}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:before{content:"";position:html;background-color:var(--v52d32946);border-radius:10px;width:100%;height:25%;display:block}.flue-cupertino-activity-indicator-blade[data-v-bf681109]{opacity:0;animation:1s linear infinite flue-cupertino-fade-bf681109}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:first-child{animation-delay:-1s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(2){animation-delay:-.9167s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(3){animation-delay:-.8333s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(4){animation-delay:-.75s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(5){animation-delay:-.6667s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(6){animation-delay:-.5833s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(7){animation-delay:-.5s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(8){animation-delay:-.4167s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(9){animation-delay:-.3333s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(10){animation-delay:-.25s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(11){animation-delay:-.1667s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(12){animation-delay:-.0833s}@keyframes flue-cupertino-fade-bf681109{0%{opacity:1}to{opacity:.3}}.fluekit-refresh-indicator[data-v-2456a3bd]{height:100%;position:relative;overflow:hidden}.fluekit-refresh-spinner[data-v-2456a3bd]{z-index:10;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin-left:-20px;transition:top .2s,opacity .2s;display:flex;position:absolute;left:50%}.fluekit-refresh-content[data-v-2456a3bd]{height:100%}.fluekit-list-view-wrapper[data-v-2eabca74]{width:100%;height:100%;display:block;overflow:hidden}.flutter-stack[data-v-aefe47c2]>*{grid-area:1/1/2/2}.fluekit-text-field-wrapper[data-v-4fd366e1]{flex-direction:row;align-items:flex-start;width:100%;margin-top:16px;font-family:inherit;display:flex;position:relative}.fluekit-input-icon[data-v-4fd366e1]{color:var(--v25dbf6f2);align-items:center;margin-top:12px;margin-right:16px;display:flex}.fluekit-text-field-content[data-v-4fd366e1]{flex-direction:column;flex:1;display:flex;position:relative}.fluekit-input-container[data-v-4fd366e1]{box-sizing:border-box;width:100%}.fluekit-input-prefix-icon[data-v-4fd366e1],.fluekit-input-suffix-icon[data-v-4fd366e1]{color:#666;align-items:center;padding:0 8px;display:flex}.fluekit-input-prefix-icon[data-v-4fd366e1]{color:var(--v30bb9beb);padding-left:0}.fluekit-input-suffix-icon[data-v-4fd366e1]{color:var(--v824be9ac);padding-right:0}.fluekit-input-element[data-v-4fd366e1]{width:100%;color:inherit;resize:none;background:0 0;border:none;outline:none;flex:1;margin:0;padding:0;font-family:inherit;font-size:16px}.fluekit-input-element[data-v-4fd366e1]::placeholder{color:var(--f433d54e);font-size:var(--v7d5d7598);opacity:1}.fluekit-input-label[data-v-4fd366e1]{z-index:1}.fluekit-input-footer[data-v-4fd366e1]{justify-content:space-between;margin-top:4px;display:flex}.fluekit-input-helper[data-v-4fd366e1]{color:#666;font-size:12px}.fluekit-input-helper-spacer[data-v-4fd366e1]{flex:1}.fluekit-input-counter[data-v-4fd366e1]{color:#666;margin-left:auto;font-size:12px}.fluekit-input-helper.is-error[data-v-4fd366e1]{color:#f44336}.is-invisible[data-v-4fd366e1]{visibility:hidden}.flutter-transform[data-v-c4ab6ce1]{box-sizing:border-box}.ink-well[data-v-a5c5a2ad]{cursor:pointer;display:block;position:relative;overflow:hidden}.ink-well.disabled[data-v-a5c5a2ad]{cursor:default}.ripple[data-v-a5c5a2ad]{pointer-events:none;border-radius:50%;animation:.6s linear ripple-a5c5a2ad;position:absolute;transform:scale(0)}@keyframes ripple-a5c5a2ad{to{opacity:0;transform:scale(4)}}.slider-container[data-v-18cb2b41],.range-slider-container[data-v-f10382ff]{width:100%;position:relative}.bottom-sheet-overlay[data-v-6948b23d]{z-index:9999;background-color:#0000008a;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.flue-cupertino-navigation-bar[data-v-a51399c0]{-webkit-backdrop-filter:blur(20px);z-index:100;width:100%}.flue-nav-bar-middle[data-v-a51399c0]{justify-content:center;align-items:center;max-width:60%;display:flex}.snackbar-overlay[data-v-d8abf3ed]{z-index:9999;pointer-events:none;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.snackbar-overlay[data-v-d8abf3ed]>*{pointer-events:auto}.flue-app-bar-leading[data-v-1fed62cd]{align-items:center;margin-right:16px;display:flex}.flue-app-bar-actions[data-v-1fed62cd]{align-items:center;margin-left:16px;display:flex}.fluekit-bottom-navigation-bar-ios[data-v-11798dea]{-webkit-backdrop-filter:blur(20px)}.fluekit-context-menu-anchor[data-v-8f6a31d2]{display:inline-block}.fluekit-context-menu-overlay[data-v-8f6a31d2]{z-index:9999;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.fluekit-context-menu-backdrop[data-v-8f6a31d2]{-webkit-backdrop-filter:blur(10px);background:#0006;width:100%;height:100%;position:absolute;top:0;left:0}.fluekit-context-menu-content[data-v-8f6a31d2]{z-index:10001;width:250px;animation:.2s ease-out scale-in-8f6a31d2;position:relative}.fluekit-action-group[data-v-8f6a31d2]{-webkit-backdrop-filter:blur(20px);background:#f9f9f9c7;border-radius:14px;margin-bottom:16px;overflow:hidden}.fluekit-context-menu-action[data-v-8f6a31d2]{text-align:center;cursor:pointer;background:0 0;border-bottom:.5px solid #0000001a;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex}.fluekit-context-menu-action[data-v-8f6a31d2]:last-child{border-bottom:none}.fluekit-context-menu-action[data-v-8f6a31d2]:active{background:#0000001a}.action-text[data-v-8f6a31d2]{color:#007aff;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px}.is-destructive .action-text[data-v-8f6a31d2]{color:#ff3b30}.is-default .action-text[data-v-8f6a31d2]{font-weight:600}.cancel-group[data-v-8f6a31d2]{margin-top:8px}.cancel-action .action-text[data-v-8f6a31d2]{font-weight:600}.fade-enter-active[data-v-8f6a31d2],.fade-leave-active[data-v-8f6a31d2]{transition:opacity .2s}.fade-enter-from[data-v-8f6a31d2],.fade-leave-to[data-v-8f6a31d2]{opacity:0}@keyframes scale-in-8f6a31d2{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.flue-aspect-ratio[data-v-e23e6712]{grid-template-rows:100%;grid-template-columns:100%;display:grid}.flue-image-color-background[data-v-de3ea6be]{box-sizing:border-box;flex-direction:column;display:flex}.flue-linear-progress-indicator[data-v-111d0e67]{border-radius:0}@keyframes flue-linear-indeterminate-111d0e67{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}@keyframes flue-circular-rotate-bb62fbeb{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes flue-circular-dash-bb62fbeb{0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:89 200;stroke-dashoffset:-35px}to{stroke-dasharray:89 200;stroke-dashoffset:-124px}}.fluekit-overlay-fade-enter-active[data-v-ca626865],.fluekit-overlay-fade-leave-active[data-v-ca626865]{transition:opacity .25s}.fluekit-overlay-fade-enter-from[data-v-ca626865],.fluekit-overlay-fade-leave-to[data-v-ca626865]{opacity:0}.fluekit-drawer-root[data-v-7181dfec]{pointer-events:none;z-index:1000;position:absolute;inset:0}.fluekit-drawer-slide-enter-active[data-v-7181dfec],.fluekit-drawer-slide-leave-active[data-v-7181dfec]{transition:transform .3s}.fluekit-drawer-slide-enter-from[data-v-7181dfec],.fluekit-drawer-slide-leave-to[data-v-7181dfec]{transform:translate(-100%)}.fluekit-drawer-slide-end-enter-active[data-v-7181dfec],.fluekit-drawer-slide-end-leave-active[data-v-7181dfec]{transition:transform .3s}.fluekit-drawer-slide-end-enter-from[data-v-7181dfec],.fluekit-drawer-slide-end-leave-to[data-v-7181dfec]{transform:translate(100%)}.popup-scale-enter-active[data-v-5d7cdcaa],.popup-scale-leave-active[data-v-5d7cdcaa]{transform-origin:100% 0;transition:opacity .2s,transform .2s}.popup-scale-enter-from[data-v-5d7cdcaa],.popup-scale-leave-to[data-v-5d7cdcaa]{opacity:0;transform:scale(.9)}.fluekit-chip-avatar[data-v-4a66cf54]{border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;overflow:hidden}.fluekit-chip-delete-icon[data-v-4a66cf54]{cursor:pointer;opacity:.54;justify-content:center;align-items:center;margin-left:4px;display:flex}.fluekit-chip-delete-icon[data-v-4a66cf54]:hover{opacity:.87}.fluekit-tab-bar-view[data-v-e20dd01b]{flex:1;width:100%;height:100%;display:flex;overflow:hidden}.fluekit-tab-bar-view-content[data-v-e20dd01b]{width:100%;height:100%;transition:transform .3s cubic-bezier(.25,.8,.25,1);display:flex}[data-v-e20dd01b]>*{flex:0 0 100%;width:100%;height:100%}.fluekit-rating-bar[data-v-6b4f086d]{-webkit-user-select:none;user-select:none}.fluekit-rating-item[data-v-6b4f086d]{justify-content:center;align-items:center;display:flex}
+.fluekit-button[data-v-6944da7c]{appearance:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:inherit;box-sizing:border-box;background:0 0;border:0;outline:0;margin:0;padding:0}.fluekit-button[data-v-6944da7c]:disabled{cursor:default}.fluekit-image[data-v-ce382550]{display:block}.fluekit-icon[data-v-96834c76]{-webkit-user-select:none;user-select:none;pointer-events:none}.icon-svg[data-v-96834c76]{fill:currentColor;width:100%;height:100%;display:block}[data-v-96834c76] svg{fill:currentColor;width:100%;height:100%}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:before{content:"";position:html;background-color:var(--v52d32946);border-radius:10px;width:100%;height:25%;display:block}.flue-cupertino-activity-indicator-blade[data-v-bf681109]{opacity:0;animation:1s linear infinite flue-cupertino-fade-bf681109}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:first-child{animation-delay:-1s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(2){animation-delay:-.9167s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(3){animation-delay:-.8333s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(4){animation-delay:-.75s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(5){animation-delay:-.6667s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(6){animation-delay:-.5833s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(7){animation-delay:-.5s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(8){animation-delay:-.4167s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(9){animation-delay:-.3333s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(10){animation-delay:-.25s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(11){animation-delay:-.1667s}.flue-cupertino-activity-indicator-blade[data-v-bf681109]:nth-child(12){animation-delay:-.0833s}@keyframes flue-cupertino-fade-bf681109{0%{opacity:1}to{opacity:.3}}.fluekit-refresh-indicator[data-v-2456a3bd]{height:100%;position:relative;overflow:hidden}.fluekit-refresh-spinner[data-v-2456a3bd]{z-index:10;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin-left:-20px;transition:top .2s,opacity .2s;display:flex;position:absolute;left:50%}.fluekit-refresh-content[data-v-2456a3bd]{height:100%}.fluekit-list-view-wrapper[data-v-2eabca74]{width:100%;height:100%;display:block;overflow:hidden}.flutter-stack[data-v-aefe47c2]>*{grid-area:1/1/2/2}.fluekit-text-field-wrapper[data-v-4fd366e1]{flex-direction:row;align-items:flex-start;width:100%;margin-top:16px;font-family:inherit;display:flex;position:relative}.fluekit-input-icon[data-v-4fd366e1]{color:var(--v25dbf6f2);align-items:center;margin-top:12px;margin-right:16px;display:flex}.fluekit-text-field-content[data-v-4fd366e1]{flex-direction:column;flex:1;display:flex;position:relative}.fluekit-input-container[data-v-4fd366e1]{box-sizing:border-box;width:100%}.fluekit-input-prefix-icon[data-v-4fd366e1],.fluekit-input-suffix-icon[data-v-4fd366e1]{color:#666;align-items:center;padding:0 8px;display:flex}.fluekit-input-prefix-icon[data-v-4fd366e1]{color:var(--v30bb9beb);padding-left:0}.fluekit-input-suffix-icon[data-v-4fd366e1]{color:var(--v824be9ac);padding-right:0}.fluekit-input-element[data-v-4fd366e1]{width:100%;color:inherit;resize:none;background:0 0;border:none;outline:none;flex:1;margin:0;padding:0;font-family:inherit;font-size:16px}.fluekit-input-element[data-v-4fd366e1]::placeholder{color:var(--f433d54e);font-size:var(--v7d5d7598);opacity:1}.fluekit-input-label[data-v-4fd366e1]{z-index:1}.fluekit-input-footer[data-v-4fd366e1]{justify-content:space-between;margin-top:4px;display:flex}.fluekit-input-helper[data-v-4fd366e1]{color:#666;font-size:12px}.fluekit-input-helper-spacer[data-v-4fd366e1]{flex:1}.fluekit-input-counter[data-v-4fd366e1]{color:#666;margin-left:auto;font-size:12px}.fluekit-input-helper.is-error[data-v-4fd366e1]{color:#f44336}.is-invisible[data-v-4fd366e1]{visibility:hidden}.flutter-transform[data-v-c4ab6ce1]{box-sizing:border-box}.ink-well[data-v-a5c5a2ad]{cursor:pointer;display:block;position:relative;overflow:hidden}.ink-well.disabled[data-v-a5c5a2ad]{cursor:default}.ripple[data-v-a5c5a2ad]{pointer-events:none;border-radius:50%;animation:.6s linear ripple-a5c5a2ad;position:absolute;transform:scale(0)}@keyframes ripple-a5c5a2ad{to{opacity:0;transform:scale(4)}}.slider-container[data-v-18cb2b41],.range-slider-container[data-v-f10382ff]{width:100%;position:relative}.bottom-sheet-overlay[data-v-6948b23d]{z-index:9999;background-color:#0000008a;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.flue-cupertino-navigation-bar[data-v-a51399c0]{-webkit-backdrop-filter:blur(20px);z-index:100;width:100%}.flue-nav-bar-middle[data-v-a51399c0]{justify-content:center;align-items:center;max-width:60%;display:flex}.snackbar-overlay[data-v-d8abf3ed]{z-index:9999;pointer-events:none;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.snackbar-overlay[data-v-d8abf3ed]>*{pointer-events:auto}.flue-app-bar-leading[data-v-1fed62cd]{align-items:center;margin-right:16px;display:flex}.flue-app-bar-actions[data-v-1fed62cd]{align-items:center;margin-left:16px;display:flex}.fluekit-bottom-navigation-bar-ios[data-v-11798dea]{-webkit-backdrop-filter:blur(20px)}.fluekit-context-menu-anchor[data-v-8f6a31d2]{display:inline-block}.fluekit-context-menu-overlay[data-v-8f6a31d2]{z-index:9999;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.fluekit-context-menu-backdrop[data-v-8f6a31d2]{-webkit-backdrop-filter:blur(10px);background:#0006;width:100%;height:100%;position:absolute;top:0;left:0}.fluekit-context-menu-content[data-v-8f6a31d2]{z-index:10001;width:250px;animation:.2s ease-out scale-in-8f6a31d2;position:relative}.fluekit-action-group[data-v-8f6a31d2]{-webkit-backdrop-filter:blur(20px);background:#f9f9f9c7;border-radius:14px;margin-bottom:16px;overflow:hidden}.fluekit-context-menu-action[data-v-8f6a31d2]{text-align:center;cursor:pointer;background:0 0;border-bottom:.5px solid #0000001a;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex}.fluekit-context-menu-action[data-v-8f6a31d2]:last-child{border-bottom:none}.fluekit-context-menu-action[data-v-8f6a31d2]:active{background:#0000001a}.action-text[data-v-8f6a31d2]{color:#007aff;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px}.is-destructive .action-text[data-v-8f6a31d2]{color:#ff3b30}.is-default .action-text[data-v-8f6a31d2]{font-weight:600}.cancel-group[data-v-8f6a31d2]{margin-top:8px}.cancel-action .action-text[data-v-8f6a31d2]{font-weight:600}.fade-enter-active[data-v-8f6a31d2],.fade-leave-active[data-v-8f6a31d2]{transition:opacity .2s}.fade-enter-from[data-v-8f6a31d2],.fade-leave-to[data-v-8f6a31d2]{opacity:0}@keyframes scale-in-8f6a31d2{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.flue-aspect-ratio[data-v-e23e6712]{grid-template-rows:100%;grid-template-columns:100%;display:grid}.flue-image-color-background[data-v-4e1ca59f]{box-sizing:border-box;flex-direction:column;display:flex}.flue-linear-progress-indicator[data-v-111d0e67]{border-radius:0}@keyframes flue-linear-indeterminate-111d0e67{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}@keyframes flue-circular-rotate-bb62fbeb{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes flue-circular-dash-bb62fbeb{0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:89 200;stroke-dashoffset:-35px}to{stroke-dasharray:89 200;stroke-dashoffset:-124px}}.fluekit-overlay-fade-enter-active[data-v-ca626865],.fluekit-overlay-fade-leave-active[data-v-ca626865]{transition:opacity .25s}.fluekit-overlay-fade-enter-from[data-v-ca626865],.fluekit-overlay-fade-leave-to[data-v-ca626865]{opacity:0}.fluekit-drawer-root[data-v-7181dfec]{pointer-events:none;z-index:1000;position:absolute;inset:0}.fluekit-drawer-slide-enter-active[data-v-7181dfec],.fluekit-drawer-slide-leave-active[data-v-7181dfec]{transition:transform .3s}.fluekit-drawer-slide-enter-from[data-v-7181dfec],.fluekit-drawer-slide-leave-to[data-v-7181dfec]{transform:translate(-100%)}.fluekit-drawer-slide-end-enter-active[data-v-7181dfec],.fluekit-drawer-slide-end-leave-active[data-v-7181dfec]{transition:transform .3s}.fluekit-drawer-slide-end-enter-from[data-v-7181dfec],.fluekit-drawer-slide-end-leave-to[data-v-7181dfec]{transform:translate(100%)}.popup-scale-enter-active[data-v-5d7cdcaa],.popup-scale-leave-active[data-v-5d7cdcaa]{transform-origin:100% 0;transition:opacity .2s,transform .2s}.popup-scale-enter-from[data-v-5d7cdcaa],.popup-scale-leave-to[data-v-5d7cdcaa]{opacity:0;transform:scale(.9)}.fluekit-chip-avatar[data-v-9c9e3326]{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.fluekit-chip-delete-icon[data-v-9c9e3326]{cursor:pointer;opacity:.54;justify-content:center;align-items:center;margin-left:4px;display:flex}.fluekit-chip-delete-icon[data-v-9c9e3326]:hover{opacity:.87}.fluekit-tab-bar-view[data-v-e20dd01b]{flex:1;width:100%;height:100%;display:flex;overflow:hidden}.fluekit-tab-bar-view-content[data-v-e20dd01b]{width:100%;height:100%;transition:transform .3s cubic-bezier(.25,.8,.25,1);display:flex}[data-v-e20dd01b]>*{flex:0 0 100%;width:100%;height:100%}.fluekit-rating-bar[data-v-6b4f086d]{-webkit-user-select:none;user-select:none}.fluekit-rating-item[data-v-6b4f086d]{justify-content:center;align-items:center;display:flex}
 /*$vite$:1*/

package/dist/index.js

@@ -1154,7 +1154,7 @@ var GestureDetector_default = defineComponent({
 			return e ? e.type === Text ? h("span", g, [e]) : isHtmlTag(e) ? cloneVNode(e, g) : e : null;
 		};
 	}
-}), _hoisted_1$16 = ["disabled"], Button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+}), _hoisted_1$15 = ["disabled"], Button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "Button",
 	props: {
@@ -1216,7 +1216,7 @@ var GestureDetector_default = defineComponent({
 				class: "fluekit-button",
 				style: C.value,
 				disabled: e.disabled
-			}, unref(_)), [renderSlot(f.$slots, "default", {}, () => [createTextVNode(toDisplayString(p.text), 1)], !0)], 16, _hoisted_1$16)]),
+			}, unref(_)), [renderSlot(f.$slots, "default", {}, () => [createTextVNode(toDisplayString(p.text), 1)], !0)], 16, _hoisted_1$15)]),
 			_: 3
 		}, 8, [
 			"behavior",
@@ -1658,7 +1658,7 @@ function ImageProvider(e) {
 		[IMAGE_PROVIDER_SYMBOL]: !0
 	} : e.startsWith("http") ? NetworkImage(e) : e.startsWith("data:") ? MemoryImage(e) : AssetImage(e);
 }
-var _hoisted_1$15 = ["src", "alt"], Image_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+var _hoisted_1$14 = ["src", "alt"], Image_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "Image",
 	props: {
@@ -1716,9 +1716,9 @@ var _hoisted_1$15 = ["src", "alt"], Image_default = /* @__PURE__ */ __plugin_vue
 			alt: e.alt,
 			onLoad: w,
 			onError: T
-		}, null, 44, _hoisted_1$15)], 16));
+		}, null, 44, _hoisted_1$14)], 16));
 	}
-}), [["__scopeId", "data-v-ce382550"]]), _hoisted_1$14 = ["aria-label"], _hoisted_2$5 = ["width", "height"], _hoisted_3$4 = ["d"], Icon_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-ce382550"]]), _hoisted_1$13 = ["aria-label"], _hoisted_2$5 = ["width", "height"], _hoisted_3$4 = ["d"], Icon_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "Icon",
 	props: {
@@ -1765,7 +1765,7 @@ var _hoisted_1$15 = ["src", "alt"], Image_default = /* @__PURE__ */ __plugin_vue
 			fill: "currentColor",
 			xmlns: "http://www.w3.org/2000/svg",
 			class: "icon-svg"
-		}, [createElementVNode("path", { d: e.icon }, null, 8, _hoisted_3$4)], 8, _hoisted_2$5)) : createCommentVNode("", !0)], !0)], 16, _hoisted_1$14));
+		}, [createElementVNode("path", { d: e.icon }, null, 8, _hoisted_3$4)], 8, _hoisted_2$5)) : createCommentVNode("", !0)], !0)], 16, _hoisted_1$13));
 	}
 }), [["__scopeId", "data-v-96834c76"]]);
 const Colors = {
@@ -2224,7 +2224,7 @@ var CupertinoActivityIndicator_default = /* @__PURE__ */ __plugin_vue_export_hel
 			style: normalizeStyle(C.value)
 		}, [renderSlot(f.$slots, "default", {}, void 0, !0)], 4)], 544));
 	}
-}), [["__scopeId", "data-v-2456a3bd"]]), _hoisted_1$13 = {
+}), [["__scopeId", "data-v-2456a3bd"]]), _hoisted_1$12 = {
 	key: 0,
 	class: "list-view-separator"
 }, ListView_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -2271,7 +2271,7 @@ var CupertinoActivityIndicator_default = /* @__PURE__ */ __plugin_vue_export_hel
 				default: withCtx(() => [createElementVNode("div", {
 					class: "list-view-content",
 					style: normalizeStyle(m.value)
-				}, [e.itemCount ? (openBlock(!0), createElementBlock(Fragment, { key: 1 }, renderList(e.itemCount, (m) => (openBlock(), createElementBlock(Fragment, { key: m - 1 }, [renderSlot(p.$slots, "item", { index: m - 1 }, void 0, !0), e.separator && m < e.itemCount ? (openBlock(), createElementBlock("div", _hoisted_1$13, [renderSlot(p.$slots, "separator", { index: m - 1 }, void 0, !0)])) : createCommentVNode("", !0)], 64))), 128)) : renderSlot(p.$slots, "default", { key: 0 }, void 0, !0)], 4)]),
+				}, [e.itemCount ? (openBlock(!0), createElementBlock(Fragment, { key: 1 }, renderList(e.itemCount, (m) => (openBlock(), createElementBlock(Fragment, { key: m - 1 }, [renderSlot(p.$slots, "item", { index: m - 1 }, void 0, !0), e.separator && m < e.itemCount ? (openBlock(), createElementBlock("div", _hoisted_1$12, [renderSlot(p.$slots, "separator", { index: m - 1 }, void 0, !0)])) : createCommentVNode("", !0)], 64))), 128)) : renderSlot(p.$slots, "default", { key: 0 }, void 0, !0)], 4)]),
 				_: 3
 			}, 8, [
 				"scroll-direction",
@@ -2588,7 +2588,7 @@ const FloatingLabelBehavior = {
 function InputDecoration(e = {}) {
 	return e.floatingLabelBehavior = e.floatingLabelBehavior || FloatingLabelBehavior.never, e;
 }
-var _hoisted_1$12 = {
+var _hoisted_1$11 = {
 	key: 0,
 	class: "fluekit-input-icon"
 }, _hoisted_2$4 = { class: "fluekit-text-field-content" }, _hoisted_3$3 = {
@@ -2765,7 +2765,7 @@ var _hoisted_1$12 = {
 			"has-error": !!e.decoration?.errorText,
 			"is-collapsed": e.decoration?.isCollapsed,
 			"is-dense": e.decoration?.isDense
-		}]) }, [f.$slots.icon || e.decoration?.icon ? (openBlock(), createElementBlock("div", _hoisted_1$12, [renderSlot(f.$slots, "icon", {}, () => [createVNode(Icon_default, {
+		}]) }, [f.$slots.icon || e.decoration?.icon ? (openBlock(), createElementBlock("div", _hoisted_1$11, [renderSlot(f.$slots, "icon", {}, () => [createVNode(Icon_default, {
 			icon: e.decoration?.icon,
 			size: e.decoration?.iconSize,
 			color: e.decoration?.iconColor
@@ -3393,7 +3393,7 @@ var Transform_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @_
 	}
 });
 const CheckboxGroupKey = Symbol("CheckboxGroup");
-var _hoisted_1$11 = ["fill"], Checkbox_default = /* @__PURE__ */ defineComponent({
+var _hoisted_1$10 = ["fill"], Checkbox_default = /* @__PURE__ */ defineComponent({
 	__name: "Checkbox",
 	props: {
 		value: {},
@@ -3446,7 +3446,7 @@ var _hoisted_1$11 = ["fill"], Checkbox_default = /* @__PURE__ */ defineComponent
 							height: 14,
 							fill: unref(resolveColor)(e.checkColor),
 							style: { display: "block" }
-						}, [...p[0] ||= [createElementVNode("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }, null, -1)]], 8, _hoisted_1$11)) : createCommentVNode("", !0)]),
+						}, [...p[0] ||= [createElementVNode("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }, null, -1)]], 8, _hoisted_1$10)) : createCommentVNode("", !0)]),
 						_: 1
 					}, 8, ["decoration"])),
 					e.labelPosition === "right" ? renderSlot(f.$slots, "default", { key: 2 }) : createCommentVNode("", !0)
@@ -3456,7 +3456,7 @@ var _hoisted_1$11 = ["fill"], Checkbox_default = /* @__PURE__ */ defineComponent
 			_: 3
 		}));
 	}
-}), _hoisted_1$10 = { class: "flue-checkbox-group" }, CheckboxGroup_default = /* @__PURE__ */ defineComponent({
+}), _hoisted_1$9 = { class: "flue-checkbox-group" }, CheckboxGroup_default = /* @__PURE__ */ defineComponent({
 	__name: "CheckboxGroup",
 	props: {
 		value: { default: () => [] },
@@ -3475,7 +3475,7 @@ var _hoisted_1$11 = ["fill"], Checkbox_default = /* @__PURE__ */ defineComponent
 			value: _,
 			disabled: v,
 			updateValue: g
-		}), (e, f) => (openBlock(), createElementBlock("div", _hoisted_1$10, [renderSlot(e.$slots, "default")]));
+		}), (e, f) => (openBlock(), createElementBlock("div", _hoisted_1$9, [renderSlot(e.$slots, "default")]));
 	}
 });
 const RadioGroupKey = Symbol("RadioGroup");
@@ -3540,7 +3540,7 @@ var Radio_default = /* @__PURE__ */ defineComponent({
 			_: 3
 		}));
 	}
-}), _hoisted_1$9 = { class: "flue-radio-group" }, RadioGroup_default = /* @__PURE__ */ defineComponent({
+}), _hoisted_1$8 = { class: "flue-radio-group" }, RadioGroup_default = /* @__PURE__ */ defineComponent({
 	__name: "RadioGroup",
 	props: {
 		value: {},
@@ -3560,7 +3560,7 @@ var Radio_default = /* @__PURE__ */ defineComponent({
 			updateValue: g,
 			activeColor: v,
 			disabled: y
-		}), (e, f) => (openBlock(), createElementBlock("div", _hoisted_1$9, [renderSlot(e.$slots, "default")]));
+		}), (e, f) => (openBlock(), createElementBlock("div", _hoisted_1$8, [renderSlot(e.$slots, "default")]));
 	}
 }), RadioListTile_default = /* @__PURE__ */ defineComponent({
 	__name: "RadioListTile",
@@ -4451,7 +4451,7 @@ var MediaQuery_default = /* @__PURE__ */ defineComponent({
 			_: 3
 		}, 8, ["color"]));
 	}
-}), _hoisted_1$8 = { class: "flue-cupertino-navigation-bar" }, _hoisted_2$3 = {
+}), _hoisted_1$7 = { class: "flue-cupertino-navigation-bar" }, _hoisted_2$3 = {
 	key: 0,
 	class: "flue-nav-bar-leading"
 }, _hoisted_3$2 = { class: "flue-nav-bar-middle" }, _hoisted_4$1 = {
@@ -4476,7 +4476,7 @@ var MediaQuery_default = /* @__PURE__ */ defineComponent({
 			color: "#000000",
 			fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
 		});
-		return (f, _) => (openBlock(), createElementBlock("div", _hoisted_1$8, [createVNode(Container_default, {
+		return (f, _) => (openBlock(), createElementBlock("div", _hoisted_1$7, [createVNode(Container_default, {
 			height: 44,
 			width: "100%",
 			color: e.backgroundColor,
@@ -4535,7 +4535,7 @@ var MediaQuery_default = /* @__PURE__ */ defineComponent({
 			"padding"
 		])]));
 	}
-}), [["__scopeId", "data-v-a51399c0"]]), _hoisted_1$7 = { class: "snackbar-overlay" }, SnackBarComponent_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-a51399c0"]]), _hoisted_1$6 = { class: "snackbar-overlay" }, SnackBarComponent_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "SnackBarComponent",
 	props: {
 		content: {},
@@ -4564,7 +4564,7 @@ var MediaQuery_default = /* @__PURE__ */ defineComponent({
 				}
 			}]
 		}));
-		return (f, p) => (openBlock(), createElementBlock("div", _hoisted_1$7, [createVNode(Container_default, {
+		return (f, p) => (openBlock(), createElementBlock("div", _hoisted_1$6, [createVNode(Container_default, {
 			margin: unref(EdgeInsets).all(8),
 			padding: unref(EdgeInsets).symmetric({
 				horizontal: 16,
@@ -4776,7 +4776,7 @@ const Icons = {
 	starBorder: "M19.65 9.04l-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.68-3.18c.67-.58.32-1.68-.56-1.75zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.01 4.38.38-3.32 2.88 1 4.28L12 15.4z",
 	starHalf: "M19.65 9.04l-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.68-3.18c.67-.58.32-1.68-.56-1.75zM12 15.4V6.1l1.71 4.01 4.38.38-3.32 2.88 1 4.28L12 15.4z"
 };
-var _hoisted_1$6 = {
+var _hoisted_1$5 = {
 	key: 0,
 	class: "flue-app-bar-leading"
 }, _hoisted_2$2 = {
@@ -4826,7 +4826,7 @@ var _hoisted_1$6 = {
 				expanded: ""
 			}, {
 				default: withCtx(() => [
-					f.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_1$6, [renderSlot(f.$slots, "leading", {}, void 0, !0)])) : unref(p) ? (openBlock(), createElementBlock("div", _hoisted_2$2, [createVNode(IconButton_default, {
+					f.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(f.$slots, "leading", {}, void 0, !0)])) : unref(p) ? (openBlock(), createElementBlock("div", _hoisted_2$2, [createVNode(IconButton_default, {
 						icon: unref(Icons).menu,
 						color: "blue",
 						onPressed: unref(m)
@@ -4959,7 +4959,7 @@ var _hoisted_1$6 = {
 			"padding"
 		]));
 	}
-}), [["__scopeId", "data-v-11798dea"]]), _hoisted_1$5 = { class: "fluekit-context-menu-anchor" }, _hoisted_2$1 = { class: "fluekit-action-group" }, _hoisted_3 = ["onClick"], _hoisted_4 = { class: "action-text" }, CupertinoContextMenu_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-11798dea"]]), _hoisted_1$4 = { class: "fluekit-context-menu-anchor" }, _hoisted_2$1 = { class: "fluekit-action-group" }, _hoisted_3 = ["onClick"], _hoisted_4 = { class: "action-text" }, CupertinoContextMenu_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "CupertinoContextMenu",
 	props: { actions: {} },
 	setup(e) {
@@ -4970,7 +4970,7 @@ var _hoisted_1$6 = {
 		}, C = (e) => {
 			e.onPressed && e.onPressed(), v();
 		};
-		return (w, E) => (openBlock(), createElementBlock("div", _hoisted_1$5, [createVNode(GestureDetector_default, { onLongPress: _ }, {
+		return (w, E) => (openBlock(), createElementBlock("div", _hoisted_1$4, [createVNode(GestureDetector_default, { onLongPress: _ }, {
 			default: withCtx(() => [renderSlot(w.$slots, "default", {}, void 0, !0)]),
 			_: 3
 		}), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "fade" }, {
@@ -5064,8 +5064,8 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 	},
 	setup(e) {
 		let f = e, p = ref(null), m = ref(!0), g = computed(() => ({
-			width: typeof f.width == "number" ? `${f.width}px` : f.width,
-			height: typeof f.height == "number" ? `${f.height}px` : f.height,
+			width: px2vw$1(f.width),
+			height: px2vw$1(f.height),
 			backgroundColor: p.value ? p.value.withOpacity(f.opacity).toString() : "transparent",
 			transition: "background-color 0.5s ease"
 		})), _ = async (e) => {
@@ -5083,7 +5083,7 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 			isLoading: m.value
 		}, void 0, !0)], 4));
 	}
-}), [["__scopeId", "data-v-de3ea6be"]]), LinearProgressIndicator_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-4e1ca59f"]]), LinearProgressIndicator_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "LinearProgressIndicator",
 	props: {
 		value: { default: null },
@@ -5125,7 +5125,7 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 			style: normalizeStyle(m.value)
 		}, null, 4)], 4));
 	}
-}), [["__scopeId", "data-v-111d0e67"]]), _hoisted_1$4 = ["stroke", "stroke-width"], _hoisted_2 = [
+}), [["__scopeId", "data-v-111d0e67"]]), _hoisted_1$3 = ["stroke", "stroke-width"], _hoisted_2 = [
 	"stroke",
 	"stroke-width",
 	"stroke-dasharray",
@@ -5168,7 +5168,7 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 			fill: "none",
 			stroke: unref(resolveColor)(e.backgroundColor) || "transparent",
 			"stroke-width": e.strokeWidth
-		}, null, 8, _hoisted_1$4), createElementVNode("circle", {
+		}, null, 8, _hoisted_1$3), createElementVNode("circle", {
 			class: "flue-circular-progress-value",
 			cx: "20",
 			cy: "20",
@@ -5213,7 +5213,7 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 			_: 3
 		}));
 	}
-}), [["__scopeId", "data-v-ca626865"]]), _hoisted_1$3 = { class: "fluekit-drawer-root" }, Drawer_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-ca626865"]]), _hoisted_1$2 = { class: "fluekit-drawer-root" }, Drawer_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "Drawer",
 	props: /* @__PURE__ */ mergeModels({
@@ -5274,7 +5274,7 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 			let e = {};
 			return p.edge === "end" ? e.right = 0 : e.left = 0, e.top = 0, e.bottom = 0, e.zIndex = p.elevation, e;
 		});
-		return (f, p) => (openBlock(), createElementBlock("div", _hoisted_1$3, [createVNode(Stack_default, { fit: unref(StackFit).expand }, {
+		return (f, p) => (openBlock(), createElementBlock("div", _hoisted_1$2, [createVNode(Stack_default, { fit: unref(StackFit).expand }, {
 			default: withCtx(() => [createVNode(Transition, { name: e.edge === "end" ? "fluekit-drawer-slide-end" : "fluekit-drawer-slide" }, {
 				default: withCtx(() => [m.value ? (openBlock(), createBlock(unref(Positioned_default), normalizeProps(mergeProps({ key: 0 }, E.value)), {
 					default: withCtx(() => [createVNode(Container_default, {
@@ -5537,10 +5537,7 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 			_: 3
 		}));
 	}
-}), [["__scopeId", "data-v-5d7cdcaa"]]), _hoisted_1$2 = {
-	key: 0,
-	class: "fluekit-chip-avatar"
-}, Chip_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-5d7cdcaa"]]), Chip_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "Chip",
 	props: {
@@ -5548,72 +5545,117 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 		avatar: {},
 		backgroundColor: { default: "#E0E0E0" },
 		labelColor: { default: "rgba(0, 0, 0, 0.87)" },
-		deletable: { type: Boolean }
+		deletable: { type: Boolean },
+		size: { default: "medium" },
+		width: {},
+		height: {},
+		decoration: { default: () => ({}) },
+		labelStyle: { default: () => ({}) }
 	},
 	emits: ["pressed", "delete"],
 	setup(e, { emit: f }) {
-		let p = e, m = f, g = () => {
-			p.deletable && m("delete");
-		}, _ = () => m("pressed"), S = computed(() => EdgeInsets.fromLTRB(p.avatar ? 4 : 12, 4, p.deletable ? 8 : 12, 4)), C = computed(() => BoxDecoration({
+		let p = useSlots(), m = e, g = f, _ = () => {
+			m.deletable && g("delete");
+		}, S = () => g("pressed"), C = computed(() => {
+			let e = m.size === "small" ? "8px" : m.size === "large" ? "16px" : "12px", f = m.size === "small" ? 0 : m.size === "large" ? "8px" : "4px";
+			return EdgeInsets.fromLTRB(p.avatar || m.avatar ? "4px" : e, f, m.deletable ? m.size === "small" ? "4px" : "8px" : e, f);
+		}), E = computed(() => BoxDecoration({
 			borderRadius: BorderRadius.circular(16),
-			color: p.backgroundColor
-		})), E = computed(() => TextStyle({
-			color: p.labelColor,
-			fontSize: 14
-		}));
-		return (f, p) => (openBlock(), createBlock(GestureDetector_default, { onTap: _ }, {
-			default: withCtx(() => [createVNode(Row_default, { mainAxisSize: "min" }, {
-				default: withCtx(() => [createVNode(Container_default, {
-					padding: S.value,
-					decoration: C.value
+			color: m.backgroundColor,
+			...m.decoration ?? {}
+		})), D = computed(() => {
+			let e = m.size === "small" ? 12 : m.size === "large" ? 16 : 14;
+			return TextStyle({
+				color: m.labelColor,
+				fontSize: e,
+				...m.labelStyle ?? {}
+			});
+		}), O = computed(() => Alignment.center), k = computed(() => m.size === "small" ? "16px" : m.size === "large" ? "20px" : "18px"), A = computed(() => m.size === "small" ? "18px" : m.size === "large" ? "32px" : "24px"), j = computed(() => {
+			let e = {
+				width: px2vw$1(A.value),
+				height: px2vw$1(A.value)
+			};
+			if (typeof m.avatar != "string") return e;
+			let f = m.avatar;
+			return f.startsWith("/") || f.startsWith("http://") || f.startsWith("https://") || f.startsWith("data:") ? {
+				...e,
+				...decorationImageToStyle(DecorationImage({
+					image: ImageProvider(m.avatar),
+					alignment: Alignment.center,
+					fit: BoxFit.cover
+				}))
+			} : e;
+		});
+		return (f, p) => (openBlock(), createBlock(GestureDetector_default, { onTap: S }, {
+			default: withCtx(() => [createVNode(Container_default, {
+				padding: C.value,
+				decoration: E.value,
+				width: e.width,
+				height: e.height,
+				alignment: O.value
+			}, {
+				default: withCtx(() => [createVNode(Row_default, {
+					expanded: "",
+					crossAxisAlignment: "center",
+					gap: 8,
+					mainAxisAlignment: "start"
 				}, {
-					default: withCtx(() => [createVNode(Row_default, {
-						mainAxisSize: "min",
-						crossAxisAlignment: "center",
-						gap: 8
-					}, {
-						default: withCtx(() => [
-							e.avatar || f.$slots.avatar ? (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(f.$slots, "avatar", {}, () => [e.avatar ? (openBlock(), createBlock(resolveDynamicComponent(e.avatar), { key: 0 })) : createCommentVNode("", !0)], !0)])) : createCommentVNode("", !0),
-							createVNode(Text_default, { style: normalizeStyle(E.value) }, {
-								default: withCtx(() => [createTextVNode(toDisplayString(e.label), 1)]),
-								_: 1
-							}, 8, ["style"]),
-							e.deletable ? (openBlock(), createElementBlock("div", {
-								key: 1,
-								class: "fluekit-chip-delete-icon",
-								onClick: withModifiers(g, ["stop"])
-							}, [renderSlot(f.$slots, "deleteIcon", {}, () => [createVNode(Icon_default, {
-								icon: unref(Icons).cancel,
-								size: 18
-							}, null, 8, ["icon"])], !0)])) : createCommentVNode("", !0)
-						]),
-						_: 3
-					})]),
+					default: withCtx(() => [
+						e.avatar || f.$slots.avatar ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: "fluekit-chip-avatar",
+							style: normalizeStyle(j.value)
+						}, [renderSlot(f.$slots, "avatar", {}, () => [e.avatar ? (openBlock(), createBlock(resolveDynamicComponent(e.avatar), { key: 0 })) : createCommentVNode("", !0)], !0)], 4)) : createCommentVNode("", !0),
+						createVNode(Text_default, { style: normalizeStyle(D.value) }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(e.label), 1)]),
+							_: 1
+						}, 8, ["style"]),
+						e.deletable ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: "fluekit-chip-delete-icon",
+							onClick: withModifiers(_, ["stop"])
+						}, [renderSlot(f.$slots, "deleteIcon", {}, () => [createVNode(Icon_default, {
+							icon: unref(Icons).cancel,
+							size: k.value
+						}, null, 8, ["icon", "size"])], !0)])) : createCommentVNode("", !0)
+					]),
 					_: 3
-				}, 8, ["padding", "decoration"])]),
+				})]),
 				_: 3
-			})]),
+			}, 8, [
+				"padding",
+				"decoration",
+				"width",
+				"height",
+				"alignment"
+			])]),
 			_: 3
 		}));
 	}
-}), [["__scopeId", "data-v-4a66cf54"]]), ActionChip_default = /* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-9c9e3326"]]), ActionChip_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: !1,
 	__name: "ActionChip",
 	props: {
 		label: {},
 		avatar: {},
-		backgroundColor: { default: "#E0E0E0" },
-		labelColor: {}
+		backgroundColor: {},
+		labelColor: {},
+		deletable: { type: Boolean },
+		size: {},
+		width: {},
+		height: {},
+		decoration: {},
+		labelStyle: {}
 	},
-	emits: ["pressed"],
+	emits: ["pressed", "delete"],
 	setup(e, { emit: f }) {
-		let p = f, m = () => p("pressed");
 		return (f, p) => (openBlock(), createBlock(Chip_default, {
 			label: e.label,
 			avatar: e.avatar,
 			backgroundColor: e.backgroundColor,
 			labelColor: e.labelColor,
-			onPressed: m
+			onPressed: p[0] ||= () => f.$emit("pressed"),
+			onDelete: p[1] ||= () => f.$emit("delete")
 		}, createSlots({ _: 2 }, [f.$slots.avatar ? {
 			name: "avatar",
 			fn: withCtx(() => [renderSlot(f.$slots, "avatar")]),
@@ -5629,32 +5671,46 @@ var ImageColorBackground_default = /* @__PURE__ */ __plugin_vue_export_helper_de
 	inheritAttrs: !1,
 	__name: "ChoiceChip",
 	props: {
-		label: {},
 		selected: {
 			type: Boolean,
 			default: !1
 		},
+		selectedColor: { default: () => Colors.blue },
+		selectedTextColor: { default: () => Colors.white },
+		label: {},
 		avatar: {},
 		backgroundColor: { default: "#E0E0E0" },
-		selectedColor: { default: () => Colors.blue },
-		labelColor: {}
+		labelColor: {},
+		deletable: { type: Boolean },
+		size: {},
+		width: {},
+		height: {},
+		decoration: {},
+		labelStyle: {}
 	},
-	emits: ["selected"],
-	setup(e, { emit: f }) {
-		let p = e, m = f, g = () => {
-			m("selected", !p.selected);
-		};
+	emits: [
+		"pressed",
+		"delete",
+		"selected"
+	],
+	setup(e) {
 		return (f, p) => (openBlock(), createBlock(Chip_default, {
+			labelStyle: e.labelStyle,
+			decoration: e.decoration,
+			deletable: e.deletable,
 			label: e.label,
 			avatar: e.avatar,
 			backgroundColor: e.selected ? e.selectedColor : e.backgroundColor,
-			labelColor: e.selected ? "white" : e.labelColor,
-			onPressed: g
+			labelColor: e.selected ? e.selectedTextColor : e.labelColor,
+			onPressed: p[0] ||= () => f.$emit("selected", !e.selected)
 		}, createSlots({ _: 2 }, [f.$slots.avatar ? {
 			name: "avatar",
 			fn: withCtx(() => [renderSlot(f.$slots, "avatar")]),
 			key: "0"
 		} : void 0]), 1032, [
+			"labelStyle",
+			"decoration",
+			"deletable",
 			"label",
 			"avatar",
 			"backgroundColor",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluekit",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "description": "A Flutter-style Layout UI kit for Vue",
   "homepage": "https://fi2zz.github.io/fluekit/",
   "repository": {