@universal-material/web 3.0.36 → 3.0.37

package/chip/chip.styles.js

@@ -0,0 +1,216 @@
+import { css } from 'lit';
+export const styles = css `
+  :host,
+  * {
+    font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    box-sizing: border-box;
+    outline: 0;
+  }
+
+  .focus-ring:focus-visible {
+    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
+    animation: u-focus-pulse 500ms ease;
+    animation-fill-mode: forwards;
+    outline-offset: 2px;
+  }
+
+  @keyframes u-focus-pulse {
+    0% {
+      outline: 0 solid var(--_color-primary);
+    }
+    50% {
+      outline: 6px solid var(--_color-primary);
+    }
+    100% {
+      outline: 4px solid var(--_color-primary);
+    }
+  }
+  :host {
+    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
+    -webkit-tap-highlight-color: transparent;
+    --u-elevation-level: 0;
+    position: relative;
+    display: inline-block;
+    font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    appearance: none !important;
+  }
+
+  :host([disabled]) {
+    --u-elevation-level: 0 !important;
+    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;
+    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;
+  }
+
+  :host([disabled]) .button {
+    cursor: default;
+  }
+
+  * {
+    color: inherit;
+  }
+
+  u-elevation {
+    z-index: -1;
+  }
+
+  .button {
+    cursor: pointer;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: 100%;
+    height: 100%;
+    font-family: inherit;
+    border-radius: inherit;
+    color: inherit;
+    border: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    white-space: nowrap;
+    background: transparent;
+    user-select: none;
+    text-decoration: none;
+    outline: 0;
+    z-index: 0;
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+  }
+
+  :host {
+    --_height: var(--u-chip-height, 32px);
+    --_outline-width: var(--u-chip-outline-width, 1px);
+    --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));
+    --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));
+    --_gap: var(--u-chip-gap, 8px);
+    --_icon-size: var(--u-chip-icon-size, 1.125rem);
+    --_action-margin: var(--u-chip-action-margin, 2px);
+    --_action-size: calc(var(--_height) - var(--_action-margin) * 2);
+    display: inline-block;
+    height: var(--_height);
+    border-radius: var(--_shape);
+  }
+
+  :host(:not([disabled])) {
+    cursor: pointer;
+  }
+
+  :host(:not([disabled]):not([elevated]):not([selected])) .outline {
+    border: var(--_outline-width) solid var(--_outline-color);
+  }
+
+  :host([elevated]:not([disabled])) {
+    --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);
+  }
+
+  @media (hover: hover) {
+    :host([elevated]:not([disabled]):hover) {
+      --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);
+    }
+  }
+  .outline {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  .container {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    height: 100%;
+    padding-inline: var(--u-chip-padding, 16px);
+    gap: var(--_gap);
+  }
+
+  .icon {
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--_icon-size);
+  }
+
+  .leading {
+    color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+
+  .trailing {
+    color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  .action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--_action-size);
+    height: var(--_action-size);
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    margin-inline: calc((var(--_action-size) - var(--_icon-size)) * -0.5);
+    background: gray;
+    border: none;
+    border-radius: var(--u-chip-action-border-radius, var(--u-shape-corner-full, 9999px));
+    background: none;
+    appearance: none;
+    outline: 0;
+    outline-offset: 0;
+    z-index: 1;
+  }
+
+  ::slotted([slot=leading-icon]),
+  ::slotted([slot=trailing-icon]) {
+    font-size: inherit !important;
+  }
+
+  slot[name=selected-icon] {
+    display: none;
+  }
+
+  :host([selected][has-selected-icon]) slot[name=leading-icon] {
+    display: none;
+  }
+  :host([selected][has-selected-icon]) slot[name=selected-icon] {
+    display: flex;
+  }
+
+  :host([selected]:not([disabled])) {
+    background-color: var(--u-chip-selected-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+  }
+  :host([selected]:not([disabled])) .leading {
+    color: var(--u-chip-selected-leading-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+  :host([selected]:not([disabled])) .trailing {
+    color: var(--u-chip-selected-trailing-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+
+  :host([has-leading-icon]) .container {
+    padding-inline-start: var(--_gap);
+  }
+
+  :host([has-trailing-icon]) .container {
+    padding-inline-end: var(--_gap);
+  }
+
+  :host(:not([has-leading-icon])) .leading {
+    display: none;
+  }
+
+  :host(:not([has-trailing-icon])) .trailing,
+  :host(:not([has-trailing-icon])) .action {
+    display: none;
+  }
+`;
+//# sourceMappingURL=chip.styles.js.map

package/chip/chip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqNzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host {\n    --_height: var(--u-chip-height, 32px);\n    --_outline-width: var(--u-chip-outline-width, 1px);\n    --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n    --_gap: var(--u-chip-gap, 8px);\n    --_icon-size: var(--u-chip-icon-size, 1.125rem);\n    --_action-margin: var(--u-chip-action-margin, 2px);\n    --_action-size: calc(var(--_height) - var(--_action-margin) * 2);\n    display: inline-block;\n    height: var(--_height);\n    border-radius: var(--_shape);\n  }\n\n  :host(:not([disabled])) {\n    cursor: pointer;\n  }\n\n  :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n    border: var(--_outline-width) solid var(--_outline-color);\n  }\n\n  :host([elevated]:not([disabled])) {\n    --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([elevated]:not([disabled]):hover) {\n      --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n    }\n  }\n  .outline {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    height: 100%;\n    padding-inline: var(--u-chip-padding, 16px);\n    gap: var(--_gap);\n  }\n\n  .icon {\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_icon-size);\n  }\n\n  .leading {\n    color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .trailing {\n    color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--_action-size);\n    height: var(--_action-size);\n    cursor: pointer;\n    padding: 0;\n    margin: 0;\n    margin-inline: calc((var(--_action-size) - var(--_icon-size)) * -0.5);\n    background: gray;\n    border: none;\n    border-radius: var(--u-chip-action-border-radius, var(--u-shape-corner-full, 9999px));\n    background: none;\n    appearance: none;\n    outline: 0;\n    outline-offset: 0;\n    z-index: 1;\n  }\n\n  ::slotted([slot=leading-icon]),\n  ::slotted([slot=trailing-icon]) {\n    font-size: inherit !important;\n  }\n\n  slot[name=selected-icon] {\n    display: none;\n  }\n\n  :host([selected][has-selected-icon]) slot[name=leading-icon] {\n    display: none;\n  }\n  :host([selected][has-selected-icon]) slot[name=selected-icon] {\n    display: flex;\n  }\n\n  :host([selected]:not([disabled])) {\n    background-color: var(--u-chip-selected-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n  :host([selected]:not([disabled])) .leading {\n    color: var(--u-chip-selected-leading-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n  :host([selected]:not([disabled])) .trailing {\n    color: var(--u-chip-selected-trailing-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([has-leading-icon]) .container {\n    padding-inline-start: var(--_gap);\n  }\n\n  :host([has-trailing-icon]) .container {\n    padding-inline-end: var(--_gap);\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing,\n  :host(:not([has-trailing-icon])) .action {\n    display: none;\n  }\n`;\n"]}