@digitalservicebund/ris-ui 2.0.0 → 3.0.0

package/README.md

@@ -4,11 +4,11 @@
 
 ## Installation
 
-RUI UI contains three things:
+RIS UI contains three things:
 
 - a [theme](./src/primevue/) for [Vue 3](https://vuejs.org) components from [PrimeVue 4](https://primevue.org);
 - [custom components](./src/components/);
-- a [preset and plugin](./src/tailwind/) for [Tailwind](https://tailwindcss.com) that sets some global styling and exposes the design tokens used by the theme, so you can build custom UI that looks consistent with the components.
+- a [configuration](./src/tailwind/global.css) file for [Tailwind](https://tailwindcss.com) that includes design tokens, typography, and global component styles, ensuring consistency across custom UI and PrimeVue components.
 
 Vue, PrimeVue and Tailwind are required for RIS UI to work (you'll see a warning about missing peer dependencies if you're trying to use RIS UI without them). To get started, install:
 
@@ -28,13 +28,16 @@ npm install @digitalservicebund/ris-ui
 
 Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`):
 
+> [!TIP]
+>
+> As of Tailwind V4. The style is now integrated through the global CSS file, simplifying the setup.
+
 ```diff
   // main.ts
   import { createApp } from "vue";
   import PrimeVue from "primevue/config";
 + import { RisUiTheme, RisUiLocale } from "@digitalservicebund/ris-ui/primevue";
 + import "@digitalservicebund/ris-ui/fonts.css";
-+ import "@digitalservicebund/ris-ui/primevue/style.css"
 
   const app = createApp().use(PrimeVue, {
 +   unstyled: true,
@@ -92,35 +95,33 @@ Finally, add the styles (e.g. `assets/main.css`):
 /* Your other CSS */
 ```
 
-## Tailwind setup
+## Tailwind CSS Configuration
 
-- Add the `RisUiPreset` (for colors, spacings, etc.) and the `RisUiPlugin` (for typography classes, etc.)
-- Ensure the path to the RIS-UI files is included in the content array of your Tailwind config (e.g., `"./node_modules/@digitalservicebund/ris-ui/dist/**/*.{js,vue,ts}"`). This ensures all necessary classes from RIS UI are generated.
+With Tailwind CSS v4, the setup has transitioned to a CSS-based configuration, eliminating the need for a separate tailwind.config.js file. All configuration is now handled directly in your main stylesheet (e.g., style.css).
 
 ```diff
-  // tailwind.config.js
-+ import { RisUiPreset, RisUiPlugin } from "@digitalservicebund/ris-ui/tailwind";
+/* style.css */
 
-  export default {
-  content: [
-+    "./node_modules/@digitalservicebund/ris-ui/dist/**/*.{js,vue,ts}",
-    // Other content sources
-  ],
+/* 1. Import Tailwind and RIS UI styles */
+@import "tailwindcss";
+@import "@digitalservicebund/ris-ui/primevue/style.css";
 
-+   presets: [RisUiPreset],
-+   plugins: [RisUiPlugin],
+/* 2. Source the RIS UI components for Tailwind class generation */
+@source "../node_modules/@digitalservicebund/ris-ui/dist/**/*.{js,vue,ts}";
 
-    // your other configuration
-  };
-```
+/* 3. Optional: Add your custom CSS*/
+body {
+  background-color: #f3f4f6; /* Example: Set default background color */
+}
 
-Ensure Tailwind is included in your main stylesheet (e.g., `style.css`):
+/* 4. Optional: Define custom theme variables */
+@theme {
+  --highlight-default-default: #d6f7fe;
+  --highlight-default-hover: #94e8fe;
+  --highlight-default-selected: #94e8fe;
 
-```diff
-// style.css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+  /* Add additional variables as needed */
+}
 ```
 
 ### Important Note for Nuxt Projects

package/dist/components/RisAutoComplete/RisAutoComplete.vue.d.ts

@@ -9,23 +9,14 @@ export type Props = Pick<AutoCompleteProps, "dropdown" | "ariaLabel" | "ariaLabe
     initialLabel?: string;
 };
 type __VLS_Props = Props;
-type __VLS_PublicProps = {
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;
-} & __VLS_Props;
+};
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
-    autoCompleteRef: import("vue").Ref<import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((e: "update:modelValue", value: any) => void) & ((e: "change", event: import("primevue/autocomplete").AutoCompleteChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "blur", event: Event) => void) & ((e: "item-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "item-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "option-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "option-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "dropdown-click", event: import("primevue/autocomplete").AutoCompleteDropdownClickEvent) => void) & ((e: "clear") => void) & ((e: "complete", event: import("primevue/autocomplete").AutoCompleteCompleteEvent) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void) & ((e: "show") => void) & ((e: "hide") => void)> | null, import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((e: "update:modelValue", value: any) => void) & ((e: "change", event: import("primevue/autocomplete").AutoCompleteChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "blur", event: Event) => void) & ((e: "item-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "item-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "option-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "option-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "dropdown-click", event: import("primevue/autocomplete").AutoCompleteDropdownClickEvent) => void) & ((e: "clear") => void) & ((e: "complete", event: import("primevue/autocomplete").AutoCompleteCompleteEvent) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void) & ((e: "show") => void) & ((e: "hide") => void)> | null>;
+    autoCompleteRef: import("vue").Ref<import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((e: "update:modelValue", value: any) => void) & ((e: "value-change", value: any) => void) & ((e: "change", event: import("primevue/autocomplete").AutoCompleteChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "blur", event: Event) => void) & ((e: "item-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "item-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "option-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "option-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "dropdown-click", event: import("primevue/autocomplete").AutoCompleteDropdownClickEvent) => void) & ((e: "clear") => void) & ((e: "complete", event: import("primevue/autocomplete").AutoCompleteCompleteEvent) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void) & ((e: "show") => void) & ((e: "hide") => void)> | null, import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((e: "update:modelValue", value: any) => void) & ((e: "value-change", value: any) => void) & ((e: "change", event: import("primevue/autocomplete").AutoCompleteChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "blur", event: Event) => void) & ((e: "item-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "item-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "option-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "option-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "dropdown-click", event: import("primevue/autocomplete").AutoCompleteDropdownClickEvent) => void) & ((e: "clear") => void) & ((e: "complete", event: import("primevue/autocomplete").AutoCompleteCompleteEvent) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void) & ((e: "show") => void) & ((e: "hide") => void)> | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (value: string) => any;
+    "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
-    autoCompleteRef: import("vue").CreateComponentPublicInstanceWithMixins<{}, {}, {}, {}, import("vue").MethodOptions, {}, {}, ((e: "update:modelValue", value: any) => void) & ((e: "change", event: import("primevue/autocomplete").AutoCompleteChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "blur", event: Event) => void) & ((e: "item-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "item-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "option-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "option-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "dropdown-click", event: import("primevue/autocomplete").AutoCompleteDropdownClickEvent) => void) & ((e: "clear") => void) & ((e: "complete", event: import("primevue/autocomplete").AutoCompleteCompleteEvent) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void) & ((e: "show") => void) & ((e: "hide") => void) & import("vue").ObjectEmitsOptions, {}, {}, true, {}, import("primevue/autocomplete").AutoCompleteSlots & import("vue").SlotsType, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, {}, {}, {}, {}, import("vue").MethodOptions, {}> | null;
-}, any>;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/RisCopyableLabel/RisCopyableLabel.vue.d.ts

@@ -17,5 +17,5 @@ type __VLS_Props = {
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     value: string;
     name: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/RisExpandableText/RisExpandableText.vue.d.ts

@@ -5,30 +5,86 @@ type __VLS_Props = {
      */
     length?: number;
 };
-type __VLS_PublicProps = {
+declare const expanded: import("vue").ModelRef<boolean, string, boolean, boolean>;
+declare const canExpand: import("vue").Ref<boolean, boolean>;
+declare const textId: string;
+type __VLS_PublicProps = __VLS_Props & {
     "expanded"?: boolean;
-} & __VLS_Props;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+};
+declare const __VLS_ctx: {
+    $style: Record<string, string> & __VLS_PrettifyGlobal<{} & {
+        "truncate": string;
+    }>;
+    $: import("vue").ComponentInternalInstance;
+    $data: {};
+    $props: {
+        readonly length?: number | undefined;
+        readonly expanded?: boolean | undefined;
+        readonly "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    $attrs: {
+        [x: string]: unknown;
+    };
+    $refs: {
+        [x: string]: unknown;
+    };
+    $slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    $root: import("vue").ComponentPublicInstance | null;
+    $parent: import("vue").ComponentPublicInstance | null;
+    $host: Element | null;
+    $emit: (event: "update:expanded", value: boolean) => void;
+    $el: any;
+    $options: import("vue").ComponentOptionsBase<Readonly<__VLS_PublicProps> & Readonly<{
+        "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+    }>, {
+        expanded: typeof expanded;
+        canExpand: typeof canExpand;
+        textId: typeof textId;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:expanded": (value: boolean) => any;
+    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+        beforeCreate?: (() => void) | (() => void)[];
+        created?: (() => void) | (() => void)[];
+        beforeMount?: (() => void) | (() => void)[];
+        mounted?: (() => void) | (() => void)[];
+        beforeUpdate?: (() => void) | (() => void)[];
+        updated?: (() => void) | (() => void)[];
+        activated?: (() => void) | (() => void)[];
+        deactivated?: (() => void) | (() => void)[];
+        beforeDestroy?: (() => void) | (() => void)[];
+        beforeUnmount?: (() => void) | (() => void)[];
+        destroyed?: (() => void) | (() => void)[];
+        unmounted?: (() => void) | (() => void)[];
+        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
     };
-    refs: {
-        textContent: HTMLDivElement;
+    $forceUpdate: () => void;
+    $nextTick: typeof import("vue").nextTick;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    length?: number;
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+    expanded: boolean;
+    canExpand: boolean;
+    textId: typeof textId;
+    $primevue: {
+        config: import("@primevue/core").PrimeVueConfiguration;
     };
-    rootEl: HTMLDivElement;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:expanded': (value: boolean) => any;
+    "update:expanded": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
-    textContent: HTMLDivElement;
-}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/RisGhostButton/RisGhostButton.vue.d.ts

@@ -1,16 +1,13 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLButtonElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLButtonElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/RisSingleAccordion/RisSingleAccordion.vue.d.ts

@@ -1,27 +1,51 @@
+import MaterialSymbolsExpandCircleDownRounded from "~icons/material-symbols/expand-circle-down-rounded";
+import MaterialSymbolsExpandCircleDownOutlineRounded from "~icons/material-symbols/expand-circle-down-outline-rounded";
+import MaterialSymbolsExpandCircleUpRounded from "~icons/material-symbols/expand-circle-up-rounded";
+import MaterialSymbolsExpandCircleUpOutlineRounded from "~icons/material-symbols/expand-circle-up-outline-rounded";
+import Accordion from "primevue/accordion";
+import AccordionPanel from "primevue/accordionpanel";
+import AccordionHeader from "primevue/accordionheader";
+import AccordionContent from "primevue/accordioncontent";
+declare const isHovered: import("vue").Ref<boolean, boolean>;
 type __VLS_Props = {
     headerCollapsed: string;
     headerExpanded: string;
 };
-type __VLS_PublicProps = {
+declare const activePanel: import("vue").WritableComputedRef<"0" | "", "0" | "">;
+declare const accordionHeaderClasses = "flex flex-row space-x-8 py-24 items-center";
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: boolean;
-} & __VLS_Props;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_34: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_34) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+    MaterialSymbolsExpandCircleDownRounded: typeof MaterialSymbolsExpandCircleDownRounded;
+    MaterialSymbolsExpandCircleDownOutlineRounded: typeof MaterialSymbolsExpandCircleDownOutlineRounded;
+    MaterialSymbolsExpandCircleUpRounded: typeof MaterialSymbolsExpandCircleUpRounded;
+    MaterialSymbolsExpandCircleUpOutlineRounded: typeof MaterialSymbolsExpandCircleUpOutlineRounded;
+    Accordion: typeof Accordion;
+    AccordionPanel: typeof AccordionPanel;
+    AccordionHeader: typeof AccordionHeader;
+    AccordionContent: typeof AccordionContent;
+    isHovered: typeof isHovered;
+    activePanel: typeof activePanel;
+    accordionHeaderClasses: typeof accordionHeaderClasses;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (value: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };