@api-client/ui 0.5.50 → 0.5.52
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/build/src/md/list/internals/ListItem.styles.d.ts.map +1 -1
- package/build/src/md/list/internals/ListItem.styles.js +11 -1
- package/build/src/md/list/internals/ListItem.styles.js.map +1 -1
- package/build/src/md/menu/internal/Menu.styles.js +1 -1
- package/build/src/md/menu/internal/Menu.styles.js.map +1 -1
- package/build/src/md/select/internals/Select.styles.d.ts.map +1 -1
- package/build/src/md/select/internals/Select.styles.js +8 -0
- package/build/src/md/select/internals/Select.styles.js.map +1 -1
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/md/list/internals/ListItem.styles.ts +11 -1
- package/src/md/menu/internal/Menu.styles.ts +1 -1
- package/src/md/select/internals/Select.styles.ts +8 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBAoNC"}
|
|
@@ -15,7 +15,7 @@ export default css `
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
:host([disabled]) {
|
|
18
|
-
|
|
18
|
+
pointer-events: none;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
:host([hidden]) {
|
|
@@ -35,6 +35,16 @@ export default css `
|
|
|
35
35
|
height: 56px;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
:host([disabled]) .surface {
|
|
39
|
+
background-color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 96%);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
:host([disabled]) .surface,
|
|
43
|
+
:host([disabled]) .headline,
|
|
44
|
+
:host([disabled]) .supporting-text {
|
|
45
|
+
color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 36%);
|
|
46
|
+
}
|
|
47
|
+
|
|
38
48
|
:host([image='image']) .surface,
|
|
39
49
|
.surface.two-lines {
|
|
40
50
|
height: 72px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoNjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: block;\n outline: none;\n cursor: default;\n position: relative;\n\n color: var(--md-sys-color-on-surface);\n\n --md-focus-ring-shape-end-end: 8px;\n --md-focus-ring-shape-end-start: 8px;\n --md-focus-ring-shape-start-end: 8px;\n --md-focus-ring-shape-start-start: 8px;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .surface {\n height: inherit;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n overflow: hidden;\n padding: 8px 16px 8px 16px;\n\n gap: 16px;\n height: 56px;\n }\n\n :host([disabled]) .surface {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 96%);\n }\n\n :host([disabled]) .surface,\n :host([disabled]) .headline,\n :host([disabled]) .supporting-text {\n color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 36%);\n }\n\n :host([image='image']) .surface,\n .surface.two-lines {\n height: 72px;\n }\n\n :host([image='video']) .surface,\n .surface.three-lines {\n height: 88px;\n }\n\n .ripple {\n z-index: 3;\n }\n\n :host([image='video']) .surface {\n /* The spec says the right padding is 24px but counting from the checkbox check border.\n This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n */\n padding: 12px 16px 12px 0px;\n }\n\n .headline {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n }\n\n .supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n\n overflow: hidden;\n }\n\n .supporting-text ::slotted(*),\n slot[name='end-text']::slotted(*) {\n margin: 0;\n padding: 0;\n overflow: hidden;\n }\n\n slot[name='end-text']::slotted(*) {\n /* this is to make up to the 24px right padding defined in the spec. */\n margin-right: 8px;\n }\n\n :host([lines='three']) .supporting-text {\n height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n }\n\n :host([lines='three']) .supporting-text ::slotted(*) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host([lines='two']) .supporting-text ::slotted(*) {\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .trailing-supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-small-font);\n font-weight: var(--md-sys-typescale-body-small-weight);\n font-size: var(--md-sys-typescale-body-small-size);\n letter-spacing: var(--md-sys-typescale-body-small-tracking);\n line-height: var(--md-sys-typescale-body-small-height);\n }\n\n .start {\n display: contents;\n }\n\n .start.has-start {\n align-self: stretch;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .end {\n display: contents;\n }\n\n .end.has-end,\n .end.has-end-text {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n :host slot[name='end']::slotted(*) {\n color: var(--md-sys-color-on-surface-variant);\n fill: var(--md-sys-color-on-surface-variant);\n }\n\n :host slot[name='start']::slotted(*) {\n display: block;\n }\n\n :host([image='icon']) slot[name='start']::slotted(*) {\n width: 24px;\n height: 24px;\n }\n\n :host([image='avatar']) slot[name='start']::slotted(*) {\n width: 40px;\n height: 40px;\n }\n\n :host([image='image']) slot[name='start']::slotted(*) {\n width: 56px;\n height: 56px;\n }\n\n :host([image='video']) slot[name='start']::slotted(*) {\n width: 114px;\n height: 64px;\n }\n\n .body {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n :host(.highlight) .surface {\n background-color: var(--md-sys-color-tertiary-container);\n color: var(--md-sys-color-on-tertiary-container);\n }\n\n :host(.select) .surface {\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n [name='overline'] {\n color: var(--md-sys-color-on-surface-variant);\n font-family: var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));\n font-size: var(--md-sys-typescale-label-small-size, 0.6875rem);\n font-weight: var(\n --md-sys-typescale-label-small-weight,\n var(--md-ref-typeface-weight-medium, 500) --md-ref-typeface-weight-medium is not defined\n );\n line-height: var(--md-sys-typescale-label-small-line-height, 1rem);\n }\n`\n"]}
|
|
@@ -4,7 +4,7 @@ export default css `
|
|
|
4
4
|
display: none;
|
|
5
5
|
position-area: bottom span-right;
|
|
6
6
|
position-try: --menu-fallback-bottom-left, --menu-fallback-top-right, --menu-fallback-top-left, flip-block;
|
|
7
|
-
position:
|
|
7
|
+
position: fixed;
|
|
8
8
|
margin: 0;
|
|
9
9
|
padding: 0;
|
|
10
10
|
border: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuQjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: none;\n position-area: bottom span-right;\n position-try: --menu-fallback-bottom-left, --menu-fallback-top-right, --menu-fallback-top-left, flip-block;\n position:
|
|
1
|
+
{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuQjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: none;\n position-area: bottom span-right;\n position-try: --menu-fallback-bottom-left, --menu-fallback-top-right, --menu-fallback-top-left, flip-block;\n position: fixed;\n margin: 0;\n padding: 0;\n border: none;\n overflow: hidden;\n /* in most cases the max-height won't matter as this assumes the whole screen to be available, which is rarely the truth. */\n max-height: 90vh;\n overflow: auto;\n }\n\n @position-try --menu-fallback-bottom-left {\n position-area: bottom span-left;\n }\n\n @position-try --menu-fallback-top-right {\n position-area: top span-right;\n }\n\n @position-try --menu-fallback-top-left {\n position-area: top span-left;\n }\n\n :host(:popover-open) {\n display: block;\n background-color: var(--md-sys-color-surface-container);\n border-radius: var(--md-sys-shape-corner-extra-small);\n box-shadow: var(--md-sys-elevation-3);\n animation: menu-scale-in 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n /* Scale animation for menus positioned below the anchor */\n @keyframes menu-scale-in {\n 0% {\n transform: scaleY(0);\n transform-origin: top center;\n opacity: 0;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: top center;\n opacity: 1;\n }\n }\n\n /* Scale animation for menus positioned above the anchor */\n @keyframes menu-scale-in-up {\n 0% {\n transform: scaleY(0);\n transform-origin: bottom center;\n opacity: 0;\n }\n 100% {\n transform: scaleY(1);\n transform-origin: bottom center;\n opacity: 1;\n }\n }\n\n /* Position-specific animations using JavaScript-detected classes */\n :host(.menu-positioned-above):popover-open {\n animation: menu-scale-in-up 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;\n }\n\n :host(.menu-positioned-below):popover-open {\n animation: menu-scale-in 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;\n }\n\n .menu-container {\n min-width: 200px;\n padding: 8px 0;\n outline: none;\n }\n\n .menu-divider {\n height: 1px;\n background-color: var(--md-sys-color-outline-variant);\n margin: 8px 0;\n }\n\n /* Menu Item Styles */\n .menu-item {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 48px;\n padding: 0 16px;\n cursor: pointer;\n outline: none;\n transition: background-color 0.2s ease;\n }\n\n .menu-item:hover {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n .menu-item:focus {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n .menu-item[disabled] {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .menu-item-content {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 12px;\n }\n\n .menu-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: var(--md-sys-color-on-surface);\n font-size: 20px;\n }\n\n .menu-item-label {\n flex: 1;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-label-large-font-family-name);\n font-size: var(--md-sys-typescale-label-large-font-size);\n font-weight: var(--md-sys-typescale-label-large-font-weight);\n line-height: var(--md-sys-typescale-label-large-line-height);\n letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);\n }\n\n .menu-item-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: var(--md-sys-color-on-surface);\n font-size: 18px;\n font-weight: 500;\n }\n\n .menu-item-with-submenu {\n position: relative;\n }\n\n .menu-item-with-submenu:hover .menu-item-arrow {\n color: var(--md-sys-color-primary);\n }\n\n /* Sub-menu Styles */\n .submenu-container {\n min-width: 200px;\n max-width: 320px;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--md-sys-shape-corner-extra-small);\n box-shadow: var(--md-sys-elevation-level3);\n padding: 8px 0;\n }\n\n /* Submenu positioning with Anchor API */\n ui-sub-menu {\n display: none;\n }\n\n ui-sub-menu:popover-open {\n display: block;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--md-sys-shape-corner-extra-small);\n box-shadow: var(--md-sys-elevation-level3);\n min-width: 200px;\n max-width: 320px;\n padding: 8px 0;\n z-index: 1000;\n animation: submenu-scale-in 0.12s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n /* Submenu scale animation */\n @keyframes submenu-scale-in {\n 0% {\n transform: scaleY(0) scaleX(0.8);\n transform-origin: left top;\n opacity: 0;\n }\n 100% {\n transform: scaleY(1) scaleX(1);\n transform-origin: left top;\n opacity: 1;\n }\n }\n\n /* Fallback positioning for browsers without anchor positioning */\n @supports not (anchor-name: --test) {\n ui-sub-menu:popover-open {\n position: fixed;\n transform: translateX(200px);\n }\n }\n\n /* Focus Ring */\n md-focus-ring {\n --md-focus-ring-color: var(--md-sys-color-primary);\n --md-focus-ring-width: 2px;\n }\n\n /* Ripple Effect */\n ui-ripple {\n --md-ripple-color: var(--md-sys-color-primary);\n --md-ripple-opacity: 0.12;\n }\n\n /* Responsive Design */\n @media (max-width: 600px) {\n .menu-container {\n min-width: 180px;\n max-width: 280px;\n }\n\n .submenu-container {\n min-width: 180px;\n max-width: 280px;\n }\n }\n\n /* High Contrast Mode */\n @media (prefers-contrast: high) {\n .menu-container {\n border: 1px solid var(--md-sys-color-outline);\n }\n\n .submenu-container {\n border: 1px solid var(--md-sys-color-outline);\n }\n\n .menu-divider {\n background-color: var(--md-sys-color-outline);\n }\n }\n\n /* Reduced Motion */\n @media (prefers-reduced-motion: reduce) {\n .menu-item {\n transition: none;\n }\n\n :host(:popover-open) {\n animation: none;\n opacity: 1;\n transform: none;\n }\n\n ui-sub-menu:popover-open {\n animation: none;\n opacity: 1;\n transform: none;\n }\n }\n`\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":";AAEA,wBAsBC"}
|
|
@@ -10,8 +10,16 @@ export default css `
|
|
|
10
10
|
--md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
.ui-select {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
width: 100%;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
|
|
13
20
|
.input {
|
|
14
21
|
cursor: default;
|
|
22
|
+
flex: 1;
|
|
15
23
|
}
|
|
16
24
|
`;
|
|
17
25
|
//# sourceMappingURL=Select.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n position: relative;\n outline: none;\n --md-focus-ring-shape-end-end: var(--md-sys-shape-corner-extra-small);\n --md-focus-ring-shape-end-start: var(--md-sys-shape-corner-extra-small);\n --md-focus-ring-shape-start-end: var(--md-sys-shape-corner-extra-small);\n --md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);\n }\n\n .ui-select {\n display: flex;\n flex-direction: row;\n width: 100%;\n box-sizing: border-box;\n }\n\n .input {\n cursor: default;\n flex: 1;\n }\n`\n"]}
|