ranui 0.2.0-alpha.2 → 0.2.0-alpha.3

package/docs/style-tokens-public.md

@@ -3,18 +3,18 @@
 This file is auto-generated by `bin/generate-style-docs.ts`.
 It is a filtered, public-facing style API view (structural/internal tokens excluded).
 
-Generated at: 2026-06-28T10:37:36.381Z
+Generated at: 2026-07-11T05:42:37.197Z
 
 ## Components
 
 ### `button`
 
-- Tokens: 47
+- Tokens: 54
 - Parts: 2
 
 #### Tokens
 
-<!-- layers: semantic: 9 · skin: 2 · component: 36 -->
+<!-- layers: semantic: 15 · skin: 2 · component: 36 · internal: 1 -->
 
 - `--ran-btn-after-background-image`
 - `--ran-btn-after-opacity`
@@ -54,11 +54,18 @@ Generated at: 2026-06-28T10:37:36.381Z
 - `--ran-btn-user-select`
 - `--ran-color-bg-elevated`
 - `--ran-color-border`
+- `--ran-color-border-hover`
+- `--ran-color-contrast-`
+- `--ran-color-contrast-bg`
+- `--ran-color-contrast-bg-active`
+- `--ran-color-contrast-bg-hover`
+- `--ran-color-contrast-text`
 - `--ran-color-danger`
 - `--ran-color-primary`
 - `--ran-color-primary-active`
 - `--ran-color-primary-hover`
 - `--ran-color-text`
+- `--ran-gray-alpha-400`
 - `--ran-motion-duration-base`
 - `--ran-radius-sm`
 - `--ran-skin-font-family`
@@ -71,27 +78,33 @@ Generated at: 2026-06-28T10:37:36.381Z
 
 ### `card`
 
-- Tokens: 15
+- Tokens: 21
 - Parts: 7
 
 #### Tokens
 
-<!-- layers: semantic: 5 · skin: 1 · internal: 9 -->
+<!-- layers: semantic: 8 · skin: 1 · internal: 12 -->
 
 - `--ran-card-background`
+- `--ran-card-border-color`
 - `--ran-card-description-color`
 - `--ran-card-description-font-size`
 - `--ran-card-gap`
+- `--ran-card-hover-border-color`
+- `--ran-card-hover-shadow`
 - `--ran-card-radius`
 - `--ran-card-shadow`
 - `--ran-card-title-color`
 - `--ran-card-title-font-size`
 - `--ran-card-title-font-weight`
-- `--ran-color-bg-muted`
+- `--ran-color-bg`
 - `--ran-color-border`
+- `--ran-color-border-hover`
 - `--ran-color-text`
 - `--ran-color-text-secondary`
+- `--ran-motion-duration-base`
 - `--ran-radius-md`
+- `--ran-shadow-elevated`
 - `--ran-skin-border-style`
 
 #### Parts
@@ -161,12 +174,12 @@ Generated at: 2026-06-28T10:37:36.381Z
 
 ### `colorpicker`
 
-- Tokens: 14
+- Tokens: 15
 - Parts: 2
 
 #### Tokens
 
-<!-- layers: semantic: 5 · component: 6 · internal: 3 -->
+<!-- layers: semantic: 5 · component: 7 · internal: 3 -->
 
 - `--ran-color-bg-elevated`
 - `--ran-color-border`
@@ -176,6 +189,7 @@ Generated at: 2026-06-28T10:37:36.381Z
 - `--ran-colorpicker-border`
 - `--ran-colorpicker-border-hover`
 - `--ran-colorpicker-border-radius`
+- `--ran-colorpicker-disabled-opacity`
 - `--ran-colorpicker-transition`
 - `--ran-gray-500`
 - `--ran-gray-alpha-100`
@@ -878,3 +892,36 @@ Generated at: 2026-06-28T10:37:36.381Z
 #### Parts
 
 - `content`
+
+### `theme-switch`
+
+- Tokens: 19
+- Parts: 0
+
+#### Tokens
+
+<!-- layers: semantic: 7 · skin: 1 · internal: 11 -->
+
+- `--ran-color-bg-hover`
+- `--ran-color-border`
+- `--ran-color-primary`
+- `--ran-color-text`
+- `--ran-color-text-secondary`
+- `--ran-motion-duration-fast`
+- `--ran-radius-full`
+- `--ran-skin-border-style`
+- `--ran-theme-switch-`
+- `--ran-theme-switch-active-background`
+- `--ran-theme-switch-active-color`
+- `--ran-theme-switch-background`
+- `--ran-theme-switch-border-color`
+- `--ran-theme-switch-button-size`
+- `--ran-theme-switch-color`
+- `--ran-theme-switch-gap`
+- `--ran-theme-switch-hover-color`
+- `--ran-theme-switch-icon-size`
+- `--ran-theme-switch-radius`
+
+#### Parts
+
+- (none)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.3",
   "description": "UI Component library based on `Web Component`",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -65,6 +65,7 @@
       "require": "./dist/index.cjs"
     },
     "./style": "./dist/ranui.css",
+    "./fonts": "./dist/fonts/fonts.css",
     "./builder": {
       "types": "./dist/builder.d.ts",
       "import": "./dist/builder.js",
@@ -200,6 +201,11 @@
       "import": "./dist/link.js",
       "require": "./dist/index.cjs"
     },
+    "./theme-switch": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/theme-switch.js",
+      "require": "./dist/index.cjs"
+    },
     "./type": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
