@api-client/ui 0.2.13 → 0.3.0

package/build/src/md/button/internals/button.styles.js

@@ -0,0 +1,319 @@
+import { css } from 'lit';
+/* Material Design 3 Expressive Button - CSS-Native Implementation */
+export default css `
+  :host {
+    all: unset;
+
+    /* Layout and positioning */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    /* Default sizing */
+    min-height: 40px;
+    min-width: 64px;
+    padding-inline: 16px;
+    gap: 8px;
+
+    /* Typography from Material 3 tokens */
+    font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-label-large-weight, 500);
+    line-height: var(--md-sys-typescale-label-large-height, 1.25);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);
+
+    --md-ripple-hover-state-layer-color: currentColor;
+    --md-ripple-focus-state-layer-color: currentColor;
+    --md-ripple-pressed-state-layer-color: currentColor;
+
+    /* CSS custom property for pill radius - half of the button height */
+    --_pill-radius: 20px;
+    /* Default icon size */
+    --_icon-size: var(--md-button-icon-size, 20px);
+    --_background-color: transparent;
+    --_color: inherit;
+    --_shadow: var(--md-sys-elevation-0);
+
+    border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));
+    border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));
+    border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));
+    border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));
+    background-color: var(--_background-color);
+    color: var(--_color);
+    box-shadow: var(--_shadow);
+
+    /* Interaction styles */
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+
+    transition:
+      background-color var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      box-shadow var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      border-color var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  /* Icon styling */
+  ::slotted([slot='icon']) {
+    flex-shrink: 0;
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    font-size: inherit;
+  }
+
+  /* Modern CSS: Container queries for responsive sizing */
+  @container (min-width: 320px) {
+    :host {
+      min-width: 80px;
+    }
+  }
+
+  .ripple {
+    border-radius: inherit;
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  .focus-ring {
+    --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));
+    --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));
+    --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));
+    --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  .ripple.activated {
+    z-index: 1;
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    box-shadow: none;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Size Variations */
+  :host([size='xs']) {
+    min-height: 32px;
+    padding-inline: 12px;
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    gap: 6px;
+    --_icon-size: 20px;
+  }
+
+  :host([size='s']) {
+    min-height: 40px;
+    padding-inline: 16px;
+    --_icon-size: 20px;
+  }
+
+  :host([size='m']) {
+    min-height: 56px;
+    padding-inline: 24px;
+    font-size: var(--md-sys-typescale-label-large-size, 1rem);
+    gap: 10px;
+    --_icon-size: 24px;
+  }
+
+  :host([size='l']) {
+    min-height: 96px;
+    padding-inline: 48px;
+    font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);
+    gap: 12px;
+    --_icon-size: 32px;
+  }
+
+  :host([size='xl']) {
+    min-height: 136px;
+    padding-inline: 64px;
+    font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
+    gap: 16px;
+    --_icon-size: 40px;
+  }
+
+  /* Pressed state is the same to all combinations of shape and size */
+  :host([size='xs'].pressed),
+  :host([size='s'].pressed) {
+    --_pill-radius: 8px !important;
+  }
+  :host([size='m'].pressed) {
+    --_pill-radius: 12px !important;
+  }
+  :host([size='xl'].pressed),
+  :host([size='l'].pressed) {
+    --_pill-radius: 16px !important;
+  }
+
+  /* Shape setup */
+  /* 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. */
+  :host([toggle][selected][shape='square'][size='xs']),
+  :host([shape='round'][size='xs']) {
+    --_pill-radius: 16px; /* Half of 32px height */
+  }
+  :host([toggle][selected][shape='square'][size='s']),
+  :host([shape='round'][size='s']) {
+    --_pill-radius: 20px; /* Half of 40px height */
+  }
+  :host([toggle][selected][shape='square'][size='m']),
+  :host([shape='round'][size='m']) {
+    --_pill-radius: 28px; /* Half of 56px height */
+  }
+  :host([toggle][selected][shape='square'][size='l']),
+  :host([shape='round'][size='l']) {
+    --_pill-radius: 48px; /* Half of 96px height */
+  }
+  :host([toggle][selected][shape='square'][size='xl']),
+  :host([shape='round'][size='xl']) {
+    --_pill-radius: 68px; /* Half of 136px height */
+  }
+
+  :host([shape='square'][size='xs']),
+  :host([shape='square'][size='s']) {
+    --_pill-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  :host([shape='square'][size='m']) {
+    --_pill-radius: var(--md-sys-shape-corner-large);
+  }
+
+  :host([shape='square'][size='l']),
+  :host([shape='square'][size='xl']) {
+    --_pill-radius: var(--md-sys-shape-corner-extra-large);
+  }
+
+  /* Button Color Variants - Material 3 Expressive */
+
+  /* Elevated Button */
+  :host([color='elevated']) {
+    --_background-color: var(--md-sys-color-surface-container-low);
+    --_color: var(--md-sys-color-primary);
+    --_shadow: var(--md-sys-elevation-1);
+  }
+
+  :host([color='elevated'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='elevated']:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-2);
+  }
+
+  :host([color='elevated'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_shadow: var(--md-sys-elevation-0);
+  }
+
+  /* Filled Button */
+  :host([color='filled']) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='filled'][toggle]) {
+    --_background-color: var(--md-sys-color-surface-container);
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([color='filled'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='filled']:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-1);
+  }
+
+  :host([color='filled'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Filled Tonal Button */
+  :host([color='tonal']) {
+    --_background-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([color='tonal'][toggle]) {
+    --_background-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([color='tonal'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-secondary);
+    --_color: var(--md-sys-color-on-secondary);
+  }
+
+  :host([color='tonal']:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-1);
+  }
+
+  :host([color='tonal'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Outlined Button */
+  :host([color='outlined']) {
+    border: 1px var(--md-sys-color-outline-variant) solid;
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([color='outlined'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-inverse-surface);
+    --_color: var(--md-sys-color-inverse-on-surface);
+  }
+
+  :host([color='outlined'][disabled]) {
+    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Text Button */
+  :host([color='text']) {
+    --_color: var(--md-sys-color-primary);
+  }
+
+  :host([color='text'][disabled]) {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  :host([toggle][selected][shape='round']) {
+    --_pill-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  /* Preference-based animations */
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      transition-duration: 0.01ms;
+      animation-duration: 0.01ms;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    :host {
+      border-width: 2px;
+    }
+
+    :host([color='text']),
+    :host([color='outlined']) {
+      border-width: 2px;
+      border-style: solid;
+    }
+  }
+`;
+//# sourceMappingURL=button.styles.js.map

