@spectrum-web-components/breadcrumbs 1.7.0 → 1.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/README.md +149 -42
- package/package.json +6 -6
- package/sp-breadcrumb-item.d.ts +11 -0
- package/sp-breadcrumb-item.dev.js.map +1 -1
- package/sp-breadcrumb-item.js.map +1 -1
- package/sp-breadcrumbs.d.ts +11 -0
- package/sp-breadcrumbs.dev.js.map +1 -1
- package/sp-breadcrumbs.js.map +1 -1
- package/src/BreadcrumbItem.d.ts +11 -0
- package/src/BreadcrumbItem.dev.js.map +1 -1
- package/src/BreadcrumbItem.js.map +1 -1
- package/src/Breadcrumbs.d.ts +11 -0
- package/src/Breadcrumbs.dev.js.map +1 -1
- package/src/Breadcrumbs.js.map +1 -1
- package/src/breadcrumb-item.css.dev.js.map +1 -1
- package/src/breadcrumb-item.css.js.map +1 -1
- package/src/breadcrumbs-item-overrides.css.dev.js.map +1 -1
- package/src/breadcrumbs-item-overrides.css.js.map +1 -1
- package/src/breadcrumbs-overrides.css.dev.js.map +1 -1
- package/src/breadcrumbs-overrides.css.js.map +1 -1
- package/src/breadcrumbs.css.dev.js.map +1 -1
- package/src/breadcrumbs.css.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-breadcrumbs-item.css.dev.js.map +1 -1
- package/src/spectrum-breadcrumbs-item.css.js.map +1 -1
- package/src/spectrum-breadcrumbs.css.dev.js.map +1 -1
- package/src/spectrum-breadcrumbs.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,52 +1,55 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
|
+
|
|
3
|
+
An `<sp-breadcrumbs>` shows hierarchy and navigational context for a user's location within an app. The `<sp-breadcrumbs>` component defines its list of items using child `<sp-breadcrumb-item>` elements placed in its default slot.
|
|
4
|
+
|
|
5
|
+
[View the design documentation for this component.](https://spectrum.adobe.com/page/breadcrumbs/)
|
|
2
6
|
|
|
3
7
|
### Usage
|
|
4
8
|
|
|
5
9
|
[](https://www.npmjs.com/package/@spectrum-web-components/breadcrumbs)
|
|
6
10
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/breadcrumbs)
|
|
7
11
|
|
|
8
|
-
```
|
|
12
|
+
```zsh
|
|
9
13
|
yarn add @spectrum-web-components/breadcrumbs
|
|
10
14
|
```
|
|
11
15
|
|
|
12
16
|
Import the side effectful registration of `<sp-breadcrumbs>` and `<sp-breadcrumb-item>` via:
|
|
13
17
|
|
|
14
|
-
```
|
|
18
|
+
```js
|
|
15
19
|
import '@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js';
|
|
16
20
|
import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
|
|
17
21
|
```
|
|
18
22
|
|
|
19
23
|
When looking to leverage the `Breadcrumbs` or `BreadcrumbItem` base class as a type and/or for extension purposes, do so via:
|
|
20
24
|
|
|
21
|
-
```
|
|
22
|
-
import {
|
|
25
|
+
```js
|
|
26
|
+
import {
|
|
27
|
+
Breadcrumbs,
|
|
28
|
+
BreadcrumbItem,
|
|
29
|
+
} from '@spectrum-web-components/breadcrumbs';
|
|
23
30
|
```
|
|
24
31
|
|
|
25
|
-
|
|
32
|
+
### Anatomy
|
|
26
33
|
|
|
27
|
-
|
|
28
|
-
<sp-breadcrumbs>
|
|
29
|
-
<sp-breadcrumb-item value="1">Home</sp-breadcrumb-item>
|
|
30
|
-
<sp-breadcrumb-item value="2">Trend</sp-breadcrumb-item>
|
|
31
|
-
<sp-breadcrumb-item value="3">March 2019 Assets</sp-breadcrumb-item>
|
|
32
|
-
</sp-breadcrumbs>
|
|
33
|
-
```
|
|
34
|
+
Breadcrumbs consist of several key parts:
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
- A breadcrumbs list, usually consisting of multiple [breadcrumb items](/components/breadcrumb-item), with a separator between each item.
|
|
37
|
+
- A breadcrumbs title at the end of the list displaying the current location within the hierarchy.
|
|
38
|
+
- A truncation menu may also appear, which displays all options within a breadcrumb. Within the menu, items are listed with the hierarchy ordered from the top (root) to the bottom, and will include the currently selected item. Breadcrumbs truncate when there isn't enough space to show all items, or when the list contains five or more levels. Truncation helps manage space and keep the most relevant breadcrumbs visible in deeply nested hierarchies.
|
|
38
39
|
|
|
39
40
|
```html
|
|
40
41
|
<sp-breadcrumbs>
|
|
41
|
-
<sp-breadcrumb-item
|
|
42
|
-
<sp-breadcrumb-item value="
|
|
43
|
-
<sp-breadcrumb-item value="
|
|
42
|
+
<sp-breadcrumb-item value="home">Home</sp-breadcrumb-item>
|
|
43
|
+
<sp-breadcrumb-item value="trend">Trend</sp-breadcrumb-item>
|
|
44
|
+
<sp-breadcrumb-item value="assets">March 2019 Assets</sp-breadcrumb-item>
|
|
44
45
|
</sp-breadcrumbs>
|
|
45
46
|
```
|
|
46
47
|
|
|
47
|
-
|
|
48
|
+
### Options
|
|
49
|
+
|
|
50
|
+
#### Compact
|
|
48
51
|
|
|
49
|
-
When needing to optimize for functional space of
|
|
52
|
+
When needing to optimize for functional space of `<sp-breadcrumbs>`, the `compact` property can be used to reduce the height of the breadcrumbs while still maintaining the proper user context.
|
|
50
53
|
|
|
51
54
|
```html
|
|
52
55
|
<sp-breadcrumbs compact>
|
|
@@ -56,34 +59,52 @@ When needing to optimize for functional space of `sp-breadcrumbs`, the compact o
|
|
|
56
59
|
</sp-breadcrumbs>
|
|
57
60
|
```
|
|
58
61
|
|
|
59
|
-
|
|
62
|
+
#### Overflowing
|
|
60
63
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
+
When space becomes limited or the maximum visible items are reached, the component automatically moves the first breadcrumbs into an action menu, adjusting dynamically as the window is resized.
|
|
65
|
+
|
|
66
|
+
By default, the maximum number of visible breadcrumbs is 4, as recommended by [Spectrum Design](https://spectrum.adobe.com/page/breadcrumbs/#Don%E2%80%99t-show-too-many-breadcrumbs-at-once). You can override this by using the `max-visible-items` attribute. The `<sp-breadcrumbs>` component will always display the action menu and the breadcrumbs title, so the minimum number of visible items is 1.
|
|
67
|
+
|
|
68
|
+
<sp-tabs selected="default" label="Overflow options">
|
|
69
|
+
<sp-tab value="default">Default</sp-tab>
|
|
70
|
+
<sp-tab-panel value="default">
|
|
64
71
|
|
|
65
72
|
```html
|
|
66
73
|
<sp-breadcrumbs>
|
|
67
|
-
<sp-breadcrumb-item
|
|
68
|
-
|
|
69
|
-
</sp-breadcrumb-item>
|
|
70
|
-
<sp-breadcrumb-item
|
|
71
|
-
|
|
72
|
-
</sp-breadcrumb-item>
|
|
73
|
-
<sp-breadcrumb-item
|
|
74
|
-
|
|
75
|
-
</sp-breadcrumb-item>
|
|
74
|
+
<sp-breadcrumb-item value="your_stuff">Your stuff</sp-breadcrumb-item>
|
|
75
|
+
<sp-breadcrumb-item value="team">Team</sp-breadcrumb-item>
|
|
76
|
+
<sp-breadcrumb-item value="in_progress">In progress</sp-breadcrumb-item>
|
|
77
|
+
<sp-breadcrumb-item value="files">Files</sp-breadcrumb-item>
|
|
78
|
+
<sp-breadcrumb-item value="trend">Trend</sp-breadcrumb-item>
|
|
79
|
+
<sp-breadcrumb-item value="winter">Winter</sp-breadcrumb-item>
|
|
80
|
+
<sp-breadcrumb-item value="assets">Assets</sp-breadcrumb-item>
|
|
81
|
+
<sp-breadcrumb-item value="18x24">18x24</sp-breadcrumb-item>
|
|
76
82
|
</sp-breadcrumbs>
|
|
77
83
|
```
|
|
78
84
|
|
|
79
|
-
|
|
85
|
+
</sp-tab-panel>
|
|
86
|
+
<sp-tab value="one-max-item">One maximum visible item</sp-tab>
|
|
87
|
+
<sp-tab-panel value="one-max-item">
|
|
80
88
|
|
|
81
|
-
|
|
89
|
+
```html
|
|
90
|
+
<sp-breadcrumbs max-visible-items="1">
|
|
91
|
+
<sp-breadcrumb-item value="your_stuff">Your stuff</sp-breadcrumb-item>
|
|
92
|
+
<sp-breadcrumb-item value="team">Team</sp-breadcrumb-item>
|
|
93
|
+
<sp-breadcrumb-item value="in_progress">In progress</sp-breadcrumb-item>
|
|
94
|
+
<sp-breadcrumb-item value="files">Files</sp-breadcrumb-item>
|
|
95
|
+
<sp-breadcrumb-item value="trend">Trend</sp-breadcrumb-item>
|
|
96
|
+
<sp-breadcrumb-item value="winter">Winter</sp-breadcrumb-item>
|
|
97
|
+
<sp-breadcrumb-item value="assets">Assets</sp-breadcrumb-item>
|
|
98
|
+
<sp-breadcrumb-item value="18x24">18x24</sp-breadcrumb-item>
|
|
99
|
+
</sp-breadcrumbs>
|
|
100
|
+
```
|
|
82
101
|
|
|
83
|
-
|
|
102
|
+
</sp-tab-panel>
|
|
103
|
+
<sp-tab value="three-max-items">Three maximum visible items</sp-tab>
|
|
104
|
+
<sp-tab-panel value="three-max-items">
|
|
84
105
|
|
|
85
106
|
```html
|
|
86
|
-
<sp-breadcrumbs>
|
|
107
|
+
<sp-breadcrumbs max-visible-items="3">
|
|
87
108
|
<sp-breadcrumb-item value="your_stuff">Your stuff</sp-breadcrumb-item>
|
|
88
109
|
<sp-breadcrumb-item value="team">Team</sp-breadcrumb-item>
|
|
89
110
|
<sp-breadcrumb-item value="in_progress">In progress</sp-breadcrumb-item>
|
|
@@ -95,9 +116,37 @@ As recommended by [Spectrum Design](https://spectrum.adobe.com/page/breadcrumbs/
|
|
|
95
116
|
</sp-breadcrumbs>
|
|
96
117
|
```
|
|
97
118
|
|
|
98
|
-
|
|
119
|
+
</sp-tab-panel>
|
|
120
|
+
<sp-tab value="resizable">Resizable</sp-tab>
|
|
121
|
+
<sp-tab-panel value="resizable">
|
|
122
|
+
|
|
123
|
+
These breadcrumbs are in a resizable container. Reduce the size of the container to see how the maximum number of visible items changes.
|
|
124
|
+
|
|
125
|
+
```html
|
|
126
|
+
<div style="border: 2px solid; padding: 20px; resize: both; overflow: auto;">
|
|
127
|
+
<sp-breadcrumbs max-visible-items="8">
|
|
128
|
+
<sp-breadcrumb-item value="your_stuff">Your stuff</sp-breadcrumb-item>
|
|
129
|
+
<sp-breadcrumb-item value="team">Team</sp-breadcrumb-item>
|
|
130
|
+
<sp-breadcrumb-item value="in_progress">In progress</sp-breadcrumb-item>
|
|
131
|
+
<sp-breadcrumb-item value="files">Files</sp-breadcrumb-item>
|
|
132
|
+
<sp-breadcrumb-item value="trend">Trend</sp-breadcrumb-item>
|
|
133
|
+
<sp-breadcrumb-item value="winter">Winter</sp-breadcrumb-item>
|
|
134
|
+
<sp-breadcrumb-item value="assets">Assets</sp-breadcrumb-item>
|
|
135
|
+
<sp-breadcrumb-item value="18x24">18x24</sp-breadcrumb-item>
|
|
136
|
+
</sp-breadcrumbs>
|
|
137
|
+
</div>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
</sp-tab-panel>
|
|
141
|
+
</sp-tabs>
|
|
142
|
+
|
|
143
|
+
#### Show root
|
|
99
144
|
|
|
100
|
-
Use the
|
|
145
|
+
Use the `root` slot on the first breadcrumb item to always render the first breadcrumb item, even if the breadcrumbs are overflowing. The root will always show in addition to the number of items specified with `max-visible-items`.
|
|
146
|
+
|
|
147
|
+
<sp-tabs selected="overflowing" auto label="Root slot variations">
|
|
148
|
+
<sp-tab value="overflowing">Overflowing</sp-tab>
|
|
149
|
+
<sp-tab-panel value="overflowing">
|
|
101
150
|
|
|
102
151
|
```html
|
|
103
152
|
<sp-breadcrumbs>
|
|
@@ -112,9 +161,48 @@ Use the "root" slot to always render the first breadcrumb item, even if the brea
|
|
|
112
161
|
</sp-breadcrumbs>
|
|
113
162
|
```
|
|
114
163
|
|
|
115
|
-
|
|
164
|
+
</sp-tab-panel>
|
|
165
|
+
<sp-tab value="not-overflowing">Not overflowing</sp-tab>
|
|
166
|
+
<sp-tab-panel value="not-overflowing">
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<sp-breadcrumbs>
|
|
170
|
+
<sp-breadcrumb-item slot="root" value="your_stuff">
|
|
171
|
+
Your stuff
|
|
172
|
+
</sp-breadcrumb-item>
|
|
173
|
+
<sp-breadcrumb-item value="files">Files</sp-breadcrumb-item>
|
|
174
|
+
<sp-breadcrumb-item value="trend">Trend</sp-breadcrumb-item>
|
|
175
|
+
<sp-breadcrumb-item value="winter">Winter</sp-breadcrumb-item>
|
|
176
|
+
<sp-breadcrumb-item value="assets">Assets</sp-breadcrumb-item>
|
|
177
|
+
</sp-breadcrumbs>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
</sp-tab-panel>
|
|
181
|
+
</sp-tabs>
|
|
116
182
|
|
|
117
|
-
|
|
183
|
+
#### Links
|
|
184
|
+
|
|
185
|
+
By default, `sp-breadcrumbs` emits a `change` event when clicking on one of its children.
|
|
186
|
+
However, there may be cases in which clicking should redirect to another page. This can be achieved by using the `href` attribute instead of `value`.
|
|
187
|
+
Please note that the `change` event will no longer be triggered in this case.
|
|
188
|
+
|
|
189
|
+
```html
|
|
190
|
+
<sp-breadcrumbs>
|
|
191
|
+
<sp-breadcrumb-item href="https://opensource.adobe.com/">
|
|
192
|
+
Home
|
|
193
|
+
</sp-breadcrumb-item>
|
|
194
|
+
<sp-breadcrumb-item href="https://opensource.adobe.com/trend">
|
|
195
|
+
Trend
|
|
196
|
+
</sp-breadcrumb-item>
|
|
197
|
+
<sp-breadcrumb-item href="https://opensource.adobe.com/assets">
|
|
198
|
+
March 2019 Assets
|
|
199
|
+
</sp-breadcrumb-item>
|
|
200
|
+
</sp-breadcrumbs>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
#### Custom Action Menu
|
|
204
|
+
|
|
205
|
+
The component offers the possibility to replace the action menu's icon with a custom one using the `icon` slot. Moreover, for accessibility purposes you can provide an internationalized string for the menu label using the `menu-label` attribute.
|
|
118
206
|
|
|
119
207
|
```html
|
|
120
208
|
<sp-breadcrumbs menu-label="Settings">
|
|
@@ -127,3 +215,22 @@ The component offers the possibility to replace the action menu's icon with a cu
|
|
|
127
215
|
<sp-breadcrumb-item value="1">Preset #1</sp-breadcrumb-item>
|
|
128
216
|
</sp-breadcrumbs>
|
|
129
217
|
```
|
|
218
|
+
|
|
219
|
+
### Accessibility
|
|
220
|
+
|
|
221
|
+
The `<sp-breadcrumbs>` component provides the following accessibility features:
|
|
222
|
+
|
|
223
|
+
- Automatically sets `role="navigation"` to ensure proper semantic meaning for assistive technologies
|
|
224
|
+
- Uses semantic markup by rendering a `<ul>` with each [`<sp-breadcrumb-item>`](/components/breadcrumb-item) assigned `role="listitem"`
|
|
225
|
+
- The last breadcrumb item automatically receives `aria-current="page"` to indicate the current location
|
|
226
|
+
- Sets `aria-label` based on the `label` property, defaulting to `"Breadcrumbs"` if none is provided
|
|
227
|
+
- Each breadcrumb item is keyboard accessible with `tabindex="0"`
|
|
228
|
+
- Provides an accessible [action menu](/components/action-menu) with keyboard navigation and screen reader support
|
|
229
|
+
|
|
230
|
+
#### Best practices
|
|
231
|
+
|
|
232
|
+
- **Limit breadcrumb depth**: Keep breadcrumbs to 4-5 levels maximum to avoid overwhelming users
|
|
233
|
+
- **Use descriptive labels**: Each breadcrumb item should clearly identify the section or page
|
|
234
|
+
- **Maintain consistent hierarchy**: Always start from the root and progress logically to the current page
|
|
235
|
+
- **Handle overflow gracefully**: Use the `max-visible-items` property to control truncation behavior
|
|
236
|
+
- **Provide meaningful menu labels**: Use the `menu-label` attribute to describe the overflow menu purpose
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/breadcrumbs",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -73,11 +73,11 @@
|
|
|
73
73
|
"css"
|
|
74
74
|
],
|
|
75
75
|
"dependencies": {
|
|
76
|
-
"@spectrum-web-components/action-menu": "1.
|
|
77
|
-
"@spectrum-web-components/base": "1.
|
|
78
|
-
"@spectrum-web-components/icons-workflow": "1.
|
|
79
|
-
"@spectrum-web-components/link": "1.
|
|
80
|
-
"@spectrum-web-components/menu": "1.
|
|
76
|
+
"@spectrum-web-components/action-menu": "1.8.0",
|
|
77
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
78
|
+
"@spectrum-web-components/icons-workflow": "1.8.0",
|
|
79
|
+
"@spectrum-web-components/link": "1.8.0",
|
|
80
|
+
"@spectrum-web-components/menu": "1.8.0"
|
|
81
81
|
},
|
|
82
82
|
"types": "./src/index.d.ts",
|
|
83
83
|
"customElements": "custom-elements.json",
|
package/sp-breadcrumb-item.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { BreadcrumbItem } from './src/BreadcrumbItem.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-breadcrumb-item.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { BreadcrumbItem } from './src/BreadcrumbItem.dev.js'\n\ncustomElements.define('sp-breadcrumb-item', BreadcrumbItem);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-breadcrumb-item': BreadcrumbItem;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,SAAS,sBAAsB;AAE/B,eAAe,OAAO,sBAAsB,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-breadcrumb-item.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { BreadcrumbItem } from './src/BreadcrumbItem.js';\n\ncustomElements.define('sp-breadcrumb-item', BreadcrumbItem);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-breadcrumb-item': BreadcrumbItem;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,OAAS,kBAAAA,MAAsB,0BAE/B,eAAe,OAAO,qBAAsBA,CAAc",
|
|
6
6
|
"names": ["BreadcrumbItem"]
|
|
7
7
|
}
|
package/sp-breadcrumbs.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Breadcrumbs } from './src/Breadcrumbs.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-breadcrumbs.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Breadcrumbs } from './src/Breadcrumbs.dev.js'\n\ncustomElements.define('sp-breadcrumbs', Breadcrumbs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-breadcrumbs': Breadcrumbs;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,mBAAmB;AAE5B,eAAe,OAAO,kBAAkB,WAAW;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-breadcrumbs.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-breadcrumbs.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Breadcrumbs } from './src/Breadcrumbs.js';\n\ncustomElements.define('sp-breadcrumbs', Breadcrumbs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-breadcrumbs': Breadcrumbs;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,eAAAA,MAAmB,uBAE5B,eAAe,OAAO,iBAAkBA,CAAW",
|
|
6
6
|
"names": ["Breadcrumbs"]
|
|
7
7
|
}
|
package/src/BreadcrumbItem.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
|
|
3
14
|
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["BreadcrumbItem.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\n\nimport styles from './breadcrumb-item.css.js';\n\nexport interface BreadcrumbSelectDetail {\n value: string;\n}\n\nexport class BreadcrumbItem extends LikeAnchor(Focusable) {\n public static override get styles(): CSSResultArray {\n return [styles, chevronStyles];\n }\n\n @property()\n public value: string | undefined = undefined;\n\n /**\n * @private\n * Marks this breadcrumb item as the current route.\n */\n @property({ type: Boolean })\n public isLastOfType = false;\n\n public override get focusElement(): HTMLElement {\n return this.shadowRoot.querySelector('#item-link') as HTMLElement;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n }\n\n private announceSelected(value: string): void {\n const selectDetail: BreadcrumbSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('breadcrumb-select', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n protected handleClick(event?: Event): void {\n if (!this.href && event) {\n event.preventDefault();\n }\n\n if (!this.href || event?.defaultPrevented) {\n if (this.value && !this.isLastOfType) {\n this.announceSelected(this.value);\n }\n }\n }\n\n protected handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' || event.keyCode === 13) {\n this.handleClick(event);\n }\n }\n\n protected renderLink(): TemplateResult {\n return html`\n <a\n id=\"item-link\"\n href=${ifDefined(!this.isLastOfType ? this.href : undefined)}\n tabindex=${0}\n aria-current=${ifDefined(\n this.isLastOfType ? 'page' : undefined\n )}\n @keydown=${this.handleKeyDown}\n @click=${this.handleClick}\n >\n <slot></slot>\n </a>\n `;\n }\n\n private renderSeparator(): TemplateResult {\n return html`\n <sp-icon-chevron100\n id=\"separator\"\n size=\"xs\"\n class=\"spectrum-UIIcon-ChevronRight100\"\n ></sp-icon-chevron100>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.renderLink()}\n <slot name=\"menu\"></slot>\n ${this.renderSeparator()}\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO;AAEP,OAAO,YAAY;AAMZ,aAAM,uBAAuB,WAAW,SAAS,EAAE;AAAA,EAAnD;AAAA;AAMH,SAAO,QAA4B;AAOnC,SAAO,eAAe;AAAA;AAAA,EAZtB,WAA2B,SAAyB;AAChD,WAAO,CAAC,QAAQ,aAAa;AAAA,EACjC;AAAA,EAYA,IAAoB,eAA4B;AAC5C,WAAO,KAAK,WAAW,cAAc,YAAY;AAAA,EACrD;AAAA,EAES,oBAA0B;AAC/B,UAAM,kBAAkB;AAExB,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,UAAU;AAAA,IACxC;AAAA,EACJ;AAAA,EAEQ,iBAAiB,OAAqB;AAC1C,UAAM,eAAuC;AAAA,MACzC;AAAA,IACJ;AAEA,UAAM,iBAAiB,IAAI,YAAY,qBAAqB;AAAA,MACxD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAC;AAED,SAAK,cAAc,cAAc;AAAA,EACrC;AAAA,EAEU,YAAY,OAAqB;AACvC,QAAI,CAAC,KAAK,QAAQ,OAAO;AACrB,YAAM,eAAe;AAAA,IACzB;AAEA,QAAI,CAAC,KAAK,SAAQ,+BAAO,mBAAkB;AACvC,UAAI,KAAK,SAAS,CAAC,KAAK,cAAc;AAClC,aAAK,iBAAiB,KAAK,KAAK;AAAA,MACpC;AAAA,IACJ;AAAA,EACJ;AAAA,EAEU,cAAc,OAA4B;AAChD,QAAI,MAAM,QAAQ,WAAW,MAAM,YAAY,IAAI;AAC/C,WAAK,YAAY,KAAK;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEU,aAA6B;AACnC,WAAO;AAAA;AAAA;AAAA,uBAGQ,UAAU,CAAC,KAAK,eAAe,KAAK,OAAO,MAAS,CAAC;AAAA,2BACjD,CAAC;AAAA,+BACG;AAAA,MACX,KAAK,eAAe,SAAS;AAAA,IACjC,CAAC;AAAA,2BACU,KAAK,aAAa;AAAA,yBACpB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC;AAAA,EAEQ,kBAAkC;AACtC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOX;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,WAAW,CAAC;AAAA;AAAA,cAEjB,KAAK,gBAAgB,CAAC;AAAA;AAAA,EAEhC;AAAA,EAEmB,QAAQ,SAA+B;AACtD,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,aAAa,iBAAiB,MAAM;AAAA,MAC7C,OAAO;AACH,aAAK,gBAAgB,eAAe;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AACJ;AAjGW;AAAA,EADN,SAAS;AAAA,GALD,eAMF;AAOA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAZlB,eAaF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["BreadcrumbItem.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\n\nimport styles from './breadcrumb-item.css.js';\n\nexport interface BreadcrumbSelectDetail {\n value: string;\n}\n\nexport class BreadcrumbItem extends LikeAnchor(Focusable) {\n public static override get styles(): CSSResultArray {\n return [styles, chevronStyles];\n }\n\n @property()\n public value: string | undefined = undefined;\n\n /**\n * @private\n * Marks this breadcrumb item as the current route.\n */\n @property({ type: Boolean })\n public isLastOfType = false;\n\n public override get focusElement(): HTMLElement {\n return this.shadowRoot.querySelector('#item-link') as HTMLElement;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n }\n\n private announceSelected(value: string): void {\n const selectDetail: BreadcrumbSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('breadcrumb-select', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n protected handleClick(event?: Event): void {\n if (!this.href && event) {\n event.preventDefault();\n }\n\n if (!this.href || event?.defaultPrevented) {\n if (this.value && !this.isLastOfType) {\n this.announceSelected(this.value);\n }\n }\n }\n\n protected handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' || event.keyCode === 13) {\n this.handleClick(event);\n }\n }\n\n protected renderLink(): TemplateResult {\n return html`\n <a\n id=\"item-link\"\n href=${ifDefined(!this.isLastOfType ? this.href : undefined)}\n tabindex=${0}\n aria-current=${ifDefined(\n this.isLastOfType ? 'page' : undefined\n )}\n @keydown=${this.handleKeyDown}\n @click=${this.handleClick}\n >\n <slot></slot>\n </a>\n `;\n }\n\n private renderSeparator(): TemplateResult {\n return html`\n <sp-icon-chevron100\n id=\"separator\"\n size=\"xs\"\n class=\"spectrum-UIIcon-ChevronRight100\"\n ></sp-icon-chevron100>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.renderLink()}\n <slot name=\"menu\"></slot>\n ${this.renderSeparator()}\n `;\n }\n\n protected override updated(changes: PropertyValues): void {\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
5
|
"mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OAAS,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,aAAAC,MAAiB,mDAC1B,OAAS,cAAAC,MAAkB,qDAC3B,OAAOC,MAAmB,iEAC1B,MAAO,gEAEP,OAAOC,MAAY,2BAMZ,aAAM,uBAAuBF,EAAWD,CAAS,CAAE,CAAnD,kCAMH,KAAO,MAA4B,OAOnC,KAAO,aAAe,GAZtB,WAA2B,QAAyB,CAChD,MAAO,CAACG,EAAQD,CAAa,CACjC,CAYA,IAAoB,cAA4B,CAC5C,OAAO,KAAK,WAAW,cAAc,YAAY,CACrD,CAES,mBAA0B,CAC/B,MAAM,kBAAkB,EAEnB,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,UAAU,CAE5C,CAEQ,iBAAiBE,EAAqB,CAC1C,MAAMC,EAAuC,CACzC,MAAAD,CACJ,EAEME,EAAiB,IAAI,YAAY,oBAAqB,CACxD,QAAS,GACT,SAAU,GACV,OAAQD,CACZ,CAAC,EAED,KAAK,cAAcC,CAAc,CACrC,CAEU,YAAYC,EAAqB,CACnC,CAAC,KAAK,MAAQA,GACdA,EAAM,eAAe,GAGrB,CAAC,KAAK,MAAQA,GAAA,MAAAA,EAAO,mBACjB,KAAK,OAAS,CAAC,KAAK,cACpB,KAAK,iBAAiB,KAAK,KAAK,CAG5C,CAEU,cAAcA,EAA4B,EAC5CA,EAAM,MAAQ,SAAWA,EAAM,UAAY,KAC3C,KAAK,YAAYA,CAAK,CAE9B,CAEU,YAA6B,CACnC,OAAOV;AAAA;AAAA;AAAA,uBAGQC,EAAW,KAAK,aAA2B,OAAZ,KAAK,IAAgB,CAAC;AAAA,2BACjD,CAAC;AAAA,+BACGA,EACX,KAAK,aAAe,OAAS,MACjC,CAAC;AAAA,2BACU,KAAK,aAAa;AAAA,yBACpB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,SAKrC,CAEQ,iBAAkC,CACtC,OAAOD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOX,CAEmB,QAAyB,CACxC,OAAOA;AAAA,cACD,KAAK,WAAW,CAAC;AAAA;AAAA,cAEjB,KAAK,gBAAgB,CAAC;AAAA,SAEhC,CAEmB,QAAQW,EAA+B,CAClDA,EAAQ,IAAI,UAAU,IAClB,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,CAjGWC,EAAA,CADNV,EAAS,GALD,eAMF,qBAOAU,EAAA,CADNV,EAAS,CAAE,KAAM,OAAQ,CAAC,GAZlB,eAaF",
|
|
6
6
|
"names": ["html", "ifDefined", "property", "Focusable", "LikeAnchor", "chevronStyles", "styles", "value", "selectDetail", "selectionEvent", "event", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/Breadcrumbs.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
|
|
3
14
|
import '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Breadcrumbs.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport {\n BreadcrumbItem as BreadcrumbElement,\n BreadcrumbSelectDetail,\n} from './BreadcrumbItem.dev.js'\nimport {\n createRef,\n Ref,\n ref,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport styles from './breadcrumbs.css.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\ntype BreadcrumbItem = {\n label?: string;\n href?: string;\n value: string;\n offsetWidth: number;\n isVisible: boolean; // false if displayed in menu overlay\n};\n\n/**\n * @element sp-breadcrumbs\n *\n * @slot icon - change the default icon of the action menu\n * @slot root - Breadcrumb item to always display\n * @slot - Breadcrumb items\n * @fires change - Announces the selected breadcrumb item\n */\nexport class Breadcrumbs extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Override the maximum number of visible items\n */\n @property({ type: Number, attribute: 'max-visible-items' })\n public maxVisibleItems = 4;\n\n /**\n * Accessible name for the Breadcrumbs component\n */\n @property({ type: String })\n public label = '';\n\n /**\n * Change the default label of the action menu\n */\n @property({ type: String, attribute: 'menu-label' })\n public menuLabel = 'More items';\n\n /**\n * compact option is useful for reducing the height of the breadcrumbs\n */\n @property({ type: Boolean })\n public compact = false;\n\n @queryAssignedElements({ selector: 'sp-breadcrumb-item' })\n private breadcrumbsElements!: BreadcrumbElement[];\n\n @queryAssignedElements({ slot: 'root', selector: 'sp-breadcrumb-item' })\n private rootElement!: BreadcrumbElement[];\n\n @query('#list')\n private list!: HTMLUListElement;\n\n @state()\n private items: BreadcrumbItem[] = [];\n\n @state()\n private visibleItems = 0;\n\n private resizeObserver: ResizeObserver | undefined;\n private firstRender = true;\n\n private menuRef: Ref<ActionMenu> = createRef();\n\n private get hasMenu(): boolean {\n return this.visibleItems < (this.breadcrumbsElements?.length ?? 0);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'navigation');\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n if (this.firstRender) {\n // Don't adjust overflow on first render, it is adjused in slotChangeHandler\n this.firstRender = false;\n return;\n }\n this.adjustOverflow();\n });\n\n this.resizeObserver.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.resizeObserver?.unobserve(this);\n super.disconnectedCallback();\n }\n\n override updated(changes: PropertyValues): void {\n super.updated(changes);\n\n if (changes.has('label')) {\n this.setAttribute('aria-label', this.label || 'Breadcrumbs');\n }\n\n /**\n * Re-run the calculation of how many breadcrumbs fit in the available space.\n * maxVisibleItems may allow us to show more items, or less\n * compact affects the space each item occupies\n */\n if (changes.has('maxVisibleItems') || changes.has('compact')) {\n this.calculateBreadcrumbItemsWidth();\n this.adjustOverflow();\n }\n\n // Breadcrumbs items were added / removed, or available space changed\n if (changes.has('visibleItems')) {\n this.items.forEach((item, index) => {\n this.breadcrumbsElements[index].isLastOfType =\n index === this.breadcrumbsElements.length - 1;\n\n this.breadcrumbsElements[index].toggleAttribute(\n 'hidden',\n !item.isVisible\n );\n });\n }\n }\n\n /**\n * We need to understand how much space (px) each breadcrumb item occupies,\n * in order to know if it fits the available horizontal space.\n */\n private calculateBreadcrumbItemsWidth(): void {\n this.items = this.breadcrumbsElements.map((el, index) => {\n let width = el.offsetWidth;\n\n /**\n * For breadcrumbs which are hidden,\n * we need to temporarily remove the hidden attribute to calculate the width.\n */\n if (el.hasAttribute('hidden')) {\n el.removeAttribute('hidden');\n width = el.offsetWidth;\n el.setAttribute('hidden', '');\n }\n\n return {\n label: el.innerText,\n href: el.href,\n value: el.value || index.toString(),\n offsetWidth: width,\n isVisible: true,\n };\n });\n }\n\n /**\n * Calculate which breadcrumbs fit in the viewport, and which should be hidden.\n */\n private adjustOverflow(): void {\n let occupiedSpace = 0;\n let newVisibleItems = 0;\n const availableSpace = this.list.clientWidth;\n\n // Menu will always be visible if it exists.\n if (this.hasMenu && this.menuRef.value) {\n occupiedSpace += this.menuRef.value.offsetWidth || 0;\n }\n\n // Root will always be visible if it exists.\n if (this.rootElement.length > 0) {\n occupiedSpace += this.rootElement[0].offsetWidth;\n }\n\n const start = 0;\n for (let i = this.items.length - 1; i >= start; i--) {\n occupiedSpace += this.items[i].offsetWidth;\n if (\n occupiedSpace < availableSpace &&\n newVisibleItems < Math.max(this.maxVisibleItems, 1)\n ) {\n // There is still enough space for this breadcrumb.\n this.items[i].isVisible = true;\n newVisibleItems++;\n } else {\n // No more space so we hide the rest.\n for (let j = i; j >= start; j--) {\n this.items[j].isVisible = false;\n }\n break;\n }\n }\n\n // Show _at least_ one visible breadcrumb item.\n if (newVisibleItems === 0) {\n this.items[this.items.length - 1].isVisible = true;\n newVisibleItems++;\n }\n\n // Setting the visible items count will trigger an update.\n if (newVisibleItems !== this.visibleItems) {\n this.visibleItems = newVisibleItems;\n }\n }\n\n private announceChange(value: string): void {\n const selectDetail: BreadcrumbSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n private handleSelect(\n event: CustomEvent<BreadcrumbSelectDetail> & { target: BreadcrumbItem }\n ): void {\n event.stopPropagation();\n this.announceChange(event.detail.value);\n }\n\n private handleMenuChange(event: Event & { target: ActionMenu }): void {\n event.stopPropagation();\n this.announceChange(event.target.value);\n }\n\n /**\n * The truncation menu when there is not enough space to display all the breadcrumbs.\n * It displays all options within a breadcrumb.\n * Items are listed with the hierarchy ordered from top (root) to bottom\n * and include the currently selected item.\n */\n protected renderMenu(): TemplateResult {\n return html`\n <sp-breadcrumb-item role=\"listitem\" class=\"is-menu\">\n <sp-action-menu\n ${ref(this.menuRef)}\n quiet\n label=${this.menuLabel}\n selects=\"single\"\n value=${this.items[this.items.length - 1].value}\n @change=${this.handleMenuChange}\n slot=\"menu\"\n >\n <slot slot=\"icon\" name=\"icon\">\n <sp-icon-folder-open class=\"icon\"></sp-icon-folder-open>\n </slot>\n\n ${this.items.map(\n (item) => html`\n <sp-menu-item\n href=${ifDefined(item.href)}\n value=${item.value}\n >\n ${item.label}\n </sp-menu-item>\n `\n )}\n </sp-action-menu>\n </sp-breadcrumb-item>\n `;\n }\n\n /**\n * Breadcrumbs were added / removed, we need to recalculate the width of each item\n * and adjust the overflow accordingly.\n */\n private async slotChangeHandler(): Promise<void> {\n if (this.breadcrumbsElements.length === 0) {\n this.items = [];\n this.visibleItems = 0;\n return;\n }\n\n // Wait for all breadcrumb items to complete their updates\n await Promise.all(\n this.breadcrumbsElements.map((el) => el.updateComplete)\n );\n\n // Force a recalculation of widths and overflow\n this.calculateBreadcrumbItemsWidth();\n\n // Reset visibleItems to 0 to force a full recalculation\n this.visibleItems = 0;\n this.adjustOverflow();\n }\n\n protected override render(): TemplateResult {\n return html`\n <ul @breadcrumb-select=${this.handleSelect} id=\"list\">\n <slot name=\"root\"></slot>\n ${this.hasMenu ? this.renderMenu() : ''}\n <slot @slotchange=${this.slotChangeHandler}></slot>\n </ul>\n `;\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport {\n BreadcrumbItem as BreadcrumbElement,\n BreadcrumbSelectDetail,\n} from './BreadcrumbItem.dev.js'\nimport {\n createRef,\n Ref,\n ref,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport styles from './breadcrumbs.css.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\ntype BreadcrumbItem = {\n label?: string;\n href?: string;\n value: string;\n offsetWidth: number;\n isVisible: boolean; // false if displayed in menu overlay\n};\n\n/**\n * @element sp-breadcrumbs\n *\n * @slot icon - change the default icon of the action menu\n * @slot root - Breadcrumb item to always display\n * @slot - Breadcrumb items\n * @fires change - Announces the selected breadcrumb item\n */\nexport class Breadcrumbs extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Override the maximum number of visible items\n */\n @property({ type: Number, attribute: 'max-visible-items' })\n public maxVisibleItems = 4;\n\n /**\n * Accessible name for the Breadcrumbs component\n */\n @property({ type: String })\n public label = '';\n\n /**\n * Change the default label of the action menu\n */\n @property({ type: String, attribute: 'menu-label' })\n public menuLabel = 'More items';\n\n /**\n * compact option is useful for reducing the height of the breadcrumbs\n */\n @property({ type: Boolean })\n public compact = false;\n\n @queryAssignedElements({ selector: 'sp-breadcrumb-item' })\n private breadcrumbsElements!: BreadcrumbElement[];\n\n @queryAssignedElements({ slot: 'root', selector: 'sp-breadcrumb-item' })\n private rootElement!: BreadcrumbElement[];\n\n @query('#list')\n private list!: HTMLUListElement;\n\n @state()\n private items: BreadcrumbItem[] = [];\n\n @state()\n private visibleItems = 0;\n\n private resizeObserver: ResizeObserver | undefined;\n private firstRender = true;\n\n private menuRef: Ref<ActionMenu> = createRef();\n\n private get hasMenu(): boolean {\n return this.visibleItems < (this.breadcrumbsElements?.length ?? 0);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'navigation');\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n if (this.firstRender) {\n // Don't adjust overflow on first render, it is adjused in slotChangeHandler\n this.firstRender = false;\n return;\n }\n this.adjustOverflow();\n });\n\n this.resizeObserver.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.resizeObserver?.unobserve(this);\n super.disconnectedCallback();\n }\n\n override updated(changes: PropertyValues): void {\n super.updated(changes);\n\n if (changes.has('label')) {\n this.setAttribute('aria-label', this.label || 'Breadcrumbs');\n }\n\n /**\n * Re-run the calculation of how many breadcrumbs fit in the available space.\n * maxVisibleItems may allow us to show more items, or less\n * compact affects the space each item occupies\n */\n if (changes.has('maxVisibleItems') || changes.has('compact')) {\n this.calculateBreadcrumbItemsWidth();\n this.adjustOverflow();\n }\n\n // Breadcrumbs items were added / removed, or available space changed\n if (changes.has('visibleItems')) {\n this.items.forEach((item, index) => {\n this.breadcrumbsElements[index].isLastOfType =\n index === this.breadcrumbsElements.length - 1;\n\n this.breadcrumbsElements[index].toggleAttribute(\n 'hidden',\n !item.isVisible\n );\n });\n }\n }\n\n /**\n * We need to understand how much space (px) each breadcrumb item occupies,\n * in order to know if it fits the available horizontal space.\n */\n private calculateBreadcrumbItemsWidth(): void {\n this.items = this.breadcrumbsElements.map((el, index) => {\n let width = el.offsetWidth;\n\n /**\n * For breadcrumbs which are hidden,\n * we need to temporarily remove the hidden attribute to calculate the width.\n */\n if (el.hasAttribute('hidden')) {\n el.removeAttribute('hidden');\n width = el.offsetWidth;\n el.setAttribute('hidden', '');\n }\n\n return {\n label: el.innerText,\n href: el.href,\n value: el.value || index.toString(),\n offsetWidth: width,\n isVisible: true,\n };\n });\n }\n\n /**\n * Calculate which breadcrumbs fit in the viewport, and which should be hidden.\n */\n private adjustOverflow(): void {\n let occupiedSpace = 0;\n let newVisibleItems = 0;\n const availableSpace = this.list.clientWidth;\n\n // Menu will always be visible if it exists.\n if (this.hasMenu && this.menuRef.value) {\n occupiedSpace += this.menuRef.value.offsetWidth || 0;\n }\n\n // Root will always be visible if it exists.\n if (this.rootElement.length > 0) {\n occupiedSpace += this.rootElement[0].offsetWidth;\n }\n\n const start = 0;\n for (let i = this.items.length - 1; i >= start; i--) {\n occupiedSpace += this.items[i].offsetWidth;\n if (\n occupiedSpace < availableSpace &&\n newVisibleItems < Math.max(this.maxVisibleItems, 1)\n ) {\n // There is still enough space for this breadcrumb.\n this.items[i].isVisible = true;\n newVisibleItems++;\n } else {\n // No more space so we hide the rest.\n for (let j = i; j >= start; j--) {\n this.items[j].isVisible = false;\n }\n break;\n }\n }\n\n // Show _at least_ one visible breadcrumb item.\n if (newVisibleItems === 0) {\n this.items[this.items.length - 1].isVisible = true;\n newVisibleItems++;\n }\n\n // Setting the visible items count will trigger an update.\n if (newVisibleItems !== this.visibleItems) {\n this.visibleItems = newVisibleItems;\n }\n }\n\n private announceChange(value: string): void {\n const selectDetail: BreadcrumbSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n private handleSelect(\n event: CustomEvent<BreadcrumbSelectDetail> & { target: BreadcrumbItem }\n ): void {\n event.stopPropagation();\n this.announceChange(event.detail.value);\n }\n\n private handleMenuChange(event: Event & { target: ActionMenu }): void {\n event.stopPropagation();\n this.announceChange(event.target.value);\n }\n\n /**\n * The truncation menu when there is not enough space to display all the breadcrumbs.\n * It displays all options within a breadcrumb.\n * Items are listed with the hierarchy ordered from top (root) to bottom\n * and include the currently selected item.\n */\n protected renderMenu(): TemplateResult {\n return html`\n <sp-breadcrumb-item role=\"listitem\" class=\"is-menu\">\n <sp-action-menu\n ${ref(this.menuRef)}\n quiet\n label=${this.menuLabel}\n selects=\"single\"\n value=${this.items[this.items.length - 1].value}\n @change=${this.handleMenuChange}\n slot=\"menu\"\n >\n <slot slot=\"icon\" name=\"icon\">\n <sp-icon-folder-open class=\"icon\"></sp-icon-folder-open>\n </slot>\n\n ${this.items.map(\n (item) => html`\n <sp-menu-item\n href=${ifDefined(item.href)}\n value=${item.value}\n >\n ${item.label}\n </sp-menu-item>\n `\n )}\n </sp-action-menu>\n </sp-breadcrumb-item>\n `;\n }\n\n /**\n * Breadcrumbs were added / removed, we need to recalculate the width of each item\n * and adjust the overflow accordingly.\n */\n private async slotChangeHandler(): Promise<void> {\n if (this.breadcrumbsElements.length === 0) {\n this.items = [];\n this.visibleItems = 0;\n return;\n }\n\n // Wait for all breadcrumb items to complete their updates\n await Promise.all(\n this.breadcrumbsElements.map((el) => el.updateComplete)\n );\n\n // Force a recalculation of widths and overflow\n this.calculateBreadcrumbItemsWidth();\n\n // Reset visibleItems to 0 to force a full recalculation\n this.visibleItems = 0;\n this.adjustOverflow();\n }\n\n protected override render(): TemplateResult {\n return html`\n <ul @breadcrumb-select=${this.handleSelect} id=\"list\">\n <slot name=\"root\"></slot>\n ${this.hasMenu ? this.renderMenu() : ''}\n <slot @slotchange=${this.slotChangeHandler}></slot>\n </ul>\n `;\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Breadcrumbs.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Breadcrumbs.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport {\n BreadcrumbItem as BreadcrumbElement,\n BreadcrumbSelectDetail,\n} from './BreadcrumbItem.js';\nimport {\n createRef,\n Ref,\n ref,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport styles from './breadcrumbs.css.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\ntype BreadcrumbItem = {\n label?: string;\n href?: string;\n value: string;\n offsetWidth: number;\n isVisible: boolean; // false if displayed in menu overlay\n};\n\n/**\n * @element sp-breadcrumbs\n *\n * @slot icon - change the default icon of the action menu\n * @slot root - Breadcrumb item to always display\n * @slot - Breadcrumb items\n * @fires change - Announces the selected breadcrumb item\n */\nexport class Breadcrumbs extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Override the maximum number of visible items\n */\n @property({ type: Number, attribute: 'max-visible-items' })\n public maxVisibleItems = 4;\n\n /**\n * Accessible name for the Breadcrumbs component\n */\n @property({ type: String })\n public label = '';\n\n /**\n * Change the default label of the action menu\n */\n @property({ type: String, attribute: 'menu-label' })\n public menuLabel = 'More items';\n\n /**\n * compact option is useful for reducing the height of the breadcrumbs\n */\n @property({ type: Boolean })\n public compact = false;\n\n @queryAssignedElements({ selector: 'sp-breadcrumb-item' })\n private breadcrumbsElements!: BreadcrumbElement[];\n\n @queryAssignedElements({ slot: 'root', selector: 'sp-breadcrumb-item' })\n private rootElement!: BreadcrumbElement[];\n\n @query('#list')\n private list!: HTMLUListElement;\n\n @state()\n private items: BreadcrumbItem[] = [];\n\n @state()\n private visibleItems = 0;\n\n private resizeObserver: ResizeObserver | undefined;\n private firstRender = true;\n\n private menuRef: Ref<ActionMenu> = createRef();\n\n private get hasMenu(): boolean {\n return this.visibleItems < (this.breadcrumbsElements?.length ?? 0);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'navigation');\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n if (this.firstRender) {\n // Don't adjust overflow on first render, it is adjused in slotChangeHandler\n this.firstRender = false;\n return;\n }\n this.adjustOverflow();\n });\n\n this.resizeObserver.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.resizeObserver?.unobserve(this);\n super.disconnectedCallback();\n }\n\n override updated(changes: PropertyValues): void {\n super.updated(changes);\n\n if (changes.has('label')) {\n this.setAttribute('aria-label', this.label || 'Breadcrumbs');\n }\n\n /**\n * Re-run the calculation of how many breadcrumbs fit in the available space.\n * maxVisibleItems may allow us to show more items, or less\n * compact affects the space each item occupies\n */\n if (changes.has('maxVisibleItems') || changes.has('compact')) {\n this.calculateBreadcrumbItemsWidth();\n this.adjustOverflow();\n }\n\n // Breadcrumbs items were added / removed, or available space changed\n if (changes.has('visibleItems')) {\n this.items.forEach((item, index) => {\n this.breadcrumbsElements[index].isLastOfType =\n index === this.breadcrumbsElements.length - 1;\n\n this.breadcrumbsElements[index].toggleAttribute(\n 'hidden',\n !item.isVisible\n );\n });\n }\n }\n\n /**\n * We need to understand how much space (px) each breadcrumb item occupies,\n * in order to know if it fits the available horizontal space.\n */\n private calculateBreadcrumbItemsWidth(): void {\n this.items = this.breadcrumbsElements.map((el, index) => {\n let width = el.offsetWidth;\n\n /**\n * For breadcrumbs which are hidden,\n * we need to temporarily remove the hidden attribute to calculate the width.\n */\n if (el.hasAttribute('hidden')) {\n el.removeAttribute('hidden');\n width = el.offsetWidth;\n el.setAttribute('hidden', '');\n }\n\n return {\n label: el.innerText,\n href: el.href,\n value: el.value || index.toString(),\n offsetWidth: width,\n isVisible: true,\n };\n });\n }\n\n /**\n * Calculate which breadcrumbs fit in the viewport, and which should be hidden.\n */\n private adjustOverflow(): void {\n let occupiedSpace = 0;\n let newVisibleItems = 0;\n const availableSpace = this.list.clientWidth;\n\n // Menu will always be visible if it exists.\n if (this.hasMenu && this.menuRef.value) {\n occupiedSpace += this.menuRef.value.offsetWidth || 0;\n }\n\n // Root will always be visible if it exists.\n if (this.rootElement.length > 0) {\n occupiedSpace += this.rootElement[0].offsetWidth;\n }\n\n const start = 0;\n for (let i = this.items.length - 1; i >= start; i--) {\n occupiedSpace += this.items[i].offsetWidth;\n if (\n occupiedSpace < availableSpace &&\n newVisibleItems < Math.max(this.maxVisibleItems, 1)\n ) {\n // There is still enough space for this breadcrumb.\n this.items[i].isVisible = true;\n newVisibleItems++;\n } else {\n // No more space so we hide the rest.\n for (let j = i; j >= start; j--) {\n this.items[j].isVisible = false;\n }\n break;\n }\n }\n\n // Show _at least_ one visible breadcrumb item.\n if (newVisibleItems === 0) {\n this.items[this.items.length - 1].isVisible = true;\n newVisibleItems++;\n }\n\n // Setting the visible items count will trigger an update.\n if (newVisibleItems !== this.visibleItems) {\n this.visibleItems = newVisibleItems;\n }\n }\n\n private announceChange(value: string): void {\n const selectDetail: BreadcrumbSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n private handleSelect(\n event: CustomEvent<BreadcrumbSelectDetail> & { target: BreadcrumbItem }\n ): void {\n event.stopPropagation();\n this.announceChange(event.detail.value);\n }\n\n private handleMenuChange(event: Event & { target: ActionMenu }): void {\n event.stopPropagation();\n this.announceChange(event.target.value);\n }\n\n /**\n * The truncation menu when there is not enough space to display all the breadcrumbs.\n * It displays all options within a breadcrumb.\n * Items are listed with the hierarchy ordered from top (root) to bottom\n * and include the currently selected item.\n */\n protected renderMenu(): TemplateResult {\n return html`\n <sp-breadcrumb-item role=\"listitem\" class=\"is-menu\">\n <sp-action-menu\n ${ref(this.menuRef)}\n quiet\n label=${this.menuLabel}\n selects=\"single\"\n value=${this.items[this.items.length - 1].value}\n @change=${this.handleMenuChange}\n slot=\"menu\"\n >\n <slot slot=\"icon\" name=\"icon\">\n <sp-icon-folder-open class=\"icon\"></sp-icon-folder-open>\n </slot>\n\n ${this.items.map(\n (item) => html`\n <sp-menu-item\n href=${ifDefined(item.href)}\n value=${item.value}\n >\n ${item.label}\n </sp-menu-item>\n `\n )}\n </sp-action-menu>\n </sp-breadcrumb-item>\n `;\n }\n\n /**\n * Breadcrumbs were added / removed, we need to recalculate the width of each item\n * and adjust the overflow accordingly.\n */\n private async slotChangeHandler(): Promise<void> {\n if (this.breadcrumbsElements.length === 0) {\n this.items = [];\n this.visibleItems = 0;\n return;\n }\n\n // Wait for all breadcrumb items to complete their updates\n await Promise.all(\n this.breadcrumbsElements.map((el) => el.updateComplete)\n );\n\n // Force a recalculation of widths and overflow\n this.calculateBreadcrumbItemsWidth();\n\n // Reset visibleItems to 0 to force a full recalculation\n this.visibleItems = 0;\n this.adjustOverflow();\n }\n\n protected override render(): TemplateResult {\n return html`\n <ul @breadcrumb-select=${this.handleSelect} id=\"list\">\n <slot name=\"root\"></slot>\n ${this.hasMenu ? this.renderMenu() : ''}\n <slot @slotchange=${this.slotChangeHandler}></slot>\n </ul>\n `;\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport {\n BreadcrumbItem as BreadcrumbElement,\n BreadcrumbSelectDetail,\n} from './BreadcrumbItem.js';\nimport {\n createRef,\n Ref,\n ref,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport styles from './breadcrumbs.css.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\ntype BreadcrumbItem = {\n label?: string;\n href?: string;\n value: string;\n offsetWidth: number;\n isVisible: boolean; // false if displayed in menu overlay\n};\n\n/**\n * @element sp-breadcrumbs\n *\n * @slot icon - change the default icon of the action menu\n * @slot root - Breadcrumb item to always display\n * @slot - Breadcrumb items\n * @fires change - Announces the selected breadcrumb item\n */\nexport class Breadcrumbs extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Override the maximum number of visible items\n */\n @property({ type: Number, attribute: 'max-visible-items' })\n public maxVisibleItems = 4;\n\n /**\n * Accessible name for the Breadcrumbs component\n */\n @property({ type: String })\n public label = '';\n\n /**\n * Change the default label of the action menu\n */\n @property({ type: String, attribute: 'menu-label' })\n public menuLabel = 'More items';\n\n /**\n * compact option is useful for reducing the height of the breadcrumbs\n */\n @property({ type: Boolean })\n public compact = false;\n\n @queryAssignedElements({ selector: 'sp-breadcrumb-item' })\n private breadcrumbsElements!: BreadcrumbElement[];\n\n @queryAssignedElements({ slot: 'root', selector: 'sp-breadcrumb-item' })\n private rootElement!: BreadcrumbElement[];\n\n @query('#list')\n private list!: HTMLUListElement;\n\n @state()\n private items: BreadcrumbItem[] = [];\n\n @state()\n private visibleItems = 0;\n\n private resizeObserver: ResizeObserver | undefined;\n private firstRender = true;\n\n private menuRef: Ref<ActionMenu> = createRef();\n\n private get hasMenu(): boolean {\n return this.visibleItems < (this.breadcrumbsElements?.length ?? 0);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'navigation');\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n if (this.firstRender) {\n // Don't adjust overflow on first render, it is adjused in slotChangeHandler\n this.firstRender = false;\n return;\n }\n this.adjustOverflow();\n });\n\n this.resizeObserver.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.resizeObserver?.unobserve(this);\n super.disconnectedCallback();\n }\n\n override updated(changes: PropertyValues): void {\n super.updated(changes);\n\n if (changes.has('label')) {\n this.setAttribute('aria-label', this.label || 'Breadcrumbs');\n }\n\n /**\n * Re-run the calculation of how many breadcrumbs fit in the available space.\n * maxVisibleItems may allow us to show more items, or less\n * compact affects the space each item occupies\n */\n if (changes.has('maxVisibleItems') || changes.has('compact')) {\n this.calculateBreadcrumbItemsWidth();\n this.adjustOverflow();\n }\n\n // Breadcrumbs items were added / removed, or available space changed\n if (changes.has('visibleItems')) {\n this.items.forEach((item, index) => {\n this.breadcrumbsElements[index].isLastOfType =\n index === this.breadcrumbsElements.length - 1;\n\n this.breadcrumbsElements[index].toggleAttribute(\n 'hidden',\n !item.isVisible\n );\n });\n }\n }\n\n /**\n * We need to understand how much space (px) each breadcrumb item occupies,\n * in order to know if it fits the available horizontal space.\n */\n private calculateBreadcrumbItemsWidth(): void {\n this.items = this.breadcrumbsElements.map((el, index) => {\n let width = el.offsetWidth;\n\n /**\n * For breadcrumbs which are hidden,\n * we need to temporarily remove the hidden attribute to calculate the width.\n */\n if (el.hasAttribute('hidden')) {\n el.removeAttribute('hidden');\n width = el.offsetWidth;\n el.setAttribute('hidden', '');\n }\n\n return {\n label: el.innerText,\n href: el.href,\n value: el.value || index.toString(),\n offsetWidth: width,\n isVisible: true,\n };\n });\n }\n\n /**\n * Calculate which breadcrumbs fit in the viewport, and which should be hidden.\n */\n private adjustOverflow(): void {\n let occupiedSpace = 0;\n let newVisibleItems = 0;\n const availableSpace = this.list.clientWidth;\n\n // Menu will always be visible if it exists.\n if (this.hasMenu && this.menuRef.value) {\n occupiedSpace += this.menuRef.value.offsetWidth || 0;\n }\n\n // Root will always be visible if it exists.\n if (this.rootElement.length > 0) {\n occupiedSpace += this.rootElement[0].offsetWidth;\n }\n\n const start = 0;\n for (let i = this.items.length - 1; i >= start; i--) {\n occupiedSpace += this.items[i].offsetWidth;\n if (\n occupiedSpace < availableSpace &&\n newVisibleItems < Math.max(this.maxVisibleItems, 1)\n ) {\n // There is still enough space for this breadcrumb.\n this.items[i].isVisible = true;\n newVisibleItems++;\n } else {\n // No more space so we hide the rest.\n for (let j = i; j >= start; j--) {\n this.items[j].isVisible = false;\n }\n break;\n }\n }\n\n // Show _at least_ one visible breadcrumb item.\n if (newVisibleItems === 0) {\n this.items[this.items.length - 1].isVisible = true;\n newVisibleItems++;\n }\n\n // Setting the visible items count will trigger an update.\n if (newVisibleItems !== this.visibleItems) {\n this.visibleItems = newVisibleItems;\n }\n }\n\n private announceChange(value: string): void {\n const selectDetail: BreadcrumbSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n private handleSelect(\n event: CustomEvent<BreadcrumbSelectDetail> & { target: BreadcrumbItem }\n ): void {\n event.stopPropagation();\n this.announceChange(event.detail.value);\n }\n\n private handleMenuChange(event: Event & { target: ActionMenu }): void {\n event.stopPropagation();\n this.announceChange(event.target.value);\n }\n\n /**\n * The truncation menu when there is not enough space to display all the breadcrumbs.\n * It displays all options within a breadcrumb.\n * Items are listed with the hierarchy ordered from top (root) to bottom\n * and include the currently selected item.\n */\n protected renderMenu(): TemplateResult {\n return html`\n <sp-breadcrumb-item role=\"listitem\" class=\"is-menu\">\n <sp-action-menu\n ${ref(this.menuRef)}\n quiet\n label=${this.menuLabel}\n selects=\"single\"\n value=${this.items[this.items.length - 1].value}\n @change=${this.handleMenuChange}\n slot=\"menu\"\n >\n <slot slot=\"icon\" name=\"icon\">\n <sp-icon-folder-open class=\"icon\"></sp-icon-folder-open>\n </slot>\n\n ${this.items.map(\n (item) => html`\n <sp-menu-item\n href=${ifDefined(item.href)}\n value=${item.value}\n >\n ${item.label}\n </sp-menu-item>\n `\n )}\n </sp-action-menu>\n </sp-breadcrumb-item>\n `;\n }\n\n /**\n * Breadcrumbs were added / removed, we need to recalculate the width of each item\n * and adjust the overflow accordingly.\n */\n private async slotChangeHandler(): Promise<void> {\n if (this.breadcrumbsElements.length === 0) {\n this.items = [];\n this.visibleItems = 0;\n return;\n }\n\n // Wait for all breadcrumb items to complete their updates\n await Promise.all(\n this.breadcrumbsElements.map((el) => el.updateComplete)\n );\n\n // Force a recalculation of widths and overflow\n this.calculateBreadcrumbItemsWidth();\n\n // Reset visibleItems to 0 to force a full recalculation\n this.visibleItems = 0;\n this.adjustOverflow();\n }\n\n protected override render(): TemplateResult {\n return html`\n <ul @breadcrumb-select=${this.handleSelect} id=\"list\">\n <slot name=\"root\"></slot>\n ${this.hasMenu ? this.renderMenu() : ''}\n <slot @slotchange=${this.slotChangeHandler}></slot>\n </ul>\n `;\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["html", "SpectrumElement", "property", "query", "queryAssignedElements", "state", "createRef", "ref", "styles", "ifDefined", "_a", "_b", "changes", "item", "index", "el", "width", "occupiedSpace", "newVisibleItems", "availableSpace", "start", "i", "j", "value", "selectDetail", "selectionEvent", "event", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumb-item.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n #separator{margin-block:var(--mod-breadcrumbs-icon-spacing-block,var(--spectrum-breadcrumbs-icon-spacing-block));margin-inline:var(--mod-breadcrumbs-separator-spacing-inline,var(--spectrum-breadcrumbs-separator-spacing-inline));opacity:1;color:var(--highcontrast-breadcrumbs-separator-color,var(--mod-breadcrumbs-separator-color,var(--spectrum-breadcrumbs-separator-color)));position:relative}#separator:dir(rtl),:host([dir=rtl]) #separator{transform:scaleX(-1)}:host{box-sizing:border-box;white-space:nowrap;font-family:var(--mod-breadcrumbs-font-family,var(--spectrum-breadcrumbs-font-family));font-size:var(--mod-breadcrumbs-font-size,var(--spectrum-breadcrumbs-font-size));font-weight:var(--mod-breadcrumbs-font-weight,var(--spectrum-breadcrumbs-font-weight));line-height:var(--mod-breadcrumbs-line-height,var(--spectrum-breadcrumbs-line-height));align-items:center;display:inline-flex;position:relative}:host(:not(.is-menu):last-of-type){font-family:var(--mod-breadcrumbs-font-family-current,var(--spectrum-breadcrumbs-font-family-current));font-size:var(--mod-breadcrumbs-font-size-current,var(--spectrum-breadcrumbs-font-size-current));font-weight:var(--mod-breadcrumbs-font-weight-current,var(--spectrum-breadcrumbs-font-weight-current))}:host(:not(.is-menu):last-of-type) #separator{display:none}::slotted(sp-action-menu){margin-inline:var(--mod-breadcrumbs-action-button-spacing-inline,var(--spectrum-breadcrumbs-action-button-spacing-inline));margin-block:var(--mod-breadcrumbs-action-button-spacing-block,var(--spectrum-breadcrumbs-action-button-spacing-block));color:var(--highcontrast-breadcrumbs-action-button-color,var(--mod-breadcrumbs-action-button-color,var(--spectrum-breadcrumbs-action-button-color)))}::slotted(sp-action-menu[disabled]){color:var(--highcontrast-breadcrumbs-action-button-color-disabled,var(--mod-breadcrumbs-action-button-color-disabled,var(--spectrum-breadcrumbs-action-button-color-disabled)))}:host(:first-of-type)>::slotted(sp-action-menu){margin-inline-start:var(--mod-breadcrumbs-action-button-spacing-inline-start,var(--spectrum-breadcrumbs-action-button-spacing-inline-start))}#item-link{cursor:default;box-sizing:border-box;border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));color:var(--highcontrast-breadcrumbs-text-color,var(--mod-breadcrumbs-text-color,var(--spectrum-breadcrumbs-text-color)));outline:none;margin-block-start:var(--mod-breadcrumbs-text-spacing-block-start,var(--spectrum-breadcrumbs-text-spacing-block-start));margin-block-end:var(--mod-breadcrumbs-text-spacing-block-end,var(--spectrum-breadcrumbs-text-spacing-block-end));-webkit-text-decoration:none;text-decoration:none;display:block;position:relative}#item-link.is-disabled,:host([aria-disabled=true]) #item-link{color:var(--highcontrast-breadcrumbs-text-color-disabled,var(--mod-breadcrumbs-text-color-disabled,var(--spectrum-breadcrumbs-text-color-disabled)))}:host(:not(.is-menu):last-of-type) #item-link{color:var(--highcontrast-breadcrumbs-text-color-current,var(--mod-breadcrumbs-text-color-current,var(--spectrum-breadcrumbs-text-color-current)))}#item-link[href],#item-link[tabindex]{cursor:pointer}#item-link[href]:focus-visible,#item-link[tabindex]:focus-visible{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}@media (hover:hover){#item-link[href]:hover,#item-link[tabindex]:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}}:host .is-dragged #item-link:before,#item-link:focus-visible:before{box-sizing:border-box;inline-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);block-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);border-width:var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness));border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));content:\"\";pointer-events:none;border-style:solid;border-color:var(--highcontrast-breadcrumbs-focus-indicator-color,var(--mod-breadcrumbs-focus-indicator-color,var(--spectrum-breadcrumbs-focus-indicator-color)));margin-block-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);margin-inline-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);display:block;position:absolute}:host([hidden]){display:none}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumb-item.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n #separator{margin-block:var(--mod-breadcrumbs-icon-spacing-block,var(--spectrum-breadcrumbs-icon-spacing-block));margin-inline:var(--mod-breadcrumbs-separator-spacing-inline,var(--spectrum-breadcrumbs-separator-spacing-inline));opacity:1;color:var(--highcontrast-breadcrumbs-separator-color,var(--mod-breadcrumbs-separator-color,var(--spectrum-breadcrumbs-separator-color)));position:relative}#separator:dir(rtl),:host([dir=rtl]) #separator{transform:scaleX(-1)}:host{box-sizing:border-box;white-space:nowrap;font-family:var(--mod-breadcrumbs-font-family,var(--spectrum-breadcrumbs-font-family));font-size:var(--mod-breadcrumbs-font-size,var(--spectrum-breadcrumbs-font-size));font-weight:var(--mod-breadcrumbs-font-weight,var(--spectrum-breadcrumbs-font-weight));line-height:var(--mod-breadcrumbs-line-height,var(--spectrum-breadcrumbs-line-height));align-items:center;display:inline-flex;position:relative}:host(:not(.is-menu):last-of-type){font-family:var(--mod-breadcrumbs-font-family-current,var(--spectrum-breadcrumbs-font-family-current));font-size:var(--mod-breadcrumbs-font-size-current,var(--spectrum-breadcrumbs-font-size-current));font-weight:var(--mod-breadcrumbs-font-weight-current,var(--spectrum-breadcrumbs-font-weight-current))}:host(:not(.is-menu):last-of-type) #separator{display:none}::slotted(sp-action-menu){margin-inline:var(--mod-breadcrumbs-action-button-spacing-inline,var(--spectrum-breadcrumbs-action-button-spacing-inline));margin-block:var(--mod-breadcrumbs-action-button-spacing-block,var(--spectrum-breadcrumbs-action-button-spacing-block));color:var(--highcontrast-breadcrumbs-action-button-color,var(--mod-breadcrumbs-action-button-color,var(--spectrum-breadcrumbs-action-button-color)))}::slotted(sp-action-menu[disabled]){color:var(--highcontrast-breadcrumbs-action-button-color-disabled,var(--mod-breadcrumbs-action-button-color-disabled,var(--spectrum-breadcrumbs-action-button-color-disabled)))}:host(:first-of-type)>::slotted(sp-action-menu){margin-inline-start:var(--mod-breadcrumbs-action-button-spacing-inline-start,var(--spectrum-breadcrumbs-action-button-spacing-inline-start))}#item-link{cursor:default;box-sizing:border-box;border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));color:var(--highcontrast-breadcrumbs-text-color,var(--mod-breadcrumbs-text-color,var(--spectrum-breadcrumbs-text-color)));outline:none;margin-block-start:var(--mod-breadcrumbs-text-spacing-block-start,var(--spectrum-breadcrumbs-text-spacing-block-start));margin-block-end:var(--mod-breadcrumbs-text-spacing-block-end,var(--spectrum-breadcrumbs-text-spacing-block-end));-webkit-text-decoration:none;text-decoration:none;display:block;position:relative}#item-link.is-disabled,:host([aria-disabled=true]) #item-link{color:var(--highcontrast-breadcrumbs-text-color-disabled,var(--mod-breadcrumbs-text-color-disabled,var(--spectrum-breadcrumbs-text-color-disabled)))}:host(:not(.is-menu):last-of-type) #item-link{color:var(--highcontrast-breadcrumbs-text-color-current,var(--mod-breadcrumbs-text-color-current,var(--spectrum-breadcrumbs-text-color-current)))}#item-link[href],#item-link[tabindex]{cursor:pointer}#item-link[href]:focus-visible,#item-link[tabindex]:focus-visible{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}@media (hover:hover){#item-link[href]:hover,#item-link[tabindex]:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}}:host .is-dragged #item-link:before,#item-link:focus-visible:before{box-sizing:border-box;inline-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);block-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);border-width:var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness));border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));content:\"\";pointer-events:none;border-style:solid;border-color:var(--highcontrast-breadcrumbs-focus-indicator-color,var(--mod-breadcrumbs-focus-indicator-color,var(--spectrum-breadcrumbs-focus-indicator-color)));margin-block-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);margin-inline-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);display:block;position:absolute}:host([hidden]){display:none}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumbs-item-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumbs-item-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumbs-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumbs-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumbs.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-breadcrumbs-block-size:var(--spectrum-breadcrumbs-height);--spectrum-breadcrumbs-block-size-compact:var(--spectrum-breadcrumbs-height-compact);--spectrum-breadcrumbs-block-size-multiline:var(--spectrum-breadcrumbs-height-multiline);--spectrum-breadcrumbs-line-height:var(--spectrum-line-height-100);--spectrum-breadcrumbs-font-size:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-current:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-compact:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-compact-current:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-multiline:var(--spectrum-font-size-75);--spectrum-breadcrumbs-font-family-multiline:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-multiline-current:var(--spectrum-font-size-300);--spectrum-breadcrumbs-font-family-multiline-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-text-decoration-thickness:var(--spectrum-text-underline-thickness);--spectrum-breadcrumbs-text-decoration-gap:var(--spectrum-text-underline-gap);--spectrum-breadcrumbs-separator-spacing-inline:var(--spectrum-text-to-visual-100);--spectrum-breadcrumbs-text-spacing-block-start:var(--spectrum-breadcrumbs-top-to-text);--spectrum-breadcrumbs-text-spacing-block-end:var(--spectrum-breadcrumbs-bottom-to-text);--spectrum-breadcrumbs-icon-spacing-block:var(--spectrum-breadcrumbs-top-to-separator-icon);--spectrum-breadcrumbs-text-spacing-block-start-compact:var(--spectrum-breadcrumbs-top-to-text-compact);--spectrum-breadcrumbs-text-spacing-block-end-compact:var(--spectrum-breadcrumbs-bottom-to-text-compact);--spectrum-breadcrumbs-icon-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-separator-icon-compact);--spectrum-breadcrumbs-text-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-end-multiline:var(--spectrum-breadcrumbs-bottom-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-between-multiline:var(--spectrum-breadcrumbs-top-text-to-bottom-text);--spectrum-breadcrumbs-icon-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);--spectrum-breadcrumbs-icon-spacing-block-between-multiline:var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline);--spectrum-breadcrumbs-inline-start:var(--spectrum-breadcrumbs-start-edge-to-text);--spectrum-breadcrumbs-inline-end:var(--spectrum-breadcrumbs-end-edge-to-text);--spectrum-breadcrumbs-action-button-spacing-inline:var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);--spectrum-breadcrumbs-action-button-spacing-block:var(--spectrum-breadcrumbs-top-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-inline-start:var(--spectrum-breadcrumbs-start-edge-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-multiline:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-block-between-multiline:var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text);--spectrum-breadcrumbs-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-breadcrumbs-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-breadcrumbs-item-link-border-radius:var(--spectrum-corner-radius-100);--spectrum-breadcrumbs-text-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-text-color-current:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-text-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-separator-color:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-action-button-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-action-button-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-focus-indicator-color:var(--spectrum-focus-indicator-color)}@media (forced-colors:active){:host{--highcontrast-breadcrumbs-text-color:LinkText;--highcontrast-breadcrumbs-text-color-current:CanvasText;--highcontrast-breadcrumbs-text-color-disabled:GrayText;--highcontrast-breadcrumbs-separator-color:CanvasText;--highcontrast-breadcrumbs-action-button-color:LinkText;--highcontrast-breadcrumbs-action-button-color-disabled:GrayText;--highcontrast-breadcrumbs-focus-indicator-color:CanvasText}}#list{block-size:var(--mod-breadcrumbs-block-size,var(--spectrum-breadcrumbs-block-size));flex-flow:row;flex:1 0;justify-content:flex-start;align-items:center;margin:0;padding-inline-start:var(--mod-breadcrumbs-inline-start,var(--spectrum-breadcrumbs-inline-start));padding-inline-end:var(--mod-breadcrumbs-inline-end,var(--spectrum-breadcrumbs-inline-end));list-style-type:none;display:flex}:host([compact]) #list{block-size:var(--mod-breadcrumbs-block-size-compact,var(--spectrum-breadcrumbs-block-size-compact))}.spectrum-Breadcrumbs--multiline{block-size:var(--mod-breadcrumbs-block-size-multiline,var(--spectrum-breadcrumbs-block-size-multiline));flex-wrap:wrap;align-content:center}:host([compact]) ::slotted(sp-breadcrumb-item){font-family:var(--mod-breadcrumbs-font-family-compact,var(--spectrum-breadcrumbs-font-family-compact));font-size:var(--mod-breadcrumbs-font-size-compact,var(--spectrum-breadcrumbs-font-size-compact));font-weight:var(--mod-breadcrumbs-font-weight-compact,var(--spectrum-breadcrumbs-font-weight-compact))}:host([compact]) ::slotted(:last-of-type){font-family:var(--mod-breadcrumbs-font-family-compact-current,var(--spectrum-breadcrumbs-font-family-compact-current));font-size:var(--mod-breadcrumbs-font-size-compact-current,var(--spectrum-breadcrumbs-font-size-compact-current));font-weight:var(--mod-breadcrumbs-font-weight-compact-current,var(--spectrum-breadcrumbs-font-weight-compact-current))}:host{display:block}:host([compact]){--mod-breadcrumbs-icon-spacing-block:var(--mod-breadcrumbs-icon-spacing-block-compact,var(--spectrum-breadcrumbs-icon-spacing-block-compact));--mod-breadcrumbs-text-spacing-block-start:var(--mod-breadcrumbs-text-spacing-block-start-compact,var(--spectrum-breadcrumbs-text-spacing-block-start-compact));--mod-breadcrumbs-text-spacing-block-end:var(--mod-breadcrumbs-text-spacing-block-end-compact,var(--spectrum-breadcrumbs-text-spacing-block-end-compact));--mod-breadcrumbs-action-button-spacing-block:var(--mod-breadcrumbs-action-button-spacing-block-compact,var(--spectrum-breadcrumbs-action-button-spacing-block-compact))}:host([dir]) slot[slot=icon]::slotted([slot=icon]),:host([dir]) slot[slot=icon] .icon{margin-inline:calc((var(--custom-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only,var(--spectrum-actionbutton-edge-to-visual-only)))*-1)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["breadcrumbs.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-breadcrumbs-block-size:var(--spectrum-breadcrumbs-height);--spectrum-breadcrumbs-block-size-compact:var(--spectrum-breadcrumbs-height-compact);--spectrum-breadcrumbs-block-size-multiline:var(--spectrum-breadcrumbs-height-multiline);--spectrum-breadcrumbs-line-height:var(--spectrum-line-height-100);--spectrum-breadcrumbs-font-size:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-current:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-compact:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-compact-current:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-multiline:var(--spectrum-font-size-75);--spectrum-breadcrumbs-font-family-multiline:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-multiline-current:var(--spectrum-font-size-300);--spectrum-breadcrumbs-font-family-multiline-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-text-decoration-thickness:var(--spectrum-text-underline-thickness);--spectrum-breadcrumbs-text-decoration-gap:var(--spectrum-text-underline-gap);--spectrum-breadcrumbs-separator-spacing-inline:var(--spectrum-text-to-visual-100);--spectrum-breadcrumbs-text-spacing-block-start:var(--spectrum-breadcrumbs-top-to-text);--spectrum-breadcrumbs-text-spacing-block-end:var(--spectrum-breadcrumbs-bottom-to-text);--spectrum-breadcrumbs-icon-spacing-block:var(--spectrum-breadcrumbs-top-to-separator-icon);--spectrum-breadcrumbs-text-spacing-block-start-compact:var(--spectrum-breadcrumbs-top-to-text-compact);--spectrum-breadcrumbs-text-spacing-block-end-compact:var(--spectrum-breadcrumbs-bottom-to-text-compact);--spectrum-breadcrumbs-icon-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-separator-icon-compact);--spectrum-breadcrumbs-text-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-end-multiline:var(--spectrum-breadcrumbs-bottom-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-between-multiline:var(--spectrum-breadcrumbs-top-text-to-bottom-text);--spectrum-breadcrumbs-icon-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);--spectrum-breadcrumbs-icon-spacing-block-between-multiline:var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline);--spectrum-breadcrumbs-inline-start:var(--spectrum-breadcrumbs-start-edge-to-text);--spectrum-breadcrumbs-inline-end:var(--spectrum-breadcrumbs-end-edge-to-text);--spectrum-breadcrumbs-action-button-spacing-inline:var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);--spectrum-breadcrumbs-action-button-spacing-block:var(--spectrum-breadcrumbs-top-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-inline-start:var(--spectrum-breadcrumbs-start-edge-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-multiline:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-block-between-multiline:var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text);--spectrum-breadcrumbs-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-breadcrumbs-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-breadcrumbs-item-link-border-radius:var(--spectrum-corner-radius-100);--spectrum-breadcrumbs-text-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-text-color-current:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-text-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-separator-color:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-action-button-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-action-button-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-focus-indicator-color:var(--spectrum-focus-indicator-color)}@media (forced-colors:active){:host{--highcontrast-breadcrumbs-text-color:LinkText;--highcontrast-breadcrumbs-text-color-current:CanvasText;--highcontrast-breadcrumbs-text-color-disabled:GrayText;--highcontrast-breadcrumbs-separator-color:CanvasText;--highcontrast-breadcrumbs-action-button-color:LinkText;--highcontrast-breadcrumbs-action-button-color-disabled:GrayText;--highcontrast-breadcrumbs-focus-indicator-color:CanvasText}}#list{block-size:var(--mod-breadcrumbs-block-size,var(--spectrum-breadcrumbs-block-size));flex-flow:row;flex:1 0;justify-content:flex-start;align-items:center;margin:0;padding-inline-start:var(--mod-breadcrumbs-inline-start,var(--spectrum-breadcrumbs-inline-start));padding-inline-end:var(--mod-breadcrumbs-inline-end,var(--spectrum-breadcrumbs-inline-end));list-style-type:none;display:flex}:host([compact]) #list{block-size:var(--mod-breadcrumbs-block-size-compact,var(--spectrum-breadcrumbs-block-size-compact))}.spectrum-Breadcrumbs--multiline{block-size:var(--mod-breadcrumbs-block-size-multiline,var(--spectrum-breadcrumbs-block-size-multiline));flex-wrap:wrap;align-content:center}:host([compact]) ::slotted(sp-breadcrumb-item){font-family:var(--mod-breadcrumbs-font-family-compact,var(--spectrum-breadcrumbs-font-family-compact));font-size:var(--mod-breadcrumbs-font-size-compact,var(--spectrum-breadcrumbs-font-size-compact));font-weight:var(--mod-breadcrumbs-font-weight-compact,var(--spectrum-breadcrumbs-font-weight-compact))}:host([compact]) ::slotted(:last-of-type){font-family:var(--mod-breadcrumbs-font-family-compact-current,var(--spectrum-breadcrumbs-font-family-compact-current));font-size:var(--mod-breadcrumbs-font-size-compact-current,var(--spectrum-breadcrumbs-font-size-compact-current));font-weight:var(--mod-breadcrumbs-font-weight-compact-current,var(--spectrum-breadcrumbs-font-weight-compact-current))}:host{display:block}:host([compact]){--mod-breadcrumbs-icon-spacing-block:var(--mod-breadcrumbs-icon-spacing-block-compact,var(--spectrum-breadcrumbs-icon-spacing-block-compact));--mod-breadcrumbs-text-spacing-block-start:var(--mod-breadcrumbs-text-spacing-block-start-compact,var(--spectrum-breadcrumbs-text-spacing-block-start-compact));--mod-breadcrumbs-text-spacing-block-end:var(--mod-breadcrumbs-text-spacing-block-end-compact,var(--spectrum-breadcrumbs-text-spacing-block-end-compact));--mod-breadcrumbs-action-button-spacing-block:var(--mod-breadcrumbs-action-button-spacing-block-compact,var(--spectrum-breadcrumbs-action-button-spacing-block-compact))}:host([dir]) slot[slot=icon]::slotted([slot=icon]),:host([dir]) slot[slot=icon] .icon{margin-inline:calc((var(--custom-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only,var(--spectrum-actionbutton-edge-to-visual-only)))*-1)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -1,2 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
export * from './Breadcrumbs.js';
|
|
2
13
|
export * from './BreadcrumbItem.js';
|
package/src/index.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './Breadcrumbs.dev.js'\nexport * from './BreadcrumbItem.dev.js'\n"],
|
|
5
5
|
"mappings": ";AAWA,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './Breadcrumbs.js';\nexport * from './BreadcrumbItem.js';\n"],
|
|
5
5
|
"mappings": "aAWA,WAAc,mBACd,WAAc",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-breadcrumbs-item.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n #separator{margin-block:var(--mod-breadcrumbs-icon-spacing-block,var(--spectrum-breadcrumbs-icon-spacing-block));margin-inline:var(--mod-breadcrumbs-separator-spacing-inline,var(--spectrum-breadcrumbs-separator-spacing-inline));opacity:1;color:var(--highcontrast-breadcrumbs-separator-color,var(--mod-breadcrumbs-separator-color,var(--spectrum-breadcrumbs-separator-color)));position:relative}#separator:dir(rtl),:host([dir=rtl]) #separator{transform:scaleX(-1)}:host{box-sizing:border-box;white-space:nowrap;font-family:var(--mod-breadcrumbs-font-family,var(--spectrum-breadcrumbs-font-family));font-size:var(--mod-breadcrumbs-font-size,var(--spectrum-breadcrumbs-font-size));font-weight:var(--mod-breadcrumbs-font-weight,var(--spectrum-breadcrumbs-font-weight));line-height:var(--mod-breadcrumbs-line-height,var(--spectrum-breadcrumbs-line-height));align-items:center;display:inline-flex;position:relative}:host(:not(.is-menu):last-of-type){font-family:var(--mod-breadcrumbs-font-family-current,var(--spectrum-breadcrumbs-font-family-current));font-size:var(--mod-breadcrumbs-font-size-current,var(--spectrum-breadcrumbs-font-size-current));font-weight:var(--mod-breadcrumbs-font-weight-current,var(--spectrum-breadcrumbs-font-weight-current))}:host(:not(.is-menu):last-of-type) #separator{display:none}::slotted(sp-action-menu){margin-inline:var(--mod-breadcrumbs-action-button-spacing-inline,var(--spectrum-breadcrumbs-action-button-spacing-inline));margin-block:var(--mod-breadcrumbs-action-button-spacing-block,var(--spectrum-breadcrumbs-action-button-spacing-block));color:var(--highcontrast-breadcrumbs-action-button-color,var(--mod-breadcrumbs-action-button-color,var(--spectrum-breadcrumbs-action-button-color)))}::slotted(sp-action-menu[disabled]){color:var(--highcontrast-breadcrumbs-action-button-color-disabled,var(--mod-breadcrumbs-action-button-color-disabled,var(--spectrum-breadcrumbs-action-button-color-disabled)))}:host(:first-of-type)>::slotted(sp-action-menu){margin-inline-start:var(--mod-breadcrumbs-action-button-spacing-inline-start,var(--spectrum-breadcrumbs-action-button-spacing-inline-start))}#item-link{cursor:default;box-sizing:border-box;border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));color:var(--highcontrast-breadcrumbs-text-color,var(--mod-breadcrumbs-text-color,var(--spectrum-breadcrumbs-text-color)));outline:none;margin-block-start:var(--mod-breadcrumbs-text-spacing-block-start,var(--spectrum-breadcrumbs-text-spacing-block-start));margin-block-end:var(--mod-breadcrumbs-text-spacing-block-end,var(--spectrum-breadcrumbs-text-spacing-block-end));-webkit-text-decoration:none;text-decoration:none;display:block;position:relative}#item-link.is-disabled,:host([aria-disabled=true]) #item-link{color:var(--highcontrast-breadcrumbs-text-color-disabled,var(--mod-breadcrumbs-text-color-disabled,var(--spectrum-breadcrumbs-text-color-disabled)))}:host(:not(.is-menu):last-of-type) #item-link{color:var(--highcontrast-breadcrumbs-text-color-current,var(--mod-breadcrumbs-text-color-current,var(--spectrum-breadcrumbs-text-color-current)))}#item-link[href],#item-link[tabindex]{cursor:pointer}#item-link[href]:focus-visible,#item-link[tabindex]:focus-visible{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}@media (hover:hover){#item-link[href]:hover,#item-link[tabindex]:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}}:host .is-dragged #item-link:before,#item-link:focus-visible:before{box-sizing:border-box;inline-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);block-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);border-width:var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness));border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));content:\"\";pointer-events:none;border-style:solid;border-color:var(--highcontrast-breadcrumbs-focus-indicator-color,var(--mod-breadcrumbs-focus-indicator-color,var(--spectrum-breadcrumbs-focus-indicator-color)));margin-block-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);margin-inline-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);display:block;position:absolute}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-breadcrumbs-item.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n #separator{margin-block:var(--mod-breadcrumbs-icon-spacing-block,var(--spectrum-breadcrumbs-icon-spacing-block));margin-inline:var(--mod-breadcrumbs-separator-spacing-inline,var(--spectrum-breadcrumbs-separator-spacing-inline));opacity:1;color:var(--highcontrast-breadcrumbs-separator-color,var(--mod-breadcrumbs-separator-color,var(--spectrum-breadcrumbs-separator-color)));position:relative}#separator:dir(rtl),:host([dir=rtl]) #separator{transform:scaleX(-1)}:host{box-sizing:border-box;white-space:nowrap;font-family:var(--mod-breadcrumbs-font-family,var(--spectrum-breadcrumbs-font-family));font-size:var(--mod-breadcrumbs-font-size,var(--spectrum-breadcrumbs-font-size));font-weight:var(--mod-breadcrumbs-font-weight,var(--spectrum-breadcrumbs-font-weight));line-height:var(--mod-breadcrumbs-line-height,var(--spectrum-breadcrumbs-line-height));align-items:center;display:inline-flex;position:relative}:host(:not(.is-menu):last-of-type){font-family:var(--mod-breadcrumbs-font-family-current,var(--spectrum-breadcrumbs-font-family-current));font-size:var(--mod-breadcrumbs-font-size-current,var(--spectrum-breadcrumbs-font-size-current));font-weight:var(--mod-breadcrumbs-font-weight-current,var(--spectrum-breadcrumbs-font-weight-current))}:host(:not(.is-menu):last-of-type) #separator{display:none}::slotted(sp-action-menu){margin-inline:var(--mod-breadcrumbs-action-button-spacing-inline,var(--spectrum-breadcrumbs-action-button-spacing-inline));margin-block:var(--mod-breadcrumbs-action-button-spacing-block,var(--spectrum-breadcrumbs-action-button-spacing-block));color:var(--highcontrast-breadcrumbs-action-button-color,var(--mod-breadcrumbs-action-button-color,var(--spectrum-breadcrumbs-action-button-color)))}::slotted(sp-action-menu[disabled]){color:var(--highcontrast-breadcrumbs-action-button-color-disabled,var(--mod-breadcrumbs-action-button-color-disabled,var(--spectrum-breadcrumbs-action-button-color-disabled)))}:host(:first-of-type)>::slotted(sp-action-menu){margin-inline-start:var(--mod-breadcrumbs-action-button-spacing-inline-start,var(--spectrum-breadcrumbs-action-button-spacing-inline-start))}#item-link{cursor:default;box-sizing:border-box;border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));color:var(--highcontrast-breadcrumbs-text-color,var(--mod-breadcrumbs-text-color,var(--spectrum-breadcrumbs-text-color)));outline:none;margin-block-start:var(--mod-breadcrumbs-text-spacing-block-start,var(--spectrum-breadcrumbs-text-spacing-block-start));margin-block-end:var(--mod-breadcrumbs-text-spacing-block-end,var(--spectrum-breadcrumbs-text-spacing-block-end));-webkit-text-decoration:none;text-decoration:none;display:block;position:relative}#item-link.is-disabled,:host([aria-disabled=true]) #item-link{color:var(--highcontrast-breadcrumbs-text-color-disabled,var(--mod-breadcrumbs-text-color-disabled,var(--spectrum-breadcrumbs-text-color-disabled)))}:host(:not(.is-menu):last-of-type) #item-link{color:var(--highcontrast-breadcrumbs-text-color-current,var(--mod-breadcrumbs-text-color-current,var(--spectrum-breadcrumbs-text-color-current)))}#item-link[href],#item-link[tabindex]{cursor:pointer}#item-link[href]:focus-visible,#item-link[tabindex]:focus-visible{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}@media (hover:hover){#item-link[href]:hover,#item-link[tabindex]:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-thickness:var(--mod-breadcrumbs-text-decoration-thickness,var(--spectrum-breadcrumbs-text-decoration-thickness));text-underline-offset:var(--mod-breadcrumbs-text-decoration-gap,var(--spectrum-breadcrumbs-text-decoration-gap))}}:host .is-dragged #item-link:before,#item-link:focus-visible:before{box-sizing:border-box;inline-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);block-size:calc(100% + var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap))*2 + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness))*2);border-width:var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness));border-radius:var(--mod-breadcrumbs-item-link-border-radius,var(--spectrum-breadcrumbs-item-link-border-radius));content:\"\";pointer-events:none;border-style:solid;border-color:var(--highcontrast-breadcrumbs-focus-indicator-color,var(--mod-breadcrumbs-focus-indicator-color,var(--spectrum-breadcrumbs-focus-indicator-color)));margin-block-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);margin-inline-start:calc((var(--mod-breadcrumbs-focus-indicator-gap,var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness,var(--spectrum-breadcrumbs-focus-indicator-thickness)))*-1);display:block;position:absolute}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-breadcrumbs.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-breadcrumbs-block-size:var(--spectrum-breadcrumbs-height);--spectrum-breadcrumbs-block-size-compact:var(--spectrum-breadcrumbs-height-compact);--spectrum-breadcrumbs-block-size-multiline:var(--spectrum-breadcrumbs-height-multiline);--spectrum-breadcrumbs-line-height:var(--spectrum-line-height-100);--spectrum-breadcrumbs-font-size:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-current:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-compact:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-compact-current:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-multiline:var(--spectrum-font-size-75);--spectrum-breadcrumbs-font-family-multiline:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-multiline-current:var(--spectrum-font-size-300);--spectrum-breadcrumbs-font-family-multiline-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-text-decoration-thickness:var(--spectrum-text-underline-thickness);--spectrum-breadcrumbs-text-decoration-gap:var(--spectrum-text-underline-gap);--spectrum-breadcrumbs-separator-spacing-inline:var(--spectrum-text-to-visual-100);--spectrum-breadcrumbs-text-spacing-block-start:var(--spectrum-breadcrumbs-top-to-text);--spectrum-breadcrumbs-text-spacing-block-end:var(--spectrum-breadcrumbs-bottom-to-text);--spectrum-breadcrumbs-icon-spacing-block:var(--spectrum-breadcrumbs-top-to-separator-icon);--spectrum-breadcrumbs-text-spacing-block-start-compact:var(--spectrum-breadcrumbs-top-to-text-compact);--spectrum-breadcrumbs-text-spacing-block-end-compact:var(--spectrum-breadcrumbs-bottom-to-text-compact);--spectrum-breadcrumbs-icon-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-separator-icon-compact);--spectrum-breadcrumbs-text-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-end-multiline:var(--spectrum-breadcrumbs-bottom-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-between-multiline:var(--spectrum-breadcrumbs-top-text-to-bottom-text);--spectrum-breadcrumbs-icon-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);--spectrum-breadcrumbs-icon-spacing-block-between-multiline:var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline);--spectrum-breadcrumbs-inline-start:var(--spectrum-breadcrumbs-start-edge-to-text);--spectrum-breadcrumbs-inline-end:var(--spectrum-breadcrumbs-end-edge-to-text);--spectrum-breadcrumbs-action-button-spacing-inline:var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);--spectrum-breadcrumbs-action-button-spacing-block:var(--spectrum-breadcrumbs-top-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-inline-start:var(--spectrum-breadcrumbs-start-edge-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-multiline:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-block-between-multiline:var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text);--spectrum-breadcrumbs-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-breadcrumbs-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-breadcrumbs-item-link-border-radius:var(--spectrum-corner-radius-100);--spectrum-breadcrumbs-text-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-text-color-current:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-text-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-separator-color:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-action-button-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-action-button-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-focus-indicator-color:var(--spectrum-focus-indicator-color)}@media (forced-colors:active){:host{--highcontrast-breadcrumbs-text-color:LinkText;--highcontrast-breadcrumbs-text-color-current:CanvasText;--highcontrast-breadcrumbs-text-color-disabled:GrayText;--highcontrast-breadcrumbs-separator-color:CanvasText;--highcontrast-breadcrumbs-action-button-color:LinkText;--highcontrast-breadcrumbs-action-button-color-disabled:GrayText;--highcontrast-breadcrumbs-focus-indicator-color:CanvasText}}#list{block-size:var(--mod-breadcrumbs-block-size,var(--spectrum-breadcrumbs-block-size));flex-flow:row;flex:1 0;justify-content:flex-start;align-items:center;margin:0;padding-inline-start:var(--mod-breadcrumbs-inline-start,var(--spectrum-breadcrumbs-inline-start));padding-inline-end:var(--mod-breadcrumbs-inline-end,var(--spectrum-breadcrumbs-inline-end));list-style-type:none;display:flex}:host([compact]) #list{block-size:var(--mod-breadcrumbs-block-size-compact,var(--spectrum-breadcrumbs-block-size-compact))}.spectrum-Breadcrumbs--multiline{block-size:var(--mod-breadcrumbs-block-size-multiline,var(--spectrum-breadcrumbs-block-size-multiline));flex-wrap:wrap;align-content:center}:host([compact]) ::slotted(sp-breadcrumb-item){font-family:var(--mod-breadcrumbs-font-family-compact,var(--spectrum-breadcrumbs-font-family-compact));font-size:var(--mod-breadcrumbs-font-size-compact,var(--spectrum-breadcrumbs-font-size-compact));font-weight:var(--mod-breadcrumbs-font-weight-compact,var(--spectrum-breadcrumbs-font-weight-compact))}:host([compact]) ::slotted(:last-of-type){font-family:var(--mod-breadcrumbs-font-family-compact-current,var(--spectrum-breadcrumbs-font-family-compact-current));font-size:var(--mod-breadcrumbs-font-size-compact-current,var(--spectrum-breadcrumbs-font-size-compact-current));font-weight:var(--mod-breadcrumbs-font-weight-compact-current,var(--spectrum-breadcrumbs-font-weight-compact-current))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-breadcrumbs.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-breadcrumbs-block-size:var(--spectrum-breadcrumbs-height);--spectrum-breadcrumbs-block-size-compact:var(--spectrum-breadcrumbs-height-compact);--spectrum-breadcrumbs-block-size-multiline:var(--spectrum-breadcrumbs-height-multiline);--spectrum-breadcrumbs-line-height:var(--spectrum-line-height-100);--spectrum-breadcrumbs-font-size:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-current:var(--spectrum-font-size-200);--spectrum-breadcrumbs-font-family-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-compact:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-compact-current:var(--spectrum-font-size-100);--spectrum-breadcrumbs-font-family-compact-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-compact-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-font-size-multiline:var(--spectrum-font-size-75);--spectrum-breadcrumbs-font-family-multiline:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline:var(--spectrum-regular-font-weight);--spectrum-breadcrumbs-font-size-multiline-current:var(--spectrum-font-size-300);--spectrum-breadcrumbs-font-family-multiline-current:var(--spectrum-sans-font-family-stack);--spectrum-breadcrumbs-font-weight-multiline-current:var(--spectrum-bold-font-weight);--spectrum-breadcrumbs-text-decoration-thickness:var(--spectrum-text-underline-thickness);--spectrum-breadcrumbs-text-decoration-gap:var(--spectrum-text-underline-gap);--spectrum-breadcrumbs-separator-spacing-inline:var(--spectrum-text-to-visual-100);--spectrum-breadcrumbs-text-spacing-block-start:var(--spectrum-breadcrumbs-top-to-text);--spectrum-breadcrumbs-text-spacing-block-end:var(--spectrum-breadcrumbs-bottom-to-text);--spectrum-breadcrumbs-icon-spacing-block:var(--spectrum-breadcrumbs-top-to-separator-icon);--spectrum-breadcrumbs-text-spacing-block-start-compact:var(--spectrum-breadcrumbs-top-to-text-compact);--spectrum-breadcrumbs-text-spacing-block-end-compact:var(--spectrum-breadcrumbs-bottom-to-text-compact);--spectrum-breadcrumbs-icon-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-separator-icon-compact);--spectrum-breadcrumbs-text-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-end-multiline:var(--spectrum-breadcrumbs-bottom-to-text-multiline);--spectrum-breadcrumbs-text-spacing-block-between-multiline:var(--spectrum-breadcrumbs-top-text-to-bottom-text);--spectrum-breadcrumbs-icon-spacing-block-start-multiline:var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);--spectrum-breadcrumbs-icon-spacing-block-between-multiline:var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline);--spectrum-breadcrumbs-inline-start:var(--spectrum-breadcrumbs-start-edge-to-text);--spectrum-breadcrumbs-inline-end:var(--spectrum-breadcrumbs-end-edge-to-text);--spectrum-breadcrumbs-action-button-spacing-inline:var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);--spectrum-breadcrumbs-action-button-spacing-block:var(--spectrum-breadcrumbs-top-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-compact:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-inline-start:var(--spectrum-breadcrumbs-start-edge-to-truncated-menu);--spectrum-breadcrumbs-action-button-spacing-block-multiline:var(--spectrum-breadcrumbs-top-to-truncated-menu-compact);--spectrum-breadcrumbs-action-button-spacing-block-between-multiline:var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text);--spectrum-breadcrumbs-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-breadcrumbs-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-breadcrumbs-item-link-border-radius:var(--spectrum-corner-radius-100);--spectrum-breadcrumbs-text-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-text-color-current:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-text-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-separator-color:var(--spectrum-neutral-content-color-default);--spectrum-breadcrumbs-action-button-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-breadcrumbs-action-button-color-disabled:var(--spectrum-disabled-content-color);--spectrum-breadcrumbs-focus-indicator-color:var(--spectrum-focus-indicator-color)}@media (forced-colors:active){:host{--highcontrast-breadcrumbs-text-color:LinkText;--highcontrast-breadcrumbs-text-color-current:CanvasText;--highcontrast-breadcrumbs-text-color-disabled:GrayText;--highcontrast-breadcrumbs-separator-color:CanvasText;--highcontrast-breadcrumbs-action-button-color:LinkText;--highcontrast-breadcrumbs-action-button-color-disabled:GrayText;--highcontrast-breadcrumbs-focus-indicator-color:CanvasText}}#list{block-size:var(--mod-breadcrumbs-block-size,var(--spectrum-breadcrumbs-block-size));flex-flow:row;flex:1 0;justify-content:flex-start;align-items:center;margin:0;padding-inline-start:var(--mod-breadcrumbs-inline-start,var(--spectrum-breadcrumbs-inline-start));padding-inline-end:var(--mod-breadcrumbs-inline-end,var(--spectrum-breadcrumbs-inline-end));list-style-type:none;display:flex}:host([compact]) #list{block-size:var(--mod-breadcrumbs-block-size-compact,var(--spectrum-breadcrumbs-block-size-compact))}.spectrum-Breadcrumbs--multiline{block-size:var(--mod-breadcrumbs-block-size-multiline,var(--spectrum-breadcrumbs-block-size-multiline));flex-wrap:wrap;align-content:center}:host([compact]) ::slotted(sp-breadcrumb-item){font-family:var(--mod-breadcrumbs-font-family-compact,var(--spectrum-breadcrumbs-font-family-compact));font-size:var(--mod-breadcrumbs-font-size-compact,var(--spectrum-breadcrumbs-font-size-compact));font-weight:var(--mod-breadcrumbs-font-weight-compact,var(--spectrum-breadcrumbs-font-weight-compact))}:host([compact]) ::slotted(:last-of-type){font-family:var(--mod-breadcrumbs-font-family-compact-current,var(--spectrum-breadcrumbs-font-family-compact-current));font-size:var(--mod-breadcrumbs-font-size-compact-current,var(--spectrum-breadcrumbs-font-size-compact-current));font-weight:var(--mod-breadcrumbs-font-weight-compact-current,var(--spectrum-breadcrumbs-font-weight-compact-current))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|