@adobe/spectrum-design-data 3.7.0 → 3.8.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.
- package/changelog/accordion.json +359 -0
- package/changelog/action-bar.json +110 -0
- package/changelog/action-button.json +362 -0
- package/changelog/action-group.json +72 -0
- package/changelog/alert-banner.json +65 -0
- package/changelog/alert-dialog.json +88 -0
- package/changelog/avatar-group.json +93 -0
- package/changelog/avatar.json +99 -0
- package/changelog/badge.json +595 -0
- package/changelog/bar-panel.json +7 -0
- package/changelog/body.json +7 -0
- package/changelog/bottom-navigation-android.json +7 -0
- package/changelog/breadcrumbs.json +145 -0
- package/changelog/button-group.json +66 -0
- package/changelog/button.json +504 -0
- package/changelog/calendar.json +62 -0
- package/changelog/card-horizontal.json +7 -0
- package/changelog/card.json +24 -0
- package/changelog/cards.json +137 -0
- package/changelog/checkbox-group.json +48 -0
- package/changelog/checkbox.json +210 -0
- package/changelog/close-button.json +125 -0
- package/changelog/coach-indicator.json +77 -0
- package/changelog/coach-mark.json +44 -0
- package/changelog/code.json +7 -0
- package/changelog/collection-card.json +7 -0
- package/changelog/color-area.json +67 -0
- package/changelog/color-control.json +7 -0
- package/changelog/color-handle.json +80 -0
- package/changelog/color-loupe.json +77 -0
- package/changelog/color-slider.json +89 -0
- package/changelog/color-wheel.json +68 -0
- package/changelog/combo-box.json +277 -0
- package/changelog/contextual-help.json +74 -0
- package/changelog/date-field.json +24 -0
- package/changelog/date-picker.json +175 -0
- package/changelog/detail.json +7 -0
- package/changelog/divider.json +82 -0
- package/changelog/double-calendar.json +7 -0
- package/changelog/drop-zone.json +155 -0
- package/changelog/field-label.json +118 -0
- package/changelog/field.json +7 -0
- package/changelog/floating-action-button.json +7 -0
- package/changelog/form-item.json +7 -0
- package/changelog/heading.json +24 -0
- package/changelog/help-text.json +100 -0
- package/changelog/illustrated-message.json +79 -0
- package/changelog/in-field-button.json +7 -0
- package/changelog/in-field-progress-button.json +7 -0
- package/changelog/in-field-progress-circle.json +48 -0
- package/changelog/in-line-alert.json +66 -0
- package/changelog/link.json +123 -0
- package/changelog/list-view.json +184 -0
- package/changelog/menu.json +254 -0
- package/changelog/meter.json +89 -0
- package/changelog/number-field.json +232 -0
- package/changelog/opacity-checkerboard.json +7 -0
- package/changelog/picker.json +241 -0
- package/changelog/popover.json +86 -0
- package/changelog/progress-bar.json +94 -0
- package/changelog/progress-circle.json +62 -0
- package/changelog/radio-button.json +180 -0
- package/changelog/radio-group.json +61 -0
- package/changelog/rating.json +64 -0
- package/changelog/scroll-zoom-bar.json +7 -0
- package/changelog/search-field.json +188 -0
- package/changelog/segmented-control.json +139 -0
- package/changelog/segmented-text-field.json +7 -0
- package/changelog/select-box.json +106 -0
- package/changelog/side-navigation.json +171 -0
- package/changelog/single-calendar.json +7 -0
- package/changelog/slider.json +144 -0
- package/changelog/stack-item.json +25 -0
- package/changelog/standard-dialog.json +58 -0
- package/changelog/standard-panel.json +7 -0
- package/changelog/status-light.json +108 -0
- package/changelog/steplist.json +66 -0
- package/changelog/swatch-group.json +62 -0
- package/changelog/swatch.json +99 -0
- package/changelog/switch.json +164 -0
- package/changelog/tab-bar-ios.json +25 -0
- package/changelog/table.json +140 -0
- package/changelog/tabs.json +118 -0
- package/changelog/tag-field.json +91 -0
- package/changelog/tag-group.json +66 -0
- package/changelog/tag.json +217 -0
- package/changelog/takeover-dialog.json +67 -0
- package/changelog/text-area.json +240 -0
- package/changelog/text-field.json +222 -0
- package/changelog/thumbnail.json +49 -0
- package/changelog/time-field.json +24 -0
- package/changelog/title.json +24 -0
- package/changelog/toast.json +110 -0
- package/changelog/tooltip.json +115 -0
- package/changelog/tray.json +7 -0
- package/changelog/tree-view.json +202 -0
- package/changelog/triple-calendar.json +7 -0
- package/changelog/user-card.json +24 -0
- package/components/accordion.json +37 -0
- package/components/action-button.json +44 -0
- package/components/badge.json +18 -2
- package/components/button.json +47 -1
- package/components/checkbox.json +42 -0
- package/components/radio-button.json +43 -3
- package/components/switch.json +36 -1
- package/package.json +4 -2
- package/registry/anatomy-terms.json +13 -8
- package/registry/token-terminology.json +1 -1
- package/tokens/layout.tokens.json +3 -2
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component-changelog.schema.json",
|
|
3
|
+
"specVersion": "1.0.0-draft",
|
|
4
|
+
"component": "segmented-control",
|
|
5
|
+
"baseline": {"release":"2.1.0","version":"1.0.0","commit":"4033f09de6696d4f61d1da89d42129a941dbd806"},
|
|
6
|
+
"releases": [
|
|
7
|
+
{
|
|
8
|
+
"release": "2.7.0",
|
|
9
|
+
"version": "1.0.1",
|
|
10
|
+
"bump": "patch",
|
|
11
|
+
"date": "2026-09-03",
|
|
12
|
+
"commit": "6d1892a74dfa5fe9819fdd3d7d6893b08318b244",
|
|
13
|
+
"commits": [
|
|
14
|
+
{
|
|
15
|
+
"commit": "5e22a7a18cd1a4f2a5957cba9cafa66bef73ed63",
|
|
16
|
+
"date": "2026-09-03",
|
|
17
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1394,"title":"fix(design-data): re-point CTR refs off deprecated tokens, add guard rail","url":"https://github.com/adobe/spectrum-design-data/pull/1394"},
|
|
18
|
+
"entries": [
|
|
19
|
+
{"id":"5e22a7a1-0","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom to edge, workflow icon only)"],"scope":{"property":"component-edge-to-visual-only-100","options":null},"record":"component-edge-to-visual-only-100#Spacing (top/bottom to edge, workflow icon only)","name":"component-edge-to-visual-only-100","fields":[{"path":"$ref","before":"8fec6012-7cba-4ac5-94d7-14f39fce7612","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
20
|
+
{"id":"5e22a7a1-1","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom to edge, workflow icon only)"],"scope":{"property":"component-edge-to-visual-only-100","options":null},"record":"component-edge-to-visual-only-100#Spacing (top/bottom to edge, workflow icon only)","name":"component-edge-to-visual-only-100","fields":[{"path":"$ref","before":"93e42bfc-c2f0-40cd-a561-9045c68cb5d1","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
21
|
+
{"id":"5e22a7a1-2","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (icon to label)"],"scope":{"property":"space-between","options":null},"record":"space-between#Spacing (icon to label)","name":"space-between","fields":[{"path":"$ref","before":"1d601d0a-d6d0-4711-9fb9-71898c2bcc9a","after":"9898011f-a47c-4d5d-a74e-70b5f8d0b91c"}]},
|
|
22
|
+
{"id":"5e22a7a1-3","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (icon to label)"],"scope":{"property":"space-between","options":null},"record":"space-between#Spacing (icon to label)","name":"space-between","fields":[{"path":"$ref","before":"09d55113-8d94-429f-b0c8-ffabe8ccba27","after":"9898011f-a47c-4d5d-a74e-70b5f8d0b91c"}]},
|
|
23
|
+
{"id":"5e22a7a1-4","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (start/end edges, workflow icon with label)"],"scope":{"property":"component-edge-to-visual-100","options":null},"record":"component-edge-to-visual-100#Spacing (start/end edges, workflow icon with label)","name":"component-edge-to-visual-100","fields":[{"path":"$ref","before":"e220eb52-f821-4807-9ab7-b5f3905d769f","after":"52a75511-eb1b-4de2-a1bb-959365d8dc1a"}]},
|
|
24
|
+
{"id":"5e22a7a1-5","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (start/end edges, workflow icon with label)"],"scope":{"property":"component-edge-to-visual-100","options":null},"record":"component-edge-to-visual-100#Spacing (start/end edges, workflow icon with label)","name":"component-edge-to-visual-100","fields":[{"path":"$ref","before":"e77f525e-5043-49c1-a663-9f6c30067043","after":"52a75511-eb1b-4de2-a1bb-959365d8dc1a"}]},
|
|
25
|
+
{"id":"5e22a7a1-6","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (start/end edges, workflow icon with label)"],"scope":{"property":"component-edge-to-text-100","options":null},"record":"component-edge-to-text-100#Spacing (start/end edges, workflow icon with label)","name":"component-edge-to-text-100","fields":[{"path":"$ref","before":"0c0d6d38-6734-4312-9be5-dd48dd571841","after":"52a75511-eb1b-4de2-a1bb-959365d8dc1a"}]},
|
|
26
|
+
{"id":"5e22a7a1-7","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (start/end edges, workflow icon with label)"],"scope":{"property":"component-edge-to-text-100","options":null},"record":"component-edge-to-text-100#Spacing (start/end edges, workflow icon with label)","name":"component-edge-to-text-100","fields":[{"path":"$ref","before":"0b3ecfcf-8fb9-4faf-ab7f-ff4baf733df5","after":"52a75511-eb1b-4de2-a1bb-959365d8dc1a"}]},
|
|
27
|
+
{"id":"5e22a7a1-8","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom to edge, workflow icon with label)"],"scope":{"property":"component-top-to-text-100","options":null},"record":"component-top-to-text-100#Spacing (top/bottom to edge, workflow icon with label)","name":"component-top-to-text-100","fields":[{"path":"$ref","before":"15bf492b-3a65-4577-8a3b-df09026b96a7","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
28
|
+
{"id":"5e22a7a1-9","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom to edge, workflow icon with label)"],"scope":{"property":"component-top-to-text-100","options":null},"record":"component-top-to-text-100#Spacing (top/bottom to edge, workflow icon with label)","name":"component-top-to-text-100","fields":[{"path":"$ref","before":"bed358a2-0559-4501-a147-b375887f25af","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
29
|
+
{"id":"5e22a7a1-10","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom to edge, workflow icon with label)"],"scope":{"property":"component-bottom-to-text-100","options":null},"record":"component-bottom-to-text-100#Spacing (top/bottom to edge, workflow icon with label)","name":"component-bottom-to-text-100","fields":[{"path":"$ref","before":"24def269-4582-46f6-a00c-8b5a28410917","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
30
|
+
{"id":"5e22a7a1-11","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom to edge, workflow icon with label)"],"scope":{"property":"component-bottom-to-text-100","options":null},"record":"component-bottom-to-text-100#Spacing (top/bottom to edge, workflow icon with label)","name":"component-bottom-to-text-100","fields":[{"path":"$ref","before":"c8590269-dcaa-44f6-9c2d-d33274c3fe5e","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
31
|
+
{"id":"5e22a7a1-12","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom edge to icon, workflow icon with label)"],"scope":{"property":"component-top-to-workflow-icon-100","options":null},"record":"component-top-to-workflow-icon-100#Spacing (top/bottom edge to icon, workflow icon with label)","name":"component-top-to-workflow-icon-100","fields":[{"path":"$ref","before":"c3a280b0-bc84-4a7c-8048-c689f8deef86","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
32
|
+
{"id":"5e22a7a1-13","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/bottom edge to icon, workflow icon with label)"],"scope":{"property":"component-top-to-workflow-icon-100","options":null},"record":"component-top-to-workflow-icon-100#Spacing (top/bottom edge to icon, workflow icon with label)","name":"component-top-to-workflow-icon-100","fields":[{"path":"$ref","before":"a3d3f9e9-a784-445a-a052-22f84b832512","after":"5741f832-f012-45bc-9e87-6e07ab2cb87f"}]},
|
|
33
|
+
{"id":"5e22a7a1-14","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Focus ring"],"scope":{"property":"gap","options":null},"record":"gap#Focus ring","name":"gap","fields":[{"path":"$ref","before":"693651ef-71c7-4096-91a5-1c84cb861021","after":"fb035d45-e63b-4cd4-b220-675a52e99399"}]}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"release": "3.0.0",
|
|
40
|
+
"version": "1.0.2",
|
|
41
|
+
"bump": "patch",
|
|
42
|
+
"date": "2026-09-08",
|
|
43
|
+
"commit": "284fe0dba6da9932c454eaee20bbbb04272d4433",
|
|
44
|
+
"commits": [
|
|
45
|
+
{
|
|
46
|
+
"commit": "6005339a0678226eee3e827fd5bbfa793f5bccc7",
|
|
47
|
+
"date": "2026-09-08",
|
|
48
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1428,"title":"feat(tokens)!: add conceptId as canonical concept-level UUID, retire set_uuid","url":"https://github.com/adobe/spectrum-design-data/pull/1428"},
|
|
49
|
+
"entries": [],
|
|
50
|
+
"metadata": {"count":37,"fields":["conceptId","set_uuid"]}
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"release": "3.3.0",
|
|
56
|
+
"version": "1.0.3",
|
|
57
|
+
"bump": "patch",
|
|
58
|
+
"date": "2026-09-30",
|
|
59
|
+
"commit": "fdb29c3027de60713f6f0f98520fc0879fa408c5",
|
|
60
|
+
"commits": [
|
|
61
|
+
{
|
|
62
|
+
"commit": "b9888b8ce9a0e4ec5b607e088942999629d5d43d",
|
|
63
|
+
"date": "2026-09-28",
|
|
64
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1513,"title":"feat(data): add S2 implementation metadata","url":"https://github.com/adobe/spectrum-design-data/pull/1513"},
|
|
65
|
+
"entries": [],
|
|
66
|
+
"metadata": {"count":1,"fields":["implementation added"]}
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"release": "3.4.0",
|
|
72
|
+
"version": "1.1.0",
|
|
73
|
+
"bump": "minor",
|
|
74
|
+
"date": "2026-10-01",
|
|
75
|
+
"commit": "61c5e6769e60980caf58c544b508ab2e610958b4",
|
|
76
|
+
"commits": [
|
|
77
|
+
{
|
|
78
|
+
"commit": "ec3376fa833f2c31dd0b2340590134b2747b00c4",
|
|
79
|
+
"date": "2026-10-01",
|
|
80
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1524,"title":"feat(design-data): promote public Spectrum Hub guidance to main","url":"https://github.com/adobe/spectrum-design-data/pull/1524"},
|
|
81
|
+
"entries": [
|
|
82
|
+
{"id":"ec3376fa-0","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/0","name":"guideline: Mutually exclusive items.\n\nSegmented controls ha","fields":[{"path":"content","before":"Segmented controls display a group of buttons where only one can be selected at a time. They're ideal for toggling between layouts like a list, grid, or map. Avoid using them for navigation or triggering actions.","after":"Mutually exclusive items.\n\nSegmented controls have one item selected by default at all times, and are mutually exclusive. This means selecting one item automatically deselects the others."}]},
|
|
83
|
+
{"id":"ec3376fa-1","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/1","name":"guideline: Selection.\n\nClicking on a segmented control item","fields":[{"path":"content","before":"Segmented controls should have between two and five items.","after":"Selection.\n\nClicking on a segmented control item immediately performs the view change."}]},
|
|
84
|
+
{"id":"ec3376fa-2","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/2","name":"guideline: Text overflow.\n\nWhen the segmented control item ","fields":[{"path":"content","before":"The identifier of the currently selected item.","after":"Text overflow.\n\nWhen the segmented control item text is too long for the available horizontal space, it truncates at the end. The full text should be revealed with a tooltip on hover."}]},
|
|
85
|
+
{"id":"ec3376fa-3","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/3","name":"guideline: Tooltips for hidden labels.\n\nIcon-only or trunca","fields":[{"path":"content","before":"By default, segmented controls should include a track. The track style is justified within the parent container. Segmented controls without a track are left-aligned in left-to-right (LTR) languages.","after":"Tooltips for hidden labels.\n\nIcon-only or truncated label segmented controls can be hard to identify. They should display a tooltip after a brief hover, showing the name and a keyboard shortcut, if applicable."}]},
|
|
86
|
+
{"id":"ec3376fa-4","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/4","name":"guideline: Segmented controls are for view switching.\n\nSegm","fields":[{"path":"content","before":"Segmented controls without a track are left aligned in left-to-right languages.","after":"Segmented controls are for view switching.\n\nSegmented controls are only meant to be used to change the way you view information on a page. They should not be used for navigating, filtering content, or taking actions."}]},
|
|
87
|
+
{"id":"ec3376fa-5","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/5","name":"guideline: Segmented controls vs. similar components.\n\nUse ","fields":[{"path":"content","before":"If true, the control takes up the full width of its container. Only horizontal segmented controls support fluid behavior.","after":"Segmented controls vs. similar components.\n\nUse a segmented control when the primary goal is to switch views of content. Tabs are reserved for navigation. Action groups are for triggering actions. Tag groups are for filtering content."}]},
|
|
88
|
+
{"id":"ec3376fa-6","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/6","name":"guideline: Use icons only when they have a clear meaning.\n\n","fields":[{"path":"content","before":"Segmented controls can be either horizontal or vertical. By default, segmented controls are horizontal.","after":"Use icons only when they have a clear meaning.\n\nIt may not make sense in every case to include icons. If the items are too complicated to convey in an icon, don't force it. Keep in mind that if one segmented control has an icon, then they all should have an icon."}]},
|
|
89
|
+
{"id":"ec3376fa-7","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/7","name":"guideline: Keep segmented control groups to 5 items or less","fields":[{"path":"content","before":"Segmented controls have one item selected by default at all times, and are mutually exclusive. This means selecting one item automatically deselects the others.","after":"Keep segmented control groups to 5 items or less.\n\nSegmented control groups work best with 2 to 5 items. If your component needs more than 5 items, consider using a dropdown or radio button group instead."}]},
|
|
90
|
+
{"id":"ec3376fa-8","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/8","name":"guideline: RTL.\n\nThe order of the buttons in the segmented ","fields":[{"path":"content","before":"Clicking on a segmented control item immediately performs the view change.","after":"RTL.\n\nThe order of the buttons in the segmented control are reversed in RTL languages. If it has icons with text, the icons are placed to the right of the text, and directional icons like arrows or chevrons are flipped horizontally."}]},
|
|
91
|
+
{"id":"ec3376fa-9","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/9","name":"guideline: Keyboard interactions.\n\nKey Interaction Tab Move","fields":[{"path":"content","before":"When the segmented control item text is too long for the available horizontal space, it truncates at the end. The full text should be revealed with a tooltip on hover.","after":"Keyboard interactions.\n\nKey Interaction Tab Moves focus onto or off of the button. Space or Enter Executes the button action. The focus remains on the button except if the button opens or closes the current container. In this case, the focus moves to the target or back to the caller."}]},
|
|
92
|
+
{"id":"ec3376fa-10","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/10","name":"guideline: Cursor guidelines.\n\nCursor Usage Pointer Use the","fields":[{"path":"content","before":"Icon-only or truncated label segmented controls can be hard to identify. They should display a tooltip after a brief hover, showing the name and a keyboard shortcut, if applicable.","after":"Cursor guidelines.\n\nCursor Usage Pointer Use the pointer cursor for all interactive components."}]},
|
|
93
|
+
{"id":"ec3376fa-11","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/11","name":"guideline: WCAG 2.2 compliance.\n\nAny criterion not mention ","fields":[{"path":"content","before":"Segmented controls are only meant to be used to change the way you view information on a page. They should not be used for navigating, filtering content, or taking actions.","after":"WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as icons used in buttons—must provide a text alternative that communicates the button’s purpose. All buttons, especially icon‑only buttons, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function. Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Buttons should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of buttons should be utilized. Use of color 1.4.1 A Color is never used as the sole way to convey meaning in buttons. While negative buttons do use red to reinforce their purpose, every button also includes a clear text label that communicates the action it performs. Text contrast minimums 1.4.3 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Resize text 1.4.4 AA Buttons should be built in such a way that they can be resized without assistive technology up to 200%. Visual presentation 1.4.8 AAA The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified. Non-text contrast 1.4.11 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."}]},
|
|
94
|
+
{"id":"ec3376fa-12","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/12","name":"guideline: Use a segmented control when the primary goal is","fields":[],"before":{"type":"guideline","content":"Use a segmented control when the primary goal is to switch views of content. Tabs are reserved for navigation. Action groups are for triggering actions. Tag groups are for filtering content."}},
|
|
95
|
+
{"id":"ec3376fa-13","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/13","name":"guideline: It may not make sense in every case to include i","fields":[],"before":{"type":"guideline","content":"It may not make sense in every case to include icons. If the items are too complicated to convey in an icon, don’t force it. Keep in mind that if one segmented control has an icon, then they all should have an icon."}},
|
|
96
|
+
{"id":"ec3376fa-14","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/14","name":"guideline: Segmented control groups work best with 2 to 5 i","fields":[],"before":{"type":"guideline","content":"Segmented control groups work best with 2 to 5 items. If your component needs more than 5 items, consider using a dropdown or radio button group instead."}},
|
|
97
|
+
{"id":"ec3376fa-15","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/15","name":"guideline: Segmented control groups are meant for switching","fields":[],"before":{"type":"guideline","content":"Segmented control groups are meant for switching views on a page. To navigate to a different page or progressively disclose different content, use tabs instead. To perform actions or make a selection, use action groups."}},
|
|
98
|
+
{"id":"ec3376fa-16","kind":"document-block","change":"added","class":"documentation","bump":"minor","indirect":false,"contexts":[],"record":"segmented-control/documentBlocks/16","name":"do-dont: Don't use segmented control as actions, to make ","fields":[],"after":{"type":"do-dont","content":"Don't use segmented control as actions, to make selections, or to navigate","dont":"Segmented control groups are meant for switching views on a page. To navigate to a different page or progressively disclose different content, use tabs instead. To perform actions or make a selection, use action groups."}}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"release": "3.7.1",
|
|
105
|
+
"version": "1.1.1",
|
|
106
|
+
"bump": "patch",
|
|
107
|
+
"date": "2026-10-31",
|
|
108
|
+
"commit": "e088447eaea4368a4b3e9444d20d0b8e711a79a4",
|
|
109
|
+
"commits": [
|
|
110
|
+
{
|
|
111
|
+
"commit": "a60aeea243b2ac4e812d46bbd9f7140c9f62f398",
|
|
112
|
+
"date": "2026-10-31",
|
|
113
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1572,"title":"fix(design-data): point the second duplicate relationship at the mobile token","url":"https://github.com/adobe/spectrum-design-data/pull/1572"},
|
|
114
|
+
"entries": [
|
|
115
|
+
{"id":"a60aeea2-0","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (start/end edges, workflow icon with label)"],"scope":{"property":"component-edge-to-visual-100","options":null},"record":"component-edge-to-visual-100#Spacing (start/end edges, workflow icon with label)","name":"component-edge-to-visual-100","fields":[{"path":"$ref","before":"52a75511-eb1b-4de2-a1bb-959365d8dc1a","after":"71731484-e759-4a5f-89ed-9fe04ac19aed"}]},
|
|
116
|
+
{"id":"a60aeea2-1","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (start/end edges, workflow icon with label)"],"scope":{"property":"component-edge-to-text-100","options":null},"record":"component-edge-to-text-100#Spacing (start/end edges, workflow icon with label)","name":"component-edge-to-text-100","fields":[{"path":"$ref","before":"52a75511-eb1b-4de2-a1bb-959365d8dc1a","after":"71731484-e759-4a5f-89ed-9fe04ac19aed"}]}
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"release": "3.8.0",
|
|
123
|
+
"version": "1.1.2",
|
|
124
|
+
"bump": "patch",
|
|
125
|
+
"date": "2026-11-03",
|
|
126
|
+
"commit": "7b38617df24442d22724fb890cef69aa198b9e3a",
|
|
127
|
+
"commits": [
|
|
128
|
+
{
|
|
129
|
+
"commit": "9b4ad35c29fb00193e5847625699afb04fa0c560",
|
|
130
|
+
"date": "2026-10-31",
|
|
131
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1582,"title":"feat: component visual recipes, renderer, explorer site and platform-aware rendering","url":"https://github.com/adobe/spectrum-design-data/pull/1582"},
|
|
132
|
+
"entries": [
|
|
133
|
+
{"id":"9b4ad35c-0","kind":"token","change":"renamed","class":"api","bump":"patch","indirect":false,"contexts":["Focus ring"],"record":"fb035d45-e63b-4cd4-b220-675a52e99399","name":"gap[anatomy=focus-indicator,legacyKey=focus-ring-gap]","fields":[{"path":"name.anatomy","before":"focus-ring","after":"focus-indicator"},{"path":"name.legacyKey","after":"focus-ring-gap"}]}
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component-changelog.schema.json",
|
|
3
|
+
"specVersion": "1.0.0-draft",
|
|
4
|
+
"component": "segmented-text-field",
|
|
5
|
+
"baseline": {"release":"2.1.0","version":"1.0.0","commit":"4033f09de6696d4f61d1da89d42129a941dbd806"},
|
|
6
|
+
"releases": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component-changelog.schema.json",
|
|
3
|
+
"specVersion": "1.0.0-draft",
|
|
4
|
+
"component": "select-box",
|
|
5
|
+
"baseline": {"release":"2.1.0","version":"1.0.0","commit":"4033f09de6696d4f61d1da89d42129a941dbd806"},
|
|
6
|
+
"releases": [
|
|
7
|
+
{
|
|
8
|
+
"release": "2.7.0",
|
|
9
|
+
"version": "1.0.1",
|
|
10
|
+
"bump": "patch",
|
|
11
|
+
"date": "2026-09-03",
|
|
12
|
+
"commit": "6d1892a74dfa5fe9819fdd3d7d6893b08318b244",
|
|
13
|
+
"commits": [
|
|
14
|
+
{
|
|
15
|
+
"commit": "5e22a7a18cd1a4f2a5957cba9cafa66bef73ed63",
|
|
16
|
+
"date": "2026-09-03",
|
|
17
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1394,"title":"fix(design-data): re-point CTR refs off deprecated tokens, add guard rail","url":"https://github.com/adobe/spectrum-design-data/pull/1394"},
|
|
18
|
+
"entries": [
|
|
19
|
+
{"id":"5e22a7a1-0","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (vertical)"],"scope":{"property":"vertical-edge-to-content","options":null},"record":"vertical-edge-to-content#Padding (vertical)","name":"vertical-edge-to-content","fields":[{"path":"$ref","before":"ef9b9dd4-5e45-4c1a-8874-f097fd892352","after":"2e855806-0f65-4df0-9d8f-74428daa358d"}]},
|
|
20
|
+
{"id":"5e22a7a1-1","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (vertical)"],"scope":{"property":"vertical-edge-to-content","options":null},"record":"vertical-edge-to-content#Padding (vertical)","name":"vertical-edge-to-content","fields":[{"path":"$ref","before":"e807df92-1c13-4394-ace9-cb998ada9395","after":"2e855806-0f65-4df0-9d8f-74428daa358d"}]},
|
|
21
|
+
{"id":"5e22a7a1-2","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (illustration to text, vertical)"],"scope":{"property":"vertical-illustration-to-label","options":null},"record":"vertical-illustration-to-label#Spacing (illustration to text, vertical)","name":"vertical-illustration-to-label","fields":[{"path":"$ref","before":"f6a52618-bf5d-4a9d-ac95-e5a6d002851d","after":"9c79efdc-ab56-4f2e-b44d-5641d2480964"}]},
|
|
22
|
+
{"id":"5e22a7a1-3","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (illustration to text, vertical)"],"scope":{"property":"vertical-illustration-to-label","options":null},"record":"vertical-illustration-to-label#Spacing (illustration to text, vertical)","name":"vertical-illustration-to-label","fields":[{"path":"$ref","before":"8a805540-3b26-4b50-8a0d-0c7beb13885e","after":"9c79efdc-ab56-4f2e-b44d-5641d2480964"}]},
|
|
23
|
+
{"id":"5e22a7a1-4","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (horizontal)"],"scope":{"property":"horizontal-top-to-content","options":null},"record":"horizontal-top-to-content#Padding (horizontal)","name":"horizontal-top-to-content","fields":[{"path":"$ref","before":"736900ff-ea3c-4c5b-85b6-080524cb78fc","after":"81e5f983-4ca0-4d45-89f0-4accd78d7946"}]},
|
|
24
|
+
{"id":"5e22a7a1-5","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (horizontal)"],"scope":{"property":"horizontal-top-to-content","options":null},"record":"horizontal-top-to-content#Padding (horizontal)","name":"horizontal-top-to-content","fields":[{"path":"$ref","before":"75f16efb-6905-4091-bd87-bd08494a92bf","after":"81e5f983-4ca0-4d45-89f0-4accd78d7946"}]},
|
|
25
|
+
{"id":"5e22a7a1-6","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (horizontal)"],"scope":{"property":"horizontal-start-to-content","options":null},"record":"horizontal-start-to-content#Padding (horizontal)","name":"horizontal-start-to-content","fields":[{"path":"$ref","before":"9ab0ef93-1293-48e9-911c-2ea32f15b44b","after":"2e855806-0f65-4df0-9d8f-74428daa358d"}]},
|
|
26
|
+
{"id":"5e22a7a1-7","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (horizontal)"],"scope":{"property":"horizontal-start-to-content","options":null},"record":"horizontal-start-to-content#Padding (horizontal)","name":"horizontal-start-to-content","fields":[{"path":"$ref","before":"009afde4-ea54-4025-aaa0-7df7e5e50229","after":"2e855806-0f65-4df0-9d8f-74428daa358d"}]},
|
|
27
|
+
{"id":"5e22a7a1-8","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (horizontal)"],"scope":{"property":"horizontal-end-to-content","options":null},"record":"horizontal-end-to-content#Padding (horizontal)","name":"horizontal-end-to-content","fields":[{"path":"$ref","before":"a99ea589-33e4-4196-8c49-77a0d0d522ed","after":"4b6cd7dd-2b7c-4fec-935e-8ea88de4c412"}]},
|
|
28
|
+
{"id":"5e22a7a1-9","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Padding (horizontal)"],"scope":{"property":"horizontal-end-to-content","options":null},"record":"horizontal-end-to-content#Padding (horizontal)","name":"horizontal-end-to-content","fields":[{"path":"$ref","before":"9c78208b-bb4f-4cda-82f0-a38f68d33172","after":"4b6cd7dd-2b7c-4fec-935e-8ea88de4c412"}]},
|
|
29
|
+
{"id":"5e22a7a1-10","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (label to description, horizontal)"],"scope":{"property":"horizontal-label-to-description","options":null},"record":"horizontal-label-to-description#Spacing (label to description, horizontal)","name":"horizontal-label-to-description","fields":[{"path":"$ref","before":"94b742aa-bec9-43bc-81ad-a913191481d1","after":"52f0ce69-d419-4f27-b1fd-eaad3726017a"}]},
|
|
30
|
+
{"id":"5e22a7a1-11","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (label to description, horizontal)"],"scope":{"property":"horizontal-label-to-description","options":null},"record":"horizontal-label-to-description#Spacing (label to description, horizontal)","name":"horizontal-label-to-description","fields":[{"path":"$ref","before":"255479ac-24f5-4128-bba0-258ec68026af","after":"52f0ce69-d419-4f27-b1fd-eaad3726017a"}]},
|
|
31
|
+
{"id":"5e22a7a1-12","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (illustration to label, horizontal)"],"scope":{"property":"horizontal-illustration-to-label","options":null},"record":"horizontal-illustration-to-label#Spacing (illustration to label, horizontal)","name":"horizontal-illustration-to-label","fields":[{"path":"$ref","before":"b98f3e7a-d30a-49f7-80fd-d793554eaf6d","after":"bd1948af-f4eb-46ed-9ab5-cbd93b5e0935"}]},
|
|
32
|
+
{"id":"5e22a7a1-13","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (illustration to label, horizontal)"],"scope":{"property":"horizontal-illustration-to-label","options":null},"record":"horizontal-illustration-to-label#Spacing (illustration to label, horizontal)","name":"horizontal-illustration-to-label","fields":[{"path":"$ref","before":"6c8580ac-c2c4-4d62-8a9d-b0498dd0b69b","after":"bd1948af-f4eb-46ed-9ab5-cbd93b5e0935"}]},
|
|
33
|
+
{"id":"5e22a7a1-14","kind":"relationship","change":"updated","class":"visual","bump":"patch","indirect":false,"contexts":["Spacing (top/side edge to checkbox)"],"scope":{"property":"space-between","options":null},"record":"space-between#Spacing (top/side edge to checkbox)","name":"space-between","fields":[{"path":"$ref","before":"70a20970-ebd9-48a7-8324-44d352f79978","after":"9fcd2823-9a13-44c0-a613-7dbe272b99a9"}]}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"release": "3.0.0",
|
|
40
|
+
"version": "1.0.2",
|
|
41
|
+
"bump": "patch",
|
|
42
|
+
"date": "2026-09-08",
|
|
43
|
+
"commit": "284fe0dba6da9932c454eaee20bbbb04272d4433",
|
|
44
|
+
"commits": [
|
|
45
|
+
{
|
|
46
|
+
"commit": "6005339a0678226eee3e827fd5bbfa793f5bccc7",
|
|
47
|
+
"date": "2026-09-08",
|
|
48
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1428,"title":"feat(tokens)!: add conceptId as canonical concept-level UUID, retire set_uuid","url":"https://github.com/adobe/spectrum-design-data/pull/1428"},
|
|
49
|
+
"entries": [],
|
|
50
|
+
"metadata": {"count":45,"fields":["conceptId","set_uuid"]}
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"release": "3.3.0",
|
|
56
|
+
"version": "1.0.3",
|
|
57
|
+
"bump": "patch",
|
|
58
|
+
"date": "2026-09-30",
|
|
59
|
+
"commit": "fdb29c3027de60713f6f0f98520fc0879fa408c5",
|
|
60
|
+
"commits": [
|
|
61
|
+
{
|
|
62
|
+
"commit": "b9888b8ce9a0e4ec5b607e088942999629d5d43d",
|
|
63
|
+
"date": "2026-09-28",
|
|
64
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1513,"title":"feat(data): add S2 implementation metadata","url":"https://github.com/adobe/spectrum-design-data/pull/1513"},
|
|
65
|
+
"entries": [],
|
|
66
|
+
"metadata": {"count":1,"fields":["implementation added"]}
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"release": "3.4.0",
|
|
72
|
+
"version": "1.1.0",
|
|
73
|
+
"bump": "minor",
|
|
74
|
+
"date": "2026-10-01",
|
|
75
|
+
"commit": "61c5e6769e60980caf58c544b508ab2e610958b4",
|
|
76
|
+
"commits": [
|
|
77
|
+
{
|
|
78
|
+
"commit": "ec3376fa833f2c31dd0b2340590134b2747b00c4",
|
|
79
|
+
"date": "2026-10-01",
|
|
80
|
+
"source": {"type":"pr","repo":"adobe/spectrum-design-data","number":1524,"title":"feat(design-data): promote public Spectrum Hub guidance to main","url":"https://github.com/adobe/spectrum-design-data/pull/1524"},
|
|
81
|
+
"entries": [
|
|
82
|
+
{"id":"ec3376fa-0","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/0","name":"guideline: Minimum and maximum size.\n\nMinimum and maximum s","fields":[{"path":"content","before":"Select boxes allow users to choose options in a workflow. Both single-select and multi-select versions use checkboxes to show selection. Multi-select boxes display unchecked checkboxes by default to signal that multiple choices are allowed. Single-select boxes only show an unchecked checkbox on hover. If showCheckbox is false, selection is only shown using the dark border.","after":"Minimum and maximum size.\n\nMinimum and maximum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts."}]},
|
|
83
|
+
{"id":"ec3376fa-1","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/1","name":"guideline: Consistent sizing.\n\nAll select boxes should be t","fields":[{"path":"content","before":"A select box in a disabled state shows that the items within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an option may become available later. Individual boxes may be disabled or the entire group may be disabled.","after":"Consistent sizing.\n\nAll select boxes should be the same size as one another. Keep metadata concise, and make the size of the box large enough to accommodate longer text when translated to other languages."}]},
|
|
84
|
+
{"id":"ec3376fa-2","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/2","name":"guideline: Text overflow.\n\nWhen the title of the select box","fields":[{"path":"content","before":"Illustrations are optional but recommended and included by default.","after":"Text overflow.\n\nWhen the title of the select box is too long for the available horizontal space, it wraps to another line. Wrapped text should not affect the size of an individual select box. Each box in a group should have enough space to allow for longer, localized text to fit as necessary."}]},
|
|
85
|
+
{"id":"ec3376fa-3","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/3","name":"guideline: Selection.\n\nClicking a select box does not immed","fields":[{"path":"content","before":"A label is required in select boxes. It acts as the title of the select box and explains its action or purpose.. Ideally, the label should be kept concise, even in the horizontal orientation.","after":"Selection.\n\nClicking a select box does not immediately move to the next step in the sequence. After making a selection, the user must initiate the next step by choosing a button or similar component outside the select box group."}]},
|
|
86
|
+
{"id":"ec3376fa-4","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/4","name":"guideline: Keyboard focus.\n\nA select box group can be navig","fields":[{"path":"content","before":"Body is optional in select boxes. If no value is entered for the body, then it will not appear in the component. Body is usually reserved for the horizontal version of select boxes.","after":"Keyboard focus.\n\nA select box group can be navigated using a keyboard. The keyboard focus state takes the button's visual hover state and adds a blue ring to the button in focus."}]},
|
|
87
|
+
{"id":"ec3376fa-5","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/5","name":"guideline: Use illustrations only when they have a clear me","fields":[{"path":"content","before":"A select box is vertical by default, which works best when metadata is limited to a short title, with or without an illustration. The horizontal orientation is recommended when the select box includes longer-form metadata.","after":"Use illustrations only when they have a clear meaning.\n\nIllustrations should be used when they help clarify the content. If the items are too complex to represent visually, it may be better to omit them. For consistency, if one select box includes an illustration, all select boxes in the group should include one."}]},
|
|
88
|
+
{"id":"ec3376fa-6","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/6","name":"guideline: Keep select box groups to 9 items or less.\n\nSele","fields":[{"path":"content","before":"Minimum and maximum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts.","after":"Keep select box groups to 9 items or less.\n\nSelect box groups work best with 3 to 9 items. If your experience needs more than 9 items, consider using a dropdown, checkboxes, or radio button group instead."}]},
|
|
89
|
+
{"id":"ec3376fa-7","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/7","name":"guideline: Use consistent sizing.\n\nAll select boxes in a gr","fields":[{"path":"content","before":"All select boxes should be the same size as one another. Keep metadata concise, and make the size of the box large enough to accommodate longer text when translated to other languages.","after":"Use consistent sizing.\n\nAll select boxes in a group should be the same size to maintain visual consistency and usability."}]},
|
|
90
|
+
{"id":"ec3376fa-8","kind":"document-block","change":"updated","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/8","name":"guideline: Checkbox vs. highlight selection.\n\nSome cases ma","fields":[{"path":"content","before":"When the title of the select box is too long for the available horizontal space, it wraps to another line. Wrapped text should not affect the size of an individual select box. Each box in a group should have enough space to allow for longer, localized text to fit as necessary.","after":"Checkbox vs. highlight selection.\n\nSome cases may make more sense for the user to select one or a few options in a group of select boxes, but if the use case doesn't make sense to be checking a selection, showCheckbox can be false and the highlight style can be used instead. There is no visual differentiation between single- and multi-select behaviors when checkboxes are not present."}]},
|
|
91
|
+
{"id":"ec3376fa-9","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/9","name":"guideline: Clicking a select box does not immediately move ","fields":[],"before":{"type":"guideline","content":"Clicking a select box does not immediately move to the next step in the sequence. After making a selection, the user must initiate the next step by choosing a button or similar component outside the select box group."}},
|
|
92
|
+
{"id":"ec3376fa-10","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/10","name":"guideline: A select box group can be navigated using a keyb","fields":[],"before":{"type":"guideline","content":"A select box group can be navigated using a keyboard. The keyboard focus state takes the button’s visual hover state and adds a blue ring to the button in focus."}},
|
|
93
|
+
{"id":"ec3376fa-11","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/11","name":"guideline: Illustrations should be used when they help clar","fields":[],"before":{"type":"guideline","content":"Illustrations should be used when they help clarify the content. If the items are too complex to represent visually, it may be better to omit them. For consistency, if one select box includes an illustration, all select boxes in the group should include one."}},
|
|
94
|
+
{"id":"ec3376fa-12","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/12","name":"guideline: Select box groups work best with 3 to 9 items. I","fields":[],"before":{"type":"guideline","content":"Select box groups work best with 3 to 9 items. If your experience needs more than 9 items, consider using a dropdown, checkboxes, or radio button group instead."}},
|
|
95
|
+
{"id":"ec3376fa-13","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/13","name":"guideline: Select boxes are used to choose an item from a g","fields":[],"before":{"type":"guideline","content":"Select boxes are used to choose an item from a group. If clicking an item is meant to immediately trigger an action, use an action group instead."}},
|
|
96
|
+
{"id":"ec3376fa-14","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/14","name":"guideline: All select boxes in a group should be the same s","fields":[],"before":{"type":"guideline","content":"All select boxes in a group should be the same size to maintain visual consistency and usability."}},
|
|
97
|
+
{"id":"ec3376fa-15","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/15","name":"guideline: Select boxes use a checkbox to indicate both sin","fields":[],"before":{"type":"guideline","content":"Select boxes use a checkbox to indicate both single- and multi-selection. Don’t use radio buttons for single-selection."}},
|
|
98
|
+
{"id":"ec3376fa-16","kind":"document-block","change":"removed","class":"documentation","bump":"patch","indirect":false,"contexts":[],"record":"select-box/documentBlocks/16","name":"guideline: Some cases may make more sense for the user to s","fields":[],"before":{"type":"guideline","content":"Some cases may make more sense for the user to select one or a few options in a group of select boxes, but if the use case doesn’t make sense to be checking a selection, showCheckbox can be false and the highlight style can be used instead. There is no visual differentiation between single- and multi-select behaviors when checkboxes are not present."}},
|
|
99
|
+
{"id":"ec3376fa-17","kind":"document-block","change":"added","class":"documentation","bump":"minor","indirect":false,"contexts":[],"record":"select-box/documentBlocks/17","name":"do-dont: Don't use select boxes as actions","fields":[],"after":{"type":"do-dont","content":"Don't use select boxes as actions","dont":"Select boxes are used to choose an item from a group. If clicking an item is meant to immediately trigger an action, use an action group instead."}},
|
|
100
|
+
{"id":"ec3376fa-18","kind":"document-block","change":"added","class":"documentation","bump":"minor","indirect":false,"contexts":[],"record":"select-box/documentBlocks/18","name":"do-dont: Don't use radio buttons in select boxes","fields":[],"after":{"type":"do-dont","content":"Don't use radio buttons in select boxes","dont":"Select boxes use a checkbox to indicate both single- and multi-selection. Don't use radio buttons for single-selection."}}
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
}
|