@nopwdio/ui/dist/components/ui-pills.js

Nopwd Design System

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
var State;
(function (State) {
    State["DARK"] = "dark";
    State["LIGHT"] = "light";
    State["AUTO"] = "auto";
})(State || (State = {}));
let UiPills = class UiPills extends LitElement {
    render() {
        return html ``;
    }
};
UiPills.styles = [
    css `
      :host {
        display: flex;
        padding: var(--np-padding-muted);
        border: var(--np-border-color) var(--np-border-width) solid;
        border-radius: var(--np-border-radius-emphasis);
        gap: var(--np-gap);
      }

      :host(:hover) {
        border-color: var(--np-border-color-emphasis);
      }

      button {
        display: flex;
        align-items: center;
        background: transparent;
        padding: var(--np-padding-muted) var(--np-padding);
        margin: 0;
        border: none;
        border-radius: var(--np-border-radius-emphasis);
        color: var(--np-text-color-muted);
        font-size: var(--np-text-size);
        transition: all var(--np-transition-duration-muted) ease;
      }

      button:hover {
        color: var(--np-text-color);
      }

      button[data-selected] {
        background-color: var(--np-bg-color-emphasis);
        box-shadow: var(--np-shadow-muted);
        color: var(--np-text-color);
      }

      .icon {
        width: 1em;
        height: 1em;
      }
    `,
];
UiPills = __decorate([
    customElement("ui-pills")
], UiPills);
export { UiPills };
//# sourceMappingURL=ui-pills.js.map