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

package/dist/lib/FormElement/index.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-export declare class FormElement<V = unknown> extends LitElement {
+export declare class FormElement<V = string> extends LitElement {
     #private;
     name: string;
     hiddenLabel: string;
@@ -7,6 +7,7 @@ export declare class FormElement<V = unknown> extends LitElement {
     readonly: boolean;
     internals_: ElementInternals;
     static readonly formAssociated = true;
+    get form(): HTMLFormElement | null;
     set value(value: V | null);
     get value(): V | null;
     /**

package/dist/lib/FormElement/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/FormElement/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,qBAAa,WAAW,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,UAAU;;IAC1C,IAAI,SAAM;IACmB,WAAW,SAAM;IAC7B,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAC9C,UAAU,mBAA0B;IAGpC,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,IACI,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAKxB;IAED,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAEpB;IAED;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI;CAiBxD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/FormElement/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,qBAAa,WAAW,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,UAAU;;IACzC,IAAI,SAAM;IACmB,WAAW,SAAM;IAC7B,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAC9C,UAAU,mBAA0B;IAGpC,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,IAAI,IAAI,2BAEP;IAED,IAWI,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAKxB;IAED,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAEpB;IAED;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI;CAiBxD"}

package/dist/lib/FormElement/index.js

@@ -0,0 +1,95 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _value;
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+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 _FormElement = class _FormElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value);
+    this.name = "";
+    this.hiddenLabel = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.internals_ = this.attachInternals();
+    __privateSet(this, _value, null);
+  }
+  get form() {
+    return this.internals_.form;
+  }
+  set value(value) {
+    if (__privateGet(this, _value) !== value) {
+      __privateSet(this, _value, value);
+      this.internals_.setFormValue(this.valueToFormValue(value));
+    }
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  /**
+   * Override this function to customize how the value is converted to a form value;
+   */
+  valueToFormValue(value) {
+    switch (true) {
+      /* eslint-disable eqeqeq -- loose equality will also return null for undefined */
+      case value == null:
+        return null;
+      case (typeof value === "string" || value instanceof File):
+        return value;
+      case typeof value === "object":
+        try {
+          return JSON.stringify(value);
+        } catch {
+          return null;
+        }
+      default:
+        return String(value);
+    }
+  }
+};
+_value = new WeakMap();
+_FormElement.formAssociated = true;
+let FormElement = _FormElement;
+__decorateClass([
+  property()
+], FormElement.prototype, "name", 2);
+__decorateClass([
+  property({ attribute: "hidden-label" })
+], FormElement.prototype, "hiddenLabel", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FormElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FormElement.prototype, "readonly", 2);
+__decorateClass([
+  property({
+    converter: (value) => {
+      if (typeof value !== "string") {
+        console.error(
+          `Reimplement value setter with property decorator. The inherited implementation only supports string values by design.`
+        );
+        return null;
+      }
+      return value;
+    }
+  })
+], FormElement.prototype, "value", 1);
+export {
+  FormElement
+};

package/dist/lib/LocalizationMixin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/LocalizationMixin/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAIhD;;;GAGG;AACH,OAAO,OAAO,0BAA0B;IACtC,MAAM,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IACrC,IAAI,YAAY,IAAI,OAAO,0BAA0B,CAAC,YAAY,CAAC;IACnE,IAAI,IAAI,IAAI,MAAM,CAAC;IACnB,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,EAAE,kBAA0B,KAwCpE,WAAW,CAAC,0BAA0B,CAAC,GAAG,CAC5E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/LocalizationMixin/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAIhD;;;GAGG;AACH,OAAO,OAAO,0BAA0B;IACtC,MAAM,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IACrC,IAAI,YAAY,IAAI,OAAO,0BAA0B,CAAC,YAAY,CAAC;IACnE,IAAI,IAAI,IAAI,MAAM,CAAC;IACnB,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,EAAE,kBAA0B,KAyCpE,WAAW,CAAC,0BAA0B,CAAC,GAAG,CAC5E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/lib/LocalizationMixin/index.js

@@ -0,0 +1,64 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+import { property } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc(target, key);
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LANG = "en";
+const LocalizationMixin = (superClass, defaultLang = DEFAULT_LANG) => {
+  var _lang, _a;
+  const _LocalizationMixinClass = (_a = class extends superClass {
+    constructor() {
+      super(...arguments);
+      // Static because not dependent on the instance
+      __privateAdd(this, _lang);
+    }
+    get DEFAULT_LANG() {
+      return _a.DEFAULT_LANG;
+    }
+    get lang() {
+      return __privateGet(this, _lang) || this.DEFAULT_LANG;
+    }
+    set lang(value) {
+      if (value && __privateGet(this, _lang) !== value) {
+        __privateSet(this, _lang, value);
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const LANG_ATTR = "lang";
+      let lang = __privateGet(this, _lang) || this.getAttribute(LANG_ATTR);
+      if (!lang) {
+        let element = this.parentElement;
+        while (element) {
+          if (element.hasAttribute(LANG_ATTR)) {
+            lang = element.getAttribute(LANG_ATTR) || lang;
+            break;
+          }
+          element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+        }
+      }
+      this.lang = lang || document.documentElement.lang || this.DEFAULT_LANG;
+    }
+  }, _lang = new WeakMap(), _a.DEFAULT_LANG = defaultLang, _a);
+  __decorateClass([
+    property()
+  ], _LocalizationMixinClass.prototype, "lang");
+  let LocalizationMixinClass = _LocalizationMixinClass;
+  return LocalizationMixinClass;
+};
+export {
+  LocalizationMixin as default
+};

package/dist/lib/converters/index.d.ts

@@ -2,5 +2,9 @@ import { ComplexAttributeConverter } from 'lit';
 type AttributeConverterFrom<T> = NonNullable<ComplexAttributeConverter<T>['fromAttribute']>;
 export declare const arrayFromTokenList: AttributeConverterFrom<Array<unknown> | null>;
 export declare const arrayFromCommaList: AttributeConverterFrom<Array<unknown> | null>;
+export declare const allowedValuesConverter: <T extends string, const AllowedValues extends readonly T[]>(allowedValues: AllowedValues, defaultValue?: AllowedValues[number]) => {
+    fromAttribute: (value: string | null) => AllowedValues[number] | undefined extends undefined ? T | undefined : T;
+    toAttribute: (value: AllowedValues[number] | undefined extends undefined ? T | undefined : T) => string;
+};
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/converters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/converters/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,KAAK,CAAC;AAErD,KAAK,sBAAsB,CAAC,CAAC,IAAI,WAAW,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;AAqB5F,eAAO,MAAM,kBAAkB,EAAE,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAA+B,CAAC;AAC7G,eAAO,MAAM,kBAAkB,EAAE,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/converters/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,KAAK,CAAC;AAErD,KAAK,sBAAsB,CAAC,CAAC,IAAI,WAAW,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;AAqB5F,eAAO,MAAM,kBAAkB,EAAE,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAA+B,CAAC;AAC7G,eAAO,MAAM,kBAAkB,EAAE,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAA6B,CAAC;AAE3G,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,MAAM,EAAE,KAAK,CAAC,aAAa,SAAS,SAAS,CAAC,EAAE,EAC/F,eAAe,aAAa,EAC5B,eAAe,aAAa,CAAC,MAAM,CAAC;2BAIX,MAAM,GAAG,IAAI;qGAWF,MAAM;CAE3C,CAAC"}

package/dist/lib/converters/index.js

@@ -0,0 +1,35 @@
+const createArrayConverter = (delimiter) => (value) => {
+  if (value === null || value === "") {
+    return null;
+  }
+  const split = (value2) => value2.trim().split(delimiter).map((i) => i.trim());
+  try {
+    const json = value ? JSON.parse(value) : value;
+    return Array.isArray(json) ? json : null;
+  } catch {
+    return split(value);
+  }
+};
+const arrayFromTokenList = createArrayConverter(/\s+/);
+const arrayFromCommaList = createArrayConverter(",");
+const allowedValuesConverter = (allowedValues, defaultValue) => {
+  return {
+    fromAttribute: (value) => {
+      if (value && allowedValues.includes(value)) {
+        return value;
+      }
+      if (defaultValue !== void 0) {
+        console.warn(`Invalid value "${value}". Using default "${defaultValue}".`);
+        return defaultValue;
+      }
+      console.warn(`Invalid value "${value}".`);
+      return void 0;
+    },
+    toAttribute: (value) => value ?? ""
+  };
+};
+export {
+  allowedValuesConverter,
+  arrayFromCommaList,
+  arrayFromTokenList
+};

package/dist/lib/sr-only/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import('lit').CSSResult;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/sr-only/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/sr-only/index.ts"],"names":[],"mappings":";AAEA,wBAaE"}

package/dist/lib/sr-only/index.js

@@ -0,0 +1,18 @@
+import { css } from "lit";
+const srOnly = css`
+  /* stylelint-disable */
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+`;
+export {
+  srOnly as default
+};

package/dist/nl-99gBQbne.js

@@ -0,0 +1,19 @@
+const nl = {
+  red: "rood",
+  orange: "oranje",
+  yellow: "geel",
+  green: "groen",
+  blue: "blauw",
+  purple: "paars",
+  pink: "roze",
+  brown: "bruin",
+  black: "zwart",
+  white: "wit",
+  gray: "grijs",
+  cyan: "cyaan",
+  magenta: "magenta",
+  indigo: "indigo"
+};
+export {
+  nl as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nl-design-system-community/clippy-components",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -25,32 +25,35 @@
   },
   "dependencies": {
     "@amsterdam/design-system-css": "2.2.0",
-    "@nl-design-system-candidate/button-css": "1.0.0",
-    "@nl-design-system-candidate/code-css": "2.0.3",
-    "@nl-design-system-candidate/color-sample-css": "1.0.4",
+    "@nl-design-system-candidate/button-css": "1.1.0",
+    "@nl-design-system-candidate/code-css": "2.0.5",
+    "@nl-design-system-candidate/color-sample-css": "1.0.5",
     "@nl-design-system-candidate/heading-css": "1.1.3",
-    "@tabler/icons": "3.36.0",
-    "@utrecht/button-css": "3.0.1",
+    "@tabler/icons": "3.40.0",
+    "@utrecht/button-css": "3.1.0",
     "@utrecht/combobox-css": "2.0.1",
-    "@utrecht/listbox-css": "2.0.1",
-    "@utrecht/textbox-css": "3.0.1",
-    "colorjs.io": "0.6.0-beta.3",
+    "@utrecht/listbox-css": "2.1.0",
+    "@utrecht/textbox-css": "3.1.0",
+    "colorjs.io": "0.6.1",
+    "debounce": "3.0.0",
+    "dequal": "2.0.3",
     "lit": "3.3.2",
     "memoize": "10.2.0"
   },
   "devDependencies": {
     "@types/dlv": "1.1.5",
     "@types/react": "18.3.23",
-    "@vitest/browser-playwright": "4.0.16",
-    "@vitest/coverage-v8": "4.0.16",
-    "glob": "13.0.0",
-    "playwright": "1.57.0",
-    "postcss-lit": "1.3.1",
-    "rimraf": "6.1.2",
+    "@vitest/browser-playwright": "4.1.0",
+    "@vitest/coverage-v8": "4.1.0",
+    "glob": "13.0.6",
+    "playwright": "1.58.2",
+    "postcss-lit": "1.4.1",
+    "rimraf": "6.1.3",
     "typescript": "5.9.3",
     "vite": "7.3.0",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "4.0.16"
+    "vitest": "4.1.0",
+    "@nl-design-system-community/design-tokens-schema": "2.0.0"
   },
   "scripts": {
     "dev": "vite build --watch --mode development",

package/dist/decorators-BGpMqJ7V.js

@@ -1,7 +0,0 @@
-const n = (s) => (t) => {
-  const e = globalThis.customElements;
-  e && !e.get(s) && e.define(s, t);
-};
-export {
-  n as s
-};

package/dist/en-B-D8DBsf.js

@@ -1,4 +0,0 @@
-import { C as o } from "./index-CtreqNZ6.js";
-export {
-  o as default
-};