@ac-design/design-system 2.9.1 → 2.10.0

package/dist/lib/compat.css

@@ -1118,6 +1118,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-1\/4:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(1 / 4 * 100%) !important;
   }
+  .w-2:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 2) !important;
+  }
   .w-2\/5:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(2 / 5 * 100%) !important;
   }
@@ -1331,6 +1334,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .min-w-0:where([data-ac-ds], [data-ac-ds] *) {
     min-width: 0px !important;
   }
+  .min-w-1:where([data-ac-ds], [data-ac-ds] *) {
+    min-width: var(--spacing) !important;
+  }
   .min-w-4:where([data-ac-ds], [data-ac-ds] *) {
     min-width: calc(var(--spacing) * 4) !important;
   }
@@ -1391,6 +1397,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .grow:where([data-ac-ds], [data-ac-ds] *) {
     flex-grow: 1 !important;
   }
+  .basis-0:where([data-ac-ds], [data-ac-ds] *) {
+    flex-basis: 0px !important;
+  }
   .basis-\[80px\]:where([data-ac-ds], [data-ac-ds] *) {
     flex-basis: 80px !important;
   }
@@ -2144,6 +2153,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       border-color: color-mix(in oklab, var(--color-success) 40%, transparent) !important;
     }
   }
+  .border-surface:where([data-ac-ds], [data-ac-ds] *) {
+    border-color: var(--color-surface) !important;
+  }
   .border-transparent:where([data-ac-ds], [data-ac-ds] *) {
     border-color: transparent !important;
   }
@@ -2264,24 +2276,66 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .bg-chart-1:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-1) !important;
   }
+  .bg-chart-1\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-chart-1) 50%, transparent) !important;
+    }
+  }
   .bg-chart-2:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-2) !important;
   }
+  .bg-chart-2\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #0069ff 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-chart-2) 50%, transparent) !important;
+    }
+  }
   .bg-chart-3:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-3) !important;
   }
+  .bg-chart-3\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #d97706 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-chart-3) 50%, transparent) !important;
+    }
+  }
   .bg-chart-4:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-4) !important;
   }
+  .bg-chart-4\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #8b5cf6 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-chart-4) 50%, transparent) !important;
+    }
+  }
   .bg-chart-5:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-5) !important;
   }
+  .bg-chart-5\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #ef4444 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-chart-5) 50%, transparent) !important;
+    }
+  }
   .bg-chart-6:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-6) !important;
   }
+  .bg-chart-6\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #0891b2 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-chart-6) 50%, transparent) !important;
+    }
+  }
   .bg-chart-7:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-7) !important;
   }
+  .bg-chart-7\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #737373 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-chart-7) 50%, transparent) !important;
+    }
+  }
   .bg-chart-8:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-chart-8) !important;
   }
@@ -2324,6 +2378,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-danger) 15%, transparent) !important;
     }
   }
+  .bg-danger\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #ef4444 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-danger) 50%, transparent) !important;
+    }
+  }
   .bg-danger\/80:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #ef4444 80%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2366,6 +2426,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-info) 15%, transparent) !important;
     }
   }
+  .bg-info\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #0069ff 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-info) 50%, transparent) !important;
+    }
+  }
   .bg-info\/80:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #0069ff 80%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2411,6 +2477,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-pending) 15%, transparent) !important;
     }
   }
+  .bg-pending\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #8b5cf6 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-pending) 50%, transparent) !important;
+    }
+  }
   .bg-primary:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-primary) !important;
   }
@@ -2462,6 +2534,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-primary) 20%, transparent) !important;
     }
   }
+  .bg-primary\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 50%, transparent) !important;
+    }
+  }
   .bg-primary\/80:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 80%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2534,6 +2612,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-success) 15%, transparent) !important;
     }
   }
+  .bg-success\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #00a651 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-success) 50%, transparent) !important;
+    }
+  }
   .bg-success\/80:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #00a651 80%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2636,6 +2720,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-warning) 20%, transparent) !important;
     }
   }
+  .bg-warning\/50:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f59e0b 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-warning) 50%, transparent) !important;
+    }
+  }
   .bg-warning\/90:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #f59e0b 90%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -3073,6 +3163,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .py-20:where([data-ac-ds], [data-ac-ds] *) {
     padding-block: calc(var(--spacing) * 20) !important;
   }
+  .py-\[3px\]:where([data-ac-ds], [data-ac-ds] *) {
+    padding-block: 3px !important;
+  }
   .py-\[5px\]:where([data-ac-ds], [data-ac-ds] *) {
     padding-block: 5px !important;
   }
