@openreachtech/furo-vue 1.3.2 → 1.4.0

package/lib/assets/css/furo/0035.variables-semantic-dimension.css

@@ -43,12 +43,14 @@
   --size-screen-height: 100dvh;
   --size-header-height: 4.5rem;
   --size-footer-height: 6rem;
+  --size-table-cell-inline: 1rem;
+  --size-table-cell-block: 0;
   --size-sidebar-width: 16rem;
   --size-sidebar-width-collapsed: 4rem;
   /* Deprecated, removed in the next minor. Read --size-sidebar-width, which
      carries the width the rail actually renders. */
   --size-nav-width: var(--size-sidebar-width);
-  --size-focus-ring-spread: 0.1875rem;
+  --size-focus-ring-spread: 0.125rem;
 
   /* Typography */
   --font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
@@ -93,6 +95,7 @@
 
   /* Motion */
   --transition-timer: 0.2s;
+  --transition-timer-spin: 0.75s;
 
   /* Constants */
   --value-golden-ratio: 1.618;

package/lib/components/atoms/FuroButton/FuroButton.vue

@@ -138,7 +138,7 @@ export default defineComponent({
 
   .unit-button: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-button:active:not(.disabled):not(.loading) {
@@ -191,7 +191,7 @@ export default defineComponent({
 
   .unit-button > .content-root > .loading-overlay > .loading-icon,
   .unit-button > .content-root > .loading-overlay > :deep(.loading-icon) {
-    animation: furo-button-spin var(--transition-timer) linear infinite;
+    animation: furo-button-spin var(--transition-timer-spin) linear infinite;
   }
 
   .unit-button.default {
@@ -297,5 +297,12 @@ export default defineComponent({
       transform: rotate(360deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-button > .content-root > .loading-overlay > .loading-icon,
+    .unit-button > .content-root > .loading-overlay > :deep(.loading-icon) {
+      animation: none;
+    }
+  }
 }
 </style>

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

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

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

@@ -108,9 +108,9 @@ export default class FuroCheckboxContext 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.UPDATE_INDETERMINATE]: indeterminate => {},
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => true,
+      [this.EMIT_EVENT_NAME.UPDATE_INDETERMINATE]: indeterminate => true,
     }
   }
 

package/lib/components/atoms/FuroFileField/FuroFileFieldContext.js

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

package/lib/components/atoms/FuroRadio/FuroRadio.vue

@@ -156,7 +156,7 @@ export default defineComponent({
 
   .unit-form-control.radio-group > .option > .radio: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-form-control.radio-group.invalid > .option > .radio {

package/lib/components/atoms/FuroRadio/FuroRadioContext.js

@@ -105,8 +105,8 @@ export default class FuroRadioContext 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,
     }
   }
 

package/lib/components/atoms/FuroSwitch/FuroSwitch.vue

@@ -131,7 +131,7 @@ export default defineComponent({
   .unit-form-control.switch: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);
   }
 
   /* The design gives the disabled track a colour of its own rather than dimming

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

@@ -107,8 +107,8 @@ export default class FuroSwitchContext 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,
     }
   }
 

package/lib/components/atoms/FuroTextarea/FuroTextareaContext.js

@@ -84,9 +84,9 @@ export default class FuroTextareaContext 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]: payload => {},
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: payload => true,
     }
   }
 

package/lib/components/atoms/FuroToggle/FuroToggle.vue

@@ -110,7 +110,7 @@ export default defineComponent({
 
   .unit-toggle: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.disabled {

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

@@ -103,8 +103,8 @@ export default class FuroToggleContext 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,
     }
   }
 

package/lib/components/molecules/FuroAccordion/FuroAccordion.vue

@@ -165,7 +165,7 @@ export default defineComponent({
 
   .unit-accordion > .unit-accordion-item > .header > .trigger:focus-visible {
     outline: none;
-    box-shadow: inset 0 0 0 0.125rem var(--color-ring);
+    box-shadow: inset 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-accordion > .unit-accordion-item.disabled > .header > .trigger {

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

@@ -110,8 +110,8 @@ export default class FuroAccordionContext 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,
     }
   }
 

package/lib/components/molecules/FuroAttachment/FuroAttachmentContext.js

@@ -115,8 +115,8 @@ export default class FuroAttachmentContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.DOWNLOAD]: payload => {},
-      [this.EMIT_EVENT_NAME.REMOVE]: payload => {},
+      [this.EMIT_EVENT_NAME.DOWNLOAD]: payload => true,
+      [this.EMIT_EVENT_NAME.REMOVE]: payload => true,
     }
   }
 

package/lib/components/molecules/FuroAutocompleteField/FuroAutocompleteField.vue

@@ -43,6 +43,14 @@ export default defineComponent({
       ],
       default: null,
     },
+    inputParcel: {
+      /** @type {PropType<FuroAutocompleteFieldContext['inputParcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
   },
 
   slots: /** @type {FuroAutocompleteFieldSlots} */ (Object),
@@ -139,6 +147,7 @@ export default defineComponent({
       </template>
 
       <ComboboxInput
+        v-bind="context.extractInputAttributes()"
         class="input"
         :placeholder="context.extractPlaceholderText()"
         :display-value="(value) => context.extractDisplayValue({ option: value })"

package/lib/components/molecules/FuroAutocompleteField/FuroAutocompleteFieldContext.js

@@ -134,13 +134,13 @@ export default class FuroAutocompleteFieldContext 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.UPDATE_SEARCH_KEYWORD]: searchKeyword => {},
-      [this.EMIT_EVENT_NAME.SEARCH_KEYWORD]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_OPEN]: isOpen => {},
-      [this.EMIT_EVENT_NAME.CREATE_OPTION]: payload => {},
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => true,
+      [this.EMIT_EVENT_NAME.UPDATE_SEARCH_KEYWORD]: searchKeyword => true,
+      [this.EMIT_EVENT_NAME.SEARCH_KEYWORD]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_OPEN]: isOpen => true,
+      [this.EMIT_EVENT_NAME.CREATE_OPTION]: payload => true,
     }
   }
 
@@ -225,6 +225,16 @@ export default class FuroAutocompleteFieldContext extends BaseFuroContext {
     }
   }
 
+  /**
+   * get: attributes bound onto the inner combobox input.
+   *
+   * @returns {Props['inputParcel']}
+   */
+  get inputParcel () {
+    return this.props.inputParcel
+      ?? null
+  }
+
   /**
    * Get loading.
    *
@@ -1373,6 +1383,15 @@ export default class FuroAutocompleteFieldContext extends BaseFuroContext {
     return this.parcel?.placeholder
       ?? 'Select an option'
   }
+
+  /**
+   * Extract the attributes bound onto the inner combobox input.
+   *
+   * @returns {Props['inputParcel']}
+   */
+  extractInputAttributes () {
+    return this.inputParcel
+  }
 }
 
 /**
@@ -1407,9 +1426,17 @@ export default class FuroAutocompleteFieldContext extends BaseFuroContext {
 /**
  * @typedef {import('vue').HTMLAttributes & {
  *   parcel?: FuroAutocompleteFieldParcel | null
+ *   inputParcel?: FuroAutocompleteFieldInputParcel | null
  * }} Props
  */
 
