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

package/dist/clippy-icon/index.js

@@ -1,6 +1,6 @@
-import { s as c } from "../decorators-BGpMqJ7V.js";
-import { css as a, LitElement as p, html as v } from "lit";
-const y = a`
+import { s as safeCustomElement } from "../decorators-Cq82_-g_.js";
+import { css, LitElement, html } from "lit";
+const iconStyles = css`
   :host {
     block-size: var(--clippy-icon-size);
     color: var(--clippy-icon-color);
@@ -17,24 +17,30 @@ const y = a`
     pointer-events: none;
   }
 `;
-var b = Object.getOwnPropertyDescriptor, d = (s, n, r, o) => {
-  for (var e = o > 1 ? void 0 : o ? b(n, r) : n, t = s.length - 1, l; t >= 0; t--)
-    (l = s[t]) && (e = l(e) || e);
-  return e;
+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 = decorator(result) || result;
+  return result;
 };
-const h = "clippy-icon";
-let i = class extends p {
+const tag = "clippy-icon";
+let ClippyIcon = class extends LitElement {
   render() {
-    return v`<slot></slot>`;
+    return html`<slot></slot>`;
   }
   connectedCallback() {
-    super.connectedCallback(), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
+    super.connectedCallback();
+    if (!this.hasAttribute("aria-hidden")) {
+      this.setAttribute("aria-hidden", "true");
+    }
   }
 };
-i.styles = [y];
-i = d([
-  c(h)
-], i);
+ClippyIcon.styles = [iconStyles];
+ClippyIcon = __decorateClass([
+  safeCustomElement(tag)
+], ClippyIcon);
 export {
-  i as ClippyIcon
+  ClippyIcon
 };

package/dist/clippy-lang-combobox/index.d.ts

@@ -5,7 +5,7 @@ type Option = {
     autonym: string;
     exonym: string;
 };
-declare const FORMAT_OPTIONS: readonly ["both", "autonym", "exonym"];
+declare const FORMAT_OPTIONS: readonly ["autonym", "exonym", "autonym-exonym", "exonym-autonym"];
 type Format = (typeof FORMAT_OPTIONS)[number];
 declare const tag = "clippy-lang-combobox";
 declare global {
@@ -23,7 +23,6 @@ declare const ClippyLangCombobox_base: (new (...args: any[]) => {
 export declare class ClippyLangCombobox extends ClippyLangCombobox_base {
     #private;
     exonyms: Intl.DisplayNames;
-    separator: string;
     format: Format;
     static readonly autonyms: {
         of: (code: string) => string;
@@ -31,13 +30,12 @@ export declare class ClippyLangCombobox extends ClippyLangCombobox_base {
     readonly autonyms: {
         of: (code: string) => string;
     };
-    static readonly styles: import('lit').CSSResult[];
     set lang(value: string);
     get lang(): string;
     readonly filter: (query: string) => ({ autonym, exonym, label }: Option) => boolean;
     set options(options: string[]);
     get options(): Option[];
-    renderEntry(option: Option): import('lit').TemplateResult<1>;
+    renderEntry(option: Option, index?: number): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/clippy-lang-combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-lang-combobox/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpD,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,cAAc,wCAAyC,CAAC;AAE9D,KAAK,MAAM,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAI9C,QAAA,MAAM,GAAG,yBAAyB,CAAC;AAEnC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC;KAC3B;CACF;AAGD,cAAM,CAAE,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;;;;;;AAEzC,qBACa,kBAAmB,SAAQ,uBAAoB;;IAC1D,OAAO,oBAAkE;IAC7D,SAAS,SAAqB;IAO1C,MAAM,EAAE,MAAM,CAAyB;IAIvC,MAAM,CAAC,QAAQ,CAAC,QAAQ;mBAAgB,MAAM;MAAmC;IACjF,QAAQ,CAAC,QAAQ;mBADuB,MAAM;MACa;IAE3D,gBAAyB,MAAM,4BAAsC;IAMrE,IACa,IAAI,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED,IAAa,IAAI,IAPQ,MAAM,CAS9B;IAED,SAAkB,MAAM,GAAI,OAAO,MAAM,MAE/B,4BAA4B,MAAM,aAa1C;IAEF,IACa,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAgBrC;IAED,IAAa,OAAO,IAAI,MAAM,EAAE,CAE/B;IAEQ,WAAW,CAAC,MAAM,EAAE,MAAM;CAsBpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-lang-combobox/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,cAAc,oEAAqE,CAAC;AAE1F,KAAK,MAAM,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9C,QAAA,MAAM,GAAG,yBAAyB,CAAC;AAEnC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC;KAC3B;CACF;AAGD,cAAM,CAAE,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;;;;;;AAEzC,qBACa,kBAAmB,SAAQ,uBAAoB;;IAC1D,OAAO,oBAAkE;IAOzE,MAAM,EAAE,MAAM,CAAyB;IAIvC,MAAM,CAAC,QAAQ,CAAC,QAAQ;mBAAgB,MAAM;MAAmC;IACjF,QAAQ,CAAC,QAAQ;mBADuB,MAAM;MACa;IAM3D,IACa,IAAI,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED,IAAa,IAAI,IAPQ,MAAM,CAS9B;IAED,SAAkB,MAAM,GAAI,OAAO,MAAM,MAE/B,4BAA4B,MAAM,aAa1C;IAEF,IACa,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAerC;IAED,IAAa,OAAO,IAAI,MAAM,EAAE,CAE/B;IAEQ,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM;CAoBpD"}

package/dist/clippy-lang-combobox/index.js

@@ -1,10 +1,11 @@
-import { C as k, a as A } from "../index-CmKtM5nD.js";
-import { s as C } from "../decorators-BGpMqJ7V.js";
-import { L as S } from "../index-CaVpiaBC.js";
-import { css as T, html as p, nothing as l } from "lit";
-import { property as y } from "lit/decorators.js";
-import { ifDefined as z } from "lit/directives/if-defined.js";
-const O = {
+import { arrayFromTokenList } from "../lib/converters/index.js";
+import { s as safeCustomElement } from "../decorators-Cq82_-g_.js";
+import LocalizationMixin from "../lib/LocalizationMixin/index.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { ClippyCombobox } from "../clippy-combobox/index.js";
+const languages = {
   aa: "Afaraf",
   ab: "аҧсуа бызшәа",
   ae: "Avesta",
@@ -189,102 +190,127 @@ const O = {
   za: "Saɯ cueŋƅ",
   zh: "中文",
   zu: "isiZulu"
-}, N = /* @__PURE__ */ new Set(["ar", "dv", "fa", "he", "ps", "sd", "ug", "ur", "yi"]), b = (a) => N.has(a) ? "rtl" : "ltr", D = T`
-  /**
-   * Whenever the writing direction of an element inside the option is different, we want to align it differently.
-   * For both scenarios that would come down to "justify:content: flex-end"
-   */
-  .clippy-combobox__option:dir(ltr):has(*:dir(rtl)),
-  .clippy-combobox__option:dir(rtl):has(*:dir(ltr)),
-  .clippy-combobox__current-option:dir(ltr):has(*:dir(rtl)),
-  .clippy-combobox__current-option:dir(rtl):has(*:dir(ltr)) {
-    justify-content: flex-end;
-  }
-`;
-var E = Object.defineProperty, I = Object.getOwnPropertyDescriptor, v = (a) => {
-  throw TypeError(a);
-}, c = (a, t, o, e) => {
-  for (var s = e > 1 ? void 0 : e ? I(t, o) : t, n = a.length - 1, r; n >= 0; n--)
-    (r = a[n]) && (s = (e ? r(t, o, s) : r(s)) || s);
-  return e && s && E(t, o, s), s;
-}, _ = (a, t, o) => t.has(a) || v("Cannot " + o), m = (a, t, o) => (_(a, t, "read from private field"), o ? o.call(a) : t.get(a)), g = (a, t, o) => t.has(a) ? v("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(a) : t.set(a, o), f = (a, t, o, e) => (_(a, t, "write to private field"), t.set(a, o), o), h, u, d, w;
-const x = ["both", "autonym", "exonym"], L = x[0], $ = "-", F = "clippy-lang-combobox";
-class M extends k {
+};
+const rtlLanguages = /* @__PURE__ */ new Set(["ar", "dv", "fa", "he", "ps", "sd", "ug", "ur", "yi"]);
+const direction = (lang) => {
+  return rtlLanguages.has(lang) ? "rtl" : "ltr";
+};
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _options, _lang, _ClippyLangCombobox_instances, dir_get;
+const FORMAT_OPTIONS = ["autonym", "exonym", "autonym-exonym", "exonym-autonym"];
+const DEFAULT_FORMAT_OPTION = FORMAT_OPTIONS[0];
+const tag = "clippy-lang-combobox";
+class C extends ClippyCombobox {
 }
-let i = class extends S(M) {
+let ClippyLangCombobox = class extends LocalizationMixin(C) {
   constructor() {
-    super(...arguments), g(this, d), this.exonyms = new Intl.DisplayNames(this.DEFAULT_LANG, { type: "language" }), this.separator = $, this.format = L, g(this, h, []), g(this, u), this.autonyms = { of: i.autonyms.of }, this.filter = (a) => {
-      const t = a.toLowerCase();
-      return ({ autonym: o, exonym: e, label: s }) => {
-        const n = s.toLowerCase().includes(t);
+    super(...arguments);
+    __privateAdd(this, _ClippyLangCombobox_instances);
+    this.exonyms = new Intl.DisplayNames(this.DEFAULT_LANG, { type: "language" });
+    this.format = DEFAULT_FORMAT_OPTION;
+    __privateAdd(this, _options, []);
+    __privateAdd(this, _lang);
+    this.autonyms = { of: ClippyLangCombobox.autonyms.of };
+    this.filter = (query) => {
+      const normalizedQuery = query.toLowerCase();
+      return ({ autonym, exonym, label }) => {
+        const hasLabelMatch = label.toLowerCase().includes(normalizedQuery);
         switch (this.format) {
           case "autonym":
-            return n || e.toLowerCase().includes(t);
+            return hasLabelMatch || exonym.toLowerCase().includes(normalizedQuery);
           case "exonym":
-            return n || o.toLowerCase().includes(t);
+            return hasLabelMatch || autonym.toLowerCase().includes(normalizedQuery);
           default:
-            return n;
+            return hasLabelMatch;
         }
       };
     };
   }
-  set lang(a) {
-    a !== m(this, u) && (f(this, u, a), this.exonyms = new Intl.DisplayNames(a, { type: "language" }));
+  set lang(value) {
+    if (value !== __privateGet(this, _lang)) {
+      __privateSet(this, _lang, value);
+      this.exonyms = new Intl.DisplayNames(value, { type: "language" });
+    }
   }
   get lang() {
-    return m(this, u) || this.DEFAULT_LANG;
+    return __privateGet(this, _lang) || this.DEFAULT_LANG;
   }
-  set options(a) {
-    f(this, h, a.map((t) => {
-      const o = this.autonyms.of(t), e = this.exonyms.of(t) || o, s = {
-        autonym: o,
-        exonym: e,
-        value: t
-      }, n = e === o ? "" : ` ${this.separator} ${o}`, r = this.format === "both" ? `${s.exonym}${n}` : s?.[this.format];
+  set options(options) {
+    __privateSet(this, _options, options.map((value) => {
+      const autonym = this.autonyms.of(value);
+      const exonym = this.exonyms.of(value) || autonym;
+      const option = {
+        autonym,
+        exonym,
+        value
+      };
+      const label = this.format.startsWith("autonym") ? autonym : exonym;
       return {
-        ...s,
-        label: r
+        ...option,
+        label
       };
     }));
   }
   get options() {
-    return m(this, h);
+    return __privateGet(this, _options);
   }
-  renderEntry(a) {
-    const t = b(a.value), o = t === m(this, d, w) ? void 0 : t, e = a.value === this.lang, s = e || ["both", "exonym"].includes(this.format) ? p`<span class="clippy-lang-combobox__exonym">${a.exonym}</span>` : l, n = !e && ["both", "autonym"].includes(this.format) ? p`<span class="clippy-lang-combobox__autonym" lang=${a.value} dir=${z(o)}>
-            ${a.autonym}
-          </span>` : l, r = s === l || n === l ? l : p`<span role="presentation">${this.separator}</span>`;
-    return p` <span class="clippy-lang-combobox__option"> ${s} ${r} ${n} </span>`;
+  renderEntry(option, index) {
+    const formatArray = this.format.split("-");
+    const classes = ["clippy-lang-combobox__option-label", "clippy-lang-combobox__option-description"];
+    const parts = index === void 0 ? [formatArray[0]] : formatArray;
+    return html`${parts.map((part, i) => {
+      const content = option[part];
+      const optionDir = direction(option.value);
+      let lang;
+      let dir;
+      if (part === "autonym") {
+        lang = option.value;
+        dir = optionDir === __privateGet(this, _ClippyLangCombobox_instances, dir_get) ? void 0 : optionDir;
+      }
+      return html`<div class="${classes[i]}" lang=${ifDefined(lang)} dir=${ifDefined(dir)}>${content}</div>`;
+    })}`;
   }
 };
-h = /* @__PURE__ */ new WeakMap();
-u = /* @__PURE__ */ new WeakMap();
-d = /* @__PURE__ */ new WeakSet();
-w = function() {
-  return b(this.lang);
+_options = /* @__PURE__ */ new WeakMap();
+_lang = /* @__PURE__ */ new WeakMap();
+_ClippyLangCombobox_instances = /* @__PURE__ */ new WeakSet();
+dir_get = function() {
+  return direction(this.lang);
 };
-i.autonyms = { of: (a) => O[a] };
-i.styles = [...k.styles, D];
-c([
-  y()
-], i.prototype, "separator", 2);
-c([
-  y({
+ClippyLangCombobox.autonyms = { of: (code) => languages[code] };
+__decorateClass([
+  property({
     converter: {
-      fromAttribute: (a) => x.find((t) => t === a) || L
+      fromAttribute: (value) => FORMAT_OPTIONS.find((v) => v === value) || DEFAULT_FORMAT_OPTION
     },
     type: String
   })
-], i.prototype, "format", 2);
-c([
-  y()
-], i.prototype, "lang", 1);
-c([
-  y({ converter: A, type: Array })
-], i.prototype, "options", 1);
-i = c([
-  C(F)
-], i);
+], ClippyLangCombobox.prototype, "format", 2);
+__decorateClass([
+  property()
+], ClippyLangCombobox.prototype, "lang", 1);
+__decorateClass([
+  property({ converter: arrayFromTokenList, type: Array })
+], ClippyLangCombobox.prototype, "options", 1);
+ClippyLangCombobox = __decorateClass([
+  safeCustomElement(tag)
+], ClippyLangCombobox);
 export {
-  i as ClippyLangCombobox
+  ClippyLangCombobox
 };

package/dist/clippy-modal/index.d.ts

@@ -12,7 +12,7 @@ export declare class ClippyModal extends LitElement {
     /**
      * When loading the page, the dialog is not open by default.
      */
-    standardOpen: boolean;
+    'standard-open': boolean;
     title: string;
     closedBy: string;
     /**
@@ -27,8 +27,8 @@ export declare class ClippyModal extends LitElement {
      * Button labels for confirm/cancel actions. Consumers can override these,
      * e.g. with localized strings.
      */
-    confirmLabel: string;
-    cancelLabel: string;
+    'confirm-label': string;
+    'cancel-label': string;
     readonly dialogElement: HTMLDialogElement;
     private readonly titleId;
     private previouslyFocusedElement;

package/dist/clippy-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-modal/index.ts"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,UAAU,EAA6B,MAAM,KAAK,CAAC;AAS5D,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,qBACa,WAAY,SAAQ,UAAU;IACzC;;;OAGG;IAEH,eAAe,SAAM;IACrB;;OAEG;IAEH,YAAY,UAAS;IACgB,KAAK,SAAM;IACpB,QAAQ,SAAS;IAC7C;;;;;;OAMG;IAEH,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAY;IAC3D;;;OAGG;IACyB,YAAY,SAAQ;IACpB,WAAW,SAAY;IAGnD,QAAQ,CAAC,aAAa,EAAG,iBAAiB,CAAC;IAE3C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAmD;IAE3E,OAAO,CAAC,wBAAwB,CAA4B;IAE5D,gBAAyB,MAAM,0DAI7B;IAEF,QAAQ,CAAC,IAAI,aAOX;IAEF,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;IAMpB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAiB5B;IAEF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAK7B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IAEF,IAAI,WAAW,IAAI,MAAM,CAExB;IAEQ,MAAM;CA8ChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-modal/index.ts"],"names":[],"mappings":"AAGA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAS3D,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,qBACa,WAAY,SAAQ,UAAU;IACzC;;;OAGG;IAEH,eAAe,SAAM;IACrB;;OAEG;IAEH,eAAe,UAAS;IACa,KAAK,SAAM;IACpB,QAAQ,SAAS;IAC7C;;;;;;OAMG;IAEH,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAY;IAC3D;;;OAGG;IACyB,eAAe,SAAQ;IACvB,cAAc,SAAY;IAGtD,QAAQ,CAAC,aAAa,EAAG,iBAAiB,CAAC;IAE3C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAmD;IAE3E,OAAO,CAAC,wBAAwB,CAA4B;IAE5D,gBAAyB,MAAM,0DAAuE;IAEtG,QAAQ,CAAC,IAAI,aAOX;IAEF,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;IAMpB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAiB5B;IAEF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAK7B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IAEF,IAAI,WAAW,IAAI,MAAM,CAExB;IAEQ,MAAM;CA8ChB"}

package/dist/clippy-modal/index.js

@@ -1,26 +1,14 @@
-import { s as b } from "../decorators-BGpMqJ7V.js";
-import { b as h } from "../index-CT1z3SFL.js";
+import { s as safeCustomElement } from "../decorators-Cq82_-g_.js";
+import { b as buttonStyles } from "../index-7tZ2Ykfm.js";
+import "../clippy-heading/index.js";
 import "../clippy-icon/index.js";
-import { css as u, unsafeCSS as c, LitElement as v, nothing as p, html as m } from "lit";
-import { property as d, query as y } from "lit/decorators.js";
-import { unsafeSVG as f } from "lit/directives/unsafe-svg.js";
-const k = ".ams-dialog:not(dialog:not([open])){background-color:var(--ams-dialog-background-color);border-color:var(--ams-dialog-border-color);border-style:var(--ams-dialog-border-style);border-width:var(--ams-dialog-border-width);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ams-dialog-gap);inline-size:var(--ams-dialog-inline-size);max-block-size:var(--ams-dialog-max-block-size);max-inline-size:var(--ams-dialog-max-inline-size);inset-block:0;padding-block:0;padding-inline:0}@media screen and (min-width:37.5rem){.ams-dialog:not(dialog:not([open])){inline-size:var(--ams-dialog-medium-inline-size);max-block-size:var(--ams-dialog-medium-max-block-size)}}.ams-dialog:not(dialog:not([open]))::backdrop{background:var(--ams-dialog-backdrop-background-color, rgba(24, 24, 24, .625))}.ams-dialog__header{align-items:flex-start;display:flex;gap:var(--ams-dialog-header-gap);justify-content:space-between;padding-block:var(--ams-dialog-header-padding-block);padding-inline:var(--ams-dialog-header-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__header{padding-block:var(--ams-dialog-header-medium-padding-block);padding-inline:var(--ams-dialog-header-medium-padding-inline)}}.ams-dialog__body{overflow-y:auto;overscroll-behavior-y:contain;padding-block:var(--ams-dialog-body-padding-block);padding-inline:var(--ams-dialog-body-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__body{padding-inline:var(--ams-dialog-body-medium-padding-inline)}}.ams-dialog__footer{padding-block:var(--ams-dialog-footer-padding-block);padding-inline:var(--ams-dialog-footer-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__footer{padding-block:var(--ams-dialog-footer-medium-padding-block);padding-inline:var(--ams-dialog-footer-medium-padding-inline)}}", _ = `<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class="icon icon-tabler icons-tabler-outline icon-tabler-x"
->
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <path d="M18 6l-12 12" />
-  <path d="M6 6l12 12" />
-</svg>`, w = [
-  u`
+import { css, unsafeCSS, LitElement, nothing, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+const amsDialogStyles = ".ams-dialog:not(dialog:not([open])){background-color:var(--ams-dialog-background-color);border-color:var(--ams-dialog-border-color);border-style:var(--ams-dialog-border-style);border-width:var(--ams-dialog-border-width);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ams-dialog-gap);inline-size:var(--ams-dialog-inline-size);max-block-size:var(--ams-dialog-max-block-size);max-inline-size:var(--ams-dialog-max-inline-size);inset-block:0;padding-block:0;padding-inline:0}@media screen and (min-width: 37.5rem){.ams-dialog:not(dialog:not([open])){inline-size:var(--ams-dialog-medium-inline-size);max-block-size:var(--ams-dialog-medium-max-block-size)}}.ams-dialog:not(dialog:not([open]))::backdrop{background:var(--ams-dialog-backdrop-background-color, rgba(24, 24, 24, 0.625))}.ams-dialog__header{align-items:flex-start;display:flex;gap:var(--ams-dialog-header-gap);justify-content:space-between;padding-block:var(--ams-dialog-header-padding-block);padding-inline:var(--ams-dialog-header-padding-inline)}@media screen and (min-width: 37.5rem){.ams-dialog__header{padding-block:var(--ams-dialog-header-medium-padding-block);padding-inline:var(--ams-dialog-header-medium-padding-inline)}}.ams-dialog__body{overflow-y:auto;overscroll-behavior-y:contain;padding-block:var(--ams-dialog-body-padding-block);padding-inline:var(--ams-dialog-body-padding-inline)}@media screen and (min-width: 37.5rem){.ams-dialog__body{padding-inline:var(--ams-dialog-body-medium-padding-inline)}}.ams-dialog__footer{padding-block:var(--ams-dialog-footer-padding-block);padding-inline:var(--ams-dialog-footer-padding-inline)}@media screen and (min-width: 37.5rem){.ams-dialog__footer{padding-block:var(--ams-dialog-footer-medium-padding-block);padding-inline:var(--ams-dialog-footer-medium-padding-inline)}}/*# sourceMappingURL=dialog.css.map */\n";
+const CloseIcon = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="24"\n  height="24"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n  class="icon icon-tabler icons-tabler-outline icon-tabler-x"\n>\n  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n  <path d="M18 6l-12 12" />\n  <path d="M6 6l12 12" />\n</svg>';
+const dialogStyles = [
+  css`
     :host {
       --ams-dialog-background-color: var(--todo-modal-dialog-background-color);
       --ams-dialog-border-color: var(--todo-modal-dialog-border-color);
@@ -59,48 +47,73 @@ const k = ".ams-dialog:not(dialog:not([open])){background-color:var(--ams-dialog
     }
   `
 ];
-var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (i, l, t, n) => {
-  for (var e = n > 1 ? void 0 : n ? z(l, t) : l, s = i.length - 1, r; s >= 0; s--)
-    (r = i[s]) && (e = (n ? r(l, t, e) : r(e)) || e);
-  return n && e && x(l, t, e), e;
+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;
 };
-let E = 0;
-const $ = "clippy-modal", g = {
+let dialogInstanceCounter = 0;
+const tag = "clippy-modal";
+const DIALOG_BUTTON_VALUES = {
   cancel: "cancel",
   confirm: "confirm"
 };
-let o = class extends v {
+let ClippyModal = class extends LitElement {
   constructor() {
-    super(...arguments), this.ariaDescribedby = "", this.standardOpen = !1, this.title = "", this.closedBy = "any", this.actions = "cancel", this.confirmLabel = "OK", this.cancelLabel = "Cancel", this.titleId = `clippy-modal-title-${++E}`, this.previouslyFocusedElement = null, this.open = () => {
+    super(...arguments);
+    this.ariaDescribedby = "";
+    this["standard-open"] = false;
+    this.title = "";
+    this.closedBy = "any";
+    this.actions = "cancel";
+    this["confirm-label"] = "OK";
+    this["cancel-label"] = "Cancel";
+    this.titleId = `clippy-modal-title-${++dialogInstanceCounter}`;
+    this.previouslyFocusedElement = null;
+    this.open = () => {
       if (!this.dialogElement) return;
-      const i = this.getRootNode();
-      this.previouslyFocusedElement = i.activeElement, this.dialogElement.showModal();
-    }, this.onDialogClose = () => {
-      if (this.dispatchEvent(
+      const root = this.getRootNode();
+      this.previouslyFocusedElement = root.activeElement;
+      this.dialogElement.showModal();
+    };
+    this.onDialogClose = () => {
+      this.dispatchEvent(
         new Event("close", {
-          bubbles: !0,
-          composed: !0
+          bubbles: true,
+          composed: true
         })
-      ), this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus == "function")
+      );
+      if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === "function") {
         try {
           this.previouslyFocusedElement.focus();
         } catch {
         }
+      }
       this.previouslyFocusedElement = null;
-    }, this.onDialogCancel = (i) => {
-      i.preventDefault(), this.close();
-    }, this.onCloseClick = () => {
-      this.close(g.cancel);
+    };
+    this.onDialogCancel = (event) => {
+      event.preventDefault();
+      this.close();
+    };
+    this.onCloseClick = () => {
+      this.close(DIALOG_BUTTON_VALUES.cancel);
     };
   }
-  close(i) {
-    this.dialogElement?.open && this.dialogElement.close(i);
+  close(value) {
+    if (this.dialogElement?.open) {
+      this.dialogElement.close(value);
+    }
   }
   get returnValue() {
     return this.dialogElement?.returnValue ?? "No return value.";
   }
   render() {
-    return m`
+    return html`
       <dialog
         class="ams-dialog"
         closedby=${this.closedBy}
@@ -109,15 +122,15 @@ let o = class extends v {
         aria-describedby=${this.ariaDescribedby || void 0}
         @close=${this.onDialogClose}
         @cancel=${this.onDialogCancel}
-        ?open=${this.standardOpen}
+        ?open=${this["standard-open"]}
       >
         <form method="dialog" novalidate>
           <header class="ams-dialog__header">
-            <clippy-heading level={1} id=${this.titleId}>
+            <clippy-heading level="1" id=${this.titleId}>
               <slot name="title">${this.title}</slot>
             </clippy-heading>
             <clippy-button icon-only @click=${this.onCloseClick} purpose="subtle">
-              <clippy-icon slot="iconStart">${f(_)}</clippy-icon>
+              <clippy-icon slot="iconStart">${unsafeSVG(CloseIcon)}</clippy-icon>
               Sluiten
             </clippy-button>
           </header>
@@ -126,55 +139,51 @@ let o = class extends v {
           </div>
           <footer class="ams-dialog__footer">
             <!-- using utrecht-button here disrupts the dialog form flow since it's in the shadow DOM. -->
-            ${this.actions === "confirm" || this.actions === "both" ? m`
-                  <button class="nl-button nl-button--primary" value=${g.confirm}>
-                    ${this.confirmLabel}
+            ${this.actions === "confirm" || this.actions === "both" ? html`
+                  <button class="nl-button nl-button--primary" value=${DIALOG_BUTTON_VALUES.confirm}>
+                    ${this["confirm-label"]}
                   </button>
-                ` : p}
-            ${this.actions === "cancel" || this.actions === "both" ? m`
-                  <button class="nl-button nl-button--secondary" value=${g.cancel}>
-                    ${this.cancelLabel}
+                ` : nothing}
+            ${this.actions === "cancel" || this.actions === "both" ? html`
+                  <button class="nl-button nl-button--secondary" value=${DIALOG_BUTTON_VALUES.cancel}>
+                    ${this["cancel-label"]}
                   </button>
-                ` : p}
+                ` : nothing}
           </footer>
         </form>
       </dialog>
     `;
   }
 };
-o.styles = [
-  w,
-  c(k),
-  c(h)
-];
-a([
-  d({ attribute: "aria-describedby", type: String })
-], o.prototype, "ariaDescribedby", 2);
-a([
-  d({ type: Boolean })
-], o.prototype, "standardOpen", 2);
-a([
-  d({ type: String })
-], o.prototype, "title", 2);
-a([
-  d({ type: String })
-], o.prototype, "closedBy", 2);
-a([
-  d({ type: String })
-], o.prototype, "actions", 2);
-a([
-  d({ type: String })
-], o.prototype, "confirmLabel", 2);
-a([
-  d({ type: String })
-], o.prototype, "cancelLabel", 2);
-a([
-  y("dialog")
-], o.prototype, "dialogElement", 2);
-o = a([
-  b($)
-], o);
+ClippyModal.styles = [dialogStyles, unsafeCSS(amsDialogStyles), unsafeCSS(buttonStyles)];
+__decorateClass([
+  property({ attribute: "aria-describedby", type: String })
+], ClippyModal.prototype, "ariaDescribedby", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ClippyModal.prototype, "standard-open", 2);
+__decorateClass([
+  property({ type: String })
+], ClippyModal.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], ClippyModal.prototype, "closedBy", 2);
+__decorateClass([
+  property({ type: String })
+], ClippyModal.prototype, "actions", 2);
+__decorateClass([
+  property({ type: String })
+], ClippyModal.prototype, "confirm-label", 2);
+__decorateClass([
+  property({ type: String })
+], ClippyModal.prototype, "cancel-label", 2);
+__decorateClass([
+  query("dialog")
+], ClippyModal.prototype, "dialogElement", 2);
+ClippyModal = __decorateClass([
+  safeCustomElement(tag)
+], ClippyModal);
 export {
-  o as ClippyModal,
-  g as DIALOG_BUTTON_VALUES
+  ClippyModal,
+  DIALOG_BUTTON_VALUES
 };

package/dist/clippy-toggletip/index.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+declare const tag = "clippy-toggletip";
+type Position = 'block-start' | 'inline-end' | 'block-end' | 'inline-start';
+declare global {
+    interface HTMLElementTagNameMap {
+        [tag]: ClippyToggletip;
+    }
+}
+export declare class ClippyToggletip extends LitElement {
+    text: string;
+    position: Position;
+    static readonly styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/clippy-toggletip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-toggletip/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,oBAAoB,CAAC;AAG5B,QAAA,MAAM,GAAG,qBAAqB,CAAC;AAE/B,KAAK,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;AAiB5E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC;KACxB;CACF;AAED,qBACa,eAAgB,SAAQ,UAAU;IACjB,IAAI,SAAM;IAMtC,QAAQ,EAAE,QAAQ,CAAiB;IAEnC,gBAAyB,MAAM,4BAAY;IAElC,MAAM;CAUhB"}