@iyulab/components 1.42.4 โ 1.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +55 -0
- package/dist/_virtual/_glob-assets_raw/layout-sidebar.svg.3fe5a68f.js +4 -0
- package/dist/_virtual/_glob-assets_raw/menu-2.svg.d6c83cc4.js +4 -0
- package/dist/utilities/Theme.d.ts +18 -0
- package/dist/utilities/Theme.js +25 -2
- package/dist/utilities/icons.js +4 -0
- package/package.json +1 -1
- package/skills/iyulab-components/references/utilities/theme.md +6 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,60 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.44.0] - 2026-09-22
|
|
4
|
+
|
|
5
|
+
### Fixed
|
|
6
|
+
|
|
7
|
+
- ๐ด **`Theme.init()` no longer overrides styles the document already has.** The built-in token
|
|
8
|
+
sheets were appended to the end of `<head>`. A consumer stylesheet declaring the same `--u-*`
|
|
9
|
+
tokens on `:root` is placed by the bundler while the document parses, so the runtime append
|
|
10
|
+
always came *after* it โ and at equal specificity the later rule wins. The result was that the
|
|
11
|
+
built-in defaults silently overrode whatever the consumer had set, with no error and no
|
|
12
|
+
warning. Where the two sheets agreed on some values and differed on others, it read as
|
|
13
|
+
*partially applied* rather than as ignored, which is harder to notice than an outright failure.
|
|
14
|
+
- **The sheets are a defaults layer, so they now go in front of the document's other styles.**
|
|
15
|
+
They are inserted ahead of the first `<style>`/`<link rel=stylesheet>` โ not pushed past
|
|
16
|
+
`<meta>` and friends โ and their order relative to each other is preserved rather than
|
|
17
|
+
reversed. If a document has no stylesheets at all, they are appended as before; anything added
|
|
18
|
+
later still comes after them, which is the point.
|
|
19
|
+
|
|
20
|
+
โ **If you relied on the old behavior** โ that is, on the built-in values winning over a sheet
|
|
21
|
+
you loaded yourself โ you no longer need to; load order now works the way `:root` at equal
|
|
22
|
+
specificity implies. Nothing changes for consumers who never override these tokens.
|
|
23
|
+
|
|
24
|
+
### Documentation
|
|
25
|
+
|
|
26
|
+
- **`docs/theming.md` no longer tells you to sequence your override after `Theme.init()`.** That
|
|
27
|
+
instruction existed because of the behavior above, and it outlived it by exactly one release
|
|
28
|
+
otherwise. The Custom Themes section now says a plain static `import` is enough, states what
|
|
29
|
+
changed for anyone still on an older version, and keeps the one rule that *does* still decide
|
|
30
|
+
the outcome: specificity. `How Theme Switching Works` says where the sheets are inserted, not
|
|
31
|
+
just that they are.
|
|
32
|
+
- The same note is in the skill reference for `Theme`, which is where an assistant reads it.
|
|
33
|
+
|
|
34
|
+
### Notes
|
|
35
|
+
|
|
36
|
+
- The regression measures computed values in a real browser. Asserting where a node was inserted
|
|
37
|
+
would describe placement, not the cascade, and the contract here is the cascade.
|
|
38
|
+
|
|
39
|
+
## [1.43.0] - 2026-09-22
|
|
40
|
+
|
|
41
|
+
### Added
|
|
42
|
+
|
|
43
|
+
- **`menu-2` and `layout-sidebar` join the built-in icon set.** An app shell draws its own
|
|
44
|
+
chrome โ a mobile menu toggle, a sidebar toggle, an overlay close button โ and two of those
|
|
45
|
+
three names existed only in a CDN-backed library. A deployment without internet access
|
|
46
|
+
rendered them blank no matter how thoroughly the app had baked its own icons into the bundle,
|
|
47
|
+
because the shell was not resolving them through that registration at all. The names now
|
|
48
|
+
exist here, so a shell can resolve all of its chrome from the bundled set.
|
|
49
|
+
- Both glyphs follow what the set already contains: the same 24px grid, the same stroke weight
|
|
50
|
+
and the same caps.
|
|
51
|
+
|
|
52
|
+
### Documentation
|
|
53
|
+
|
|
54
|
+
- **`docs/icons.md` now says which built-in names are load-bearing outside this package.**
|
|
55
|
+
Removing one of them blanks a control in every app built on a shell that draws itself from
|
|
56
|
+
the bundle, and nothing in the type system would say so before the screen went empty.
|
|
57
|
+
|
|
3
58
|
## [1.42.4] - 2026-09-21
|
|
4
59
|
|
|
5
60
|
### Changed
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/layout-sidebar.svg.3fe5a68f
|
|
2
|
+
var layout_sidebar_svg_default = "<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n <path d=\"M9 4l0 16\" />\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { layout_sidebar_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/menu-2.svg.d6c83cc4
|
|
2
|
+
var menu_2_svg_default = "<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M4 6l16 0\" />\n <path d=\"M4 12l16 0\" />\n <path d=\"M4 18l16 0\" />\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { menu_2_svg_default as default };
|
|
@@ -102,6 +102,24 @@ export declare class Theme {
|
|
|
102
102
|
static accent(seed: string | null): void;
|
|
103
103
|
/** ํ์ฌ ์๋๋ฅผ ํ์ฌ ํ
๋ง์ ๋ฐํ์ ๋ง์ถฐ ๋ค์ ๊ณ์ฐํด ์ ์ฉํ๋ค. */
|
|
104
104
|
private static applyAccent;
|
|
105
|
+
/**
|
|
106
|
+
* ๋ด์ฅ ์ํธ๋ฅผ ๋ฃ์ ์๋ฆฌ โ **๋ค๋ฅธ ๋ชจ๋ ์คํ์ผ ยซ์ยป, ์ฐ๋ฆฌ๊ฐ ์ด๋ฏธ ๋ฃ์ ๊ฒ ยซ๋คยป**.
|
|
107
|
+
*
|
|
108
|
+
* ๐ด**์ ๋งจ ์์ธ๊ฐ.** ์ด ์ํธ๋ค์ ์ด๋ฆ ๊ทธ๋๋ก ยซ๊ธฐ๋ณธ๊ฐยป ์ธต์ด๋ค. ์๋น์(๋๋ ํ์ฐ์ค ํ๋ฆฌ์
)๊ฐ
|
|
109
|
+
* ๊ฐ์ `--u-*` ํ ํฐ์ `:root` ๋ก ๋ฎ์ผ๋ฉด **ํน์ด๋๊ฐ ๋๋ฑ**ํ๋ฏ๋ก ์น๋ถ๋ ๋ฌธ์ ์์๊ฐ ๊ฐ๋ฅธ๋ค โ
|
|
110
|
+
* ๊ทธ๋ฐ๋ฐ ์ด ์ํธ๋ **๋ฐํ์์** ๋ถ๊ณ ์๋น์ ์ํธ๋ ๋ฒ๋ค๋ฌ๊ฐ **ํ์ฑ ์์ ์** ์ฌ๋ฆฌ๋ฏ๋ก,
|
|
111
|
+
* ์ข
์ (`appendChild`)์๋ ***์ธ์ ๋ ๊ธฐ๋ณธ๊ฐ์ด ์ด๊ฒผ๋ค.*** ์๋น์ ์
์ฅ์์๋ ๋ฎ์ด์ฐ๊ธฐ๊ฐ
|
|
112
|
+
* **์ค๋ฅ๋ ๊ฒฝ๊ณ ๋ ์์ด ๋ฌดํจ**๊ฐ ๋๊ณ , ๊ฐ์ด ์ผ๋ถ๋ง ๋ค๋ฅด๋ฉด ใ์ ์ฉ๋ ๊ฒ์ฒ๋ผใ ๋ณด์ด๊ธฐ๊น์ง ํ๋ค.
|
|
113
|
+
*
|
|
114
|
+
* โ **`<meta charset>` ๋ฅ๋ฅผ ๋์ด ๋งจ ์์ผ๋ก ๋ฐ์ง ์๋๋ค** โ ์ฒซ ยซ์คํ์ผยป ์์๋ง ์ ๋ค.
|
|
115
|
+
* ์คํ์ผ์ด ํ๋๋ ์์ผ๋ฉด ๋ถ์ผ ๊ณณ์ด ์์ผ๋ฏ๋ก ๊ทธ๋๋ก ๋์ ๋ฃ๋๋ค(๋ค์ ์ค๋ ๊ฒ์ด ์ด๊ธด๋ค๋
|
|
116
|
+
* ์ฑ์ง์ ๊ทธ๋๋ก๋ค).
|
|
117
|
+
*
|
|
118
|
+
* โ **์ฐ๋ฆฌ ์ํธ๋ผ๋ฆฌ์ ์์๋ ์ ์งํ๋ค** โ ๋งค๋ฒ `firstChild` ์์ ๋ฃ์ผ๋ฉด ๋ฒ๋ค ์์๊ฐ ๋ค์งํ๋ค.
|
|
119
|
+
* ์ค์ ๋ก๋ `light`/`dark` ์ ์๋ ์์๊ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ๊พธ์ง ์์ง๋ง(`dark.css` ๋
|
|
120
|
+
* `:root[theme="dark"]` ๋ก **ํน์ด๋๊ฐ ์ด๊ธด๋ค**), ์์๊ฐ ๋ค์งํ๋ ์๋ฃ๊ตฌ์กฐ๋ฅผ ๋จ๊ธฐ์ง ์๋๋ค.
|
|
121
|
+
*/
|
|
122
|
+
private static builtInAnchor;
|
|
105
123
|
/** ๋๋ฒ๊ทธ ๋ชจ๋์ ๋ก๊ทธ ์ถ๋ ฅ ํจ์ (์ธ์คํด์ค ์ค์ฝํ) */
|
|
106
124
|
private static log;
|
|
107
125
|
}
|
package/dist/utilities/Theme.js
CHANGED
|
@@ -73,8 +73,8 @@ var Theme = class {
|
|
|
73
73
|
this.log("style already present, skipping", name);
|
|
74
74
|
continue;
|
|
75
75
|
}
|
|
76
|
-
document.head.
|
|
77
|
-
this.log("
|
|
76
|
+
document.head.insertBefore(style, this.builtInAnchor());
|
|
77
|
+
this.log("inserted style at the base layer", name);
|
|
78
78
|
}
|
|
79
79
|
} else {
|
|
80
80
|
document.head.querySelectorAll("style[data-name]").forEach((el) => el.remove());
|
|
@@ -218,6 +218,29 @@ var Theme = class {
|
|
|
218
218
|
for (const [name, value] of Object.entries(accentCustomProperties(ramp))) root.style.setProperty(name, value);
|
|
219
219
|
this.log("accent applied", this.accentSeed, "โ", ramp);
|
|
220
220
|
}
|
|
221
|
+
/**
|
|
222
|
+
* ๋ด์ฅ ์ํธ๋ฅผ ๋ฃ์ ์๋ฆฌ โ **๋ค๋ฅธ ๋ชจ๋ ์คํ์ผ ยซ์ยป, ์ฐ๋ฆฌ๊ฐ ์ด๋ฏธ ๋ฃ์ ๊ฒ ยซ๋คยป**.
|
|
223
|
+
*
|
|
224
|
+
* ๐ด**์ ๋งจ ์์ธ๊ฐ.** ์ด ์ํธ๋ค์ ์ด๋ฆ ๊ทธ๋๋ก ยซ๊ธฐ๋ณธ๊ฐยป ์ธต์ด๋ค. ์๋น์(๋๋ ํ์ฐ์ค ํ๋ฆฌ์
)๊ฐ
|
|
225
|
+
* ๊ฐ์ `--u-*` ํ ํฐ์ `:root` ๋ก ๋ฎ์ผ๋ฉด **ํน์ด๋๊ฐ ๋๋ฑ**ํ๋ฏ๋ก ์น๋ถ๋ ๋ฌธ์ ์์๊ฐ ๊ฐ๋ฅธ๋ค โ
|
|
226
|
+
* ๊ทธ๋ฐ๋ฐ ์ด ์ํธ๋ **๋ฐํ์์** ๋ถ๊ณ ์๋น์ ์ํธ๋ ๋ฒ๋ค๋ฌ๊ฐ **ํ์ฑ ์์ ์** ์ฌ๋ฆฌ๋ฏ๋ก,
|
|
227
|
+
* ์ข
์ (`appendChild`)์๋ ***์ธ์ ๋ ๊ธฐ๋ณธ๊ฐ์ด ์ด๊ฒผ๋ค.*** ์๋น์ ์
์ฅ์์๋ ๋ฎ์ด์ฐ๊ธฐ๊ฐ
|
|
228
|
+
* **์ค๋ฅ๋ ๊ฒฝ๊ณ ๋ ์์ด ๋ฌดํจ**๊ฐ ๋๊ณ , ๊ฐ์ด ์ผ๋ถ๋ง ๋ค๋ฅด๋ฉด ใ์ ์ฉ๋ ๊ฒ์ฒ๋ผใ ๋ณด์ด๊ธฐ๊น์ง ํ๋ค.
|
|
229
|
+
*
|
|
230
|
+
* โ **`<meta charset>` ๋ฅ๋ฅผ ๋์ด ๋งจ ์์ผ๋ก ๋ฐ์ง ์๋๋ค** โ ์ฒซ ยซ์คํ์ผยป ์์๋ง ์ ๋ค.
|
|
231
|
+
* ์คํ์ผ์ด ํ๋๋ ์์ผ๋ฉด ๋ถ์ผ ๊ณณ์ด ์์ผ๋ฏ๋ก ๊ทธ๋๋ก ๋์ ๋ฃ๋๋ค(๋ค์ ์ค๋ ๊ฒ์ด ์ด๊ธด๋ค๋
|
|
232
|
+
* ์ฑ์ง์ ๊ทธ๋๋ก๋ค).
|
|
233
|
+
*
|
|
234
|
+
* โ **์ฐ๋ฆฌ ์ํธ๋ผ๋ฆฌ์ ์์๋ ์ ์งํ๋ค** โ ๋งค๋ฒ `firstChild` ์์ ๋ฃ์ผ๋ฉด ๋ฒ๋ค ์์๊ฐ ๋ค์งํ๋ค.
|
|
235
|
+
* ์ค์ ๋ก๋ `light`/`dark` ์ ์๋ ์์๊ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ๊พธ์ง ์์ง๋ง(`dark.css` ๋
|
|
236
|
+
* `:root[theme="dark"]` ๋ก **ํน์ด๋๊ฐ ์ด๊ธด๋ค**), ์์๊ฐ ๋ค์งํ๋ ์๋ฃ๊ตฌ์กฐ๋ฅผ ๋จ๊ธฐ์ง ์๋๋ค.
|
|
237
|
+
*/
|
|
238
|
+
static builtInAnchor() {
|
|
239
|
+
const ours = document.head.querySelectorAll("style[data-name]");
|
|
240
|
+
const last = ours[ours.length - 1];
|
|
241
|
+
if (last) return last.nextSibling;
|
|
242
|
+
return document.head.querySelectorAll("style, link[rel~=\"stylesheet\"]")[0] ?? null;
|
|
243
|
+
}
|
|
221
244
|
/** ๋๋ฒ๊ทธ ๋ชจ๋์ ๋ก๊ทธ ์ถ๋ ฅ ํจ์ (์ธ์คํด์ค ์ค์ฝํ) */
|
|
222
245
|
static log(...args) {
|
|
223
246
|
if (this._isDebugMode) console.log("[theme]", ...args);
|
package/dist/utilities/icons.js
CHANGED
|
@@ -12,6 +12,8 @@ import copy_svg_default from "../_virtual/_glob-assets_raw/copy.svg.6192f853.js"
|
|
|
12
12
|
import eye_off_svg_default from "../_virtual/_glob-assets_raw/eye-off.svg.7aa25df0.js";
|
|
13
13
|
import eye_svg_default from "../_virtual/_glob-assets_raw/eye.svg.2e5e9c4c.js";
|
|
14
14
|
import info_circle_fill_svg_default from "../_virtual/_glob-assets_raw/info-circle-fill.svg.6580071d.js";
|
|
15
|
+
import layout_sidebar_svg_default from "../_virtual/_glob-assets_raw/layout-sidebar.svg.3fe5a68f.js";
|
|
16
|
+
import menu_2_svg_default from "../_virtual/_glob-assets_raw/menu-2.svg.d6c83cc4.js";
|
|
15
17
|
import minus_svg_default from "../_virtual/_glob-assets_raw/minus.svg.4610de75.js";
|
|
16
18
|
import plus_svg_default from "../_virtual/_glob-assets_raw/plus.svg.d83ead68.js";
|
|
17
19
|
import search_svg_default from "../_virtual/_glob-assets_raw/search.svg.0ba2012d.js";
|
|
@@ -53,6 +55,8 @@ var InternalIconBundle = new Map(Object.entries(/* #__PURE__ */ Object.assign({
|
|
|
53
55
|
"../assets/icons/eye-off.svg": eye_off_svg_default,
|
|
54
56
|
"../assets/icons/eye.svg": eye_svg_default,
|
|
55
57
|
"../assets/icons/info-circle-fill.svg": info_circle_fill_svg_default,
|
|
58
|
+
"../assets/icons/layout-sidebar.svg": layout_sidebar_svg_default,
|
|
59
|
+
"../assets/icons/menu-2.svg": menu_2_svg_default,
|
|
56
60
|
"../assets/icons/minus.svg": minus_svg_default,
|
|
57
61
|
"../assets/icons/plus.svg": plus_svg_default,
|
|
58
62
|
"../assets/icons/search.svg": search_svg_default,
|
package/package.json
CHANGED
|
@@ -51,6 +51,12 @@ changes**, because those targets are relative to the page background.
|
|
|
51
51
|
> from `--u-primary-color-strong`, so they stay on the default ramp and the brand looks
|
|
52
52
|
> half-applied. (The sheet derives no step from `--u-primary-color` โ measured: 0 references.)
|
|
53
53
|
|
|
54
|
+
> **Load that block however you like โ a plain static `import` is enough.** Since 1.44.0 the
|
|
55
|
+
> built-in sheets are inserted *ahead of* the document's other styles, so your override wins at
|
|
56
|
+
> equal specificity whenever it arrives. Before 1.44.0 they were appended last and a static
|
|
57
|
+
> import silently did nothing; on those versions, load your sheet after `await Theme.init(...)`.
|
|
58
|
+
> Specificity still decides: a `:where(:root)` wrapper drops to 0 and loses regardless of order.
|
|
59
|
+
|
|
54
60
|
## API
|
|
55
61
|
|
|
56
62
|
| Member | Type | Description |
|