@api-client/ui 0.3.4 → 0.3.5
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/button/internals/button.styles.js +1 -1
- package/build/src/md/button/internals/button.styles.js.map +1 -1
- package/build/src/md/dialog/internals/Dialog.styles.d.ts.map +1 -1
- package/build/src/md/dialog/internals/Dialog.styles.js +5 -11
- package/build/src/md/dialog/internals/Dialog.styles.js.map +1 -1
- package/build/src/md/text-field/internals/outlined.styles.js +2 -2
- package/build/src/md/text-field/internals/outlined.styles.js.map +1 -1
- package/package.json +2 -2
- package/src/md/button/internals/button.styles.ts +1 -1
- package/src/md/dialog/internals/Dialog.styles.ts +5 -11
- package/src/md/text-field/internals/outlined.styles.ts +2 -2
- package/build/src/events/BroadcastUiEvents.d.ts +0 -18
- package/build/src/events/BroadcastUiEvents.d.ts.map +0 -1
- package/build/src/events/BroadcastUiEvents.js +0 -2
- package/build/src/events/BroadcastUiEvents.js.map +0 -1
- package/src/events/BroadcastUiEvents.ts +0 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,qEAAqE;AACrE,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2TjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/* Material Design 3 Expressive Button - CSS-Native Implementation */\nexport default css`\n :host {\n all: unset;\n\n /* Layout and positioning */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n\n /* Default sizing */\n min-height: 40px;\n min-width: 64px;\n padding-inline: 16px;\n gap: 8px;\n\n /* Typography from Material 3 tokens */\n font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n font-weight: var(--md-sys-typescale-label-large-weight, 500);\n line-height: var(--md-sys-typescale-label-large-height, 1.25);\n letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);\n\n --md-ripple-hover-state-layer-color: currentColor;\n --md-ripple-focus-state-layer-color: currentColor;\n --md-ripple-pressed-state-layer-color: currentColor;\n\n /* CSS custom property for pill radius - half of the button height */\n --_pill-radius: 20px;\n /* Default icon size */\n --_icon-size: var(--md-button-icon-size, 20px);\n --_background-color: transparent;\n --_color: inherit;\n --_shadow: var(--md-sys-elevation-0);\n\n border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));\n border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));\n border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));\n border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));\n background-color: var(--_background-color);\n color: var(--_color);\n box-shadow: var(--_shadow);\n\n /* Interaction styles */\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n\n transition:\n background-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n box-shadow var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Icon styling */\n ::slotted([slot='icon']) {\n flex-shrink: 0;\n width: var(--_icon-size);\n height: var(--_icon-size);\n font-size: inherit;\n }\n\n /* Modern CSS: Container queries for responsive sizing */\n @container (min-width: 320px) {\n :host {\n min-width: 80px;\n }\n }\n\n .ripple {\n border-radius: inherit;\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n .ripple.activated {\n z-index: 1;\n }\n\n .focus-ring {\n --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));\n --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));\n --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));\n --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Disabled state */\n :host([disabled]) {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* Size Variations */\n :host([size='xs']) {\n min-height: 32px;\n padding-inline: 12px;\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n gap: 6px;\n --_icon-size: 20px;\n }\n\n :host([size='s']) {\n min-height: 40px;\n padding-inline: 16px;\n --_icon-size: 20px;\n }\n\n :host([size='m']) {\n min-height: 56px;\n padding-inline: 24px;\n font-size: var(--md-sys-typescale-label-large-size, 1rem);\n gap: 10px;\n --_icon-size: 24px;\n }\n\n :host([size='l']) {\n min-height: 96px;\n padding-inline: 48px;\n font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);\n gap: 12px;\n --_icon-size: 32px;\n }\n\n :host([size='xl']) {\n min-height: 136px;\n padding-inline: 64px;\n font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n gap: 16px;\n --_icon-size: 40px;\n }\n\n /* Pressed state is the same to all combinations of shape and size */\n :host([size='xs'].pressed),\n :host([size='s'].pressed) {\n --_pill-radius: 8px !important;\n }\n :host([size='m'].pressed) {\n --_pill-radius: 12px !important;\n }\n :host([size='xl'].pressed),\n :host([size='l'].pressed) {\n --_pill-radius: 16px !important;\n }\n\n /* Shape setup */\n /* For the round shape, we can't use the \"--md-sys-shape-corner-full\" value as it has a value of 999px and it would make animations impossible so see. */\n :host([toggle][selected][shape='square'][size='xs']),\n :host([shape='round'][size='xs']) {\n --_pill-radius: 16px; /* Half of 32px height */\n }\n :host([toggle][selected][shape='square'][size='s']),\n :host([shape='round'][size='s']) {\n --_pill-radius: 20px; /* Half of 40px height */\n }\n :host([toggle][selected][shape='square'][size='m']),\n :host([shape='round'][size='m']) {\n --_pill-radius: 28px; /* Half of 56px height */\n }\n :host([toggle][selected][shape='square'][size='l']),\n :host([shape='round'][size='l']) {\n --_pill-radius: 48px; /* Half of 96px height */\n }\n :host([toggle][selected][shape='square'][size='xl']),\n :host([shape='round'][size='xl']) {\n --_pill-radius: 68px; /* Half of 136px height */\n }\n\n :host([shape='square'][size='xs']),\n :host([shape='square'][size='s']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n :host([shape='square'][size='m']) {\n --_pill-radius: var(--md-sys-shape-corner-large);\n }\n\n :host([shape='square'][size='l']),\n :host([shape='square'][size='xl']) {\n --_pill-radius: var(--md-sys-shape-corner-extra-large);\n }\n\n /* Button Color Variants - Material 3 Expressive */\n\n /* Elevated Button */\n :host([color='elevated']) {\n --_background-color: var(--md-sys-color-surface-container-low);\n --_color: var(--md-sys-color-primary);\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='elevated'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='elevated']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-2);\n }\n\n :host([color='elevated'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_shadow: var(--md-sys-elevation-0);\n }\n\n /* Filled Button */\n :host([color='filled']) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled'][toggle]) {\n --_background-color: var(--md-sys-color-surface-container);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='filled'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='filled'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Filled Tonal Button */\n :host([color='tonal']) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle]) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle][selected]) {\n --_background-color: var(--md-sys-color-secondary);\n --_color: var(--md-sys-color-on-secondary);\n }\n\n :host([color='tonal']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='tonal'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Outlined Button */\n :host([color='outlined']) {\n border: 1px var(--md-sys-color-outline-variant) solid;\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='outlined'][toggle][selected]) {\n --_background-color: var(--md-sys-color-inverse-surface);\n --_color: var(--md-sys-color-inverse-on-surface);\n }\n\n :host([color='outlined'][disabled]) {\n border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Text Button */\n :host([color='text']) {\n --_color: var(--md-sys-color-primary);\n }\n\n :host([color='text'][disabled]) {\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n :host([toggle][selected][shape='round']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n /* Preference-based animations */\n @media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0.01ms;\n animation-duration: 0.01ms;\n }\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n :host {\n border-width: 2px;\n }\n\n :host([color='text']),\n :host([color='outlined']) {\n border-width: 2px;\n border-style: solid;\n }\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,qEAAqE;AACrE,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2TjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/* Material Design 3 Expressive Button - CSS-Native Implementation */\nexport default css`\n :host {\n all: unset;\n\n /* Layout and positioning */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n\n /* Default sizing */\n min-height: 40px;\n min-width: 64px;\n padding-inline: 16px;\n gap: 8px;\n\n /* Typography from Material 3 tokens */\n font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n font-weight: var(--md-sys-typescale-label-large-weight, 500);\n line-height: var(--md-sys-typescale-label-large-height, 1.25);\n letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);\n\n --md-ripple-hover-state-layer-color: currentColor;\n --md-ripple-focus-state-layer-color: currentColor;\n --md-ripple-pressed-state-layer-color: currentColor;\n\n /* CSS custom property for pill radius - half of the button height */\n --_pill-radius: 20px;\n /* Default icon size */\n --_icon-size: var(--md-button-icon-size, 20px);\n --_background-color: transparent;\n --_color: inherit;\n --_shadow: var(--md-sys-elevation-0);\n\n border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));\n border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));\n border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));\n border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));\n background-color: var(--_background-color);\n color: var(--_color);\n box-shadow: var(--_shadow);\n\n /* Interaction styles */\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n\n transition:\n background-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n box-shadow var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-color var(--md-sys-motion-duration-short2, 200ms)\n var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Icon styling */\n ::slotted([slot='icon']) {\n flex-shrink: 0;\n width: var(--_icon-size);\n height: var(--_icon-size);\n font-size: var(--_icon-size);\n }\n\n /* Modern CSS: Container queries for responsive sizing */\n @container (min-width: 320px) {\n :host {\n min-width: 80px;\n }\n }\n\n .ripple {\n border-radius: inherit;\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n .ripple.activated {\n z-index: 1;\n }\n\n .focus-ring {\n --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));\n --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));\n --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));\n --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n /* Disabled state */\n :host([disabled]) {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* Size Variations */\n :host([size='xs']) {\n min-height: 32px;\n padding-inline: 12px;\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n gap: 6px;\n --_icon-size: 20px;\n }\n\n :host([size='s']) {\n min-height: 40px;\n padding-inline: 16px;\n --_icon-size: 20px;\n }\n\n :host([size='m']) {\n min-height: 56px;\n padding-inline: 24px;\n font-size: var(--md-sys-typescale-label-large-size, 1rem);\n gap: 10px;\n --_icon-size: 24px;\n }\n\n :host([size='l']) {\n min-height: 96px;\n padding-inline: 48px;\n font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);\n gap: 12px;\n --_icon-size: 32px;\n }\n\n :host([size='xl']) {\n min-height: 136px;\n padding-inline: 64px;\n font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n gap: 16px;\n --_icon-size: 40px;\n }\n\n /* Pressed state is the same to all combinations of shape and size */\n :host([size='xs'].pressed),\n :host([size='s'].pressed) {\n --_pill-radius: 8px !important;\n }\n :host([size='m'].pressed) {\n --_pill-radius: 12px !important;\n }\n :host([size='xl'].pressed),\n :host([size='l'].pressed) {\n --_pill-radius: 16px !important;\n }\n\n /* Shape setup */\n /* For the round shape, we can't use the \"--md-sys-shape-corner-full\" value as it has a value of 999px and it would make animations impossible so see. */\n :host([toggle][selected][shape='square'][size='xs']),\n :host([shape='round'][size='xs']) {\n --_pill-radius: 16px; /* Half of 32px height */\n }\n :host([toggle][selected][shape='square'][size='s']),\n :host([shape='round'][size='s']) {\n --_pill-radius: 20px; /* Half of 40px height */\n }\n :host([toggle][selected][shape='square'][size='m']),\n :host([shape='round'][size='m']) {\n --_pill-radius: 28px; /* Half of 56px height */\n }\n :host([toggle][selected][shape='square'][size='l']),\n :host([shape='round'][size='l']) {\n --_pill-radius: 48px; /* Half of 96px height */\n }\n :host([toggle][selected][shape='square'][size='xl']),\n :host([shape='round'][size='xl']) {\n --_pill-radius: 68px; /* Half of 136px height */\n }\n\n :host([shape='square'][size='xs']),\n :host([shape='square'][size='s']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n :host([shape='square'][size='m']) {\n --_pill-radius: var(--md-sys-shape-corner-large);\n }\n\n :host([shape='square'][size='l']),\n :host([shape='square'][size='xl']) {\n --_pill-radius: var(--md-sys-shape-corner-extra-large);\n }\n\n /* Button Color Variants - Material 3 Expressive */\n\n /* Elevated Button */\n :host([color='elevated']) {\n --_background-color: var(--md-sys-color-surface-container-low);\n --_color: var(--md-sys-color-primary);\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='elevated'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='elevated']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-2);\n }\n\n :host([color='elevated'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_shadow: var(--md-sys-elevation-0);\n }\n\n /* Filled Button */\n :host([color='filled']) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled'][toggle]) {\n --_background-color: var(--md-sys-color-surface-container);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='filled'][toggle][selected]) {\n --_background-color: var(--md-sys-color-primary);\n --_color: var(--md-sys-color-on-primary);\n }\n\n :host([color='filled']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='filled'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Filled Tonal Button */\n :host([color='tonal']) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle]) {\n --_background-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([color='tonal'][toggle][selected]) {\n --_background-color: var(--md-sys-color-secondary);\n --_color: var(--md-sys-color-on-secondary);\n }\n\n :host([color='tonal']:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-1);\n }\n\n :host([color='tonal'][disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Outlined Button */\n :host([color='outlined']) {\n border: 1px var(--md-sys-color-outline-variant) solid;\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([color='outlined'][toggle][selected]) {\n --_background-color: var(--md-sys-color-inverse-surface);\n --_color: var(--md-sys-color-inverse-on-surface);\n }\n\n :host([color='outlined'][disabled]) {\n border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n /* Text Button */\n :host([color='text']) {\n --_color: var(--md-sys-color-primary);\n }\n\n :host([color='text'][disabled]) {\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n\n :host([toggle][selected][shape='round']) {\n --_pill-radius: var(--md-sys-shape-corner-medium);\n }\n\n /* Preference-based animations */\n @media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0.01ms;\n animation-duration: 0.01ms;\n }\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n :host {\n border-width: 2px;\n }\n\n :host([color='text']),\n :host([color='outlined']) {\n border-width: 2px;\n border-style: solid;\n }\n }\n`\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAsHC"}
|
|
@@ -10,7 +10,7 @@ export default css `
|
|
|
10
10
|
|
|
11
11
|
border: none;
|
|
12
12
|
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
13
|
-
background-color: var(--md-sys-color-surface);
|
|
13
|
+
background-color: var(--md-sys-color-surface-container-high);
|
|
14
14
|
box-shadow: var(--md-sys-elevation-3);
|
|
15
15
|
color: var(--md-sys-color-on-surface-variant);
|
|
16
16
|
padding: 24px;
|
|
@@ -21,16 +21,6 @@ export default css `
|
|
|
21
21
|
height: var(--ui-dialog-height, revert);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
dialog::after {
|
|
25
|
-
content: '';
|
|
26
|
-
position: absolute;
|
|
27
|
-
inset: 0;
|
|
28
|
-
border-radius: inherit;
|
|
29
|
-
background-color: var(--md-sys-color-surface-tint);
|
|
30
|
-
opacity: 0.11;
|
|
31
|
-
pointer-events: none;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
24
|
dialog:open {
|
|
35
25
|
animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
|
|
36
26
|
}
|
|
@@ -106,6 +96,10 @@ export default css `
|
|
|
106
96
|
margin-right: 12px;
|
|
107
97
|
}
|
|
108
98
|
|
|
99
|
+
.content ::slotted(*) {
|
|
100
|
+
background-color: var(--md-sys-color-surface-container-high);
|
|
101
|
+
}
|
|
102
|
+
|
|
109
103
|
@keyframes show-dialog {
|
|
110
104
|
from {
|
|
111
105
|
transform: translateY(-110%) scaleY(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-container-high);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, revert);\n max-height: var(--ui-dialog-max-height, revert);\n width: var(--ui-dialog-width, revert);\n height: var(--ui-dialog-height, revert);\n }\n\n dialog:open {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n }\n\n dialog:open::backdrop {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n }\n\n .icon {\n display: none;\n }\n\n .icon.with-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .icon ::slotted(*) {\n color: var(--md-sys-color-secondary);\n fill: var(--md-sys-color-secondary);\n width: 24px;\n height: 24px;\n }\n\n .title {\n display: none;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-headline-small-font);\n font-weight: var(--md-sys-typescale-headline-small-weight);\n font-size: var(--md-sys-typescale-headline-small-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .title.with-title {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .content {\n overflow: auto;\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\n .buttons {\n display: none;\n display: flex;\n align-items: center;\n justify-content: end;\n }\n\n .buttons.with-buttons {\n margin-top: 24px;\n }\n\n .buttons ::slotted(:not(:last-child)) {\n margin-right: 12px;\n }\n\n .content ::slotted(*) {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n @keyframes show-dialog {\n from {\n transform: translateY(-110%) scaleY(0);\n }\n to {\n transform: translateY(0%) scaleY(1);\n }\n }\n\n @keyframes show-backdrop {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n"]}
|
|
@@ -53,11 +53,11 @@ export default css `
|
|
|
53
53
|
.labelActive .label {
|
|
54
54
|
transform: translateY(calc(-100% - 2px)) scale(0.75);
|
|
55
55
|
position: absolute;
|
|
56
|
-
background-color: var(--md-sys-color-surface);
|
|
56
|
+
background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
:host(:focus-within) .label {
|
|
60
|
-
color: var(--md-sys-color-primary);
|
|
60
|
+
color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));
|
|
61
61
|
}
|
|
62
62
|
`;
|
|
63
63
|
//# sourceMappingURL=outlined.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n --_border-color: var(--md-sys-color-outline);\n --_outline-color: var(--md-sys-color-primary);\n --_outline-width: 0px;\n }\n\n .highlight {\n display: none;\n }\n\n .surface {\n border-radius: var(--md-sys-shape-corner-extra-small);\n }\n\n .container {\n border: 1px var(--_border-color) solid;\n outline: var(--_outline-width) solid var(--_outline-color);\n outline-offset: calc(-1 * var(--_outline-width));\n transition:\n border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host(:hover:not(:focus-within):not([invalid])) {\n --_border-color: var(--md-sys-color-on-surface);\n }\n\n :host(:focus-within:not([invalid])) {\n --_border-color: var(--md-sys-color-primary);\n }\n\n :host(:focus-within) {\n --_outline-width: 3px;\n }\n\n :host([invalid]) {\n --_border-color: var(--md-sys-color-error);\n --_outline-color: var(--md-sys-color-error);\n }\n\n :host([invalid]:hover) {\n --_outline-color: var(--md-sys-color-on-error-container);\n --_border-color: var(--md-sys-color-on-error-container);\n }\n\n .label {\n padding: 0 4px;\n }\n\n .labelActive .label {\n transform: translateY(calc(-100% - 2px)) scale(0.75);\n position: absolute;\n background-color: var(--md-sys-color-surface);\n }\n\n :host(:focus-within) .label {\n color: var(--md-sys-color-primary);\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n --_border-color: var(--md-sys-color-outline);\n --_outline-color: var(--md-sys-color-primary);\n --_outline-width: 0px;\n }\n\n .highlight {\n display: none;\n }\n\n .surface {\n border-radius: var(--md-sys-shape-corner-extra-small);\n }\n\n .container {\n border: 1px var(--_border-color) solid;\n outline: var(--_outline-width) solid var(--_outline-color);\n outline-offset: calc(-1 * var(--_outline-width));\n transition:\n border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host(:hover:not(:focus-within):not([invalid])) {\n --_border-color: var(--md-sys-color-on-surface);\n }\n\n :host(:focus-within:not([invalid])) {\n --_border-color: var(--md-sys-color-primary);\n }\n\n :host(:focus-within) {\n --_outline-width: 3px;\n }\n\n :host([invalid]) {\n --_border-color: var(--md-sys-color-error);\n --_outline-color: var(--md-sys-color-error);\n }\n\n :host([invalid]:hover) {\n --_outline-color: var(--md-sys-color-on-error-container);\n --_border-color: var(--md-sys-color-on-error-container);\n }\n\n .label {\n padding: 0 4px;\n }\n\n .labelActive .label {\n transform: translateY(calc(-100% - 2px)) scale(0.75);\n position: absolute;\n background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));\n }\n\n :host(:focus-within) .label {\n color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));\n }\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@api-client/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"description": "Internal UI component library for the API Client ecosystem.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"main": "build/src/index.js",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
"lint-staged": "^16.0.0",
|
|
219
219
|
"oauth2-mock-server": "^8.0.0",
|
|
220
220
|
"prettier": "^3.5.1",
|
|
221
|
-
"sinon": "^
|
|
221
|
+
"sinon": "^21.0.0",
|
|
222
222
|
"ts-lit-plugin": "^2.0.2",
|
|
223
223
|
"typescript": "^5.5.2",
|
|
224
224
|
"typescript-eslint": "^8.24.1",
|
|
@@ -11,7 +11,7 @@ export default css`
|
|
|
11
11
|
|
|
12
12
|
border: none;
|
|
13
13
|
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
14
|
-
background-color: var(--md-sys-color-surface);
|
|
14
|
+
background-color: var(--md-sys-color-surface-container-high);
|
|
15
15
|
box-shadow: var(--md-sys-elevation-3);
|
|
16
16
|
color: var(--md-sys-color-on-surface-variant);
|
|
17
17
|
padding: 24px;
|
|
@@ -22,16 +22,6 @@ export default css`
|
|
|
22
22
|
height: var(--ui-dialog-height, revert);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
dialog::after {
|
|
26
|
-
content: '';
|
|
27
|
-
position: absolute;
|
|
28
|
-
inset: 0;
|
|
29
|
-
border-radius: inherit;
|
|
30
|
-
background-color: var(--md-sys-color-surface-tint);
|
|
31
|
-
opacity: 0.11;
|
|
32
|
-
pointer-events: none;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
25
|
dialog:open {
|
|
36
26
|
animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
|
|
37
27
|
}
|
|
@@ -107,6 +97,10 @@ export default css`
|
|
|
107
97
|
margin-right: 12px;
|
|
108
98
|
}
|
|
109
99
|
|
|
100
|
+
.content ::slotted(*) {
|
|
101
|
+
background-color: var(--md-sys-color-surface-container-high);
|
|
102
|
+
}
|
|
103
|
+
|
|
110
104
|
@keyframes show-dialog {
|
|
111
105
|
from {
|
|
112
106
|
transform: translateY(-110%) scaleY(0);
|
|
@@ -54,10 +54,10 @@ export default css`
|
|
|
54
54
|
.labelActive .label {
|
|
55
55
|
transform: translateY(calc(-100% - 2px)) scale(0.75);
|
|
56
56
|
position: absolute;
|
|
57
|
-
background-color: var(--md-sys-color-surface);
|
|
57
|
+
background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
:host(:focus-within) .label {
|
|
61
|
-
color: var(--md-sys-color-primary);
|
|
61
|
+
color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));
|
|
62
62
|
}
|
|
63
63
|
`
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js';
|
|
2
|
-
import { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated
|
|
5
|
-
*/
|
|
6
|
-
export interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {
|
|
7
|
-
project: string;
|
|
8
|
-
kind: typeof RequestUiMetaKind;
|
|
9
|
-
data: IRequestUiMeta;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* @deprecated
|
|
13
|
-
*/
|
|
14
|
-
export interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {
|
|
15
|
-
project: string;
|
|
16
|
-
kind: typeof RequestUiMetaKind;
|
|
17
|
-
}
|
|
18
|
-
//# sourceMappingURL=BroadcastUiEvents.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BroadcastUiEvents.d.ts","sourceRoot":"","sources":["../../../src/events/BroadcastUiEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAA;AACvG,OAAO,EAAE,KAAK,cAAc,EAAE,IAAI,IAAI,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAEzG;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,qBAAqB;IAC3E,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,iBAAiB,CAAA;IAC9B,IAAI,EAAE,cAAc,CAAA;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,qBAAqB;IAC3E,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,iBAAiB,CAAA;CAC/B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BroadcastUiEvents.js","sourceRoot":"","sources":["../../../src/events/BroadcastUiEvents.ts"],"names":[],"mappings":"","sourcesContent":["import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js'\nimport { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js'\n\n/**\n * @deprecated\n */\nexport interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {\n project: string\n kind: typeof RequestUiMetaKind\n data: IRequestUiMeta\n}\n\n/**\n * @deprecated\n */\nexport interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {\n project: string\n kind: typeof RequestUiMetaKind\n}\n"]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js'
|
|
2
|
-
import { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js'
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* @deprecated
|
|
6
|
-
*/
|
|
7
|
-
export interface ProjectUiCreatedBroadcastEvent extends BroadcastCreatedEvent {
|
|
8
|
-
project: string
|
|
9
|
-
kind: typeof RequestUiMetaKind
|
|
10
|
-
data: IRequestUiMeta
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* @deprecated
|
|
15
|
-
*/
|
|
16
|
-
export interface ProjectUiDeletedBroadcastEvent extends DeletedBroadcastEvent {
|
|
17
|
-
project: string
|
|
18
|
-
kind: typeof RequestUiMetaKind
|
|
19
|
-
}
|