@nl-design-system-community/clippy-components 1.2.0 → 2.0.0

package/dist/index-7tZ2Ykfm.js

@@ -0,0 +1,135 @@
+import { s as safeCustomElement } from "./decorators-Cq82_-g_.js";
+import { css, unsafeCSS, nothing, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { FormElement } from "./lib/FormElement/index.js";
+const buttonStyles$1 = '.nl-button{--nl-icon-block-size: var(--nl-button-icon-size);--nl-icon-inline-size: var(--nl-button-icon-size);--nl-icon-color: currentColor;align-items:center;block-size:fit-content;border-radius:var(--nl-button-border-radius);border-style:solid;box-sizing:border-box;column-gap:var(--nl-button-column-gap);cursor:pointer;display:inline-flex;font-family:var(--nl-button-font-family);font-feature-settings:inherit;inline-size:fit-content;justify-content:center;min-block-size:var(--nl-button-min-block-size, max(44px, fit-content));min-inline-size:var(--nl-button-min-inline-size, max(44px, fit-content));overflow-wrap:break-word;padding-block-end:var(--nl-button-padding-block-end);padding-block-start:var(--nl-button-padding-block-start);padding-inline-end:var(--nl-button-padding-inline-end);padding-inline-start:var(--nl-button-padding-inline-start);position:relative;text-align:start;text-box-trim:trim-both;text-decoration:none;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--nl-button-default-background-color);border-color:var(--nl-button-default-border-color);border-width:var(--nl-button-default-border-width);color:var(--nl-button-default-color);font-size:var(--nl-button-default-font-size);font-weight:var(--nl-button-default-font-weight);line-height:var(--nl-button-default-line-height)}.nl-button:not(:has(*)),.nl-button:has(>:where(:first-child)):not(:has(>:where(.nl-button__icon-end,.nl-button__icon-start,.nl-button__label))){display:inline-block}@media screen and (forced-colors: active){.nl-button{background-color:ButtonFace !important;border-color:ButtonText !important;color:ButtonText !important}.nl-button--disabled{background-color:ButtonFace !important;border-color:GrayText !important;color:GrayText !important}.nl-button--pressed{background-color:ButtonText !important;border-color:ButtonText !important;color:ButtonFace !important;forced-color-adjust:none}.nl-button--pressed.nl-button--disabled{background-color:GrayText !important;border-color:GrayText !important;color:ButtonFace !important;forced-color-adjust:none}.nl-button:not(.nl-button--disabled):hover{border-color:Highlight !important}}.nl-button[hidden]{display:none}.nl-button--icon-only{padding-block-end:var(--nl-button-icon-only-padding-block-end, 0);padding-block-start:var(--nl-button-icon-only-padding-block-start, 0);padding-inline-end:var(--nl-button-icon-only-padding-inline-end, 0);padding-inline-start:var(--nl-button-icon-only-padding-inline-start, 0)}.nl-button--icon-only .nl-button__label{block-size:1px !important;border:0 !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}.nl-button__icon-start{line-height:0}.nl-button__icon-end{line-height:0}.nl-button__label{background-color:inherit;overflow-wrap:break-word;text-box-trim:trim-both}.nl-button::after{content:"";block-size:24px;display:block;inline-size:24px;left:50%;position:absolute;right:0;top:50%;transform:translateX(-50%) translateY(-50%)}.nl-button:hover{background-color:var(--nl-button-default-hover-background-color);border-color:var(--nl-button-default-hover-border-color);color:var(--nl-button-default-hover-color)}.nl-button:active{background-color:var(--nl-button-default-active-background-color);border-color:var(--nl-button-default-active-border-color);color:var(--nl-button-default-active-color)}.nl-button.nl-button--pressed{background-color:var(--nl-button-default-pressed-background-color);border-color:var(--nl-button-default-pressed-border-color);color:var(--nl-button-default-pressed-color)}.nl-button:where(.nl-button--pressed):hover{background-color:var(--nl-button-default-pressed-hover-background-color);border-color:var(--nl-button-default-pressed-hover-border-color);color:var(--nl-button-default-pressed-hover-color)}.nl-button:where(.nl-button--pressed):active{background-color:var(--nl-button-default-pressed-active-background-color);border-color:var(--nl-button-default-pressed-active-border-color);color:var(--nl-button-default-pressed-active-color)}.nl-button.nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-default-pressed-disabled-background-color);border-color:var(--nl-button-default-pressed-disabled-border-color);color:var(--nl-button-default-pressed-disabled-color)}.nl-button.nl-button--disabled{cursor:not-allowed;background-color:var(--nl-button-default-disabled-background-color);border-color:var(--nl-button-default-disabled-border-color);color:var(--nl-button-default-disabled-color)}.nl-button.nl-button--busy{cursor:wait}.nl-button:where(.nl-button--primary){background-color:var(--nl-button-primary-background-color);border-color:var(--nl-button-primary-border-color);border-width:var(--nl-button-primary-border-width);color:var(--nl-button-primary-color);font-size:var(--nl-button-primary-font-size);font-weight:var(--nl-button-primary-font-weight);line-height:var(--nl-button-primary-line-height)}.nl-button:where(.nl-button--primary):hover{background-color:var(--nl-button-primary-hover-background-color);border-color:var(--nl-button-primary-hover-border-color);color:var(--nl-button-primary-hover-color)}.nl-button:where(.nl-button--primary):active{background-color:var(--nl-button-primary-active-background-color);border-color:var(--nl-button-primary-active-border-color);color:var(--nl-button-primary-active-color)}.nl-button:where(.nl-button--primary).nl-button--pressed{background-color:var(--nl-button-primary-pressed-background-color);border-color:var(--nl-button-primary-pressed-border-color);color:var(--nl-button-primary-pressed-color)}.nl-button:where(.nl-button--primary.nl-button--pressed):hover{background-color:var(--nl-button-primary-pressed-hover-background-color);border-color:var(--nl-button-primary-pressed-hover-border-color);color:var(--nl-button-primary-pressed-hover-color)}.nl-button:where(.nl-button--primary.nl-button--pressed):active{background-color:var(--nl-button-primary-pressed-active-background-color);border-color:var(--nl-button-primary-pressed-active-border-color);color:var(--nl-button-primary-pressed-active-color)}.nl-button:where(.nl-button--primary).nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-primary-pressed-disabled-background-color);border-color:var(--nl-button-primary-pressed-disabled-border-color);color:var(--nl-button-primary-pressed-disabled-color)}.nl-button:where(.nl-button--primary).nl-button--disabled{background-color:var(--nl-button-primary-disabled-background-color);border-color:var(--nl-button-primary-disabled-border-color);color:var(--nl-button-primary-disabled-color)}.nl-button:where(.nl-button--primary).nl-button--positive{background-color:var(--nl-button-primary-positive-background-color);border-color:var(--nl-button-primary-positive-border-color);color:var(--nl-button-primary-positive-color)}.nl-button:where(.nl-button--primary).nl-button--positive:hover{background-color:var(--nl-button-primary-positive-hover-background-color);border-color:var(--nl-button-primary-positive-hover-border-color);color:var(--nl-button-primary-positive-hover-color)}.nl-button:where(.nl-button--primary).nl-button--positive:active{background-color:var(--nl-button-primary-positive-active-background-color);border-color:var(--nl-button-primary-positive-active-border-color);color:var(--nl-button-primary-positive-active-color)}.nl-button:where(.nl-button--primary).nl-button--positive.nl-button--pressed{background-color:var(--nl-button-primary-positive-pressed-background-color);border-color:var(--nl-button-primary-positive-pressed-border-color);color:var(--nl-button-primary-positive-pressed-color)}.nl-button:where(.nl-button--primary.nl-button--positive).nl-button--pressed:hover{background-color:var(--nl-button-primary-positive-pressed-hover-background-color);border-color:var(--nl-button-primary-positive-pressed-hover-border-color);color:var(--nl-button-primary-positive-pressed-hover-color)}.nl-button:where(.nl-button--primary.nl-button--positive).nl-button--pressed:active{background-color:var(--nl-button-primary-positive-pressed-active-background-color);border-color:var(--nl-button-primary-positive-pressed-active-border-color);color:var(--nl-button-primary-positive-pressed-active-color)}.nl-button:where(.nl-button--primary).nl-button--positive.nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-primary-pressed-disabled-background-color);border-color:var(--nl-button-primary-pressed-disabled-border-color);color:var(--nl-button-primary-pressed-disabled-color)}.nl-button:where(.nl-button--primary).nl-button--positive.nl-button--disabled{background-color:var(--nl-button-primary-disabled-background-color);border-color:var(--nl-button-primary-disabled-border-color);color:var(--nl-button-primary-disabled-color)}.nl-button:where(.nl-button--primary).nl-button--negative{background-color:var(--nl-button-primary-negative-background-color);border-color:var(--nl-button-primary-negative-border-color);color:var(--nl-button-primary-negative-color)}.nl-button:where(.nl-button--primary).nl-button--negative:hover{background-color:var(--nl-button-primary-negative-hover-background-color);border-color:var(--nl-button-primary-negative-hover-border-color);color:var(--nl-button-primary-negative-hover-color)}.nl-button:where(.nl-button--primary).nl-button--negative:active{background-color:var(--nl-button-primary-negative-active-background-color);border-color:var(--nl-button-primary-negative-active-border-color);color:var(--nl-button-primary-negative-active-color)}.nl-button:where(.nl-button--primary).nl-button--negative.nl-button--pressed{background-color:var(--nl-button-primary-negative-pressed-background-color);border-color:var(--nl-button-primary-negative-pressed-border-color);color:var(--nl-button-primary-negative-pressed-color)}.nl-button:where(.nl-button--primary.nl-button--negative).nl-button--pressed:hover{background-color:var(--nl-button-primary-negative-pressed-hover-background-color);border-color:var(--nl-button-primary-negative-pressed-hover-border-color);color:var(--nl-button-primary-negative-pressed-hover-color)}.nl-button:where(.nl-button--primary.nl-button--negative).nl-button--pressed:active{background-color:var(--nl-button-primary-negative-pressed-active-background-color);border-color:var(--nl-button-primary-negative-pressed-active-border-color);color:var(--nl-button-primary-negative-pressed-active-color)}.nl-button:where(.nl-button--primary).nl-button--negative.nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-primary-pressed-disabled-background-color);border-color:var(--nl-button-primary-pressed-disabled-border-color);color:var(--nl-button-primary-pressed-disabled-color)}.nl-button:where(.nl-button--primary).nl-button--negative.nl-button--disabled{background-color:var(--nl-button-primary-disabled-background-color);border-color:var(--nl-button-primary-disabled-border-color);color:var(--nl-button-primary-disabled-color)}.nl-button:where(.nl-button--secondary){background-color:var(--nl-button-secondary-background-color);border-color:var(--nl-button-secondary-border-color);border-width:var(--nl-button-secondary-border-width);color:var(--nl-button-secondary-color);font-size:var(--nl-button-secondary-font-size);font-weight:var(--nl-button-secondary-font-weight);line-height:var(--nl-button-secondary-line-height)}.nl-button:where(.nl-button--secondary):hover{background-color:var(--nl-button-secondary-hover-background-color);border-color:var(--nl-button-secondary-hover-border-color);color:var(--nl-button-secondary-hover-color)}.nl-button:where(.nl-button--secondary):active{background-color:var(--nl-button-secondary-active-background-color);border-color:var(--nl-button-secondary-active-border-color);color:var(--nl-button-secondary-active-color)}.nl-button:where(.nl-button--secondary).nl-button--pressed{background-color:var(--nl-button-secondary-pressed-background-color);border-color:var(--nl-button-secondary-pressed-border-color);color:var(--nl-button-secondary-pressed-color)}.nl-button:where(.nl-button--secondary.nl-button--pressed):hover{background-color:var(--nl-button-secondary-pressed-hover-background-color);border-color:var(--nl-button-secondary-pressed-hover-border-color);color:var(--nl-button-secondary-pressed-hover-color)}.nl-button:where(.nl-button--secondary.nl-button--pressed):active{background-color:var(--nl-button-secondary-pressed-active-background-color);border-color:var(--nl-button-secondary-pressed-active-border-color);color:var(--nl-button-secondary-pressed-active-color)}.nl-button:where(.nl-button--secondary).nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-secondary-pressed-disabled-background-color);border-color:var(--nl-button-secondary-pressed-disabled-border-color);color:var(--nl-button-secondary-pressed-disabled-color)}.nl-button:where(.nl-button--secondary).nl-button--disabled{background-color:var(--nl-button-secondary-disabled-background-color);border-color:var(--nl-button-secondary-disabled-border-color);color:var(--nl-button-secondary-disabled-color)}.nl-button:where(.nl-button--secondary).nl-button--positive{background-color:var(--nl-button-secondary-positive-background-color);border-color:var(--nl-button-secondary-positive-border-color);color:var(--nl-button-secondary-positive-color)}.nl-button:where(.nl-button--secondary).nl-button--positive:hover{background-color:var(--nl-button-secondary-positive-hover-background-color);border-color:var(--nl-button-secondary-positive-hover-border-color);color:var(--nl-button-secondary-positive-hover-color)}.nl-button:where(.nl-button--secondary).nl-button--positive:active{background-color:var(--nl-button-secondary-positive-active-background-color);border-color:var(--nl-button-secondary-positive-active-border-color);color:var(--nl-button-secondary-positive-active-color)}.nl-button:where(.nl-button--secondary).nl-button--positive.nl-button--pressed{background-color:var(--nl-button-secondary-positive-pressed-background-color);border-color:var(--nl-button-secondary-positive-pressed-border-color);color:var(--nl-button-secondary-positive-pressed-color)}.nl-button:where(.nl-button--secondary.nl-button--positive).nl-button--pressed:hover{background-color:var(--nl-button-secondary-positive-pressed-hover-background-color);border-color:var(--nl-button-secondary-positive-pressed-hover-border-color);color:var(--nl-button-secondary-positive-pressed-hover-color)}.nl-button:where(.nl-button--secondary.nl-button--positive).nl-button--pressed:active{background-color:var(--nl-button-secondary-positive-pressed-active-background-color);border-color:var(--nl-button-secondary-positive-pressed-active-border-color);color:var(--nl-button-secondary-positive-pressed-active-color)}.nl-button:where(.nl-button--secondary).nl-button--positive.nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-secondary-pressed-disabled-background-color);border-color:var(--nl-button-secondary-pressed-disabled-border-color);color:var(--nl-button-secondary-pressed-disabled-color)}.nl-button:where(.nl-button--secondary).nl-button--positive.nl-button--disabled{background-color:var(--nl-button-secondary-disabled-background-color);border-color:var(--nl-button-secondary-disabled-border-color);color:var(--nl-button-secondary-disabled-color)}.nl-button:where(.nl-button--secondary).nl-button--negative{background-color:var(--nl-button-secondary-negative-background-color);border-color:var(--nl-button-secondary-negative-border-color);color:var(--nl-button-secondary-negative-color)}.nl-button:where(.nl-button--secondary).nl-button--negative:hover{background-color:var(--nl-button-secondary-negative-hover-background-color);border-color:var(--nl-button-secondary-negative-hover-border-color);color:var(--nl-button-secondary-negative-hover-color)}.nl-button:where(.nl-button--secondary).nl-button--negative:active{background-color:var(--nl-button-secondary-negative-active-background-color);border-color:var(--nl-button-secondary-negative-active-border-color);color:var(--nl-button-secondary-negative-active-color)}.nl-button:where(.nl-button--secondary).nl-button--negative.nl-button--pressed{background-color:var(--nl-button-secondary-negative-pressed-background-color);border-color:var(--nl-button-secondary-negative-pressed-border-color);color:var(--nl-button-secondary-negative-pressed-color)}.nl-button:where(.nl-button--secondary.nl-button--negative).nl-button--pressed:hover{background-color:var(--nl-button-secondary-negative-pressed-hover-background-color);border-color:var(--nl-button-secondary-negative-pressed-hover-border-color);color:var(--nl-button-secondary-negative-pressed-hover-color)}.nl-button:where(.nl-button--secondary.nl-button--negative).nl-button--pressed:active{background-color:var(--nl-button-secondary-negative-pressed-active-background-color);border-color:var(--nl-button-secondary-negative-pressed-active-border-color);color:var(--nl-button-secondary-negative-pressed-active-color)}.nl-button:where(.nl-button--secondary).nl-button--negative.nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-secondary-pressed-disabled-background-color);border-color:var(--nl-button-secondary-pressed-disabled-border-color);color:var(--nl-button-secondary-pressed-disabled-color)}.nl-button:where(.nl-button--secondary).nl-button--negative.nl-button--disabled{background-color:var(--nl-button-secondary-disabled-background-color);border-color:var(--nl-button-secondary-disabled-border-color);color:var(--nl-button-secondary-disabled-color)}.nl-button:where(.nl-button--subtle){background-color:var(--nl-button-subtle-background-color);border-color:var(--nl-button-subtle-border-color);border-width:var(--nl-button-subtle-border-width);color:var(--nl-button-subtle-color);font-size:var(--nl-button-subtle-font-size);font-weight:var(--nl-button-subtle-font-weight);line-height:var(--nl-button-subtle-line-height)}.nl-button:where(.nl-button--subtle):hover{background-color:var(--nl-button-subtle-hover-background-color);border-color:var(--nl-button-subtle-hover-border-color);color:var(--nl-button-subtle-hover-color)}.nl-button:where(.nl-button--subtle):active{background-color:var(--nl-button-subtle-active-background-color);border-color:var(--nl-button-subtle-active-border-color);color:var(--nl-button-subtle-active-color)}.nl-button:where(.nl-button--subtle).nl-button--pressed{background-color:var(--nl-button-subtle-pressed-background-color);border-color:var(--nl-button-subtle-pressed-border-color);color:var(--nl-button-subtle-pressed-color)}.nl-button:where(.nl-button--subtle.nl-button--pressed):hover{background-color:var(--nl-button-subtle-pressed-hover-background-color);border-color:var(--nl-button-subtle-pressed-hover-border-color);color:var(--nl-button-subtle-pressed-hover-color)}.nl-button:where(.nl-button--subtle.nl-button--pressed):active{background-color:var(--nl-button-subtle-pressed-active-background-color);border-color:var(--nl-button-subtle-pressed-active-border-color);color:var(--nl-button-subtle-pressed-active-color)}.nl-button:where(.nl-button--subtle).nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-subtle-pressed-disabled-background-color);border-color:var(--nl-button-subtle-pressed-disabled-border-color);color:var(--nl-button-subtle-pressed-disabled-color)}.nl-button:where(.nl-button--subtle).nl-button--disabled{background-color:var(--nl-button-subtle-disabled-background-color);border-color:var(--nl-button-subtle-disabled-border-color);color:var(--nl-button-subtle-disabled-color)}.nl-button:where(.nl-button--subtle).nl-button--positive{background-color:var(--nl-button-subtle-positive-background-color);border-color:var(--nl-button-subtle-positive-border-color);color:var(--nl-button-subtle-positive-color)}.nl-button:where(.nl-button--subtle).nl-button--positive:hover{background-color:var(--nl-button-subtle-positive-hover-background-color);border-color:var(--nl-button-subtle-positive-hover-border-color);color:var(--nl-button-subtle-positive-hover-color)}.nl-button:where(.nl-button--subtle).nl-button--positive:active{background-color:var(--nl-button-subtle-positive-active-background-color);border-color:var(--nl-button-subtle-positive-active-border-color);color:var(--nl-button-subtle-positive-active-color)}.nl-button:where(.nl-button--subtle).nl-button--positive.nl-button--pressed{background-color:var(--nl-button-subtle-positive-pressed-background-color);border-color:var(--nl-button-subtle-positive-pressed-border-color);color:var(--nl-button-subtle-positive-pressed-color)}.nl-button:where(.nl-button--subtle.nl-button--positive).nl-button--pressed:hover{background-color:var(--nl-button-subtle-positive-pressed-hover-background-color);border-color:var(--nl-button-subtle-positive-pressed-hover-border-color);color:var(--nl-button-subtle-positive-pressed-hover-color)}.nl-button:where(.nl-button--subtle.nl-button--positive).nl-button--pressed:active{background-color:var(--nl-button-subtle-positive-pressed-active-background-color);border-color:var(--nl-button-subtle-positive-pressed-active-border-color);color:var(--nl-button-subtle-positive-pressed-active-color)}.nl-button:where(.nl-button--subtle).nl-button--positive.nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-subtle-pressed-disabled-background-color);border-color:var(--nl-button-subtle-pressed-disabled-border-color);color:var(--nl-button-subtle-pressed-disabled-color)}.nl-button:where(.nl-button--subtle).nl-button--positive.nl-button--disabled{background-color:var(--nl-button-subtle-disabled-background-color);border-color:var(--nl-button-subtle-disabled-border-color);color:var(--nl-button-subtle-disabled-color)}.nl-button:where(.nl-button--subtle).nl-button--negative{background-color:var(--nl-button-subtle-negative-background-color);border-color:var(--nl-button-subtle-negative-border-color);color:var(--nl-button-subtle-negative-color)}.nl-button:where(.nl-button--subtle).nl-button--negative:hover{background-color:var(--nl-button-subtle-negative-hover-background-color);border-color:var(--nl-button-subtle-negative-hover-border-color);color:var(--nl-button-subtle-negative-hover-color)}.nl-button:where(.nl-button--subtle).nl-button--negative:active{background-color:var(--nl-button-subtle-negative-active-background-color);border-color:var(--nl-button-subtle-negative-active-border-color);color:var(--nl-button-subtle-negative-active-color)}.nl-button:where(.nl-button--subtle).nl-button--negative.nl-button--pressed{background-color:var(--nl-button-subtle-negative-pressed-background-color);border-color:var(--nl-button-subtle-negative-pressed-border-color);color:var(--nl-button-subtle-negative-pressed-color)}.nl-button:where(.nl-button--subtle.nl-button--negative).nl-button--pressed:hover{background-color:var(--nl-button-subtle-negative-pressed-hover-background-color);border-color:var(--nl-button-subtle-negative-pressed-hover-border-color);color:var(--nl-button-subtle-negative-pressed-hover-color)}.nl-button:where(.nl-button--subtle.nl-button--negative).nl-button--pressed:active{background-color:var(--nl-button-subtle-negative-pressed-active-background-color);border-color:var(--nl-button-subtle-negative-pressed-active-border-color);color:var(--nl-button-subtle-negative-pressed-active-color)}.nl-button:where(.nl-button--subtle).nl-button--negative.nl-button--pressed.nl-button--disabled{background-color:var(--nl-button-subtle-pressed-disabled-background-color);border-color:var(--nl-button-subtle-pressed-disabled-border-color);color:var(--nl-button-subtle-pressed-disabled-color)}.nl-button:where(.nl-button--subtle).nl-button--negative.nl-button--disabled{background-color:var(--nl-button-subtle-disabled-background-color);border-color:var(--nl-button-subtle-disabled-border-color);color:var(--nl-button-subtle-disabled-color)}.nl-button:focus-visible{background-color:var(--nl-button-focus-background-color);border-color:var(--nl-button-focus-border-color);color:var(--nl-button-focus-color)}/*# sourceMappingURL=button.css.map */\n';
+const buttonStyles = css`
+  .clippy-button--small {
+    --nl-button-min-inline-size: var(--clippy-button-small-min-inline-size, 32px);
+    --nl-button-min-block-size: var(--clippy-button-small-min-block-size, 32px);
+    --clippy-icon-size: var(--clippy-button-small-icon, 18px);
+  }
+`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const tag = "clippy-button";
+const defaultSize = "medium";
+let ClippyButton = class extends FormElement {
+  constructor() {
+    super(...arguments);
+    this["icon-only"] = false;
+    this.toggle = void 0;
+    this.pressed = false;
+    this.busy = false;
+    this.size = defaultSize;
+    this.type = "button";
+  }
+  render() {
+    return html`
+      <button
+        type=${this.type}
+        aria-pressed=${this.toggle ? this.pressed : nothing}
+        aria-disabled=${this.disabled || nothing}
+        class=${classMap({
+      [`clippy-button--${this.size}`]: this.size !== defaultSize,
+      [`nl-button--${this.hint}`]: !!this.hint,
+      [`nl-button--${this.purpose}`]: !!this.purpose,
+      "nl-button": true,
+      "nl-button--busy": this.busy,
+      "nl-button--disabled": this.disabled,
+      "nl-button--icon-only": this["icon-only"],
+      "nl-button--pressed": this.toggle ? this.pressed : false
+    })}
+      >
+        <slot name="iconStart" class="nl-button__icon-start"></slot>
+        <span class="nl-button__label"><slot></slot></span>
+        <slot name="iconEnd" class="nl-button__icon-end"></slot>
+      </button>
+    `;
+  }
+};
+ClippyButton.styles = [buttonStyles, unsafeCSS(buttonStyles$1)];
+__decorateClass([
+  property({ type: Boolean })
+], ClippyButton.prototype, "icon-only", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ClippyButton.prototype, "toggle", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ClippyButton.prototype, "pressed", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ClippyButton.prototype, "busy", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => {
+        if (value === "positive" || value === "negative") {
+          return value;
+        }
+        console.warn(`Invalid hint "${value}".`);
+        return void 0;
+      }
+    },
+    type: String
+  })
+], ClippyButton.prototype, "hint", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => {
+        if (value === "small" || value === "medium") {
+          return value;
+        }
+        console.warn(`Invalid size "${value}". Using default "medium".`);
+        return "medium";
+      }
+    },
+    type: String
+  })
+], ClippyButton.prototype, "size", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => {
+        if (value === "primary" || value === "secondary" || value === "subtle") {
+          return value;
+        }
+        console.warn(`Invalid purpose "${value}".`);
+        return void 0;
+      }
+    },
+    type: String
+  })
+], ClippyButton.prototype, "purpose", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => {
+        if (value === "button" || value === "submit" || value === "reset") {
+          return value;
+        }
+        console.warn(`Invalid button type "${value}". Using default "button".`);
+        return "button";
+      }
+    },
+    type: String
+  })
+], ClippyButton.prototype, "type", 2);
+ClippyButton = __decorateClass([
+  safeCustomElement(tag)
+], ClippyButton);
+export {
+  ClippyButton as C,
+  buttonStyles$1 as b
+};