@openreachtech/furo-vue 1.3.2 → 1.5.0

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

@@ -19,6 +19,7 @@ export default defineComponent({
     SelectTrigger: RekaSelect['Trigger'],
     SelectValue: RekaSelect['Value'],
     SelectIcon: RekaSelect['Icon'],
+    SelectPortal: RekaSelect['Portal'],
     SelectContent: RekaSelect['Content'],
     SelectViewport: RekaSelect['Viewport'],
     SelectScrollUpButton: RekaSelect['ScrollUpButton'],
@@ -150,163 +151,165 @@ export default defineComponent({
         </slot>
       </SelectTrigger>
 
-      <SelectContent
-        class="unit-select-content"
-        :side-offset="4"
-        v-bind="context.extractContentAttributes()"
-      >
-        <slot name="content-before" />
-
-        <SelectScrollUpButton class="scroll-up-button">
-          <slot name="scroll-up-button">
-            <FuroIcon name="ph:caret-up" />
-          </slot>
-        </SelectScrollUpButton>
-
-        <SelectViewport class="viewport">
-          <template
-            v-for="(option, index) in context.parcel?.options"
-            :key="index"
-          >
-            <template v-if="context.shouldShowGroupOption({ option })">
-              <SelectGroup
-                class="group"
-                :disabled="option.disabled"
-              >
-                <slot
-                  name="group"
-                  :group="option"
-                  :group-index="index"
-                >
-                  <SelectLabel class="label">
-                    <slot
-                      name="group-label"
-                      :group="option"
-                      :group-index="index"
-                    >
-                      {{ context.resolveOptionLabel({ option }) }}
-                    </slot>
-                  </SelectLabel>
+      <SelectPortal v-bind="context.extractPortalAttributes()">
+        <SelectContent
+          class="unit-select-content"
+          :side-offset="4"
+          v-bind="context.extractContentAttributes()"
+        >
+          <slot name="content-before" />
+
+          <SelectScrollUpButton class="scroll-up-button">
+            <slot name="scroll-up-button">
+              <FuroIcon name="ph:caret-up" />
+            </slot>
+          </SelectScrollUpButton>
 
-                  <template
-                    v-for="(groupChildOption, groupChildIndex) in context.extractGroupOptions({ option })"
-                    :key="groupChildIndex"
+          <SelectViewport class="viewport">
+            <template
+              v-for="(option, index) in context.parcel?.options"
+              :key="index"
+            >
+              <template v-if="context.shouldShowGroupOption({ option })">
+                <SelectGroup
+                  class="group"
+                  :disabled="option.disabled"
+                >
+                  <slot
+                    name="group"
+                    :group="option"
+                    :group-index="index"
                   >
-                    <SelectOption
-                      class="option"
-                      :value="context.resolveOptionValue({ option: groupChildOption })"
-                      :disabled="groupChildOption.disabled || option.disabled"
-                    >
+                    <SelectLabel class="label">
                       <slot
-                        name="option"
+                        name="group-label"
                         :group="option"
                         :group-index="index"
-                        :option="groupChildOption"
-                        :option-index="groupChildIndex"
                       >
-                        <SelectOptionText>
-                          <slot
-                            name="option-text"
-                            :option="groupChildOption"
-                            :option-index="groupChildIndex"
-                          >
-                            {{ context.resolveOptionLabel({ option: groupChildOption }) }}
-                          </slot>
-                        </SelectOptionText>
-
-                        <SelectOptionIndicator class="select-indicator">
-                          <slot
-                            name="option-indicator"
-                            :option="groupChildOption"
-                            :option-index="groupChildIndex"
-                          >
-                            <FuroIcon name="ph:check" />
-                          </slot>
-                        </SelectOptionIndicator>
+                        {{ context.resolveOptionLabel({ option }) }}
                       </slot>
-                    </SelectOption>
+                    </SelectLabel>
 
-                    <slot
-                      v-if="groupChildOption.separator"
-                      name="separator"
-                      :option="groupChildOption"
-                      :option-index="groupChildIndex"
+                    <template
+                      v-for="(groupChildOption, groupChildIndex) in context.extractGroupOptions({ option })"
+                      :key="groupChildIndex"
                     >
-                      <SelectSeparator class="separator" />
-                    </slot>
-                  </template>
-                </slot>
-              </SelectGroup>
-            </template>
+                      <SelectOption
+                        class="option"
+                        :value="context.resolveOptionValue({ option: groupChildOption })"
+                        :disabled="groupChildOption.disabled || option.disabled"
+                      >
+                        <slot
+                          name="option"
+                          :group="option"
+                          :group-index="index"
+                          :option="groupChildOption"
+                          :option-index="groupChildIndex"
+                        >
+                          <SelectOptionText>
+                            <slot
+                              name="option-text"
+                              :option="groupChildOption"
+                              :option-index="groupChildIndex"
+                            >
+                              {{ context.resolveOptionLabel({ option: groupChildOption }) }}
+                            </slot>
+                          </SelectOptionText>
+
+                          <SelectOptionIndicator class="select-indicator">
+                            <slot
+                              name="option-indicator"
+                              :option="groupChildOption"
+                              :option-index="groupChildIndex"
+                            >
+                              <FuroIcon name="ph:check" />
+                            </slot>
+                          </SelectOptionIndicator>
+                        </slot>
+                      </SelectOption>
 
-            <template v-else>
-              <SelectOption
-                :value="context.resolveOptionValue({ option })"
-                class="option"
-                :disabled="option.disabled"
-              >
-                <slot
-                  name="option"
-                  :option="option"
-                  :option-index="index"
+                      <slot
+                        v-if="groupChildOption.separator"
+                        name="separator"
+                        :option="groupChildOption"
+                        :option-index="groupChildIndex"
+                      >
+                        <SelectSeparator class="separator" />
+                      </slot>
+                    </template>
+                  </slot>
+                </SelectGroup>
+              </template>
+
+              <template v-else>
+                <SelectOption
+                  :value="context.resolveOptionValue({ option })"
+                  class="option"
+                  :disabled="option.disabled"
                 >
-                  <SelectOptionText>
-                    <slot
-                      name="option-text"
-                      :option="option"
-                      :option-index="index"
-                    >
-                      {{ context.resolveOptionLabel({ option }) }}
-                    </slot>
-                  </SelectOptionText>
-
-                  <SelectOptionIndicator class="select-indicator">
-                    <slot
-                      name="option-indicator"
-                      :option="option"
-                      :option-index="index"
-                    >
-                      <FuroIcon
-                        name="ph:check"
-                      />
-                    </slot>
-                  </SelectOptionIndicator>
-                </slot>
-              </SelectOption>
+                  <slot
+                    name="option"
+                    :option="option"
+                    :option-index="index"
+                  >
+                    <SelectOptionText>
+                      <slot
+                        name="option-text"
+                        :option="option"
+                        :option-index="index"
+                      >
+                        {{ context.resolveOptionLabel({ option }) }}
+                      </slot>
+                    </SelectOptionText>
+
+                    <SelectOptionIndicator class="select-indicator">
+                      <slot
+                        name="option-indicator"
+                        :option="option"
+                        :option-index="index"
+                      >
+                        <FuroIcon
+                          name="ph:check"
+                        />
+                      </slot>
+                    </SelectOptionIndicator>
+                  </slot>
+                </SelectOption>
+              </template>
+
+              <slot
+                v-if="option.separator"
+                name="separator"
+                :option="option"
+                :option-index="index"
+              >
+                <SelectSeparator class="separator" />
+              </slot>
             </template>
 
-            <slot
-              v-if="option.separator"
-              name="separator"
-              :option="option"
-              :option-index="index"
+            <SelectOption
+              v-if="context.hasEmptyOptions()"
+              :value="null"
+              class="option"
+              @select.stop.prevent
             >
-              <SelectSeparator class="separator" />
+              <SelectOptionText class="empty-text">
+                <slot name="empty">
+                  No options
+                </slot>
+              </SelectOptionText>
+            </SelectOption>
+          </SelectViewport>
+
+          <SelectScrollDownButton class="scroll-down-button">
+            <slot name="scroll-down-button">
+              <FuroIcon name="ph:caret-down" />
             </slot>
-          </template>
+          </SelectScrollDownButton>
 
-          <SelectOption
-            v-if="context.hasEmptyOptions()"
-            :value="null"
-            class="option"
-            @select.stop.prevent
-          >
-            <SelectOptionText class="empty-text">
-              <slot name="empty">
-                No options
-              </slot>
-            </SelectOptionText>
-          </SelectOption>
-        </SelectViewport>
-
-        <SelectScrollDownButton class="scroll-down-button">
-          <slot name="scroll-down-button">
-            <FuroIcon name="ph:caret-down" />
-          </slot>
-        </SelectScrollDownButton>
-
-        <slot name="content-after" />
-      </SelectContent>
+          <slot name="content-after" />
+        </SelectContent>
+      </SelectPortal>
     </SelectRoot>
   </div>
 </template>
@@ -426,7 +429,7 @@ export default defineComponent({
     padding-block: 0.25rem;
     padding-inline: 0.375rem;
 
-    min-height: calc(var(--size-input-height) - 0.5rem);
+    min-height: var(--size-option-height);
 
     font: var(--font-body-medium);
     user-select: none;

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

@@ -97,9 +97,9 @@ export default class FuroSelectContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => {},
-      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => {},
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => true,
     }
   }
 
@@ -369,6 +369,15 @@ export default class FuroSelectContext extends BaseFuroContext {
     return this.triggerParcel
   }
 
+  /**
+   * Extract portal attributes.
+   *
+   * @returns {Props['portalParcel']}
+   */
+  extractPortalAttributes () {
+    return this.portalParcel
+  }
+
   /**
    * Extract content attributes.
    *

package/lib/components/molecules/FuroSkeleton/FuroSkeleton.vue

@@ -78,22 +78,32 @@ export default defineComponent({
   }
 
   .unit-skeleton.animated {
-    animation: furo-skeleton-pulse 1.5s ease-in-out infinite;
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--color-background) 50%,
+      transparent 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 200% 100%;
+
+    animation: furo-skeleton-shimmer 1.8s ease-in-out infinite;
   }
 
-  @keyframes furo-skeleton-pulse {
-    0%,
-    100% {
-      opacity: 1;
+  @keyframes furo-skeleton-shimmer {
+    from {
+      background-position: 200% 0;
     }
 
-    50% {
-      opacity: 0.4;
+    to {
+      background-position: -200% 0;
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
     .unit-skeleton.animated {
+      background-image: none;
+
       animation: none;
     }
   }

package/lib/components/molecules/FuroSkeleton/FuroSkeletonContext.js

@@ -5,7 +5,7 @@ import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
  *
  * Presentational loading placeholder shown while real content is fetching.
  * Carries no value and emits nothing — shape comes from the variant, size from
- * optional width / height, and a pulse animation signals the loading state.
+ * optional width / height, and a shimmer animation signals the loading state.
  *
  * @extends {BaseFuroContext<null, Props, null>}
  */
@@ -59,7 +59,7 @@ export default class FuroSkeletonContext extends BaseFuroContext {
   }
 
   /**
-   * Whether the pulse animation runs. Reduced-motion users still get a static
+   * Whether the shimmer animation runs. Reduced-motion users still get a static
    * placeholder via the CSS media query.
    *
    * @returns {boolean} true when animated; defaults to true.

package/lib/components/molecules/FuroSplitter/FuroSplitter.vue

@@ -206,7 +206,7 @@ export default defineComponent({
 
   /* Keyboard focus ring (arrow keys resize the focused handle). */
   .unit-splitter-handle:focus-visible {
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-splitter-handle[data-disabled] {

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

@@ -120,8 +120,8 @@ export default class FuroSplitterContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: layout => {},
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: layout => true,
     }
   }
 

package/lib/components/molecules/FuroTimeField/FuroTimeField.vue

@@ -245,7 +245,7 @@ export default defineComponent({
 
   .unit-form-control.time-field > .field > .field-input:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 }
 </style>

package/lib/components/molecules/FuroTimeField/FuroTimeFieldContext.js

@@ -132,9 +132,9 @@ export default class FuroTimeFieldContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => {},
-      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => {},
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => true,
     }
   }
 

package/lib/components/molecules/FuroToggleGroup/FuroToggleGroup.vue

@@ -141,7 +141,7 @@ export default defineComponent({
 
   .unit-toggle-group-item:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-toggle-group-item.disabled {
@@ -180,7 +180,7 @@ export default defineComponent({
   .unit-toggle-group-item.outline[data-state="on"]:focus-visible {
     box-shadow:
       inset 0 0 0 0.0625rem var(--color-border),
-      0 0 0 0.125rem var(--color-ring);
+      0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-toggle-group-item.default[data-state="on"]:hover,

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

@@ -106,8 +106,8 @@ export default class FuroToggleGroupContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => {},
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => true,
     }
   }
 
@@ -437,7 +437,9 @@ export default class FuroToggleGroupContext extends BaseFuroContext {
     const value = rawValue
       ?? this.resolveDefaultValue()
 
-    this.internalValueRef.value = value
+    if (!this.isControlled()) {
+      this.internalValueRef.value = value
+    }
 
     const customEvent = this.buildCustomEvent({
       name: this.EMIT_EVENT_NAME.CHANGE_VALUE,

package/lib/components/molecules/FuroTooltip/FuroTooltip.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 
   .unit-tooltip-trigger:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-tooltip-content {

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

@@ -93,7 +93,7 @@ export default class FuroTooltipContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => {},
+      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => true,
     }
   }
 

package/lib/components/organisms/FuroAlertDialog/FuroAlertDialog.vue

@@ -87,6 +87,7 @@ export default defineComponent({
         <AlertDialogOverlay class="unit-alert-dialog-overlay" />
 
         <AlertDialogContent
+          v-bind="context.extractContentAttributes()"
           :class="context.extractContentClassNames()"
           @interact-outside="context.onInteractOutside({
             rawEvent: $event,
@@ -229,7 +230,7 @@ export default defineComponent({
 
   .unit-alert-dialog-content:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-alert-dialog-content > .header {

package/lib/components/organisms/FuroAlertDialog/FuroAlertDialogContext.js

@@ -120,10 +120,10 @@ export default class FuroAlertDialogContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.CONFIRM]: () => {},
-      [this.EMIT_EVENT_NAME.CANCEL]: () => {},
-      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_OPEN]: payload => {},
+      [this.EMIT_EVENT_NAME.CONFIRM]: () => true,
+      [this.EMIT_EVENT_NAME.CANCEL]: () => true,
+      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_OPEN]: payload => true,
     }
   }
 
@@ -268,6 +268,19 @@ export default class FuroAlertDialogContext extends BaseFuroContext {
     ])
   }
 
+  /**
+   * Extract attributes forwarded to the content element.
+   *
+   * @returns {Record<string, undefined>} `aria-describedby` cleared when no description renders.
+   */
+  extractContentAttributes () {
+    return this.hasDescription()
+      ? {}
+      : {
+        'aria-describedby': undefined,
+      }
+  }
+
   /**
    * CSS selector (scoped to dialog content) for the element to focus on open.
    *

package/lib/components/organisms/FuroDialog/FuroDialog.vue

@@ -86,6 +86,7 @@ export default defineComponent({
         />
 
         <DialogContent
+          v-bind="context.extractContentAttributes()"
           :class="context.extractContentClassNames()"
           @interact-outside="context.onInteractOutside({
             rawEvent: $event,
@@ -225,7 +226,7 @@ export default defineComponent({
 
   .unit-dialog-content:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-dialog-content > .header {
@@ -277,8 +278,8 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
 
-    width: 1.75rem;
-    height: 1.75rem;
+    width: var(--size-close-button-medium);
+    height: var(--size-close-button-medium);
 
     border: none;
     border-radius: var(--size-border-radius-small);
@@ -301,7 +302,7 @@ export default defineComponent({
 
   .unit-dialog-content > .built-in-close:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-dialog-content > .built-in-close:disabled {

package/lib/components/organisms/FuroDialog/FuroDialogContext.js

@@ -112,8 +112,8 @@ export default class FuroDialogContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_OPEN]: payload => {},
+      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_OPEN]: payload => true,
     }
   }
 
@@ -267,6 +267,19 @@ export default class FuroDialogContext extends BaseFuroContext {
     ])
   }
 
+  /**
+   * Extract attributes forwarded to the content element.
+   *
+   * @returns {Record<string, undefined>} `aria-describedby` cleared when no description renders.
+   */
+  extractContentAttributes () {
+    return this.hasDescription()
+      ? {}
+      : {
+        'aria-describedby': undefined,
+      }
+  }
+
   /**
    * CSS selector (scoped to dialog content) for the element to focus on open.
    *