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

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

@@ -1,22 +1,23 @@
-import { LitElement } from 'lit';
+import { FormElement } from './../lib/FormElement';
 declare const tag = "clippy-button";
 declare global {
     interface HTMLElementTagNameMap {
-        [tag]: ToolbarButton;
+        [tag]: ClippyButton;
     }
 }
 type Purpose = 'primary' | 'secondary' | 'subtle';
 type Hint = 'positive' | 'negative';
+type ButtonType = 'button' | 'submit' | 'reset';
 type Size = 'small' | 'medium';
-export declare class ToolbarButton extends LitElement {
+export declare class ClippyButton<T = unknown> extends FormElement<T> {
     'icon-only': boolean;
     toggle: undefined;
     pressed: boolean;
     busy: boolean;
     hint: Hint | undefined;
-    disabled: boolean;
     size: Size;
     purpose: Purpose | undefined;
+    type: ButtonType;
     static readonly styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-button/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAK3D,QAAA,MAAM,GAAG,kBAAkB,CAAC;AAE5B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,aAAa,CAAC;KACtB;CACF;AAED,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAClD,KAAK,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC;AAEpC,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;AAG/B,qBACa,aAAc,SAAQ,UAAU;IACd,WAAW,UAAS;IACpB,MAAM,YAAa;IACnB,OAAO,UAAS;IAChB,IAAI,UAAS;IAa1C,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IACM,QAAQ,UAAS;IAa9C,IAAI,EAAE,IAAI,CAAe;IAazB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAE7B,gBAAyB,MAAM,4BAAwC;IAE9D,MAAM;CAsBhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-button/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,QAAA,MAAM,GAAG,kBAAkB,CAAC;AAE5B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC;KACrB;CACF;AAED,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAClD,KAAK,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC;AACpC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;AAG/B,qBACa,YAAY,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IAC9B,WAAW,UAAS;IACpB,MAAM,YAAa;IACnB,OAAO,UAAS;IAChB,IAAI,UAAS;IAa1C,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IAavB,IAAI,EAAE,IAAI,CAAe;IAazB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAa7B,IAAI,EAAE,UAAU,CAAY;IAE5B,gBAAyB,MAAM,4BAAwC;IAE9D,MAAM;CAuBhB"}

package/dist/clippy-button/index.js

@@ -1,97 +1,9 @@
-import { css as i, unsafeCSS as v, LitElement as p, nothing as d, html as g } from "lit";
-import { property as n, customElement as y } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
-const k = ".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);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));outline-offset:var(--nl-button-outline-offset);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);text-align:start;text-box-trim:trim-both;text-decoration:none;-webkit-user-select:none;user-select:none;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:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!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,.nl-button__icon-end{line-height:0}.nl-button__label{background-color:inherit;overflow-wrap:break-word;text-box-trim:trim-both}.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: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,.nl-button.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)}", m = i`
-  .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 w = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (o, l, a, b) => {
-  for (var e = b > 1 ? void 0 : b ? f(l, a) : l, c = o.length - 1, u; c >= 0; c--)
-    (u = o[c]) && (e = (b ? u(l, a, e) : u(e)) || e);
-  return b && e && w(l, a, e), e;
-};
-const x = "clippy-button", s = "medium";
-let r = class extends p {
-  constructor() {
-    super(...arguments), this["icon-only"] = !1, this.toggle = void 0, this.pressed = !1, this.busy = !1, this.disabled = !1, this.size = s;
-  }
-  render() {
-    return g`
-      <button
-        aria-pressed=${this.toggle ? this.pressed : d}
-        aria-disabled=${this.disabled || d}
-        class=${h({
-      [`clippy-button--${this.size}`]: this.size !== s,
-      [`nl-button--${this.hint}`]: !!this.hint,
-      [`nl-button--${this.purpose}`]: !!this.purpose,
-      "nl-button": !0,
-      "nl-button--busy": this.busy,
-      "nl-button--disabled": this.disabled,
-      "nl-button--icon-only": this["icon-only"],
-      "nl-button--pressed": this.toggle ? this.pressed : !1
-    })}
-      >
-        <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>
-    `;
-  }
-};
-r.styles = [m, v(k)];
-t([
-  n({ type: Boolean })
-], r.prototype, "icon-only", 2);
-t([
-  n({ type: Boolean })
-], r.prototype, "toggle", 2);
-t([
-  n({ type: Boolean })
-], r.prototype, "pressed", 2);
-t([
-  n({ type: Boolean })
-], r.prototype, "busy", 2);
-t([
-  n({
-    converter: {
-      fromAttribute: (o) => {
-        if (o === "positive" || o === "negative")
-          return o;
-        console.warn(`Invalid hint "${o}".`);
-      }
-    },
-    type: String
-  })
-], r.prototype, "hint", 2);
-t([
-  n({ type: Boolean })
-], r.prototype, "disabled", 2);
-t([
-  n({
-    converter: {
-      fromAttribute: (o) => o === "small" || o === "medium" ? o : (console.warn(`Invalid size "${o}". Using default "medium".`), "medium")
-    },
-    type: String
-  })
-], r.prototype, "size", 2);
-t([
-  n({
-    converter: {
-      fromAttribute: (o) => {
-        if (o === "primary" || o === "secondary" || o === "subtle")
-          return o;
-        console.warn(`Invalid purpose "${o}".`);
-      }
-    },
-    type: String
-  })
-], r.prototype, "purpose", 2);
-r = t([
-  y(x)
-], r);
+import "../decorators-Cq82_-g_.js";
+import { C } from "../index-7tZ2Ykfm.js";
+import "lit";
+import "lit/decorators.js";
+import "lit/directives/class-map.js";
+import "../lib/FormElement/index.js";
 export {
-  r as ToolbarButton
+  C as ClippyButton
 };

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

@@ -1,11 +1,13 @@
 import { LitElement } from 'lit';
+declare const tag = "clippy-code";
 export declare class ClippyCode extends LitElement {
     static readonly styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'clippy-code': ClippyCode;
+        [tag]: ClippyCode;
     }
 }
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-code/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,qBACa,UAAW,SAAQ,UAAU;IACxC,gBAAyB,MAAM,4BAAwB;IAE9C,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-code/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,QAAA,MAAM,GAAG,gBAAgB,CAAC;AAE1B,qBACa,UAAW,SAAQ,UAAU;IACxC,gBAAyB,MAAM,4BAAwB;IAE9C,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;KACnB;CACF"}

package/dist/clippy-code/index.js

@@ -1,20 +1,24 @@
-import { unsafeCSS as a, LitElement as p, html as d } from "lit";
-import { customElement as i } from "lit/decorators.js";
-const m = ".nl-code{background-color:var(--nl-code-background-color);color:var(--nl-code-color);font-family:var(--nl-code-font-family, monospace),monospace;font-size:var(--nl-code-font-size, inherit);-webkit-hyphens:none;hyphens:none;white-space:pre-wrap}";
-var f = Object.getOwnPropertyDescriptor, v = (r, t, s, c) => {
-  for (var e = c > 1 ? void 0 : c ? f(t, s) : t, o = r.length - 1, l; o >= 0; o--)
-    (l = r[o]) && (e = l(e) || e);
-  return e;
+import { s as safeCustomElement } from "../decorators-Cq82_-g_.js";
+import { unsafeCSS, LitElement, html } from "lit";
+const codeCss = ".nl-code{background-color:var(--nl-code-background-color);color:var(--nl-code-color);font-family:var(--nl-code-font-family, monospace),monospace;font-size:var(--nl-code-font-size, inherit);hyphens:none;white-space:pre-wrap}/*# sourceMappingURL=code.css.map */\n";
+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;
 };
-let n = class extends p {
+const tag = "clippy-code";
+let ClippyCode = class extends LitElement {
   render() {
-    return d`<code class="nl-code"><slot></slot></code>`;
+    return html`<code class="nl-code"><slot></slot></code>`;
   }
 };
-n.styles = [a(m)];
-n = v([
-  i("clippy-code")
-], n);
+ClippyCode.styles = [unsafeCSS(codeCss)];
+ClippyCode = __decorateClass([
+  safeCustomElement(tag)
+], ClippyCode);
 export {
-  n as ClippyCode
+  ClippyCode
 };

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

@@ -1,11 +1,12 @@
+import { ColorValue } from '@nl-design-system-community/design-tokens-schema';
 import { default as Color } from 'colorjs.io';
 import { ClippyCombobox } from '../clippy-combobox';
 import { ColorName } from './lib';
 type Option = {
-    color: Color;
+    color?: Color | null;
     label: string;
-    names: ColorName[];
-    value: string;
+    description?: string;
+    value: ColorValue | string;
 };
 declare const tag = "clippy-color-combobox";
 declare global {
@@ -13,28 +14,28 @@ declare global {
         [tag]: ClippyColorCombobox;
     }
 }
-export declare class ClippyColorCombobox extends ClippyCombobox<Option> {
+declare class C extends ClippyCombobox<Option> {
+}
+declare const ClippyColorCombobox_base: (new (...args: any[]) => {
+    get DEFAULT_LANG(): string;
+    get lang(): string;
+    set lang(value: string);
+}) & typeof C;
+export declare class ClippyColorCombobox extends ClippyColorCombobox_base {
     #private;
+    allow: (typeof ClippyCombobox.allowances)[number];
+    translations: Record<string, ColorName>;
     static readonly styles: import('lit').CSSResult[];
-    translations: {
-        readonly RED: "red";
-        readonly ORANGE: "orange";
-        readonly YELLOW: "yellow";
-        readonly GREEN: "green";
-        readonly BLUE: "blue";
-        readonly PURPLE: "purple";
-    };
-    get lang(): string;
     set lang(value: string);
-    loadLocalizations(lang: string): Promise<void>;
-    readonly filter: (option: Option) => boolean;
+    loadLocalizations(lang: string): Promise<string>;
+    readonly filter: (query: string) => (option: Option) => boolean;
     get options(): Option[];
     set options(value: Array<{
         label: Option['label'];
         value: Option['value'];
     }>);
-    valueToQuery(value: Option['value']): string;
-    connectedCallback(): void;
+    getOptionForValue(value: Option['value'] | null): Option | undefined;
+    queryToValue(query: string): Option['value'] | null;
     renderEntry(option: Option): import('lit').TemplateResult<1>;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-color-combobox/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,GAAG,0BAA0B,CAAC;AAIpC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC;KAC5B;CACF;AAED,qBACa,mBAAoB,SAAQ,cAAc,CAAC,MAAM,CAAC;;IAC7D,gBAAyB,MAAM,4BAAiF;IAChH,YAAY;;;;;;;MAAY;IAMxB,IACa,IAAI,IAIQ,MAAM,CAF9B;IAED,IAAa,IAAI,CAAC,KAAK,EAAE,MAAM,EAE9B;IAEK,iBAAiB,CAAC,IAAI,EAAE,MAAM;IAkBpC,SAAkB,MAAM,GAAI,QAAQ,MAAM,aAKxC;IAEF,IACa,OAAO,IAAI,MAAM,EAAE,CAE/B;IAED,IAAa,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC,EAapF;IAEQ,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,MAAM;IAI5C,iBAAiB,IAAI,IAAI;IAkBzB,WAAW,CAAC,MAAM,EAAE,MAAM;CAWpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-color-combobox/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,kDAAkD,CAAC;AACnG,OAAO,KAAK,MAAM,YAAY,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpD,OAAO,EAAwC,KAAK,SAAS,EAA8B,MAAM,OAAO,CAAC;AAIzG,KAAK,MAAM,GAAG;IACZ,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;CAC5B,CAAC;AAKF,QAAA,MAAM,GAAG,0BAA0B,CAAC;AAEpC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC;KAC5B;CACF;AAGD,cAAM,CAAE,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;;;;;;AAEzC,qBACa,mBAAoB,SAAQ,wBAAoB;;IAElD,KAAK,EAAE,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAoB;IAC9E,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAY;IAGnD,gBAAyB,MAAM,4BAAiF;IAEhH,IAAa,IAAI,CAAC,KAAK,EAAE,MAAM,EAI9B;IAEK,iBAAiB,CAAC,IAAI,EAAE,MAAM;IAwBpC,SAAkB,MAAM,GAAI,OAAO,MAAM,MAI/B,QAAQ,MAAM,aAStB;IAEF,IACa,OAAO,IAAI,MAAM,EAAE,CAE/B;IAED,IAAa,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC,EAUpF;IAEQ,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS;IAQpE,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI;IAcnD,WAAW,CAAC,MAAM,EAAE,MAAM;CAkBpC"}

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

@@ -1,8 +1,11 @@
-import { a as C } from "../index-C_dkFbzv.js";
+import { a } from "../index-C9pF3BXT.js";
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/style-map.js";
 import "../clippy-combobox/index.js";
+import "../lib/converters/index.js";
+import "../decorators-Cq82_-g_.js";
+import "../lib/LocalizationMixin/index.js";
 export {
-  C as ClippyColorCombobox
+  a as ClippyColorCombobox
 };

package/dist/clippy-color-combobox/lib.d.ts

@@ -1,19 +1,23 @@
 export declare const COLOR_NAMES: {
-    readonly RED: "red";
-    readonly ORANGE: "orange";
-    readonly YELLOW: "yellow";
-    readonly GREEN: "green";
-    readonly BLUE: "blue";
-    readonly PURPLE: "purple";
+    readonly red: "red";
+    readonly orange: "orange";
+    readonly yellow: "yellow";
+    readonly green: "green";
+    readonly blue: "blue";
+    readonly purple: "purple";
+    readonly pink: "pink";
+    readonly brown: "brown";
+    readonly black: "black";
+    readonly white: "white";
+    readonly gray: "gray";
+    readonly cyan: "cyan";
+    readonly magenta: "magenta";
+    readonly indigo: "indigo";
 };
 export type ColorName = keyof typeof COLOR_NAMES;
+export declare const BROAD_COLOR_NAMES: ColorName[];
+export declare const DELTA_E_THRESHOLD = 20;
 export type ColorNameTranslations = {
     [K in ColorName]: string;
 };
-export type ColorLookup = {
-    name: keyof typeof COLOR_NAMES;
-    hue: (hue: number) => boolean;
-    rgb: ([r, g, b]: [number, number, number]) => boolean;
-};
-export declare const namedColors: ColorLookup[];
 //# sourceMappingURL=lib.d.ts.map

package/dist/clippy-color-combobox/lib.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../../src/clippy-color-combobox/lib.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAAG;KAAG,CAAC,IAAI,SAAS,GAAG,MAAM;CAAE,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,OAAO,WAAW,CAAC;IAC/B,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9B,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAAW,EA+BpC,CAAC"}
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../../src/clippy-color-combobox/lib.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD,eAAO,MAAM,iBAAiB,EAAE,SAAS,EAA6B,CAAC;AAEvE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,MAAM,MAAM,qBAAqB,GAAG;KAAG,CAAC,IAAI,SAAS,GAAG,MAAM;CAAE,CAAC"}

package/dist/clippy-color-combobox/messages/en.d.ts

@@ -1,10 +1,18 @@
 declare const _default: {
-    readonly RED: "red";
-    readonly ORANGE: "orange";
-    readonly YELLOW: "yellow";
-    readonly GREEN: "green";
-    readonly BLUE: "blue";
-    readonly PURPLE: "purple";
+    readonly red: "red";
+    readonly orange: "orange";
+    readonly yellow: "yellow";
+    readonly green: "green";
+    readonly blue: "blue";
+    readonly purple: "purple";
+    readonly pink: "pink";
+    readonly brown: "brown";
+    readonly black: "black";
+    readonly white: "white";
+    readonly gray: "gray";
+    readonly cyan: "cyan";
+    readonly magenta: "magenta";
+    readonly indigo: "indigo";
 };
 export default _default;
 //# sourceMappingURL=en.d.ts.map

package/dist/clippy-color-combobox/messages/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/clippy-color-combobox/messages/en.ts"],"names":[],"mappings":";;;;;;;;AAEA,wBAA2D"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/clippy-color-combobox/messages/en.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAEA,wBAA2D"}

package/dist/clippy-color-combobox/messages/nl.d.ts

@@ -1,10 +1,18 @@
 declare const _default: {
-    RED: string;
-    ORANGE: string;
-    YELLOW: string;
-    GREEN: string;
-    BLUE: string;
-    PURPLE: string;
+    red: string;
+    orange: string;
+    yellow: string;
+    green: string;
+    blue: string;
+    purple: string;
+    pink: string;
+    brown: string;
+    black: string;
+    white: string;
+    gray: string;
+    cyan: string;
+    magenta: string;
+    indigo: string;
 };
 export default _default;
 //# sourceMappingURL=nl.d.ts.map

package/dist/clippy-color-combobox/messages/nl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nl.d.ts","sourceRoot":"","sources":["../../../src/clippy-color-combobox/messages/nl.ts"],"names":[],"mappings":";;;;;;;;AAGA,wBAOkC"}
+{"version":3,"file":"nl.d.ts","sourceRoot":"","sources":["../../../src/clippy-color-combobox/messages/nl.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,wBAekC"}

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

@@ -1,21 +1,30 @@
-import { FormField } from '../lib/FormField';
+import { PropertyValues } from 'lit';
+import { FormElement } from '../lib/FormElement';
 type Option = {
     label: string;
+    description?: string;
     value: unknown;
 };
-type Position = 'block-start' | 'block-end';
-declare const tag = "clippy-combobox";
+declare const allowances: readonly ["options", "other"];
+type Allowance = (typeof allowances)[number];
+declare const positions: readonly ["block-start", "block-end"];
+type Position = (typeof positions)[number];
+declare const tag: "clippy-combobox";
 declare global {
     interface HTMLElementTagNameMap {
         [tag]: ClippyCombobox;
     }
 }
-export declare class ClippyCombobox<T extends Option = Option> extends FormField<T['value']> {
+export declare class ClippyCombobox<T extends Option = Option> extends FormElement<T['value']> {
     #private;
+    static readonly allowances: readonly ["options", "other"];
+    static readonly positions: readonly ["block-start", "block-end"];
+    allow: Allowance;
     open: boolean;
-    readonly position: Position;
+    position: Position;
+    invalid: boolean;
     static readonly styles: import('lit').CSSResult[];
-    selectedIndex: number;
+    activeIndex: number;
     query: string;
     get filteredOptions(): T[];
     set options(options: T[] | string[]);
@@ -26,25 +35,31 @@ export declare class ClippyCombobox<T extends Option = Option> extends FormField
     /**
      * Override this function to customize how options are filtered when typing
      */
-    readonly filter: ({ label }: T) => boolean;
+    readonly filter: (query: string) => ((option: T) => boolean);
     /**
      * Override this function to customize an external data source
      */
     fetchAdditionalOptions(_query: string): Promise<T[]>;
+    /**
+     * Override this function to customize how the value is looked up based on the selected option
+     */
+    getOptionForValue(value: T['value'] | null): T | undefined;
     /**
      * Override this function to customize how the user input is resolved to a value.
-     * This runs on input.
      */
-    queryToValue(query: string): T['value'];
+    queryToValue(query: string): T['value'] | null;
     /**
      * Override this function to customize how a value is converted to a query.
      * This runs on setting the value.
      */
-    valueToQuery(value: T['value'] | null): string;
+    valueToQuery(value: Option['value']): string;
     /**
      * Override this function to customize the rendering of combobox options and selected value.
+     * By default, it renders the label and description (if available) in the listbox options,
+     * and only the label in the input when an option is selected (by virtue of `index` being `undefined`).
      */
-    renderEntry({ label }: Option, _index: number): import('lit').TemplateResult<1>;
+    renderEntry({ description, label }: Option, index?: number): import('lit').TemplateResult<1>;
+    willUpdate(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-combobox/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,KAAK,QAAQ,GAAG,aAAa,GAAG,WAAW,CAAC;AAE5C,QAAA,MAAM,GAAG,oBAAoB,CAAC;AAE9B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC;KACvB;CACF;AAED,qBACa,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;IACtC,IAAI,UAAS;IAC7C,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAe;IAQtD,gBAAyB,MAAM,4BAK7B;IAEO,aAAa,SAAM;IACnB,KAAK,SAAM;IACpB,IAAa,eAAe,IAAI,CAAC,EAAE,CASlC;IAED,IACI,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,EAQlC;IAED,IAAI,OAAO,IAAI,CAAC,EAAE,CAEjB;IAED,IACa,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,EAG1C;IAED,IAAa,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,CAEtC;IAED,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO;IAIhD;;OAEG;IACH,QAAQ,CAAC,MAAM,GAAI,WAAW,CAAC,aAE7B;IAEF;;OAEG;IACH,sBAAsB,CAAC,MAAM,EAAE,MAAM;IAKrC;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;IAIvC;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM;IA+G9C;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAIpC,iBAAiB;IAKjB,oBAAoB;IAKpB,MAAM;CAwDhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-combobox/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAiB,cAAc,EAAa,MAAM,KAAK,CAAC;AAM/D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAIjD,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,UAAU,+BAAgC,CAAC;AAEjD,KAAK,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7C,QAAA,MAAM,SAAS,uCAAwC,CAAC;AAExD,KAAK,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3C,QAAA,MAAM,GAAG,EAAG,iBAA0B,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC;KACvB;CACF;AAED,qBACa,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;IACpF,MAAM,CAAC,QAAQ,CAAC,UAAU,gCAAc;IACxC,MAAM,CAAC,QAAQ,CAAC,SAAS,wCAAa;IAEtC,KAAK,EAAE,SAAS,CAAoB;IAEpC,IAAI,UAAS;IAEb,QAAQ,EAAE,QAAQ,CAAmB;IAErC,OAAO,UAAS;IAQhB,gBAAyB,MAAM,4BAM7B;IAEO,WAAW,SAAM;IACjB,KAAK,SAAM;IACpB,IAAa,eAAe,IAAI,CAAC,EAAE,CAMlC;IAED,IACI,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,EAQlC;IAED,IAAI,OAAO,IAAI,CAAC,EAAE,CAEjB;IAED,IACa,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,EAE1C;IAED,IAAa,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,CAEtC;IAED,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO;IAIhD;;OAEG;IACH,QAAQ,CAAC,MAAM,GAAI,OAAO,MAAM,KAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC,CAOzD;IAEF;;OAEG;IACH,sBAAsB,CAAC,MAAM,EAAE,MAAM;IAKrC;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,SAAS;IAQ1D;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI;IAQ9C;;;OAGG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,MAAM;IA8I5C;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM;IAOjD,UAAU,CAAC,OAAO,EAAE,cAAc;IAQlC,iBAAiB;IAKjB,oBAAoB;IAKpB,MAAM;CAqGhB"}