@@ -217,18 +223,18 @@
     }
   },
   "devDependencies": {
-    "@argos-ci/playwright": "^7.1.1",
+    "@argos-ci/playwright": "^7.3.0",
     "@playwright/test": "^1.61.1",
-    "@types/node": "^26.0.1",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@types/node": "^26.1.1",
+    "@vitest/coverage-v8": "^4.1.10",
     "jsdom": "^29.1.1",
     "less": "^4.6.7",
     "rollup-plugin-visualizer": "^7.0.1",
     "svgo": "^4.0.1",
-    "tsx": "^4.22.4",
+    "tsx": "^4.23.0",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "vitest": "^4.1.9"
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10"
   },
   "dependencies": {
     "ranuts": "^0.2.0-alpha.0"
@@ -243,9 +249,9 @@
     "build:iife": "tsx ./bin/build-iife.ts",
     "prepublish": "npm run build",
     "test": "sh ./bin/test.sh",
-    "test:unit": "NODE_OPTIONS=--max-old-space-size=4096 vitest run",
-    "test:unit:watch": "NODE_OPTIONS=--max-old-space-size=4096 vitest",
-    "test:unit:coverage": "NODE_OPTIONS=--max-old-space-size=4096 vitest run --coverage",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:unit:coverage": "vitest run --coverage",
     "test:ssr": "vitest run --config vitest.config.ssr.ts",
     "test:ssr:watch": "vitest --config vitest.config.ssr.ts",
     "test:all": "pnpm -F ranuts build && npm run tsc && npm run test:unit && npm run test:ssr",

package/dist/card-DQUJoDUQ.js

@@ -1,60 +0,0 @@
-import { c as d, d as o, l as a, s as c, u as i } from "./utils-D4pPF77E.js";
-import { i as r, p as s } from "./factory-BdsO0dEW.js";
-import { a as l, n as h } from "./ssr-DSGwPtEd.js";
-var p = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-card-display, block);box-sizing:border-box;min-height:var(--ran-card-min-height, 0)}.ran-card{display:grid;align-content:start;gap:var(--ran-card-gap, 14px);height:100%;min-width:0;padding:var(--ran-card-padding, 16px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-color-border, #d9d9d9);border-radius:var(--ran-card-radius, var(--ran-radius-md));background:var(--ran-card-background, var(--ran-color-bg-muted));box-shadow:var(--ran-card-shadow, none);box-sizing:border-box}.ran-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ran-card-title-area{flex:1;min-width:0}.ran-card-title{margin:0;color:var(--ran-card-title-color, var(--ran-color-text));font-size:var(--ran-card-title-font-size, 16px);font-weight:var(--ran-card-title-font-weight, 600);line-height:1.3}.ran-card-title:empty{display:none}.ran-card-description{margin:4px 0 0;color:var(--ran-card-description-color, var(--ran-color-text-secondary));font-size:var(--ran-card-description-font-size, 14px);line-height:1.5}.ran-card-description:empty{display:none}.ran-card-body,.ran-card-footer{min-width:0}:host(:not([title]):not([description])) .ran-card-header{display:none}", g = class extends h {
-  _shadowDom;
-  _titleEl;
-  _descriptionEl;
-  _headerEl;
-  _footerEl;
-  static get observedAttributes() {
-    return [
-      "title",
-      "description",
-      "sheet"
-    ];
-  }
-  constructor() {
-    super(), this._shadowDom = d(this, p);
-    const t = c(this._shadowDom, ".ran-card", () => r().class("ran-card").attr("part", "card").children(r().class("ran-card-header").attr("part", "header").children(r().class("ran-card-title-area").children(r().class("ran-card-title").attr("part", "title"), r().class("ran-card-description").attr("part", "description")), s().attr("name", "extra").attr("part", "extra")), r().class("ran-card-body").attr("part", "body").children(s()), r().class("ran-card-footer").attr("part", "footer").children(s().attr("name", "footer"))).build());
-    this._headerEl = t.querySelector(".ran-card-header"), this._titleEl = t.querySelector(".ran-card-title"), this._descriptionEl = t.querySelector(".ran-card-description"), this._footerEl = t.querySelector(".ran-card-footer"), this._footerEl.style.display = "none";
-    const e = this._footerEl.querySelector('slot[name="footer"]');
-    e.addEventListener("slotchange", () => {
-      this._footerEl.style.display = e.assignedElements().length > 0 ? "" : "none";
-    });
-  }
-  get title() {
-    return a(this, "title");
-  }
-  set title(t) {
-    i(this, "title", t);
-  }
-  get description() {
-    return a(this, "description");
-  }
-  set description(t) {
-    i(this, "description", t);
-  }
-  get sheet() {
-    return a(this, "sheet");
-  }
-  set sheet(t) {
-    i(this, "sheet", t);
-  }
-  _syncTitle() {
-    this._titleEl.textContent = this.getAttribute("title") ?? "";
-  }
-  _syncDescription() {
-    this._descriptionEl.textContent = this.getAttribute("description") ?? "";
-  }
-  connectedCallback() {
-    this._syncTitle(), this._syncDescription(), o(this, this._shadowDom, "sheet", null, this.sheet);
-  }
-  attributeChangedCallback(t, e, n) {
-    e !== n && (t === "title" && this._syncTitle(), t === "description" && this._syncDescription(), t === "sheet" && o(this, this._shadowDom, t, e, n));
-  }
-};
-l("r-card", g);
-export {
-  g as t
-};