@nldd/design-system 0.8.80 → 0.8.83

package/dist/components/with-translations-DzAdFTK8.js

@@ -0,0 +1,48 @@
+import { t as __decorate } from "./decorate-BKn10QQi.js";
+import { property } from "lit/decorators.js";
+//#region src/utilities/with-translations.ts
+/**
+* Mixin that adds i18n support to a LitElement component.
+*
+* Provides a `translations` property for overriding defaults,
+* a merged translations object, and a `_t()` method for lookups.
+*
+* @example
+* ```ts
+* import { withTranslations } from '../../../utilities/with-translations.js';
+* import { myDefaults } from './my-component.i18n.js';
+* import type { MyTranslations } from './my-component.i18n.js';
+*
+* class MyComponent extends withTranslations<MyTranslations>(LitElement, myDefaults) {
+*   render() {
+*     return html`${this._t('my-key')}`;
+*   }
+* }
+* ```
+*/
+function withTranslations(Base, defaults) {
+	class TranslationsMixin extends Base {
+		constructor(..._args) {
+			super(..._args);
+			this.translations = {};
+			this._mergedTranslations = { ...defaults };
+		}
+		/** @internal */
+		_t(key, vars) {
+			let str = this._mergedTranslations[key] ?? String(key);
+			if (vars) for (const [k, v] of Object.entries(vars)) str = str.split(`{${k}}`).join(String(v));
+			return str;
+		}
+		willUpdate(changed) {
+			super.willUpdate(changed);
+			if (changed.has("translations")) this._mergedTranslations = {
+				...defaults,
+				...this.translations
+			};
+		}
+	}
+	__decorate([property({ type: Object })], TranslationsMixin.prototype, "translations", void 0);
+	return TranslationsMixin;
+}
+//#endregion
+export { withTranslations as t };

package/dist/css/variables.css

@@ -859,7 +859,21 @@
 	--semantics-content-color: light-dark(var(--primitives-color-neutral-800), var(--primitives-color-neutral-900));
 	--semantics-content-secondary-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
 	--semantics-content-secondary-opacity: 75%;
-	--semantics-content-contrast-color: oklch(from currentColor calc((0.65 - l) * infinity) 0 h);
+	/* Black or white on the current color, whichever reads. The threshold is the
+	   relative luminance where the two give the same contrast, Y = (sqrt(21) - 1) / 20,
+	   so the one that is picked always clears 4.5:1. Lightness would be the wrong
+	   input: it is perceptual, and it parts ways with luminance per hue. `/ 1` keeps
+	   the text opaque on a translucent fill. Replaced by contrast-color() below
+	   wherever the browser has it. */
+	--semantics-content-contrast-color: color(from currentColor xyz clamp(0, (0.1791 / y - 1) * infinity, 1) clamp(0, (0.1791 / y - 1) * infinity, 1) clamp(0, (0.1791 / y - 1) * infinity, 1) / 1);
+
+	/* The same question asked of the engine, which knows the rendered color
+	   rather than the one a formula can reach. Nested here so both halves of the
+	   answer stand together. */
+	@supports (color: contrast-color(red)) {
+		--semantics-content-contrast-color: contrast-color(currentColor);
+	}
+
 	--semantics-content-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
 	--semantics-content-critical-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
 	--semantics-content-warning-color: light-dark(var(--primitives-color-warning-600), var(--primitives-color-warning-650));
@@ -1806,9 +1820,19 @@
 	--components-list-item-indicator-inline-inset: var(--primitives-space-8);
 	--components-list-item-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
 	--components-list-item-is-hovered-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
+	--components-list-item-is-active-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--components-list-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
+	--components-list-item-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
 	--components-list-item-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
 	--components-list-item-is-selected-content-color: var(--primitives-color-neutral-1000);
+	--components-list-item-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
+	--components-list-item-is-selected-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
 	--components-list-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
+	--components-list-item-is-highlighted-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
+	--components-list-item-is-highlighted-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
 	--components-list-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
 
 	/* ## Menu */