@openreachtech/furo-vue 1.5.0 → 1.7.0

package/lib/assets/css/furo/0030.variables-semantic-color.css

@@ -8,6 +8,9 @@
     --color-foreground-title: var(--palette-gray-900);
     --color-foreground-secondary: var(--palette-gray-700);
     --color-foreground-tertiary: var(--palette-gray-600);
+    /* The caption colour for an icon, a caret or a separator. A glyph is held to
+       3:1 rather than 4.5:1, so it keeps the step that text may not. See ADR 0043. */
+    --color-foreground-glyph: var(--palette-gray-600);
     --color-foreground-light: var(--palette-gray-400);
     --color-foreground-extra-light: var(--palette-gray-300);
     --color-foreground-inverse: var(--palette-gray-050);
@@ -27,10 +30,15 @@
     --color-accent-foreground: var(--palette-gray-800);
     --color-destructive: var(--palette-rose-500);
     --color-destructive-foreground: var(--palette-gray-950);
+    /* Text drawn in the danger family. The fill cannot darken to carry it, as
+       its label would fall under 4.5:1. See ADR 0043. */
+    --color-destructive-text: var(--palette-rose-600);
     --color-border: var(--palette-gray-200);
     --color-input: var(--palette-gray-400);
     --color-ring: var(--palette-blue-500);
-    --color-link: var(--palette-blue-500);
+    /* The lightest step clearing 4.5:1 on the page. The step below lands at
+       3.68:1. See ADR 0043. */
+    --color-link: var(--palette-blue-600);
 
     /* Brand: the design's dark neutral family, distinct from the blue action colour */
     --color-brand-surface-subtle: var(--palette-gray-100);
@@ -65,12 +73,14 @@
        design does this deliberately; it is followed rather than normalised. */
     --color-warning: var(--palette-orange-500);
     --color-warning-foreground: var(--palette-gray-950);
+    --color-warning-text: var(--palette-orange-700);
     --color-warning-subtle: var(--palette-orange-100);
     /* One step darker than the other three tint labels, because the tint it sits
        on is one step darker. The 700 step lands at 4.52:1 here. */
     --color-warning-subtle-foreground: var(--palette-orange-800);
     --color-info: var(--palette-blue-500);
     --color-info-foreground: var(--palette-gray-950);
+    --color-info-text: var(--palette-blue-600);
     --color-info-subtle: var(--palette-blue-050);
     --color-info-subtle-foreground: var(--palette-blue-700);
     /* One step lighter than the role itself, for a border that has to read as
@@ -102,6 +112,7 @@
     --color-foreground-title: var(--palette-white);
     --color-foreground-secondary: var(--palette-gray-200);
     --color-foreground-tertiary: var(--palette-gray-300);
+    --color-foreground-glyph: var(--palette-gray-300);
     --color-foreground-light: var(--palette-gray-500);
     --color-foreground-extra-light: var(--palette-gray-600);
     --color-foreground-inverse: var(--palette-gray-900);
@@ -119,6 +130,7 @@
     --color-accent-foreground: var(--palette-gray-050);
     --color-destructive: var(--palette-rose-500);
     --color-destructive-foreground: var(--palette-gray-950);
+    --color-destructive-text: var(--palette-rose-500);
     --color-border: var(--palette-gray-800);
     --color-input: var(--palette-gray-600);
     --color-ring: var(--palette-blue-500);
@@ -155,12 +167,14 @@
     --color-success-subtle-foreground: var(--palette-emerald-300);
     --color-warning: var(--palette-orange-400);
     --color-warning-foreground: var(--palette-gray-950);
+    --color-warning-text: var(--palette-orange-400);
     /* One step in from 950, mirroring the light block drawing warning one step
        in from 050 while the other three families sit at the extreme. */
     --color-warning-subtle: var(--palette-orange-900);
     --color-warning-subtle-foreground: var(--palette-orange-200);
     --color-info: var(--palette-blue-400);
     --color-info-foreground: var(--palette-gray-950);
+    --color-info-text: var(--palette-blue-400);
     --color-info-subtle: var(--palette-blue-950);
     --color-info-subtle-foreground: var(--palette-blue-300);
     /* Keeps the light block's rule, one step lighter than the role itself. */

package/lib/components/atoms/FuroButton/FuroButtonContext.js

