@openreachtech/furo-vue 1.5.0 → 1.7.0

package/lib/components/molecules/FuroSplitter/FuroSplitterContext.js

@@ -272,7 +272,7 @@ export default class FuroSplitterContext extends BaseFuroContext {
   }) {
     const entries = Object.entries(panel)
       .filter(([key]) => SPLITTER_PANEL_KEYS.has(key))
-      .filter(([, value]) => value !== undefined)
+      .filter(([, value]) => typeof value !== 'undefined')
 
     return Object.fromEntries(entries)
   }

package/lib/components/molecules/FuroToggleGroup/FuroToggleGroupContext.js

@@ -250,7 +250,7 @@ export default class FuroToggleGroupContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return /** @type {FuroToggleGroupValue} */ (attrsValue)
     }
 

package/lib/components/molecules/FuroTooltip/FuroTooltipContext.js

@@ -144,7 +144,7 @@ export default class FuroTooltipContext extends BaseFuroContext {
    * @returns {boolean} true when `parcel.open` is supplied.
    */
   isOpenControlled () {
-    return this.parcel?.open !== undefined
+    return typeof this.parcel?.open !== 'undefined'
       && this.parcel?.open !== null
   }
 

package/lib/components/organisms/FuroSidebar/FuroSidebar.vue

@@ -271,7 +271,7 @@ export default defineComponent({
     padding-block: 0.5rem;
     padding-inline: 0.5rem;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-secondary);
     font: var(--font-label-tiny);
   }
 
@@ -381,7 +381,7 @@ export default defineComponent({
     width: 0.875rem;
     height: 0.875rem;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-glyph);
   }
 
   /* nested sub-rows */
@@ -438,7 +438,7 @@ export default defineComponent({
 
     background-color: transparent;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-secondary);
     font: var(--font-label-small);
     text-align: start;
 

package/lib/components/organisms/FuroTable/FuroTable.vue

@@ -673,7 +673,7 @@ export default defineComponent({
   }
 
   .unit-table .state-row.error > td {
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
   }
 
   .unit-table .spinner-icon {

package/lib/components/organisms/FuroTable/FuroTableContext.js

@@ -129,11 +129,11 @@ export default class FuroTableContext extends BaseFuroContext {
    * Wrapped as a static hook so scroll throttling can be driven deterministically
    * in tests (spy on this method) instead of depending on the browser global.
    *
-   * @param {FrameRequestCallback} callback - Callback to run on the next frame.
+   * @param {FrameRequestCallback} frameCallback - Callback to run on the next frame.
    * @returns {number} The frame request id.
    */
-  static requestFrame (callback) {
-    return globalThis.requestAnimationFrame(callback)
+  static requestFrame (frameCallback) {
+    return globalThis.requestAnimationFrame(frameCallback)
   }
 
   /**

package/lib/components/organisms/FuroToast/FuroToastContext.js

@@ -61,13 +61,17 @@ const LOADING_DURATION = 1000000000
  * only accent — the toast body stays neutral.
  */
 const TYPE_ICON_NAME_HASH = {
-  info: 'ph:info',
   success: 'ph:check-circle',
   warning: 'ph:warning',
   error: 'ph:x-circle',
   loading: 'ph:circle-notch',
 }
 
+/**
+ * Icon name of the default `info` type, which the hash above leaves out.
+ */
+const DEFAULT_TYPE_ICON_NAME = 'ph:info'
+
 /**
  * Context class for FuroToast organism.
  *
@@ -591,7 +595,7 @@ export default class FuroToastContext extends BaseFuroContext {
     type,
   }) {
     return TYPE_ICON_NAME_HASH[type]
-      ?? TYPE_ICON_NAME_HASH[DEFAULT_TYPE]
+      ?? DEFAULT_TYPE_ICON_NAME
   }
 
   /**

package/lib/components/organisms/FuroToast/ToastQueue.js

@@ -266,10 +266,10 @@ export default class ToastQueue {
    * @param {ToastConfig} [params] - Configuration to merge.
    */
   configure (params = {}) {
-    Object.assign(
-      this.stateReactive.config,
-      params
-    )
+    this.stateReactive.config = {
+      ...this.stateReactive.config,
+      ...params,
+    }
   }
 
   /**

package/nuxt/index.js

@@ -43,14 +43,14 @@ export default defineNuxtModule({
       nuxt,
     })
 
-    Object.assign(nuxt.options.appConfig, {
-      furoVue: {
-        iconComponentName: extractIconComponentName({
-          options,
-          nuxt,
-        }),
-      },
-    })
+    const { appConfig } = nuxt.options
+
+    appConfig.furoVue = {
+      iconComponentName: extractIconComponentName({
+        options,
+        nuxt,
+      }),
+    }
 
     const resolver = createResolver(import.meta.url)
 
@@ -84,7 +84,7 @@ async function ensureIconModule ({
     throw new Error(`[@openreachtech/furo-vue] the Nuxt module needs \`${ICON_MODULE_NAME}\` to draw the names the icon registry lacks. Install it with \`npm install ${ICON_MODULE_NAME}\`, or drop this module and install a renderer yourself with \`furoIconRegistry.useIconRenderer()\`.`)
   }
 
-  await installModule(ICON_MODULE_NAME, undefined, nuxt)
+  await installModule(ICON_MODULE_NAME, {}, nuxt)
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openreachtech/furo-vue",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "furo for Vue",
   "main": "index.js",
   "types": "./types/index.d.ts",
@@ -39,6 +39,8 @@
     "nuxt/",
     "types/",
     "public/furo-vue/",
+    "docs/design-tokens.md",
+    "docs/furo-*.md",
     "!**/.directorykeeper",
     "!types/jest.d.ts"
   ],
@@ -77,22 +79,22 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@iconify/vue": "^5.0.3",
+    "@iconify/vue": "^5.0.4",
     "@openreachtech/furo": "^1.11.0",
-    "@tiptap/core": "^3.31.4",
-    "@tiptap/extension-highlight": "^3.31.4",
-    "@tiptap/extension-image": "^3.31.4",
-    "@tiptap/extension-mention": "^3.31.4",
-    "@tiptap/extension-text-align": "^3.31.4",
-    "@tiptap/extension-text-style": "^3.31.4",
-    "@tiptap/extension-typography": "^3.31.4",
-    "@tiptap/extensions": "^3.31.4",
-    "@tiptap/pm": "^3.31.4",
-    "@tiptap/starter-kit": "^3.31.4",
-    "@tiptap/vue-3": "^3.31.4",
-    "marked": "^18.1.0",
+    "@tiptap/core": "^3.32.0",
+    "@tiptap/extension-highlight": "^3.32.0",
+    "@tiptap/extension-image": "^3.32.0",
+    "@tiptap/extension-mention": "^3.32.0",
+    "@tiptap/extension-text-align": "^3.32.0",
+    "@tiptap/extension-text-style": "^3.32.0",
+    "@tiptap/extension-typography": "^3.32.0",
+    "@tiptap/extensions": "^3.32.0",
+    "@tiptap/pm": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
+    "@tiptap/vue-3": "^3.32.0",
+    "marked": "^18.1.2",
     "reka-ui": "^2.11.0",
-    "vue": "^3.5.43"
+    "vue": "^3.5.44"
   },
   "peerDependencies": {
     "@nuxt/icon": "^1.0.0",
@@ -112,23 +114,22 @@
     "@babel/preset-env": "^7.29.7",
     "@iconify-json/ph": "^1.2.2",
     "@nuxt/icon": "^1.15.0",
-    "@openreachtech/eslint-config": "^3.0.2",
+    "@openreachtech/eslint-config": "^4.5.0",
     "@openreachtech/jest-constructor-spy": "^1.1.2",
     "@openreachtech/jest-deep-containing": "^1.0.2",
     "@types/jest": "^30.0.0",
     "@vue/test-utils": "^2.5.1",
-    "@vue/vue3-jest": "^29.2.6",
-    "babel-jest": "^29.7.0",
-    "core-js": "^3.50.0",
+    "babel-jest": "^30.5.2",
+    "core-js": "^3.51.0",
     "eslint": "^9.39.5",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-vue": "^9.33.0",
     "globals": "^17.13.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.5.2",
+    "jest-environment-jsdom": "^30.5.2",
     "nuxt": "^3.21.11",
     "typescript": "^5.9.3",
-    "vue-tsc": "^3.3.12",
+    "vue-tsc": "^3.3.13",
     "whatwg-fetch": "^3.6.20"
   },
   "overrides": {

package/public/furo-vue/components.json

@@ -1,6 +1,6 @@
 {
   "library": "@openreachtech/furo-vue",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "generatedFrom": "app/docs/component-registry.js",
   "layers": [
     "foundation",

package/types/generated/components/atoms/FuroButton/FuroButtonContext.d.ts

@@ -104,13 +104,13 @@ export default class FuroButtonContext extends BaseFuroContext<null, Props, "CLI
      * Extract ARIA attributes for the button root.
      *
      * @returns {{
-     *   'aria-disabled': 'true' | undefined
-     *   'aria-busy': 'true' | undefined
+     *   'aria-disabled'?: 'true'
+     *   'aria-busy'?: 'true'
      * }}
      */
     extractAriaAttributes(): {
-        "aria-disabled": "true" | undefined;
-        "aria-busy": "true" | undefined;
+        "aria-disabled"?: "true";
+        "aria-busy"?: "true";
     };
     /**
      * Handle native click on the button root.

package/types/generated/components/molecules/FuroSelect/FuroSelect.vue.d.ts

@@ -461,6 +461,27 @@ declare const __VLS_export: import("vue").DefineComponent<{
     }> & Readonly<{}>, {
         size: string | number;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    FuroSelectOptionText: import("vue").DefineComponent<{}, {
+        context: import("./FuroSelectOptionTextContext.js").default;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+        SelectOptionText: {
+            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        });
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     SelectRoot: <T extends import("reka-ui").AcceptableValue = import("reka-ui").AcceptableValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
         attrs: any;
         slots: {
@@ -780,6 +801,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare namespace __VLS_componentsOption {
     export { FuroIcon };
+    export { FuroSelectOptionText };
     export let SelectRoot: <T extends import("reka-ui").AcceptableValue = import("reka-ui").AcceptableValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
         attrs: any;
         slots: {
@@ -1169,3 +1191,4 @@ declare var __VLS_197: {};
 import FuroSelectContext from './FuroSelectContext.js';
 import type { FuroSelectSlots } from './FuroSelectContext.js';
 import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue';
+import FuroSelectOptionText from './FuroSelectOptionText.vue';

package/types/generated/components/molecules/FuroSelect/FuroSelectContext.d.ts

@@ -165,6 +165,20 @@ export default class FuroSelectContext extends BaseFuroContext<null, Props, "CHA
     resolveOptionValue({ option, }: {
         option: FuroSelectOption;
     }): FuroSelectValue;
+    /**
+     * Build an option's render key from its value and label, so a change to either
+     * remounts the item, because the item records both only when it mounts.
+     *
+     * @param {{
+     *   option: FuroSelectOption
+     *   index: number
+     * }} params - Parameters of this method.
+     * @returns {string} Render key.
+     */
+    generateOptionKey({ option, index, }: {
+        option: FuroSelectOption;
+        index: number;
+    }): string;
     /**
      * Setup component context.
      *

package/types/generated/components/molecules/FuroSelect/FuroSelectOptionText.vue.d.ts

@@ -0,0 +1,50 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+export type __VLS_LocalComponents = typeof __VLS_componentsOption;
+export type __VLS_GlobalComponents = import("vue").GlobalComponents;
+export type __VLS_LocalDirectives = {};
+export type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    context: FuroSelectOptionTextContext;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    SelectOptionText: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare namespace __VLS_componentsOption {
+    let SelectOptionText: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("reka-ui").SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+}
+declare var __VLS_7: {};
+import FuroSelectOptionTextContext from './FuroSelectOptionTextContext.js';

package/types/generated/components/molecules/FuroSelect/FuroSelectOptionTextContext.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Context class for the text of one FuroSelect option.
+ *
+ * @extends {BaseFuroContext<null, {}, never>}
+ */
+export default class FuroSelectOptionTextContext extends BaseFuroContext<null, {}, never> {
+    /**
+     * Factory method.
+     *
+     * @template {X extends typeof FuroSelectOptionTextContext ? X : never} T, X
+     * @override
+     * @param {FuroSelectOptionTextContextFactoryParams} params - Parameters of this factory method.
+     * @returns {InstanceType<T>} An instance of this class.
+     * @this {T}
+     */
+    static override create<T extends X extends typeof FuroSelectOptionTextContext ? X : never, X>(this: T, { props, componentContext, refHash, selectRootContext, selectItemContext, }: FuroSelectOptionTextContextFactoryParams): InstanceType<T>;
+    /**
+     * Build ref hash.
+     *
+     * @override
+     * @returns {FuroSelectOptionTextContextParams['refHash']}
+     */
+    static override buildRefHash(): FuroSelectOptionTextContextParams["refHash"];
+    /**
+     * Inject the select root context, which holds the text the trigger shows.
+     *
+     * @returns {FuroSelectRootContext}
+     */
+    static injectSelectRootContext(): FuroSelectRootContext;
+    /**
+     * Inject the context of the option that holds this text.
+     *
+     * @returns {FuroSelectItemContext}
+     */
+    static injectSelectItemContext(): FuroSelectItemContext;
+    /**
+     * Constructor.
+     *
+     * @param {FuroSelectOptionTextContextParams} params - Parameters of this constructor.
+     */
+    constructor({ props, componentContext, refHash, selectRootContext, selectItemContext, }: FuroSelectOptionTextContextParams);
+    refHash: {
+        textComponentRef: import("vue").ShallowRef<{
+            $el: HTMLElement;
+        } | null>;
+        observerRef: import("vue").ShallowRef<MutationObserver | null>;
+        recordedTextRef: import("vue").Ref<string | null>;
+    };
+    selectRootContext: FuroSelectRootContext;
+    selectItemContext: FuroSelectItemContext;
+    /**
+     * get: Ctor
+     *
+     * @override
+     * @returns {typeof FuroSelectOptionTextContext}
+     */
+    override get Ctor(): typeof FuroSelectOptionTextContext;
+    /**
+     * get: textComponentRef
+     *
+     * @returns {import('vue').ShallowRef<{ $el: HTMLElement } | null>}
+     */
+    get textComponentRef(): import("vue").ShallowRef<{
+        $el: HTMLElement;
+    } | null>;
+    /**
+     * get: observerRef
+     *
+     * @returns {import('vue').ShallowRef<MutationObserver | null>}
+     */
+    get observerRef(): import("vue").ShallowRef<MutationObserver | null>;
+    /**
+     * get: recordedTextRef
+     *
+     * @returns {import('vue').Ref<string | null>}
+     */
+    get recordedTextRef(): import("vue").Ref<string | null>;
+    /**
+     * Setup component context.
+     *
+     * @template {X extends FuroSelectOptionTextContext ? X : never} T, X
+     * @override
+     * @returns {T} - For method chaining.
+     * @this {T}
+     */
+    override setupComponent<T extends X extends FuroSelectOptionTextContext ? X : never, X>(this: T): T;
+    /**
+     * Extract the rendered text element.
+     *
+     * @returns {HTMLElement | null}
+     */
+    extractTextElement(): HTMLElement | null;
+    /**
+     * Extract the rendered text.
+     *
+     * @returns {string | null}
+     */
+    extractText(): string | null;
+    /**
+     * Watch the rendered text for changes.
+     */
+    observeTextElement(): void;
+    /**
+     * Replace the recorded option text when the rendered text differs from it.
+     */
+    syncText(): void;
+    /**
+     * Stop watching the rendered text.
+     */
+    disconnectObserver(): void;
+}
+export type FuroSelectRootContext = {
+    onOptionAdd: (option: {
+        value: unknown;
+        disabled: boolean;
+        textContent: string;
+    }) => void;
+};
+export type FuroSelectItemContext = {
+    value: unknown;
+    disabled: import("vue").Ref<boolean>;
+};
+export type FuroSelectOptionTextContextParams = import("../../../contexts/BaseFuroContext.js").BaseFuroContextParams & {
+    props: {};
+    componentContext: import("vue").SetupContext;
+    refHash: {
+        textComponentRef: import("vue").ShallowRef<{
+            $el: HTMLElement;
+        } | null>;
+        observerRef: import("vue").ShallowRef<MutationObserver | null>;
+        recordedTextRef: import("vue").Ref<string | null>;
+    };
+    selectRootContext: FuroSelectRootContext;
+    selectItemContext: FuroSelectItemContext;
+};
+export type FuroSelectOptionTextContextFactoryParams = Omit<FuroSelectOptionTextContextParams, "refHash" | "selectRootContext" | "selectItemContext"> & {
+    refHash?: FuroSelectOptionTextContextParams["refHash"];
+    selectRootContext?: FuroSelectRootContext;
+    selectItemContext?: FuroSelectItemContext;
+};
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js';

package/types/generated/components/organisms/FuroTable/FuroTableContext.d.ts

@@ -31,10 +31,10 @@ export default class FuroTableContext extends BaseFuroContext<null, Props, "SORT
      * Wrapped as a static hook so scroll throttling can be driven deterministically
      * in tests (spy on this method) instead of depending on the browser global.
      *
-     * @param {FrameRequestCallback} callback - Callback to run on the next frame.
+     * @param {FrameRequestCallback} frameCallback - Callback to run on the next frame.
      * @returns {number} The frame request id.
      */
-    static requestFrame(callback: FrameRequestCallback): number;
+    static requestFrame(frameCallback: FrameRequestCallback): number;
     /**
      * Cancel a scheduled animation frame.
      *