package/build/src/md/button/internals/button.styles.js.map

@@ -0,0 +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  .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  .ripple.activated {\n    z-index: 1;\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"]}

package/build/src/md/button/internals/group.d.ts

@@ -0,0 +1,54 @@
+import { LitElement, type PropertyValues } from 'lit';
+import UiButtonElement from './button.js';
+import type { MdButtonSize } from './button.js';
+export type MdGroupType = 'standard' | 'connected';
+/**
+ * A group of buttons that can be selected.
+ *
+ * When a group of buttons is added to the group element, the group element
+ * becomes the manager of the buttons type, size, and selection state.
+ *
+ * All buttons added to the group will inherit the size from the group, but also the `shape` is set
+ * based on the group type.
+ *
+ * Buttons don't need to be have the `toggle` attribute set. In such case, the button
+ * will not participate in the selection state management.
+ */
+export default class ButtonGroup extends LitElement {
+    /**
+     * If true, multiple buttons can be selected.
+     * When set to false, the group deselects all other buttons when one is selected.
+     * @attribute
+     */
+    accessor multiple: boolean;
+    /**
+     * The type of button group.
+     * - 'standard': Standard button group.
+     * - 'connected': Connected button group (buttons are visually connected).
+     * @attribute
+     */
+    accessor type: MdGroupType;
+    /**
+     * The size of the buttons used with this group.
+     * @attribute
+     */
+    accessor size: MdButtonSize;
+    private accessor buttons;
+    /**
+     * The MutationObserver instance used to watch for changes in slotted children.
+     */
+    protected observer?: MutationObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected handleMutations(mutations: MutationRecord[]): void;
+    protected updateChildren(): void;
+    /**
+     * In multi selection mode, this method does nothing.
+     * In single selection mode, it activates the clicked button and deactivates all others.
+     */
+    activate(button: UiButtonElement): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=group.d.ts.map

package/build/src/md/button/internals/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAE3D,OAAO,eAAe,MAAM,aAAa,CAAA;AACzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE/C,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAA;AAElD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,UAAU;IACjD;;;;OAIG;IAC0B,QAAQ,CAAC,QAAQ,UAAQ;IAEtD;;;;;OAKG;IACyB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAa;IAEnE;;;OAGG;IACwC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAM;IAEX,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoB;IAE7G;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAE5B,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;cAMlB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;cAK3C,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMlE,SAAS,CAAC,eAAe,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI;IAa5D,SAAS,CAAC,cAAc,IAAI,IAAI;IAYhC;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,eAAe;IAgBvB,MAAM;CAGhB"}

package/build/src/md/button/internals/group.js

@@ -0,0 +1,157 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import UiButtonElement from './button.js';
+let ButtonGroup = (() => {
+    let _classSuper = LitElement;
+    let _multiple_decorators;
+    let _multiple_initializers = [];
+    let _multiple_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _buttons_decorators;
+    let _buttons_initializers = [];
+    let _buttons_extraInitializers = [];
+    return class ButtonGroup extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _multiple_decorators = [property({ type: Boolean })];
+            _type_decorators = [property({ type: String })];
+            _size_decorators = [property({ type: String, reflect: true })];
+            _buttons_decorators = [queryAssignedElements({ flatten: true, selector: 'ui-button' })];
+            __esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
+            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(this, null, _buttons_decorators, { kind: "accessor", name: "buttons", static: false, private: false, access: { has: obj => "buttons" in obj, get: obj => obj.buttons, set: (obj, value) => { obj.buttons = value; } }, metadata: _metadata }, _buttons_initializers, _buttons_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #multiple_accessor_storage = __runInitializers(this, _multiple_initializers, false
+        /**
+         * The type of button group.
+         * - 'standard': Standard button group.
+         * - 'connected': Connected button group (buttons are visually connected).
+         * @attribute
+         */
+        );
+        /**
+         * If true, multiple buttons can be selected.
+         * When set to false, the group deselects all other buttons when one is selected.
+         * @attribute
+         */
+        get multiple() { return this.#multiple_accessor_storage; }
+        set multiple(value) { this.#multiple_accessor_storage = value; }
+        #type_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _type_initializers, 'standard'
+        /**
+         * The size of the buttons used with this group.
+         * @attribute
+         */
+        ));
+        /**
+         * The type of button group.
+         * - 'standard': Standard button group.
+         * - 'connected': Connected button group (buttons are visually connected).
+         * @attribute
+         */
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _size_initializers, 's'));
+        /**
+         * The size of the buttons used with this group.
+         * @attribute
+         */
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #buttons_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _buttons_initializers, void 0));
+        get buttons() { return this.#buttons_accessor_storage; }
+        set buttons(value) { this.#buttons_accessor_storage = value; }
+        /**
+         * The MutationObserver instance used to watch for changes in slotted children.
+         */
+        observer = __runInitializers(this, _buttons_extraInitializers);
+        connectedCallback() {
+            super.connectedCallback();
+            this.observer = new MutationObserver(this.handleMutations.bind(this));
+            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ['selected'] });
+            this.updateChildren();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.observer?.disconnect();
+            this.observer = undefined;
+        }
+        firstUpdated(changed) {
+            this.updateChildren();
+            super.firstUpdated(changed);
+        }
+        willUpdate(changed) {
+            if (changed.has('size')) {
+                this.updateChildren();
+            }
+        }
+        handleMutations(mutations) {
+            for (const mutation of mutations) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'selected') {
+                    const target = mutation.target;
+                    if (target instanceof UiButtonElement && target.toggle && target.selected) {
+                        this.activate(target);
+                    }
+                }
+                else if (mutation.type === 'childList') {
+                    this.updateChildren();
+                }
+            }
+        }
+        updateChildren() {
+            const isConnected = this.type === 'connected';
+            this.buttons.forEach((button) => {
+                button.size = this.size;
+                if (isConnected) {
+                    button.shape = 'square';
+                }
+                else {
+                    button.shape = 'round';
+                }
+            });
+        }
+        /**
+         * In multi selection mode, this method does nothing.
+         * In single selection mode, it activates the clicked button and deactivates all others.
+         */
+        activate(button) {
+            if (this.multiple) {
+                // In multiselection, we don't need to do anything here
+                return;
+            }
+            this.buttons.forEach((btn) => {
+                if (!btn.toggle || btn === button || !btn.selected) {
+                    return;
+                }
+                btn.selected = false;
+            });
+            if (button.toggle && !button.selected) {
+                button.selected = true;
+            }
+        }
+        render() {
+            return html `<slot></slot>`;
+        }
+    };
+})();
+/**
+ * A group of buttons that can be selected.
+ *
+ * When a group of buttons is added to the group element, the group element
+ * becomes the manager of the buttons type, size, and selection state.
+ *
+ * All buttons added to the group will inherit the size from the group, but also the `shape` is set
+ * based on the group type.
+ *
+ * Buttons don't need to be have the `toggle` attribute set. In such case, the button
+ * will not participate in the selection state management.
+ */
+export default ButtonGroup;
+//# sourceMappingURL=group.js.map

