@fusion.dev/helix-core 0.143.0 → 0.144.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/custom-elements.json +9098 -3887
  2. package/dist/controllers/aria-forward-controller/aria-forward-controller.d.ts +10 -0
  3. package/dist/controllers/aria-forward-controller/aria-forward-controller.js +5 -0
  4. package/dist/controllers/chart-pointer-controller/chart-pointer-controller.d.ts +89 -0
  5. package/dist/controllers/chart-pointer-controller/chart-pointer-controller.js +102 -1
  6. package/dist/controllers/chart-pointer-controller/reading-step.d.ts +57 -0
  7. package/dist/controllers/chart-pointer-controller/reading-step.js +45 -0
  8. package/dist/controllers/copy-controller/copy-controller.d.ts +11 -6
  9. package/dist/controllers/copy-controller/copy-controller.js +11 -9
  10. package/dist/controllers/delay-controller/delay-controller.d.ts +50 -0
  11. package/dist/controllers/delay-controller/delay-controller.js +54 -0
  12. package/dist/controllers/focus-scope-controller/focus-scope-controller.d.ts +56 -0
  13. package/dist/controllers/focus-scope-controller/focus-scope-controller.js +71 -0
  14. package/dist/controllers/open-phase-controller/open-phase-controller.d.ts +49 -0
  15. package/dist/controllers/open-phase-controller/open-phase-controller.js +41 -0
  16. package/dist/controllers/source-controller/source-controller.d.ts +16 -0
  17. package/dist/controllers/source-controller/source-controller.js +44 -1
  18. package/dist/controllers/status-controller/status-controller.d.ts +47 -0
  19. package/dist/controllers/status-controller/status-controller.js +34 -0
  20. package/dist/controllers/swipe-controller/swipe-controller.d.ts +61 -0
  21. package/dist/controllers/swipe-controller/swipe-controller.js +106 -0
  22. package/dist/events/events.d.ts +35 -0
  23. package/dist/events/events.js +12 -0
  24. package/dist/index.d.ts +28 -8
  25. package/dist/index.js +27 -7
  26. package/dist/mixins/mixin-chart-source/mixin-chart-source.d.ts +7 -2
  27. package/dist/mixins/mixin-chart-source/mixin-chart-source.js +5 -1
  28. package/dist/mixins/mixin-controller-checked/mixin-controller-checked.d.ts +10 -0
  29. package/dist/mixins/mixin-controller-checked/mixin-controller-checked.js +9 -0
  30. package/dist/mixins/mixin-dismissible/mixin-dismissible.d.ts +2 -0
  31. package/dist/mixins/mixin-dismissible/mixin-dismissible.js +7 -3
  32. package/dist/mixins/mixin-field/mixin-field.d.ts +2 -0
  33. package/dist/mixins/mixin-field/mixin-field.js +8 -0
  34. package/dist/mixins/mixin-picker-editing/mixin-picker-editing.d.ts +16 -6
  35. package/dist/mixins/mixin-picker-editing/mixin-picker-editing.js +19 -1
  36. package/dist/mixins/mixin-picker-field/mixin-picker-field.d.ts +5 -4
  37. package/dist/mixins/mixin-picker-field/mixin-picker-field.js +12 -1
  38. package/dist/mixins/mixin-segmented-field/mixin-segmented-field.d.ts +67 -0
  39. package/dist/mixins/mixin-segmented-field/mixin-segmented-field.js +243 -0
  40. package/dist/utils/arrow/arrow.d.ts +15 -0
  41. package/dist/utils/arrow/arrow.js +2 -0
  42. package/dist/utils/audit-name/audit-name.d.ts +28 -0
  43. package/dist/utils/audit-name/audit-name.js +95 -0
  44. package/dist/utils/calendar/calendar.d.ts +117 -0
  45. package/dist/utils/calendar/calendar.js +96 -0
  46. package/dist/utils/chord/chord.d.ts +43 -0
  47. package/dist/utils/chord/chord.js +53 -0
  48. package/dist/utils/clock/clock.d.ts +87 -0
  49. package/dist/utils/clock/clock.js +68 -0
  50. package/dist/utils/color-name/color-name.d.ts +28 -0
  51. package/dist/utils/color-name/color-name.js +150 -0
  52. package/dist/utils/count-label/count-label.d.ts +13 -0
  53. package/dist/utils/count-label/count-label.js +5 -0
  54. package/dist/utils/css-color/css-color.d.ts +12 -0
  55. package/dist/utils/css-color/css-color.js +2 -2
  56. package/dist/utils/date-segments/date-segments.d.ts +122 -0
  57. package/dist/utils/date-segments/date-segments.js +206 -0
  58. package/dist/utils/draw-dismiss/draw-dismiss.d.ts +30 -0
  59. package/dist/utils/draw-dismiss/draw-dismiss.js +16 -0
  60. package/dist/utils/draw-tooltip/draw-tooltip.d.ts +15 -21
  61. package/dist/utils/draw-tooltip/draw-tooltip.js +11 -5
  62. package/dist/utils/draw-tooltip/spoken-reading.d.ts +10 -0
  63. package/dist/utils/draw-tooltip/spoken-reading.js +10 -0
  64. package/dist/utils/follow-link/follow-link.d.ts +46 -0
  65. package/dist/utils/follow-link/follow-link.js +37 -0
  66. package/dist/utils/heading-in/heading-in.d.ts +19 -0
  67. package/dist/utils/heading-in/heading-in.js +14 -0
  68. package/dist/utils/number-format/number-format.d.ts +23 -0
  69. package/dist/utils/number-format/number-format.js +55 -0
  70. package/dist/utils/platform/platform.d.ts +23 -0
  71. package/dist/utils/platform/platform.js +11 -0
  72. package/dist/utils/read-color/read-color.d.ts +14 -0
  73. package/dist/utils/read-color/read-color.js +13 -0
  74. package/dist/utils/read-series/read-series.d.ts +6 -0
  75. package/dist/utils/read-series/read-series.js +1 -0
  76. package/dist/utils/reflect-elements/reflect-elements.d.ts +37 -0
  77. package/dist/utils/reflect-elements/reflect-elements.js +40 -0
  78. package/dist/utils/relative-time/relative-time.d.ts +13 -1
  79. package/dist/utils/relative-time/relative-time.js +7 -4
  80. package/dist/utils/report-runtime/report-runtime.d.ts +2 -0
  81. package/dist/utils/roving-stop/roving-stop.d.ts +20 -0
  82. package/dist/utils/roving-stop/roving-stop.js +3 -0
  83. package/dist/utils/swipe/swipe.d.ts +63 -0
  84. package/dist/utils/swipe/swipe.js +48 -0
  85. package/dist/utils/tab-stops/tab-stops.d.ts +16 -0
  86. package/dist/utils/tab-stops/tab-stops.js +22 -0
  87. package/dist/utils/value-as/value-as.d.ts +20 -0
  88. package/dist/utils/value-as/value-as.js +16 -0
  89. package/dist/utils/write-time/write-time.d.ts +11 -1
  90. package/dist/utils/write-time/write-time.js +7 -7
  91. package/dist/utils/written-list/written-list.d.ts +18 -0
  92. package/dist/utils/written-list/written-list.js +8 -0
  93. package/dist/version.d.ts +1 -1
  94. package/dist/version.js +1 -1
  95. package/package.json +4 -4
