aeico-components 0.1.2 → 0.1.4

package/dist/select.js

@@ -0,0 +1,99 @@
+import { S, S as S2 } from "./chunks/select.js";
+import { A as AeicoComponent } from "./chunks/aeico-component.js";
+import { prop, html } from "aeico";
+import { s as styleVariables } from "./chunks/variables.js";
+const style = ":host {\n  display: block;\n\n  --option-padding: 0.417em 0.667em;\n  --option-bg: transparent;\n  --option-bg-hover: var(--surface-raised);\n  --option-bg-selected: color-mix(in srgb, var(--color-primary) 12%, transparent);\n  --option-color: var(--color-text-main);\n  --option-color-disabled: var(--color-text-disabled);\n  --option-color-selected: var(--color-primary);\n  --option-font-size: 1em;\n  --option-transition: background 0.1s;\n}\n\n.option-item {\n  padding: var(--option-padding);\n  font-size: var(--option-font-size);\n  color: var(--option-color);\n  background: var(--option-bg);\n  cursor: pointer;\n  transition: var(--option-transition);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n}\n\n:host(:hover:not([disabled])) .option-item {\n  background: var(--option-bg-hover);\n}\n\n:host([selected]) .option-item {\n  background: var(--option-bg-selected);\n  color: var(--option-color-selected);\n}\n\n:host([disabled]) .option-item {\n  color: var(--option-color-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n\n";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1, key = __decoratorStrings[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), 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 _selected_dec, _disabled_dec, _label_dec, _value_dec, _a, _init, _value, _label, _disabled, _selected;
+class SelectOption extends (_a = AeicoComponent, _value_dec = [prop({ type: String })], _label_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _selected_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _label, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _selected, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __publicField(this, "_handleClick", (e) => {
+      var _a2;
+      if (this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      const displayLabel = this.label || ((_a2 = this.textContent) == null ? void 0 : _a2.trim()) || "";
+      this.emit("selectoption", { detail: { value: this.value ?? "", label: displayLabel } });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen("click", this._handleClick);
+  }
+  render() {
+    return html(({ div, slot }) => {
+      div({ className: "option-item" }, () => {
+        slot();
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_value = /* @__PURE__ */ new WeakMap();
+_label = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_selected = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, SelectOption, _value);
+__decorateElement(_init, 4, "label", _label_dec, SelectOption, _label);
+__decorateElement(_init, 4, "disabled", _disabled_dec, SelectOption, _disabled);
+__decorateElement(_init, 4, "selected", _selected_dec, SelectOption, _selected);
+__decoratorMetadata(_init, SelectOption);
+__publicField(SelectOption, "tagName", "select-option");
+__publicField(SelectOption, "styles", [styleVariables, style]);
+SelectOption.register();
+export {
+  S as Select,
+  SelectOption,
+  S2 as default
+};
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../src/select/select-option.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport style from '../styles/components/select-option.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport { prop } from 'aeico';\n\nclass SelectOption extends AeicoComponent {\n  static tagName = 'select-option';\n\n  @prop({ type: String })\n  accessor value: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean | undefined = false;\n\n  protected static styles = [variables, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    const displayLabel = this.label || this.textContent?.trim() || '';\n    this.emit('selectoption', { detail: { value: this.value ?? '', label: displayLabel } });\n  };\n\n  render() {\n    return html(({ div, slot }) => {\n      div({ className: 'option-item' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nSelectOption.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select-option': SelectOption;\n  }\n}\n\nexport default SelectOption;\nexport type SelectOptionProps = InferProps<typeof SelectOption>;\n"],"names":["_a","variables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,eAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,WAAA;AAOA,MAAM,sBAAqB,KAAA,gBAGzB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAZE,IAAe;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAgC,kBAAzC,OAAA,IAAA,MAAyC,KAAA,CAAA,GAAzC,kBAAA,OAAA,IAAA,IAAA;AASA,kBAAA,MAAQ,gBAAe,CAAC,MAAmB;;AACzC,UAAI,KAAK,UAAU;AACjB,UAAE,gBAAA;AAEF;AAAA,MACF;AAEA,YAAM,eAAe,KAAK,WAASA,MAAA,KAAK,gBAAL,gBAAAA,IAAkB,WAAU;AAC/D,WAAK,KAAK,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,aAAA,EAAa,CAAG;AAAA,IACxF,CAAA;AAAA,EAAA;AAAA,EAdA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,OAAO,SAAS,KAAK,YAAY;AAAA,EACxC;AAAA,EAaA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,WAAW,cAAA,GAAiB,MAAM;AACtC,aAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAxCA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAHI,cAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YANI,cAOK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eATI,cAUK,SAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAZI,cAaK,SAAA;AAbX,oBAAA,OAAM,YAAA;AACJ,cADI,cACG,WAAU,eAAA;AAcjB,cAfI,cAea,UAAS,CAACC,gBAAW,KAAK,CAAA;AA2B7C,aAAa,SAAA;"}

package/dist/slider.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const slider = require("./chunks/slider.cjs");
+exports.Slider = slider.Slider;
+exports.default = slider.Slider;
+//# sourceMappingURL=slider.cjs.map

package/dist/slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/slider.js

@@ -0,0 +1,6 @@
+import { S, S as S2 } from "./chunks/slider.js";
+export {
+  S as Slider,
+  S2 as default
+};
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/switch.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const _switch = require("./chunks/switch.cjs");
+exports.Switch = _switch.Switch;
+exports.default = _switch.Switch;
+//# sourceMappingURL=switch.cjs.map

package/dist/switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/switch.js

@@ -0,0 +1,6 @@
+import { S, S as S2 } from "./chunks/switch.js";
+export {
+  S as Switch,
+  S2 as default
+};
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/tabs.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const tabPanel = require("./chunks/tab-panel.cjs");
+exports.Tab = tabPanel.Tab;
+exports.TabPanel = tabPanel.TabPanel;
+exports.Tabs = tabPanel.Tabs;
+exports.default = tabPanel.Tabs;
+//# sourceMappingURL=tabs.cjs.map

package/dist/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/tabs.js

@@ -0,0 +1,8 @@
+import { T, a, b, b as b2 } from "./chunks/tab-panel.js";
+export {
+  T as Tab,
+  a as TabPanel,
+  b as Tabs,
+  b2 as default
+};
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/tag.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const tag = require("./chunks/tag.cjs");
+exports.default = tag.Tag;
+//# sourceMappingURL=tag.cjs.map

package/dist/tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/tag.js

@@ -0,0 +1,5 @@
+import { T } from "./chunks/tag.js";
+export {
+  T as default
+};
+//# sourceMappingURL=tag.js.map

package/dist/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/text-input.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const textInput = require("./chunks/text-input.cjs");
+exports.TextInput = textInput.TextInput;
+exports.default = textInput.TextInput;
+//# sourceMappingURL=text-input.cjs.map

package/dist/text-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/text-input.js

@@ -0,0 +1,6 @@
+import { T, T as T2 } from "./chunks/text-input.js";
+export {
+  T as TextInput,
+  T2 as default
+};
+//# sourceMappingURL=text-input.js.map

package/dist/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -1,63 +1,75 @@
-{
-  "name": "aeico-components",
-  "version": "0.1.2",
-  "description": "Built-in UI components for the Aeico Web Components framework",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/*.tsbuildinfo",
-    "src"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "vite build && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
-    "dev": "vite build --watch",
-    "dev:example": "vite --config vite.example.config.ts",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
-    "lint:fix": "eslint \"src/**/*.ts\" \"test/**/*.ts\" --fix",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\"",
-    "test": "web-test-runner --config web-test-runner.config.mjs",
-    "test:watch": "web-test-runner --config web-test-runner.config.mjs --watch",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "web-components",
-    "custom-elements",
-    "ui",
-    "components",
-    "aeico"
-  ],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "aeico": "^0.1.2",
-    "aeico-localize": "^0.1.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@types/mocha": "^10.0.10",
-    "@web/dev-server-esbuild": "^1.0.5",
-    "@web/test-runner": "^0.20.2",
-    "@web/test-runner-playwright": "^0.11.1",
-    "eslint": "^10.1.0",
-    "eslint-config-prettier": "^10.1.8",
-    "globals": "^16.0.0",
-    "prettier": "^3.8.1",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.57.1",
-    "vite": "^6.2.0"
-  }
-}
+{
+  "name": "aeico-components",
+  "version": "0.1.4",
+  "description": "Built-in UI components for the Aeico Web Components framework",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/types/*/index.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/*.tsbuildinfo",
+    "src"
+  ],
+  "sideEffects": [
+    "./dist/*.js",
+    "./dist/*.cjs",
+    "./dist/chunks/*.js",
+    "./dist/chunks/*.cjs"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
+    "dev": "vite build --watch",
+    "dev:example": "vite --config vite.example.config.ts",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
+    "lint:fix": "eslint \"src/**/*.ts\" \"test/**/*.ts\" --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "test": "web-test-runner --config web-test-runner.config.mjs",
+    "test:watch": "web-test-runner --config web-test-runner.config.mjs --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "ui",
+    "components",
+    "aeico"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "aeico": "^0.1.3",
+    "aeico-localize": "^0.1.1"
+  },
+  "devDependencies": {
+    "aeico": "^0.1.3",
+    "aeico-localize": "^0.1.1",
+    "@eslint/js": "^10.0.1",
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@types/mocha": "^10.0.10",
+    "@web/dev-server-esbuild": "^1.0.5",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-playwright": "^0.11.1",
+    "eslint": "^10.1.0",
+    "eslint-config-prettier": "^10.1.8",
+    "globals": "^16.0.0",
+    "prettier": "^3.8.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.57.1",
+    "vite": "^6.2.0"
+  }
+}

package/src/styles/color.css

@@ -1,117 +1,117 @@
-:host {
-  --color-solid:           var(--color-gray);
-  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));
-  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-gray);
-  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));
-  --color-accent:          var(--color-text-muted);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--border-subtle);
-  --color-subtle-hover:    var(--border-default);
-  --color-bg-subtle:       var(--border-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--border-default);
-}
-
-:host([color="primary"]) {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-primary);
-  --color-accent:          var(--color-text-link);
-  --color-accent-hover:    var(--color-text-link-hover);
-  --color-subtle:          var(--color-primary-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
-}
-
-:host([color="secondary"]) {
-  --color-solid:           var(--color-secondary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-secondary-hover);
-  --color-accent:          var(--color-secondary-text-emphasis);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          rgb(from var(--slate) r g b / 0.06);
-  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);
-  --color-bg-subtle:       var(--color-secondary-bg-subtle);
-  --color-text-subtle:     var(--color-secondary-text-emphasis);
-  --color-border-subtle:   var(--color-secondary-border-subtle);
-}
-
-:host([color="success"]) {
-  --color-solid:           var(--color-success);
-  --color-on-solid:        white;
-  --color-border:          var(--color-success);
-  --color-accent:          var(--color-success-text-emphasis);
-  --color-accent-hover:    var(--color-success-hover);
-  --color-subtle:          var(--color-success-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);
-  --color-bg-subtle:       var(--color-success-bg-subtle);
-  --color-text-subtle:     var(--color-success-text-emphasis);
-  --color-border-subtle:   var(--color-success-border-subtle);
-}
-
-:host([color="danger"]) {
-  --color-solid:           var(--color-danger);
-  --color-on-solid:        white;
-  --color-border:          var(--color-danger);
-  --color-accent:          var(--color-danger-text-emphasis);
-  --color-accent-hover:    var(--color-danger-hover);
-  --color-subtle:          var(--color-danger-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);
-  --color-bg-subtle:       var(--color-danger-bg-subtle);
-  --color-text-subtle:     var(--color-danger-text-emphasis);
-  --color-border-subtle:   var(--color-danger-border-subtle);
-}
-
-:host([color="warning"]) {
-  --color-solid:           var(--color-warning);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--color-warning);
-  --color-accent:          var(--color-warning-text-emphasis);
-  --color-accent-hover:    var(--color-warning-hover);
-  --color-subtle:          var(--color-warning-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);
-  --color-bg-subtle:       var(--color-warning-bg-subtle);
-  --color-text-subtle:     var(--color-warning-text-emphasis);
-  --color-border-subtle:   var(--color-warning-border-subtle);
-}
-
-:host([color="info"]) {
-  --color-solid:           var(--color-info);
-  --color-on-solid:        white;
-  --color-border:          var(--color-info);
-  --color-accent:          var(--color-info-text-emphasis);
-  --color-accent-hover:    var(--color-info-hover);
-  --color-subtle:          var(--color-info-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);
-  --color-bg-subtle:       var(--color-info-bg-subtle);
-  --color-text-subtle:     var(--color-info-text-emphasis);
-  --color-border-subtle:   var(--color-info-border-subtle);
-}
-
-:host([color="light"]) {
-  --color-solid:           var(--light);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--border-hover);
-  --color-subtle:          var(--color-light-bg-subtle);
-  --color-subtle-hover:    var(--color-light-border-subtle);
-  --color-bg-subtle:       var(--color-light-bg-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--color-light-border-subtle);
-}
-
-:host([color="dark"]) {
-  --color-solid:           var(--dark-500);
-  --color-on-solid:        white;
-  --color-border:          var(--dark-500);
-  --color-accent:          var(--color-text-main);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--color-dark-bg-subtle);
-  --color-subtle-hover:    var(--color-dark-border-subtle);
-  --color-bg-subtle:       var(--color-dark-bg-subtle);
-  --color-text-subtle:     var(--color-text-main);
-  --color-border-subtle:   var(--color-dark-border-subtle);
-}
+:host {
+  --color-solid:           var(--color-gray);
+  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));
+  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));
+  --color-on-solid:        var(--color-text-main);
+  --color-border:          var(--color-gray);
+  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));
+  --color-accent:          var(--color-text-muted);
+  --color-accent-hover:    var(--color-text-main);
+  --color-subtle:          var(--border-subtle);
+  --color-subtle-hover:    var(--border-default);
+  --color-bg-subtle:       var(--border-subtle);
+  --color-text-subtle:     var(--color-text-muted);
+  --color-border-subtle:   var(--border-default);
+}
+
+:host([color="primary"]) {
+  --color-solid:           var(--color-primary);
+  --color-on-solid:        white;
+  --color-border:          var(--color-primary);
+  --color-accent:          var(--color-text-link);
+  --color-accent-hover:    var(--color-text-link-hover);
+  --color-subtle:          var(--color-primary-bg-subtle);
+  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);
+  --color-bg-subtle:       var(--color-primary-bg-subtle);
+  --color-text-subtle:     var(--color-primary-text-emphasis);
+  --color-border-subtle:   var(--color-primary-border-subtle);
+}
+
+:host([color="secondary"]) {
+  --color-solid:           var(--color-secondary);
+  --color-on-solid:        white;
+  --color-border:          var(--color-secondary-hover);
+  --color-accent:          var(--color-secondary-text-emphasis);
+  --color-accent-hover:    var(--color-text-main);
+  --color-subtle:          rgb(from var(--slate) r g b / 0.06);
+  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);
+  --color-bg-subtle:       var(--color-secondary-bg-subtle);
+  --color-text-subtle:     var(--color-secondary-text-emphasis);
+  --color-border-subtle:   var(--color-secondary-border-subtle);
+}
+
+:host([color="success"]) {
+  --color-solid:           var(--color-success);
+  --color-on-solid:        white;
+  --color-border:          var(--color-success);
+  --color-accent:          var(--color-success-text-emphasis);
+  --color-accent-hover:    var(--color-success-hover);
+  --color-subtle:          var(--color-success-bg-subtle);
+  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);
+  --color-bg-subtle:       var(--color-success-bg-subtle);
+  --color-text-subtle:     var(--color-success-text-emphasis);
+  --color-border-subtle:   var(--color-success-border-subtle);
+}
+
+:host([color="danger"]) {
+  --color-solid:           var(--color-danger);
+  --color-on-solid:        white;
+  --color-border:          var(--color-danger);
+  --color-accent:          var(--color-danger-text-emphasis);
+  --color-accent-hover:    var(--color-danger-hover);
+  --color-subtle:          var(--color-danger-bg-subtle);
+  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);
+  --color-bg-subtle:       var(--color-danger-bg-subtle);
+  --color-text-subtle:     var(--color-danger-text-emphasis);
+  --color-border-subtle:   var(--color-danger-border-subtle);
+}
+
+:host([color="warning"]) {
+  --color-solid:           var(--color-warning);
+  --color-on-solid:        var(--gray-900);
+  --color-border:          var(--color-warning);
+  --color-accent:          var(--color-warning-text-emphasis);
+  --color-accent-hover:    var(--color-warning-hover);
+  --color-subtle:          var(--color-warning-bg-subtle);
+  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);
+  --color-bg-subtle:       var(--color-warning-bg-subtle);
+  --color-text-subtle:     var(--color-warning-text-emphasis);
+  --color-border-subtle:   var(--color-warning-border-subtle);
+}
+
+:host([color="info"]) {
+  --color-solid:           var(--color-info);
+  --color-on-solid:        white;
+  --color-border:          var(--color-info);
+  --color-accent:          var(--color-info-text-emphasis);
+  --color-accent-hover:    var(--color-info-hover);
+  --color-subtle:          var(--color-info-bg-subtle);
+  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);
+  --color-bg-subtle:       var(--color-info-bg-subtle);
+  --color-text-subtle:     var(--color-info-text-emphasis);
+  --color-border-subtle:   var(--color-info-border-subtle);
+}
+
+:host([color="light"]) {
+  --color-solid:           var(--light);
+  --color-on-solid:        var(--gray-900);
+  --color-border:          var(--border-hover);
+  --color-subtle:          var(--color-light-bg-subtle);
+  --color-subtle-hover:    var(--color-light-border-subtle);
+  --color-bg-subtle:       var(--color-light-bg-subtle);
+  --color-text-subtle:     var(--color-text-muted);
+  --color-border-subtle:   var(--color-light-border-subtle);
+}
+
+:host([color="dark"]) {
+  --color-solid:           var(--dark-500);
+  --color-on-solid:        white;
+  --color-border:          var(--dark-500);
+  --color-accent:          var(--color-text-main);
+  --color-accent-hover:    var(--color-text-main);
+  --color-subtle:          var(--color-dark-bg-subtle);
+  --color-subtle-hover:    var(--color-dark-border-subtle);
+  --color-bg-subtle:       var(--color-dark-bg-subtle);
+  --color-text-subtle:     var(--color-text-main);
+  --color-border-subtle:   var(--color-dark-border-subtle);
+}