@@ -215,22 +215,22 @@ export default class FuroButtonContext extends BaseFuroContext {
    * Extract ARIA attributes for the button root.
    *
    * @returns {{
-   *   'aria-disabled': 'true' | undefined
-   *   'aria-busy': 'true' | undefined
+   *   'aria-disabled'?: 'true'
+   *   'aria-busy'?: 'true'
    * }}
    */
   extractAriaAttributes () {
     const ariaDisabled = this.isDisabled()
-      ? 'true'
-      : undefined
+      ? { 'aria-disabled': 'true' }
+      : {}
 
     const ariaBusy = this.isLoading()
-      ? 'true'
-      : undefined
+      ? { 'aria-busy': 'true' }
+      : {}
 
     return {
-      'aria-disabled': ariaDisabled,
-      'aria-busy': ariaBusy,
+      ...ariaDisabled,
+      ...ariaBusy,
     }
   }
 

package/lib/components/atoms/FuroCheckbox/FuroCheckboxContext.js

@@ -251,7 +251,7 @@ export default class FuroCheckboxContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

package/lib/components/atoms/FuroIcon/FuroIcon.vue

@@ -68,7 +68,7 @@ export default defineComponent({
   }
 
   .unit-icon.unresolved {
-    color: var(--color-warning);
+    color: var(--color-warning-text);
   }
 }
 </style>

package/lib/components/atoms/FuroSwitch/FuroSwitchContext.js

@@ -225,7 +225,7 @@ export default class FuroSwitchContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

package/lib/components/atoms/FuroToggle/FuroToggleContext.js

@@ -191,7 +191,7 @@ export default class FuroToggleContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

package/lib/components/molecules/FuroAccordion/FuroAccordionContext.js

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

package/lib/components/molecules/FuroAttachment/FuroAttachment.vue

@@ -348,7 +348,7 @@ export default defineComponent({
     width: 1.5rem;
     height: 1.5rem;
 
-    color: var(--color-info);
+    color: var(--color-info-text);
   }
 
   .unit-attachment .action-icon {

package/lib/components/molecules/FuroBreadcrumb/FuroBreadcrumb.vue

@@ -207,7 +207,7 @@ export default defineComponent({
     display: inline-flex;
     align-items: center;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-glyph);
   }
 
   .unit-breadcrumb .separator-icon,

package/lib/components/molecules/FuroCollapsible/FuroCollapsibleContext.js

@@ -192,7 +192,7 @@ export default class FuroCollapsibleContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

package/lib/components/molecules/FuroControlBlock/FuroControlBlock.vue

@@ -125,7 +125,7 @@ export default defineComponent({
   .unit-form-control-block > .label > .required-mark {
     margin-inline-start: 0.125rem;
 
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
   }
 
   .unit-form-control-block.horizontal > .control {
@@ -138,7 +138,7 @@ export default defineComponent({
 
     list-style: none;
 
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
     font: var(--font-body-small);
   }
 

package/lib/components/molecules/FuroDropdownMenu/FuroDropdownMenu.vue

@@ -329,7 +329,7 @@ export default defineComponent({
   }
 
   .unit-dropdown-menu-content > .menu-option.destructive {
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
   }
 
   .unit-dropdown-menu-content > .menu-option.destructive[data-highlighted]:not([data-disabled]) {

package/lib/components/molecules/FuroDropdownMenu/FuroDropdownMenuContext.js

@@ -170,7 +170,6 @@ export default class FuroDropdownMenuContext extends BaseFuroContext {
    */
   get parcel () {
     return {
-      open: undefined,
       disabled: false,
       side: 'bottom',
       align: 'start',
@@ -199,7 +198,7 @@ export default class FuroDropdownMenuContext extends BaseFuroContext {
    * @returns {boolean}
    */
   isOpenControlled () {
-    return this.parcel?.open !== undefined
+    return typeof this.parcel?.open !== 'undefined'
   }
 
   /**

package/lib/components/molecules/FuroErrorState/FuroErrorState.vue

@@ -98,7 +98,7 @@ export default defineComponent({
   .unit-error-state > .icon {
     display: flex;
 
-    color: var(--color-destructive);
+    color: var(--color-destructive-text);
     font-size: 2rem;
   }
 

package/lib/components/molecules/FuroPopover/FuroPopoverContext.js

@@ -125,7 +125,7 @@ export default class FuroPopoverContext 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/molecules/FuroSearchField/FuroSearchField.vue

@@ -128,7 +128,7 @@ export default defineComponent({
     display: inline-flex;
     align-items: center;
 
-    color: var(--color-foreground-tertiary);
+    color: var(--color-foreground-glyph);
   }
 
   .unit-form-control.search > .leading > .leading-icon {

package/lib/components/molecules/FuroSelect/FuroSelect.vue

@@ -9,12 +9,14 @@ import {
 
 import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
 import FuroSelectContext from './FuroSelectContext.js'
+import FuroSelectOptionText from './FuroSelectOptionText.vue'
 
 export default defineComponent({
   name: 'FuroSelect',
 
   components: {
     FuroIcon,
+    FuroSelectOptionText,
     SelectRoot: RekaSelect['Root'],
     SelectTrigger: RekaSelect['Trigger'],
     SelectValue: RekaSelect['Value'],
@@ -168,7 +170,7 @@ export default defineComponent({
           <SelectViewport class="viewport">
             <template
               v-for="(option, index) in context.parcel?.options"
-              :key="index"
+              :key="context.generateOptionKey({ option, index })"
             >
               <template v-if="context.shouldShowGroupOption({ option })">
                 <SelectGroup
@@ -192,7 +194,7 @@ export default defineComponent({
 
                     <template
                       v-for="(groupChildOption, groupChildIndex) in context.extractGroupOptions({ option })"
-                      :key="groupChildIndex"
+                      :key="context.generateOptionKey({ option: groupChildOption, index: groupChildIndex })"
                     >
                       <SelectOption
                         class="option"
@@ -206,7 +208,7 @@ export default defineComponent({
                           :option="groupChildOption"
                           :option-index="groupChildIndex"
                         >
-                          <SelectOptionText>
+                          <FuroSelectOptionText>
                             <slot
                               name="option-text"
                               :option="groupChildOption"
@@ -214,7 +216,7 @@ export default defineComponent({
                             >
                               {{ context.resolveOptionLabel({ option: groupChildOption }) }}
                             </slot>
-                          </SelectOptionText>
+                          </FuroSelectOptionText>
 
                           <SelectOptionIndicator class="select-indicator">
                             <slot
@@ -252,7 +254,7 @@ export default defineComponent({
                     :option="option"
                     :option-index="index"
                   >
-                    <SelectOptionText>
+                    <FuroSelectOptionText>
                       <slot
                         name="option-text"
                         :option="option"
@@ -260,7 +262,7 @@ export default defineComponent({
                       >
                         {{ context.resolveOptionLabel({ option }) }}
                       </slot>
-                    </SelectOptionText>
+                    </FuroSelectOptionText>
 
                     <SelectOptionIndicator class="select-indicator">
                       <slot

package/lib/components/molecules/FuroSelect/FuroSelectContext.js

@@ -295,6 +295,41 @@ export default class FuroSelectContext extends BaseFuroContext {
       ?? null
   }
 
+  /**
+   * 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,
+  }) {
+    if (this.shouldShowGroupOption({ option })) {
+      return `group-${index}`
+    }
+
+    return JSON.stringify(
+      [
+        this.resolveOptionValue({
+          option,
+        }),
+        this.resolveOptionLabel({
+          option,
+        }),
+      ],
+      (key, value) => (
+        typeof value === 'bigint'
+          ? `${value}n`
+          : value
+      )
+    )
+  }
+
   /**
    * Setup component context.
    *

package/lib/components/molecules/FuroSelect/FuroSelectOptionText.vue

@@ -0,0 +1,40 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Select as RekaSelect,
+} from 'reka-ui/namespaced'
+
+import FuroSelectOptionTextContext from './FuroSelectOptionTextContext.js'
+
+export default defineComponent({
+  name: 'FuroSelectOptionText',
+
+  components: {
+    SelectOptionText: RekaSelect['ItemText'],
+  },
+
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSelectOptionTextContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <SelectOptionText :ref="context.textComponentRef">
+    <slot />
+  </SelectOptionText>
+</template>

package/lib/components/molecules/FuroSelect/FuroSelectOptionTextContext.js

@@ -0,0 +1,275 @@
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+} from 'vue'
+
+import {
+  injectSelectItemContext,
+  injectSelectRootContext,
+} from 'reka-ui'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context class for the text of one FuroSelect option.
+ *
+ * @extends {BaseFuroContext<null, {}, never>}
+ */
+export default class FuroSelectOptionTextContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroSelectOptionTextContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    props,
+    componentContext,
+    refHash,
+    selectRootContext,
+    selectItemContext,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+    this.selectRootContext = selectRootContext
+    this.selectItemContext = selectItemContext
+  }
+
+  /**
+   * 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 create ({
+    props,
+    componentContext,
+
+    refHash = this.buildRefHash(),
+    selectRootContext = this.injectSelectRootContext(),
+    selectItemContext = this.injectSelectItemContext(),
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+
+        refHash,
+        selectRootContext,
+        selectItemContext,
+      })
+    )
+  }
+
+  /**
+   * Build ref hash.
+   *
+   * @override
+   * @returns {FuroSelectOptionTextContextParams['refHash']}
+   */
+  static buildRefHash () {
+    return {
+      textComponentRef: shallowRef(null),
+      observerRef: shallowRef(null),
+      recordedTextRef: ref(null),
+    }
+  }
+
+  /**
+   * Inject the select root context, which holds the text the trigger shows.
+   *
+   * @returns {FuroSelectRootContext}
+   */
+  static injectSelectRootContext () {
+    return injectSelectRootContext()
+  }
+
+  /**
+   * Inject the context of the option that holds this text.
+   *
+   * @returns {FuroSelectItemContext}
+   */
+  static injectSelectItemContext () {
+    return injectSelectItemContext()
+  }
+
+  /**
+   * get: Ctor
+   *
+   * @override
+   * @returns {typeof FuroSelectOptionTextContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroSelectOptionTextContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * get: textComponentRef
+   *
+   * @returns {import('vue').ShallowRef<{ $el: HTMLElement } | null>}
+   */
+  get textComponentRef () {
+    return this.refHash.textComponentRef
+  }
+
+  /**
+   * get: observerRef
+   *
+   * @returns {import('vue').ShallowRef<MutationObserver | null>}
+   */
+  get observerRef () {
+    return this.refHash.observerRef
+  }
+
+  /**
+   * get: recordedTextRef
+   *
+   * @returns {import('vue').Ref<string | null>}
+   */
+  get recordedTextRef () {
+    return this.refHash.recordedTextRef
+  }
+
+  /**
+   * Setup component context.
+   *
+   * @template {X extends FuroSelectOptionTextContext ? X : never} T, X
+   * @override
+   * @returns {T} - For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    onMounted(() => {
+      this.recordedTextRef.value = this.extractText()
+      this.observeTextElement()
+    })
+
+    onBeforeUnmount(() => {
+      this.disconnectObserver()
+    })
+
+    return this
+  }
+
+  /**
+   * Extract the rendered text element.
+   *
+   * @returns {HTMLElement | null}
+   */
+  extractTextElement () {
+    return this.textComponentRef.value?.$el
+      ?? null
+  }
+
+  /**
+   * Extract the rendered text.
+   *
+   * @returns {string | null}
+   */
+  extractText () {
+    return this.extractTextElement()?.textContent
+      ?? null
+  }
+
+  /**
+   * Watch the rendered text for changes.
+   */
+  observeTextElement () {
+    const textElement = this.extractTextElement()
+
+    if (!textElement) {
+      return
+    }
+
+    const observer = this.Ctor.createMutationObserver({
+      handler: () => this.syncText(),
+    })
+
+    observer.observe(textElement, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+    })
+
+    this.observerRef.value = observer
+  }
+
+  /**
+   * Replace the recorded option text when the rendered text differs from it.
+   */
+  syncText () {
+    const text = this.extractText()
+
+    if (text === null) {
+      return
+    }
+
+    if (text === this.recordedTextRef.value) {
+      return
+    }
+
+    this.recordedTextRef.value = text
+    this.selectRootContext.onOptionAdd({
+      value: this.selectItemContext.value,
+      disabled: this.selectItemContext.disabled.value,
+      textContent: text,
+    })
+  }
+
+  /**
+   * Stop watching the rendered text.
+   */
+  disconnectObserver () {
+    this.observerRef.value?.disconnect()
+    this.observerRef.value = null
+  }
+}
+
+/**
+ * @typedef {{
+ *   onOptionAdd: (option: {
+ *     value: unknown
+ *     disabled: boolean
+ *     textContent: string
+ *   }) => void
+ * }} FuroSelectRootContext
+ */
+
+/**
+ * @typedef {{
+ *   value: unknown
+ *   disabled: import('vue').Ref<boolean>
+ * }} FuroSelectItemContext
+ */
+
+/**
+ * @typedef {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
+ * }} FuroSelectOptionTextContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroSelectOptionTextContextParams, 'refHash' | 'selectRootContext' | 'selectItemContext'> & {
+ *   refHash?: FuroSelectOptionTextContextParams['refHash']
+ *   selectRootContext?: FuroSelectRootContext
+ *   selectItemContext?: FuroSelectItemContext
+ * }} FuroSelectOptionTextContextFactoryParams
+ */