@@ -4011,6 +4104,11 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
     transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
   }
+  .transition-\[flex-grow\]:where([data-ac-ds], [data-ac-ds] *) {
+    transition-property: flex-grow !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
+  }
   .transition-\[grid-template-rows\,opacity\,translate\]:where([data-ac-ds], [data-ac-ds] *) {
     transition-property: grid-template-rows,opacity,translate !important;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;

package/dist/lib/components/AcCombobox.js

@@ -0,0 +1,5 @@
+import e from "./AcCombobox.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcCombobox.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/lib/components/AcCombobox.vue.d.ts

@@ -0,0 +1,121 @@
+import type { HTMLAttributes } from "vue";
+export interface ComboboxOption {
+    /** Text written to `v-model` when the option is picked. */
+    value: string;
+    /** Text shown in the list. Defaults to `value`. */
+    label?: string;
+    /** Second line under the label, e.g. "256 addresses". */
+    description?: string;
+    /** Greys the option out so it can't be picked. */
+    disabled?: boolean;
+}
+export interface Props {
+    /** Suggestions: `{ value, label?, description?, disabled? }` objects or plain strings. */
+    options?: (ComboboxOption | string)[];
+    /** Label above the field. Also the accessible name of the field and the list. */
+    label?: string;
+    /** Classes for the label above the field, e.g. `@min-[401px]:sr-only` to hide it on wide layouts while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
+    /** Example value shown inside the empty field, e.g. "10.0.1.0/24". */
+    placeholder?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** Height: `small` 36px or `normal` 42px. */
+    size?: "small" | "normal";
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Shows the value but blocks changes: a muted fill, and "(read only)" after the label. */
+    readonly?: boolean;
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Adds the red asterisk without native `required`, for forms that run their own validation on submit. */
+    requiredMark?: boolean;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Turns the border red and sets `aria-invalid` without a message, for forms that print their own. */
+    invalid?: boolean;
+    /** `true`: the typed text is the value, and options are suggestions. `false`: only an option can be chosen; text that matches no option is dropped when the field loses focus. */
+    allowCustom?: boolean;
+    /** Decides which options match the typed text: `(option, query) => boolean`. The default keeps options whose label or value contains the text, ignoring case. `false` shows every option, for lists the server already filtered. */
+    filter?: ((option: ComboboxOption, query: string) => boolean) | false;
+    /** Shows a spinner in the field while options load; the field stays usable. With no options yet, the list shows `loading-text`. */
+    loading?: boolean;
+    /** Text in the list while `loading` and no options are there yet. */
+    loadingText?: string;
+    /** Text shown when no option matches, in place of "No suggestions" and "No matches for “text”". */
+    emptyText?: string;
+    /** Opens the list when the field gets focus or is clicked. With `false`, typing, ↓ or the chevron opens it. */
+    openOnFocus?: boolean;
+    /** Side of the field the list opens on: `bottom` or `top`. It flips to the other side when there isn't room. */
+    placement?: "bottom" | "top";
+    /** Classes for the `<input>` element itself, e.g. `font-mono`. `class` goes on the wrapper. */
+    inputClass?: HTMLAttributes["class"];
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Custom option row. Receives the option and whether it's selected or highlighted. */
+    option?: (props: {
+        option: ComboboxOption;
+        selected: boolean;
+        active: boolean;
+    }) => unknown;
+    /** Content shown when no option matches. Receives the typed text. */
+    empty?: (props: {
+        query: string;
+    }) => unknown;
+    /** Content before the label text, e.g. an icon. */
+    "label-icon"?: () => unknown;
+    /** Content after the label text, e.g. "(Optional)". */
+    "label-extra"?: () => unknown;
+    /** Content under the field and its error, such as a note or a "Did you mean…" fix. */
+    message?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the input. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (query: string) => any;
+    select: (option: ComboboxOption) => any;
+    "update:modelValue": (value: string) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((query: string) => any) | undefined;
+    onSelect?: ((option: ComboboxOption) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+}>, {
+    required: boolean;
+    filter: ((option: ComboboxOption, query: string) => boolean) | false;
+    label: string;
+    disabled: boolean;
+    size: "small" | "normal";
+    placement: "bottom" | "top";
+    invalid: boolean;
+    loading: boolean;
+    hint: string;
+    readonly: boolean;
+    options: (ComboboxOption | string)[];
+    placeholder: string;
+    errorMsg: string;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
+    emptyText: string;
+    requiredMark: boolean;
+    allowCustom: boolean;
+    loadingText: string;
+    openOnFocus: boolean;
+    inputClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};