package/dist/index.d.ts CHANGED
@@ -4,25 +4,30 @@ export { ChartPointerController, type ChartPointerHost, } from './controllers/ch
4
4
  export { CommandController, type CommandOptions, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
5
5
  export { CopyController, type CopyOptions, } from './controllers/copy-controller/copy-controller.js';
6
6
  export { activeCue, adoptTrack, type Caption, CueController, captionsAmong, captionTracks, showCaption, } from './controllers/cue-controller/cue-controller.js';
7
+ export { DelayController, type DelayOptions, } from './controllers/delay-controller/delay-controller.js';
7
8
  export { DisabledCascadeController, type DisabledCascadeOptions, } from './controllers/disabled-cascade-controller/disabled-cascade-controller.js';
8
9
  export { DismissController, type DismissOptions, } from './controllers/dismiss-controller/dismiss-controller.js';
9
10
  export { DrilldownController, type DrilldownOptions, } from './controllers/drilldown-controller/drilldown-controller.js';
10
11
  export { FloatingController, type FloatingOptions, type Placement, type Side, } from './controllers/floating-controller/floating-controller.js';
12
+ export { controlsIn, FocusScopeController, type FocusScopeOptions, } from './controllers/focus-scope-controller/focus-scope-controller.js';
11
13
  export { FullscreenController } from './controllers/fullscreen-controller/fullscreen-controller.js';
12
14
  export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
13
15
  export { IdleController } from './controllers/idle-controller/idle-controller.js';
14
16
  export { IndicatorController, type IndicatorOptions, } from './controllers/indicator-controller/indicator-controller.js';
15
17
  export { KeyboardNavigationController, type KeyboardNavigationOptions, type NavigableItem, Typeahead, typesCharacter, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
16
18
  export { MediaSessionController, type SessionHandlers, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
19
+ export { animationsSettled, type OpenPhase, OpenPhaseController, type OpenPhaseOptions, } from './controllers/open-phase-controller/open-phase-controller.js';
17
20
  export { MAX_FRAME_STEP, PaintGateController, type PaintGateOptions, } from './controllers/paint-gate-controller/paint-gate-controller.js';
18
21
  export { PlacementController } from './controllers/placement-controller/placement-controller.js';
19
22
  export { PopoverController, type PopoverOptions, } from './controllers/popover-controller/popover-controller.js';
20
23
  export { RemotePlaybackController, type RemoteReport, } from './controllers/remote-playback-controller/remote-playback-controller.js';
21
24
  export { SourceController, type SourceHost, } from './controllers/source-controller/source-controller.js';
25
+ export { drawStatus, type SayOptions, StatusController, } from './controllers/status-controller/status-controller.js';
26
+ export { SwipeController, type SwipeOptions, } from './controllers/swipe-controller/swipe-controller.js';
22
27
  export { type TokenColor, TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
23
28
  export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
24
29
  export { eventsForTag, registerElementEvents } from './events/element-events.js';
25
- export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
30
+ export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
26
31
  export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
27
32
  export { HelixFormElement } from './helix-form-element/helix-form-element.js';
28
33
  export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -35,22 +40,32 @@ export { type DismissibleElement, MixinDismissible, } from './mixins/mixin-dismi
35
40
  export { MixinField, type MixinFieldInterface } from './mixins/mixin-field/mixin-field.js';
36
41
  export { MixinPickerEditing, type MixinPickerEditingInterface, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
37
42
  export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixin-picker-field/mixin-picker-field.js';
43
+ export { MixinSegmentedField, type MixinSegmentedFieldInterface, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
38
44
  export { MixinSelectableItem, type MixinSelectableItemInterface, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
39
45
  export { MixinTokens, type MixinTokensInterface } from './mixins/mixin-tokens/mixin-tokens.js';
40
46
  export { MixinViewport, type ViewportControlsPlacement, type ViewportElement, type ViewportGestureLabels, type ViewportGestureMode, type ViewportGestures, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
41
47
  export { anchorElement } from './utils/anchor-element/anchor-element.js';
48
+ export { arrowReach, sideOf } from './utils/arrow/arrow.js';
49
+ export { addDays, addMonths, type Barring, barredBy, type CalendarView, localToday, monthOf, monthOut, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
42
50
  export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
51
+ export { ariaChord, type ChordPress, chordParts, matchesChord, printableChord, } from './utils/chord/chord.js';
52
+ export { clockLocale, dayPeriod, type HourCycle, isTwelveHour, nearestTime, offeredTimes, type TimeFault, type TimeRules, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
43
53
  export { closestInstance } from './utils/closest-instance/closest-instance.js';
54
+ export { type ColorWords, colorName, hueName } from './utils/color-name/color-name.js';
55
+ export { countLabel } from './utils/count-label/count-label.js';
44
56
  export { createSheet } from './utils/create-sheet/create-sheet.js';
45
- export { type Color, type ColorFormat, formatColor, parseColor, toCss, } from './utils/css-color/css-color.js';
57
+ export { type Color, type ColorFormat, formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
46
58
  export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
59
+ export { type DrawDismissOptions, drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
47
60
  export { type DrawIconOptions, drawIcon } from './utils/draw-icon/draw-icon.js';
48
61
  export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
49
62
  export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
50
63
  export { type ElementByIdOptions, elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
51
64
  export { fillTemplate } from './utils/fill-template/fill-template.js';
52
65
  export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
66
+ export { afterLinkFollowed, followLink, type LinkModifiers, type LinkTarget, } from './utils/follow-link/follow-link.js';
53
67
  export { formatNumbers } from './utils/format-numbers/format-numbers.js';
68
+ export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
54
69
  export { type HostAria, hostAria } from './utils/host-aria/host-aria.js';
55
70
  export { type DisableableItem, forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
56
71
  export { inlineStep } from './utils/inline-step/inline-step.js';
@@ -59,10 +74,13 @@ export { keyClaimed } from './utils/key-claimed/key-claimed.js';
59
74
  export { type Curve, linePath, type Point } from './utils/line-path/line-path.js';
60
75
  export { markRegion, type RegionOptions } from './utils/mark-region/mark-region.js';
61
76
  export { copiesOf, type MediaCopy, sameCopies, } from './utils/media-copy/media-copy.js';
77
+ export { formatNumber, parseNumber } from './utils/number-format/number-format.js';
62
78
  export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
63
- export { type ColorBytes, readColor } from './utils/read-color/read-color.js';
64
- export { byRow, type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, unbroken, } from './utils/read-series/read-series.js';
65
- export { type Relative, relativeTime, } from './utils/relative-time/relative-time.js';
79
+ export { appleTouch, onApple, type Platform } from './utils/platform/platform.js';
80
+ export { type ColorBytes, readColor, rgbOf } from './utils/read-color/read-color.js';
81
+ export { byRow, type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, seriesKey, unbroken, } from './utils/read-series/read-series.js';
82
+ export { type ElementsProperty, linkDescription, reflectElements, unlinkDescription, } from './utils/reflect-elements/reflect-elements.js';
83
+ export { type Relative, type RelativeOptions, relativeTime, } from './utils/relative-time/relative-time.js';
66
84
  export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
67
85
  export { RUNTIME_LOG, RUNTIME_SLOT, type RuntimeEvent, type RuntimeKind, reportRuntime, } from './utils/report-runtime/report-runtime.js';
68
86
  export { noteVersion, reportUsage, USAGE_SLOT, VERSIONS_SLOT, } from './utils/report-usage/report-usage.js';
@@ -70,6 +88,7 @@ export { reportValues } from './utils/report-values/report-values.js';
70
88
  export { type ChangeRequestOptions, requestChange, } from './utils/request-change/request-change.js';
71
89
  export { type ActivatableItem, resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
72
90
  export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
91
+ export { type RovingOptions, rovingStop } from './utils/roving-stop/roving-stop.js';
73
92
  export { extent, linear, type Scale } from './utils/scale/scale.js';
74
93
  export { ticks } from './utils/scale/ticks.js';
75
94
  export { type ScrollItemOptions, scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
@@ -77,11 +96,12 @@ export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scr
77
96
  export { slotFilled } from './utils/slot-filled/slot-filled.js';
78
97
  export { slottedWords } from './utils/slotted-words/slotted-words.js';
79
98
  export { splitValues } from './utils/split-values/split-values.js';
99
+ export { edgeOffset, FLING, parseSnapPoints, type SwipeAxis, type SwipeEdge, type SwipeRelease, settleSwipe, snapTravel, swipeAxis, swipeEdge, swipeStep, towardEdge, } from './utils/swipe/swipe.js';
80
100
  export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
81
101
  export { subscribe } from './utils/ticker/ticker.js';
82
102
  export { type HelixStatusTone, TONE_MARKS, type ToneMark, toneMark, } from './utils/tone-marks/tone-marks.js';
83
- export { dateAsValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsTime, } from './utils/value-as/value-as.js';
103
+ export { dateAsValue, isClockValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, secondsAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsSeconds, valueAsTime, } from './utils/value-as/value-as.js';
84
104
  export { watchTheme } from './utils/watch-theme/watch-theme.js';
85
- export { writeTime } from './utils/write-time/write-time.js';
86
- export { writtenList, writtenNumbers } from './utils/written-list/written-list.js';
105
+ export { writeClock, writeTime } from './utils/write-time/write-time.js';
106
+ export { commaList, toggleValue, writtenList, writtenNumbers, } from './utils/written-list/written-list.js';
87
107
  export { VERSION } from './version.js';
package/dist/index.js CHANGED
@@ -4,25 +4,30 @@ export { ChartPointerController, } from './controllers/chart-pointer-controller/
4
4
  export { CommandController, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
5
5
  export { CopyController, } from './controllers/copy-controller/copy-controller.js';
6
6
  export { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, showCaption, } from './controllers/cue-controller/cue-controller.js';
7
+ export { DelayController, } from './controllers/delay-controller/delay-controller.js';
7
8
  export { DisabledCascadeController, } from './controllers/disabled-cascade-controller/disabled-cascade-controller.js';
8
9
  export { DismissController, } from './controllers/dismiss-controller/dismiss-controller.js';
9
10
  export { DrilldownController, } from './controllers/drilldown-controller/drilldown-controller.js';
10
11
  export { FloatingController, } from './controllers/floating-controller/floating-controller.js';
12
+ export { controlsIn, FocusScopeController, } from './controllers/focus-scope-controller/focus-scope-controller.js';
11
13
  export { FullscreenController } from './controllers/fullscreen-controller/fullscreen-controller.js';
12
14
  export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
13
15
  export { IdleController } from './controllers/idle-controller/idle-controller.js';
14
16
  export { IndicatorController, } from './controllers/indicator-controller/indicator-controller.js';
15
17
  export { KeyboardNavigationController, Typeahead, typesCharacter, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
16
18
  export { MediaSessionController, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
19
+ export { animationsSettled, OpenPhaseController, } from './controllers/open-phase-controller/open-phase-controller.js';
17
20
  export { MAX_FRAME_STEP, PaintGateController, } from './controllers/paint-gate-controller/paint-gate-controller.js';
18
21
  export { PlacementController } from './controllers/placement-controller/placement-controller.js';
19
22
  export { PopoverController, } from './controllers/popover-controller/popover-controller.js';
20
23
  export { RemotePlaybackController, } from './controllers/remote-playback-controller/remote-playback-controller.js';
21
24
  export { SourceController, } from './controllers/source-controller/source-controller.js';
25
+ export { drawStatus, StatusController, } from './controllers/status-controller/status-controller.js';
26
+ export { SwipeController, } from './controllers/swipe-controller/swipe-controller.js';
22
27
  export { TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
23
28
  export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
24
29
  export { eventsForTag, registerElementEvents } from './events/element-events.js';
25
- export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, } from './events/events.js';
30
+ export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, } from './events/events.js';
26
31
  export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
27
32
  export { HelixFormElement } from './helix-form-element/helix-form-element.js';
28
33
  export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -35,22 +40,32 @@ export { MixinDismissible, } from './mixins/mixin-dismissible/mixin-dismissible.
35
40
  export { MixinField } from './mixins/mixin-field/mixin-field.js';
36
41
  export { MixinPickerEditing, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
37
42
  export { MixinPickerField, } from './mixins/mixin-picker-field/mixin-picker-field.js';
43
+ export { MixinSegmentedField, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
38
44
  export { MixinSelectableItem, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
39
45
  export { MixinTokens } from './mixins/mixin-tokens/mixin-tokens.js';
40
46
  export { MixinViewport, } from './mixins/mixin-viewport/mixin-viewport.js';
41
47
  export { anchorElement } from './utils/anchor-element/anchor-element.js';
48
+ export { arrowReach, sideOf } from './utils/arrow/arrow.js';
49
+ export { addDays, addMonths, barredBy, localToday, monthOf, monthOut, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
42
50
  export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
51
+ export { ariaChord, chordParts, matchesChord, printableChord, } from './utils/chord/chord.js';
52
+ export { clockLocale, dayPeriod, isTwelveHour, nearestTime, offeredTimes, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
43
53
  export { closestInstance } from './utils/closest-instance/closest-instance.js';
54
+ export { colorName, hueName } from './utils/color-name/color-name.js';
55
+ export { countLabel } from './utils/count-label/count-label.js';
44
56
  export { createSheet } from './utils/create-sheet/create-sheet.js';
45
- export { formatColor, parseColor, toCss, } from './utils/css-color/css-color.js';
57
+ export { formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
46
58
  export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
59
+ export { drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
47
60
  export { drawIcon } from './utils/draw-icon/draw-icon.js';
48
61
  export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
49
62
  export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
50
63
  export { elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
51
64
  export { fillTemplate } from './utils/fill-template/fill-template.js';
52
65
  export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
66
+ export { afterLinkFollowed, followLink, } from './utils/follow-link/follow-link.js';
53
67
  export { formatNumbers } from './utils/format-numbers/format-numbers.js';
68
+ export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
54
69
  export { hostAria } from './utils/host-aria/host-aria.js';
55
70
  export { forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
56
71
  export { inlineStep } from './utils/inline-step/inline-step.js';
@@ -59,9 +74,12 @@ export { keyClaimed } from './utils/key-claimed/key-claimed.js';
59
74
  export { linePath } from './utils/line-path/line-path.js';
60
75
  export { markRegion } from './utils/mark-region/mark-region.js';
61
76
  export { copiesOf, sameCopies, } from './utils/media-copy/media-copy.js';
77
+ export { formatNumber, parseNumber } from './utils/number-format/number-format.js';
62
78
  export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
63
- export { readColor } from './utils/read-color/read-color.js';
64
- export { byRow, readRows, readSeries, unbroken, } from './utils/read-series/read-series.js';
79
+ export { appleTouch, onApple } from './utils/platform/platform.js';
80
+ export { readColor, rgbOf } from './utils/read-color/read-color.js';
81
+ export { byRow, readRows, readSeries, seriesKey, unbroken, } from './utils/read-series/read-series.js';
82
+ export { linkDescription, reflectElements, unlinkDescription, } from './utils/reflect-elements/reflect-elements.js';
65
83
  export { relativeTime, } from './utils/relative-time/relative-time.js';
66
84
  export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
67
85
  export { RUNTIME_LOG, RUNTIME_SLOT, reportRuntime, } from './utils/report-runtime/report-runtime.js';
@@ -70,6 +88,7 @@ export { reportValues } from './utils/report-values/report-values.js';
70
88
  export { requestChange, } from './utils/request-change/request-change.js';
71
89
  export { resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
72
90
  export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
91
+ export { rovingStop } from './utils/roving-stop/roving-stop.js';
73
92
  export { extent, linear } from './utils/scale/scale.js';
74
93
  export { ticks } from './utils/scale/ticks.js';
75
94
  export { scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
@@ -77,11 +96,12 @@ export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scr
77
96
  export { slotFilled } from './utils/slot-filled/slot-filled.js';
78
97
  export { slottedWords } from './utils/slotted-words/slotted-words.js';
79
98
  export { splitValues } from './utils/split-values/split-values.js';
99
+ export { edgeOffset, FLING, parseSnapPoints, settleSwipe, snapTravel, swipeAxis, swipeEdge, swipeStep, towardEdge, } from './utils/swipe/swipe.js';
80
100
  export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
81
101
  export { subscribe } from './utils/ticker/ticker.js';
82
102
  export { TONE_MARKS, toneMark, } from './utils/tone-marks/tone-marks.js';
83
- export { dateAsValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsTime, } from './utils/value-as/value-as.js';
103
+ export { dateAsValue, isClockValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, secondsAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsSeconds, valueAsTime, } from './utils/value-as/value-as.js';
84
104
  export { watchTheme } from './utils/watch-theme/watch-theme.js';
85
- export { writeTime } from './utils/write-time/write-time.js';
86
- export { writtenList, writtenNumbers } from './utils/written-list/written-list.js';
105
+ export { writeClock, writeTime } from './utils/write-time/write-time.js';
106
+ export { commaList, toggleValue, writtenList, writtenNumbers, } from './utils/written-list/written-list.js';
87
107
  export { VERSION } from './version.js';
@@ -1,6 +1,6 @@
1
1
  import { ChartPointerController } from '../../controllers/chart-pointer-controller/chart-pointer-controller.js';
2
2
  import type { HelixElement } from '../../helix-element/helix-element.js';
3
- import type { Row, Series } from '../../utils/read-series/read-series.js';
3
+ import { type Row, type Series } from '../../utils/read-series/read-series.js';
4
4
  type Constructor<T> = new (...args: any[]) => T;
5
5
  /**
6
6
  * How many colors the series palette has, and so where it starts over.
@@ -45,7 +45,7 @@ export declare const PLOT_HEIGHT = 100;
45
45
  * nothing to read off the page that says why.
46
46
  *
47
47
  * `writtenList` is the split, and carries the argument for accepting a comma.
48
- * What this adds is the lowercase, the headings being matched
48
+ * What this adds is `seriesKey`, the headings being matched
49
49
  * case-insensitively.
50
50
  */
51
51
  export declare const seriesNames: (list: string | undefined) => string[];
@@ -158,6 +158,11 @@ export declare class MixinChartSourceInterface {
158
158
  * when no series was read from that column.
159
159
  */
160
160
  seriesOf(cell: number): number | undefined;
161
+ /**
162
+ * Whether the series of this name is drawn, which it is unless a legend
163
+ * reading the same table hid it.
164
+ */
165
+ showsSeries(name: string): boolean;
161
166
  /**
162
167
  * The number of readings, which the pointer position maps onto.
163
168
  */
@@ -7,12 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { property } from 'lit/decorators.js';
8
8
  import { ChartPointerController } from '../../controllers/chart-pointer-controller/chart-pointer-controller.js';
9
9
  import { SourceController } from '../../controllers/source-controller/source-controller.js';
10
+ import { seriesKey } from '../../utils/read-series/read-series.js';
10
11
  import { writtenList } from '../../utils/written-list/written-list.js';
11
12
  export const PALETTE = 24;
12
13
  export const seriesIndex = (depth) => (depth % PALETTE) + 1;
13
14
  export const PLOT_WIDTH = 100;
14
15
  export const PLOT_HEIGHT = 100;
15
- export const seriesNames = (list) => writtenList(list).map((name) => name.toLowerCase());
16
+ export const seriesNames = (list) => writtenList(list).map(seriesKey);
16
17
  export const MixinChartSource = (Base) => {
17
18
  class ChartSourceElement extends Base {
18
19
  constructor() {
@@ -47,6 +48,9 @@ export const MixinChartSource = (Base) => {
47
48
  const depth = this.plottedColumns.indexOf(cell);
48
49
  return depth < 0 ? undefined : seriesIndex(depth);
49
50
  }
51
+ showsSeries(name) {
52
+ return !this.source.hidden.has(seriesKey(name));
53
+ }
50
54
  get readings() {
51
55
  return this.sourceRows.length;
52
56
  }
@@ -20,6 +20,16 @@ export declare class MixinControllerCheckedInterface {
20
20
  * Whether the control starts checked. A form reset returns it to this state.
21
21
  */
22
22
  defaultChecked: boolean;
23
+ /**
24
+ * Whether a reader can see and focus the control and cannot change it. A
25
+ * read-only control still submits its value.
26
+ */
27
+ readOnly: boolean;
28
+ /**
29
+ * Refuses a press on the inner control while the control is read-only,
30
+ * bound to its `click`.
31
+ */
32
+ protected readonly holdReadOnly: (event: Event) => void;
23
33
  /**
24
34
  * Requests a change to `checked`, and returns whether it was applied.
25
35
  *
@@ -13,6 +13,12 @@ export const MixinControllerChecked = (Base) => {
13
13
  super(...arguments);
14
14
  this.defaultChecked = false;
15
15
  this.checkedState = undefined;
16
+ this.readOnly = false;
17
+ this.holdReadOnly = (event) => {
18
+ if (this.readOnly) {
19
+ event.preventDefault();
20
+ }
21
+ };
16
22
  }
17
23
  get checked() {
18
24
  return this.checkedState ?? this.defaultChecked;
@@ -63,5 +69,8 @@ export const MixinControllerChecked = (Base) => {
63
69
  __decorate([
64
70
  property({ attribute: 'default-checked', type: Boolean })
65
71
  ], CheckedElement.prototype, "defaultChecked", void 0);
72
+ __decorate([
73
+ property({ attribute: 'readonly', reflect: true, type: Boolean })
74
+ ], CheckedElement.prototype, "readOnly", void 0);
66
75
  return CheckedElement;
67
76
  };
@@ -13,6 +13,8 @@ export declare class DismissibleElement {
13
13
  dismiss(): boolean;
14
14
  /** The event, built but not dispatched, for a caller that owns the timing. */
15
15
  protected dismissEvent(): HelixDismissEvent;
16
+ /** Where focus lands when a neighbor that held it is removed: the dismiss control. */
17
+ protected get returnFocusTo(): HTMLElement | null;
16
18
  }
17
19
  /**
18
20
  * Grafts `dismissible`, its label, and the event that says so.
@@ -21,6 +21,9 @@ export const MixinDismissible = (Base) => {
21
21
  .join('');
22
22
  return new HelixDismissEvent({ label: own.trim() });
23
23
  }
24
+ get returnFocusTo() {
25
+ return this.shadowRoot?.querySelector('[part~="dismiss"]') ?? null;
26
+ }
24
27
  dismiss() {
25
28
  const neighbors = deepContains(this, deepActiveElement()) ? this.neighbors() : [];
26
29
  const event = this.dismissEvent();
@@ -53,11 +56,12 @@ export const MixinDismissible = (Base) => {
53
56
  return;
54
57
  }
55
58
  for (const neighbor of neighbors) {
56
- const control = neighbor.isConnected &&
57
- neighbor.shadowRoot?.querySelector('[part~="dismiss"]');
59
+ const control = neighbor.isConnected && neighbor.returnFocusTo;
58
60
  if (control) {
59
61
  control.focus();
60
- return;
62
+ if (deepContains(neighbor, deepActiveElement())) {
63
+ return;
64
+ }
61
65
  }
62
66
  }
63
67
  };
@@ -20,6 +20,8 @@ export declare class MixinFieldInterface {
20
20
  protected labelId: string;
21
21
  /** Whether a label is drawn at all, in either shape. */
22
22
  protected get labeled(): boolean;
23
+ /** The element in the shadow root a reader lands on and hears the name of. */
24
+ protected get namedControl(): HTMLElement | null;
23
25
  /**
24
26
  * Help text shown under the control. A validation message replaces it.
25
27
  *
@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { html, nothing } from 'lit';
8
8
  import { property, state } from 'lit/decorators.js';
9
+ import { auditName } from '../../utils/audit-name/audit-name.js';
9
10
  import { hostAria } from '../../utils/host-aria/host-aria.js';
10
11
  const HINT_ID = 'helix-hint';
11
12
  const FEEDBACK_ID = 'helix-feedback';
@@ -36,6 +37,11 @@ export const MixinField = (Base) => {
36
37
  this.touched = false;
37
38
  this.shownFeedback = '';
38
39
  }
40
+ get namedControl() {
41
+ return (this.renderRoot?.querySelector(`#${this.controlId}`) ??
42
+ this.renderRoot?.querySelector('input, button, select, textarea') ??
43
+ null);
44
+ }
39
45
  get labeled() {
40
46
  return (this.label !== '' ||
41
47
  Boolean(this.getAttribute('aria-label')) ||
@@ -160,6 +166,8 @@ export const MixinField = (Base) => {
160
166
  this.addEventListener('invalid', touch);
161
167
  this.addEventListener('change', touch);
162
168
  this.renderRoot.addEventListener('slotchange', this.noteSlotted);
169
+ auditName(this, () => this.namedControl, 'Give it a `label`, an `aria-label`, words in its label, or a `<label for>` that names it.', () => this.labeled ||
170
+ [...this.children].some((child) => child.slot === 'label' && (child.textContent ?? '').trim() !== ''));
163
171
  }
164
172
  }
165
173
  __decorate([
@@ -19,7 +19,10 @@ export declare class MixinPickerEditingInterface {
19
19
  protected editing: boolean;
20
20
  /** The caret has left, so the field renders again. */
21
21
  protected readonly handleBlur: () => void;
22
- /** Focusing the field opens the picker, and only from outside the element. */
22
+ /**
23
+ * A press that focuses the field opens the picker, and only from outside the
24
+ * element. Focus that arrives by Tab or from a script opens nothing.
25
+ */
23
26
  protected readonly handleFocus: (event: FocusEvent) => void;
24
27
  /**
25
28
  * Whether the value is locked. A read-only control still submits its value.
@@ -37,8 +40,8 @@ export declare class MixinPickerEditingInterface {
37
40
  requestOpen(next: boolean): boolean;
38
41
  }
39
42
  /**
40
- * Grafts the typing half of a picker field: it opens on arrival, holds the
41
- * value while the caret is in it, and refuses while read-only.
43
+ * Grafts the typing half of a picker field: a press into it opens the picker,
44
+ * it holds the value while the caret is in it, and it refuses while read-only.
42
45
  *
43
46
  * **Over `MixinPickerField` and not part of it, because Color Input takes the
44
47
  * one and not the other.** Date Input and Time Input show a rendering while
@@ -46,9 +49,16 @@ export declare class MixinPickerEditingInterface {
46
49
  * while somebody is, because `Intl` formats and does not parse and a document
47
50
  * being edited must not be a rendering of something else. That split needs to
48
51
  * know when the caret is in the field, which is `editing`; and a reader who
49
- * reaches such a field is choosing, so arriving opens the picker. A color has
50
- * neither: `#ff0000` is what is typed and what is shown, and a reader who has
51
- * the hex pastes it and never opens anything. `readOnly` comes along here for
52
+ * presses into such a field is choosing, so the press opens the picker. A color
53
+ * has neither: `#ff0000` is what is typed and what is shown, and a reader who
54
+ * has the hex pastes it and never opens anything.
55
+ *
56
+ * **Tab into the field opens nothing.** It did, and a reader moving through a
57
+ * form with a screen reader heard a dialog appear at every date and every
58
+ * time they passed. React Aria's DatePicker opens on its button alone and the
59
+ * APG date picker combobox opens on its button or Down; here the trigger and
60
+ * ArrowDown open it from the keyboard, and a press into the text opens it for
61
+ * a pointer, which is where the reader has already shown what they came for. `readOnly` comes along here for
52
62
  * the two that take this mixin; Color Input declares its own, the same
53
63
  * property refusing the same two requests.
54
64
  */
@@ -14,10 +14,16 @@ export const MixinPickerEditing = (Base) => {
14
14
  this.handleBlur = () => {
15
15
  this.editing = false;
16
16
  };
17
+ this.pressing = false;
18
+ this.handlePress = (event) => {
19
+ this.pressing = event.type === 'pointerdown' && event.composedPath()[0] === this.control;
20
+ };
17
21
  this.handleFocus = (event) => {
18
22
  this.editing = !this.returning;
23
+ const pressed = this.pressing;
24
+ this.pressing = false;
19
25
  const from = event.relatedTarget;
20
- if (this.open || this.isDisabled || this.returning) {
26
+ if (!pressed || this.open || this.isDisabled || this.returning) {
21
27
  return;
22
28
  }
23
29
  if (from instanceof Node && this.renderRoot?.contains?.(from)) {
@@ -38,6 +44,18 @@ export const MixinPickerEditing = (Base) => {
38
44
  }
39
45
  return super.requestOpen(next);
40
46
  }
47
+ connectedCallback() {
48
+ super.connectedCallback();
49
+ this.addEventListener('pointerdown', this.handlePress);
50
+ this.addEventListener('pointercancel', this.handlePress);
51
+ this.addEventListener('click', this.handlePress);
52
+ }
53
+ disconnectedCallback() {
54
+ super.disconnectedCallback();
55
+ this.removeEventListener('pointerdown', this.handlePress);
56
+ this.removeEventListener('pointercancel', this.handlePress);
57
+ this.removeEventListener('click', this.handlePress);
58
+ }
41
59
  }
42
60
  __decorate([
43
61
  property({ attribute: 'readonly', reflect: true, type: Boolean })
@@ -125,10 +125,11 @@ export declare class MixinPickerFieldInterface {
125
125
  * same way, and for the same reason: a mixin reads a part out of whatever host
126
126
  * applies it.
127
127
  *
128
- * **Opening on focus, `readOnly` and the idle rendering are not here.** They
129
- * are `MixinPickerEditing`'s, because Color Input takes neither of the first
130
- * and last: a hex is pasted and read at a glance, so its field neither renders
131
- * nor opens on arrival. Color Input declares its own `readOnly`.
128
+ * **Opening on a press into the text, `readOnly` and the idle rendering are
129
+ * not here.** They are `MixinPickerEditing`'s, because Color Input takes
130
+ * neither of the first and last: a hex is pasted and read at a glance, so its
131
+ * field neither renders nor opens when pressed. Color Input declares its own
132
+ * `readOnly`.
132
133
  *
133
134
  * **Three things the two typed families share stay with them.** `renderTrigger`
134
135
  * differs only by its icon and would still be the wrong thing to lift: a part a
@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { property } from 'lit/decorators.js';
8
8
  import { PopoverController } from '../../controllers/popover-controller/popover-controller.js';
9
9
  import { reportValues } from '../../utils/report-values/report-values.js';
10
+ import { tabStops } from '../../utils/tab-stops/tab-stops.js';
10
11
  export const MixinPickerField = (Base) => {
11
12
  class PickerFieldElement extends Base {
12
13
  constructor() {
@@ -51,13 +52,23 @@ export const MixinPickerField = (Base) => {
51
52
  };
52
53
  this.handleSurfaceKeydown = (event) => {
53
54
  const surface = this.partNamed('surface');
54
- if (event.key !== 'Escape' ||
55
+ if ((event.key !== 'Escape' && event.key !== 'Tab') ||
55
56
  !this.open ||
56
57
  event.defaultPrevented ||
57
58
  !surface ||
58
59
  !event.composedPath().includes(surface)) {
59
60
  return;
60
61
  }
62
+ if (event.key === 'Tab') {
63
+ const stops = tabStops(surface);
64
+ const at = event.composedPath()[0];
65
+ const edge = event.shiftKey ? stops[0] : stops.at(-1);
66
+ if (edge !== undefined && at === edge) {
67
+ event.preventDefault();
68
+ (event.shiftKey ? stops.at(-1) : stops[0])?.focus();
69
+ }
70
+ return;
71
+ }
61
72
  event.stopPropagation();
62
73
  event.preventDefault();
63
74
  this.requestOpen(false);
@@ -0,0 +1,67 @@
1
+ import { type TemplateResult } from 'lit';
2
+ import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
3
+ import { type SegmentedKind, type SegmentOptions } from '../../utils/date-segments/date-segments.js';
4
+ import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
5
+ import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
6
+ import type { MixinFieldInterface } from '../mixin-field/mixin-field.js';
7
+ import type { MixinPickerFieldInterface } from '../mixin-picker-field/mixin-picker-field.js';
8
+ type Constructor<T> = new (...args: any[]) => T;
9
+ /** What this is applied over: a picker field, which `MixinPickerField` makes. */
10
+ type SegmentedBase = HelixFormElement & MixinControllerOpenInterface & MixinControllerValueInterface & MixinFieldInterface & MixinPickerFieldInterface;
11
+ /**
12
+ * The public surface `MixinSegmentedField` adds.
13
+ *
14
+ * Declared separately because TypeScript cannot emit declarations for an
15
+ * anonymous class that has private members (TS4094).
16
+ */
17
+ export declare class MixinSegmentedFieldInterface {
18
+ /** What a screen reader hears for a segment with nothing in it. */
19
+ emptySegmentLabel: string;
20
+ /**
21
+ * Whether the field is a row of segments, one for each part of the date or
22
+ * time, in place of a line of text.
23
+ */
24
+ segmented: boolean;
25
+ /** Whether the segments are drawn: `segmented`, where the family can hold them. */
26
+ protected get segmentsShown(): boolean;
27
+ /** The row of segments, the group a description is carried to, or `null` while none is drawn. */
28
+ protected get segmentGroup(): HTMLElement | null;
29
+ /** Whether this family can show segments in its current shape. */
30
+ protected get segmentable(): boolean;
31
+ /** A date or a time. */
32
+ protected get segmentedKind(): SegmentedKind;
33
+ /** The locale the segments are laid out and named in. */
34
+ protected get segmentLocale(): string;
35
+ /** The clock and the seconds a time is laid out with. */
36
+ protected get segmentOptions(): SegmentOptions;
37
+ /** The row of segments, in the locale's order, with what it writes between them. */
38
+ protected renderSegments(): TemplateResult;
39
+ }
40
+ /**
41
+ * Grafts the segmented field React Aria's DateField and TimeField are, and Web
42
+ * Awesome's time input has, onto a picker field: one `spinbutton` for each part
43
+ * of the date or the time, in the order the locale writes them.
44
+ *
45
+ * **Typing into a text field asks the reader to know the format.** Date Input
46
+ * and Time Input read ISO, `2026-08-04` and `14:30`, because `Intl` formats and
47
+ * does not parse, and a reader in Germany who types `4.8.2026` is refused. A
48
+ * segment needs no format: the month is a month, set with digits or the arrow
49
+ * keys, and the layout puts it where the locale does, so the field reads
50
+ * `04.08.2026` in German and `08/04/2026` in English with nothing to parse.
51
+ *
52
+ * **What a segment does with a key**, which is React Aria's: digits fill it and
53
+ * move on once it cannot take another, Up and Down step it and wrap, Home and
54
+ * End go to its ends, Backspace and Delete empty it, Left and Right move between
55
+ * segments along the line of text, and Alt+Down opens the picker. Each segment
56
+ * is a tab stop, as each is in React Aria.
57
+ *
58
+ * **The value is whole or empty.** A date with no year is no date, so the value
59
+ * stays empty while any segment is, and the field reports `badInput` as a
60
+ * native date input does with a half-typed date. The arithmetic is
61
+ * `date-segments`, so this draws and listens and nothing else.
62
+ *
63
+ * **Opt-in, with `segmented`**, because the text field is what every example and
64
+ * every form already holds, and a row of segments draws differently.
65
+ */
66
+ export declare const MixinSegmentedField: <T extends Constructor<SegmentedBase>>(Base: T) => Constructor<MixinSegmentedFieldInterface> & T;
67
+ export {};