+/**
+ * Attributes for the inner `<input role="combobox">` (`id`, `name`, `aria-*`, `required`, …).
+ * The component keeps `placeholder`, the display text and the search keyword for itself.
+ *
+ * @typedef {Omit<import('vue').InputHTMLAttributes, 'placeholder' | 'value'>} FuroAutocompleteFieldInputParcel
+ */
+
 /**
  * Closed-set Furo behavior for `<FuroAutocompleteField>`.
  * JSON-serializable only. Not an open passthrough to the internal combobox library.

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

@@ -194,7 +194,7 @@ export default defineComponent({
   .unit-breadcrumb > .trail > .entry > a.crumb:focus-visible {
     outline: none;
     border-radius: var(--size-border-radius-2x-small);
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-breadcrumb > .trail > .entry > .crumb.disabled {

package/lib/components/molecules/FuroCollapsible/FuroCollapsible.vue

@@ -124,7 +124,7 @@ export default defineComponent({
   .unit-collapsible > .trigger:focus-visible {
     outline: none;
     border-radius: var(--size-border-radius-medium);
-    box-shadow: 0 0 0 0.125rem var(--color-ring);
+    box-shadow: 0 0 0 var(--size-focus-ring-spread) var(--color-ring);
   }
 
   .unit-collapsible.disabled > .trigger {

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

@@ -105,8 +105,8 @@ export default class FuroCollapsibleContext 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,
     }
   }
 

package/lib/components/molecules/FuroDatePicker/FuroDatePicker.vue

@@ -363,7 +363,7 @@ export default defineComponent({
 
   .unit-form-control.date-picker > .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);
   }
 
   .unit-form-control.date-picker > .field > .trigger {
@@ -390,7 +390,7 @@ export default defineComponent({
   }
 
   .unit-form-control.date-picker > .field > .trigger:focus-visible {
-    outline: 0.125rem solid var(--color-ring);
+    outline: var(--size-focus-ring-spread) solid var(--color-ring);
     outline-offset: 0.0625rem;
     border-radius: var(--size-border-radius-small);
   }
@@ -525,7 +525,7 @@ export default defineComponent({
   }
 
   .unit-date-picker-content > .calendar > .calendar-header > .calendar-nav-button:focus-visible {
-    outline: 0.125rem solid var(--color-ring);
+    outline: var(--size-focus-ring-spread) solid var(--color-ring);
     outline-offset: 0.0625rem;
   }
 
@@ -564,7 +564,7 @@ export default defineComponent({
   }
 
   .unit-date-picker-content > .calendar > .calendar-header > .calendar-caption > .caption-select:focus-visible {
-    outline: 0.125rem solid var(--color-ring);
+    outline: var(--size-focus-ring-spread) solid var(--color-ring);
     outline-offset: 0.0625rem;
     border-color: var(--color-ring);
   }
@@ -618,7 +618,7 @@ export default defineComponent({
   .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-focused]:not([data-selected]) {
     background-color: var(--color-accent);
     color: var(--color-accent-foreground);
-    outline: 0.125rem solid var(--color-ring);
+    outline: var(--size-focus-ring-spread) solid var(--color-ring);
     outline-offset: 0.0625rem;
   }
 
@@ -628,7 +628,7 @@ export default defineComponent({
   }
 
   .unit-date-picker-content > .calendar > .calendar-grids > .calendar-grid > tbody > .calendar-row > .calendar-cell > .calendar-cell-trigger[data-selected][data-focused] {
-    outline: 0.125rem solid var(--color-primary-foreground);
+    outline: var(--size-focus-ring-spread) solid var(--color-primary-foreground);
     outline-offset: -0.1875rem;
   }
 

package/lib/components/molecules/FuroDatePicker/FuroDatePickerContext.js

@@ -143,9 +143,9 @@ export default class FuroDatePickerContext 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/FuroDateTimePicker/FuroDateTimePickerContext.js

@@ -131,9 +131,9 @@ export default class FuroDateTimePickerContext 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/FuroDropdownMenu/FuroDropdownMenu.vue

@@ -168,7 +168,7 @@ export default defineComponent({
 
   .unit-dropdown-menu > .unit-button: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-dropdown-menu > .unit-button:active:not(.disabled):not(.loading):not([data-disabled]) {

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

@@ -126,9 +126,9 @@ export default class FuroDropdownMenuContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => {},
-      [this.EMIT_EVENT_NAME.OPTION_SELECT]: payload => {},
-      [this.EMIT_EVENT_NAME.OPTION_CHECKED_CHANGE]: payload => {},
+      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => true,
+      [this.EMIT_EVENT_NAME.OPTION_SELECT]: payload => true,
+      [this.EMIT_EVENT_NAME.OPTION_CHECKED_CHANGE]: payload => true,
     }
   }
 

package/lib/components/molecules/FuroEditableField/FuroEditableField.vue

@@ -298,6 +298,8 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+
+    font: inherit;
   }
 
   .unit-form-control.editable > .contents > .editor > .actions > .action {

package/lib/components/molecules/FuroEditableField/FuroEditableFieldContext.js

@@ -153,8 +153,8 @@ export default class FuroEditableFieldContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_EDITING_STATE]: editing => {},
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_EDITING_STATE]: editing => true,
     }
   }
 

package/lib/components/molecules/FuroPagination/FuroPagination.vue

@@ -186,7 +186,7 @@ export default defineComponent({
 
   .unit-pagination .page: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-pagination :where(.previous, .next) {
@@ -218,7 +218,7 @@ export default defineComponent({
 
   .unit-pagination :where(.previous, .next):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-pagination :where(.previous, .next):disabled {

package/lib/components/molecules/FuroPagination/FuroPaginationContext.js

@@ -100,8 +100,8 @@ export default class FuroPaginationContext extends BaseFuroContext {
    */
   static get EMIT_EVENT_HASH () {
     return {
-      [this.EMIT_EVENT_NAME.PAGE_CHANGE]: payload => {},
-      [this.EMIT_EVENT_NAME.UPDATE_PAGE]: payload => {},
+      [this.EMIT_EVENT_NAME.PAGE_CHANGE]: payload => true,
+      [this.EMIT_EVENT_NAME.UPDATE_PAGE]: payload => true,
     }
   }
 

package/lib/components/molecules/FuroPopover/FuroPopover.vue

@@ -103,7 +103,7 @@ export default defineComponent({
 
   .unit-popover-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-popover-content {
@@ -136,7 +136,7 @@ export default defineComponent({
   }
 
   .unit-popover-content[data-state="closed"] {
-    animation: furo-popover-content-out 100ms ease;
+    animation: furo-popover-content-out 100ms ease forwards;
   }
 
   @keyframes furo-popover-content-in {
@@ -158,6 +158,7 @@ export default defineComponent({
     to {
       opacity: 0;
       transform: scale(0.95);
+      visibility: hidden;
     }
   }
 

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

@@ -94,7 +94,7 @@ export default class FuroPopoverContext 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/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,
     }
   }
 

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,
     }
   }