package/build/src/md/button/internals/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, type PropertyValues, html } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport UiButtonElement from './button.js'\nimport type { MdButtonSize } from './button.js'\n\nexport type MdGroupType = 'standard' | 'connected'\n\n/**\n * A group of buttons that can be selected.\n *\n * When a group of buttons is added to the group element, the group element\n * becomes the manager of the buttons type, size, and selection state.\n *\n * All buttons added to the group will inherit the size from the group, but also the `shape` is set\n * based on the group type.\n *\n * Buttons don't need to be have the `toggle` attribute set. In such case, the button\n * will not participate in the selection state management.\n */\nexport default class ButtonGroup extends LitElement {\n  /**\n   * If true, multiple buttons can be selected.\n   * When set to false, the group deselects all other buttons when one is selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor multiple = false\n\n  /**\n   * The type of button group.\n   * - 'standard': Standard button group.\n   * - 'connected': Connected button group (buttons are visually connected).\n   * @attribute\n   */\n  @property({ type: String }) accessor type: MdGroupType = 'standard'\n\n  /**\n   * The size of the buttons used with this group.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'\n\n  @queryAssignedElements({ flatten: true, selector: 'ui-button' }) private accessor buttons!: UiButtonElement[]\n\n  /**\n   * The MutationObserver instance used to watch for changes in slotted children.\n   */\n  protected observer?: MutationObserver\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.observer = new MutationObserver(this.handleMutations.bind(this))\n    this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ['selected'] })\n    this.updateChildren()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    this.updateChildren()\n    super.firstUpdated(changed)\n  }\n\n  protected override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('size')) {\n      this.updateChildren()\n    }\n  }\n\n  protected handleMutations(mutations: MutationRecord[]): void {\n    for (const mutation of mutations) {\n      if (mutation.type === 'attributes' && mutation.attributeName === 'selected') {\n        const target = mutation.target as UiButtonElement\n        if (target instanceof UiButtonElement && target.toggle && target.selected) {\n          this.activate(target)\n        }\n      } else if (mutation.type === 'childList') {\n        this.updateChildren()\n      }\n    }\n  }\n\n  protected updateChildren(): void {\n    const isConnected = this.type === 'connected'\n    this.buttons.forEach((button) => {\n      button.size = this.size\n      if (isConnected) {\n        button.shape = 'square'\n      } else {\n        button.shape = 'round'\n      }\n    })\n  }\n\n  /**\n   * In multi selection mode, this method does nothing.\n   * In single selection mode, it activates the clicked button and deactivates all others.\n   */\n  activate(button: UiButtonElement) {\n    if (this.multiple) {\n      // In multiselection, we don't need to do anything here\n      return\n    }\n    this.buttons.forEach((btn) => {\n      if (!btn.toggle || btn === button || !btn.selected) {\n        return\n      }\n      btn.selected = false\n    })\n    if (button.toggle && !button.selected) {\n      button.selected = true\n    }\n  }\n\n  override render() {\n    return html`<slot></slot>`\n  }\n}\n"]}

package/build/src/md/button/internals/{text-button.styles.d.ts → group.styles.d.ts}

@@ -1,3 +1,3 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=text-button.styles.d.ts.map
+//# sourceMappingURL=group.styles.d.ts.map

package/build/src/md/button/internals/group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/group.styles.ts"],"names":[],"mappings":";AAGA,wBAkGC"}