@robuust-digital/vue-components 2.6.1 → 2.6.2

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.6.2 (15-04-2026)
+
+### Added
+
+* `Accordion`: Added summary, icon, spacing, and open-state CSS tokens for card-style theming without custom component overrides
+
+### Updated
+
+* `Accordion` docs: Documented the expanded token contract and token-based card-style example
+
 ## 2.6.1 (14-04-2026)
 
 ### Fixed

package/dist/combobox.d.ts

@@ -1,132 +1 @@
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { DefineComponent } from 'vue';
-import { FunctionalComponent } from 'vue';
-import { HTMLAttributes } from 'vue';
-import { PublicProps } from 'vue';
-import { SVGAttributes } from 'vue';
-import { VNodeProps } from 'vue';
-
-declare const __VLS_component: DefineComponent<ComboboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:modelValue": (value: ComboboxModelValue) => any;
-"update:requestParams": (value: Record<string, unknown>) => any;
-"combobox:noResults": (value: string | null) => any;
-"combobox:error": (error: unknown) => any;
-}, string, PublicProps, Readonly<ComboboxProps> & Readonly<{
-"onUpdate:modelValue"?: ((value: ComboboxModelValue) => any) | undefined;
-"onUpdate:requestParams"?: ((value: Record<string, unknown>) => any) | undefined;
-"onCombobox:noResults"?: ((value: string | null) => any) | undefined;
-"onCombobox:error"?: ((error: unknown) => any) | undefined;
-}>, {
-icon: Icon | null;
-size: ComboboxSize;
-modelValue: ComboboxModelValue;
-rootClass: string;
-prefixIcon: Icon | null;
-disabled: boolean;
-endpoint: string;
-requestParams: Record<string, unknown>;
-manualInput: boolean;
-responseData: (data: unknown) => unknown[];
-displayValue: (item: unknown) => string | null;
-optionText: (option: unknown) => string | null;
-minLength: number;
-itemKey: string;
-clearable: boolean;
-rootAttrs: Record<string, unknown>;
-multiple: boolean;
-onSearch: (value: string | null, params: Record<string, unknown>, endpoint?: string) => Promise<{
-data: unknown;
-error?: unknown;
-cancel?: () => void;
-}>;
-searchOnly: boolean;
-debounce: number;
-minLoadingTime: number;
-onCancel: (cancelToken: (() => void) | null) => void;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        prefixIcon?(_: {
-            icon: Icon;
-        }): any;
-        spinner?(_: {
-            spinning: true;
-        }): any;
-        icon?(_: {
-            icon: Icon | null;
-        }): any;
-        clear?(_: {}): any;
-        chip?(_: {
-            optionText: string | null;
-            option: any;
-            removeOption: (option: Record<string, unknown>) => void;
-        }): any;
-        option?(_: {
-            option: unknown;
-            isActive: (value: number | string) => boolean;
-        }): any;
-        optionPrefix?(_: {
-            option: unknown;
-            isActive: (value: number | string) => boolean;
-        }): any;
-        optionSuffix?(_: {
-            option: unknown;
-            isActive: (value: number | string) => boolean;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-
-declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-
-declare type ComboboxModelValue = object | Array<unknown> | null;
-
-declare interface ComboboxProps {
-    id: string;
-    rootClass?: string;
-    modelValue?: ComboboxModelValue;
-    endpoint?: string;
-    requestParams?: Record<string, unknown>;
-    manualInput?: boolean;
-    responseData?: (data: unknown) => unknown[];
-    displayValue?: (item: unknown) => string | null;
-    optionText?: (option: unknown) => string | null;
-    disabled?: boolean;
-    minLength?: number;
-    itemKey?: string;
-    clearable?: boolean;
-    rootAttrs?: Record<string, unknown>;
-    multiple?: boolean;
-    onSearch?: (value: string | null, params: Record<string, unknown>, endpoint?: string) => Promise<{
-        data: unknown;
-        error?: unknown;
-        cancel?: () => void;
-    }>;
-    searchOnly?: boolean;
-    icon?: Icon | null;
-    prefixIcon?: Icon | null;
-    size?: ComboboxSize;
-    debounce?: number;
-    minLoadingTime?: number;
-    onCancel?: (cancelToken: (() => void) | null) => void;
-}
-
-declare type ComboboxSize = 'sm' | 'base';
-
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export { _default as Combobox }
-export default _default;
-
-declare type Icon = FunctionalComponent<SVGAttributes & HTMLAttributes & VNodeProps>;
-
 export { }

package/dist/core/accordion.css

@@ -2,14 +2,28 @@
   --rvc-accordion-border-width: var(--rvc-base-border-width);
   --rvc-accordion-border-style: var(--rvc-base-border-style);
   --rvc-accordion-border-color: var(--rvc-base-border-color);
+  --rvc-accordion-gap-y: 0;
   --rvc-accordion-padding-y: calc(var(--spacing) * 6);
   --rvc-accordion-font-weight: var(--font-weight-normal);
   --rvc-accordion-font-size: var(--text-base);
   --rvc-accordion-color: var(--color-slate-600);
+  --rvc-accordion-summary-padding-x: 0;
   --rvc-accordion-summary-font-weight: var(--font-weight-medium);
   --rvc-accordion-summary-font-size: var(--text-lg);
+  --rvc-accordion-summary-border-width: 0;
+  --rvc-accordion-summary-border-style: solid;
+  --rvc-accordion-summary-border-color: transparent;
+  --rvc-accordion-summary-border-radius: 0;
+  --rvc-accordion-summary-bg-color: transparent;
   --rvc-accordion-summary-color: var(--color-black);
+  --rvc-accordion-summary-color-open: var(--rvc-accordion-summary-color);
+  --rvc-accordion-summary-bg-color-open: var(--rvc-accordion-summary-bg-color);
+  --rvc-accordion-summary-border-color-open: var(--rvc-accordion-summary-border-color);
+  --rvc-accordion-summary-border-radius-open: var(--rvc-accordion-summary-border-radius);
+  --rvc-accordion-summary-border-bottom-width-open: var(--rvc-accordion-summary-border-width);
   --rvc-accordion-summary-decoration-hover: underline;
+  --rvc-accordion-icon-size: calc(var(--spacing) * 5);
+  --rvc-accordion-icon-transform-open: rotate(45deg);
 }
 
 @layer components {
@@ -17,34 +31,54 @@
     details {
       border-top: var(--rvc-accordion-border-width) var(--rvc-accordion-border-style) var(--rvc-accordion-border-color);
 
+      + details {
+        margin-top: var(--rvc-accordion-gap-y);
+      }
+
+      > summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding-block: var(--rvc-accordion-padding-y);
+        padding-inline: var(--rvc-accordion-summary-padding-x);
+        border-width: var(--rvc-accordion-summary-border-width);
+        border-style: var(--rvc-accordion-summary-border-style);
+        border-radius: var(--rvc-accordion-summary-border-radius);
+        border-color: var(--rvc-accordion-summary-border-color);
+        background-color: var(--rvc-accordion-summary-bg-color);
+        color: var(--rvc-accordion-summary-color);
+        font-size: var(--rvc-accordion-summary-font-size);
+        font-weight: var(--rvc-accordion-summary-font-weight);
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+          text-decoration: var(--rvc-accordion-summary-decoration-hover);
+        }
+      }
+
       .rvc-accordion-icon {
-        width: calc(var(--spacing) * 5);
-        height: calc(var(--spacing) * 5);
-        transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+        width: var(--rvc-accordion-icon-size);
+        height: var(--rvc-accordion-icon-size);
+        transform: translateZ(0);
         transition-property: transform, translate, scale, rotate;
         transition-duration: var(--rvc-base-transition-duration);
         transition-timing-function: var(--rvc-base-transition-timing-function);
       }
 
-      &:open .rvc-accordion-icon {
-        transform: rotate(45deg);
-      }
-    }
+      &:open {
+        > summary {
+          border-bottom-width: var(--rvc-accordion-summary-border-bottom-width-open);
+          border-radius: var(--rvc-accordion-summary-border-radius-open);
+          border-color: var(--rvc-accordion-summary-border-color-open);
+          background-color: var(--rvc-accordion-summary-bg-color-open);
+          color: var(--rvc-accordion-summary-color-open);
+        }
 
-    summary {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      padding-block: var(--rvc-accordion-padding-y);
-      color: var(--rvc-accordion-summary-color);
-      font-size: var(--rvc-accordion-summary-font-size);
-      font-weight: var(--rvc-accordion-summary-font-weight);
-      cursor: pointer;
-      user-select: none;
-
-      &:hover {
-        text-decoration: var(--rvc-accordion-summary-decoration-hover);
+        .rvc-accordion-icon {
+          transform: translateZ(0) var(--rvc-accordion-icon-transform-open);
+        }
       }
     }