@vraxis/osx-components 0.11.3 → 0.11.4
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/LICENSE +1 -1
- package/README.md +5 -4
- package/bin/osx-components.mjs +1 -1
- package/dist/osx-components.css +1 -1
- package/dist/osx-components.js +6 -6
- package/package.json +1 -1
- package/skills/build-with-osx-components/SKILL.md +4 -4
- package/skills/build-with-osx-components/agents/openai.yaml +3 -3
- package/skills/build-with-osx-components/scripts/audit-osx-ui.mjs +1 -1
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c) 2026
|
|
3
|
+
Copyright (c) 2026 osx Components contributors
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# osx Components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
osx Components is an open-source collection of OS X-inspired web components authored with Vue 3. Components render through the Custom Elements API, so they work in Vue, React, Svelte, Astro, or plain HTML.
|
|
4
4
|
|
|
5
5
|
The project recreates the interaction language—not Apple assets or source code—with accessible controls, Shadow DOM encapsulation, and a shared token contract.
|
|
6
6
|
|
|
@@ -65,6 +65,7 @@ Set `data-osx-theme` on any ancestor. Tokens inherit across each component's Sha
|
|
|
65
65
|
- `panther` — a dark interpretation designed as if the original system had shipped one
|
|
66
66
|
|
|
67
67
|
Every visual decision is exposed through `--osx-*` custom properties. Override the tokens on an application shell or an individual component.
|
|
68
|
+
Use `--osx-accent` for interactive fills and borders; use `--osx-accent-ink` when accent-colored text must retain contrast across themes.
|
|
68
69
|
|
|
69
70
|
## Components
|
|
70
71
|
|
|
@@ -188,11 +189,11 @@ Use `height: 100dvh` on `<osx-app-shell>` when it is the viewport root. The comp
|
|
|
188
189
|
|
|
189
190
|
## Framework starters
|
|
190
191
|
|
|
191
|
-
The showcase includes shareable, URL-addressable starters for HTML, Vue, React, and Svelte. Choose a framework in the [Snippet Lab](https://
|
|
192
|
+
The showcase includes shareable, URL-addressable starters for HTML, Vue, React, and Svelte. Choose a framework in the [Snippet Lab](https://components.vraxis.dev/#snippets), copy the generated component shell, or share a URL such as `?framework=react#snippets`.
|
|
192
193
|
|
|
193
194
|
## Component explorer
|
|
194
195
|
|
|
195
|
-
The [Component Explorer](https://
|
|
196
|
+
The [Component Explorer](https://components.vraxis.dev/components) is a Storybook-style second entry point with searchable, deep-linkable, live examples of every published element. It is built from the same package entry point consumers install, so the stories exercise the actual Custom Elements API rather than a private Vue-only layer.
|
|
196
197
|
|
|
197
198
|
## Development
|
|
198
199
|
|
package/bin/osx-components.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const skillName = "build-with-osx-components";
|
|
|
10
10
|
const skillSource = join(packageRoot, "skills", skillName);
|
|
11
11
|
|
|
12
12
|
function help() {
|
|
13
|
-
console.log(`
|
|
13
|
+
console.log(`osx Components agent installer
|
|
14
14
|
|
|
15
15
|
Usage:
|
|
16
16
|
osx-components agent install [options]
|
package/dist/osx-components.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-osx-theme=aqua]{--osx-font: "Lucida Grande", "Helvetica Neue", Arial, sans-serif;--osx-text: #243b4a;--osx-muted: #526671;--osx-border: #8d9ba5;--osx-border-soft: #c6d0d6;--osx-surface: #f4f7f9;--osx-surface-raised: #ffffff;--osx-surface-sunken: #e4eaee;--osx-title-start: #eef3f6;--osx-title-end: #bdc8cf;--osx-accent: #006da8;--osx-accent-light: #75c8f5;--osx-success: #2f9951;--osx-warning: #c9821e;--osx-danger: #c74d47;--osx-focus: rgba(35, 145, 218, .32);--osx-shadow: 0 14px 38px rgba(31, 49, 61, .24), 0 2px 7px rgba(31, 49, 61, .2);--osx-highlight: rgba(255, 255, 255, .86);color-scheme:light}[data-osx-theme=graphite]{--osx-accent: #506978;--osx-accent-light: #a7bac6;--osx-focus: rgba(91, 121, 140, .32)}[data-osx-theme=panther]{--osx-text: #
|
|
1
|
+
:root,[data-osx-theme=aqua]{--osx-font: "Lucida Grande", "Helvetica Neue", Arial, sans-serif;--osx-text: #243b4a;--osx-muted: #526671;--osx-border: #8d9ba5;--osx-border-soft: #c6d0d6;--osx-surface: #f4f7f9;--osx-surface-raised: #ffffff;--osx-surface-sunken: #e4eaee;--osx-title-start: #eef3f6;--osx-title-end: #bdc8cf;--osx-accent: #006da8;--osx-accent-ink: #006da8;--osx-accent-light: #75c8f5;--osx-success: #2f9951;--osx-warning: #c9821e;--osx-danger: #c74d47;--osx-focus: rgba(35, 145, 218, .32);--osx-shadow: 0 14px 38px rgba(31, 49, 61, .24), 0 2px 7px rgba(31, 49, 61, .2);--osx-highlight: rgba(255, 255, 255, .86);color-scheme:light}[data-osx-theme=graphite]{--osx-accent: #506978;--osx-accent-ink: #506978;--osx-accent-light: #a7bac6;--osx-focus: rgba(91, 121, 140, .32)}[data-osx-theme=panther]{--osx-text: #edf3f7;--osx-muted: #a9b5bd;--osx-border: #52616b;--osx-border-soft: #354149;--osx-surface: #1b2328;--osx-surface-raised: #273138;--osx-surface-sunken: #11181c;--osx-title-start: #465159;--osx-title-end: #293138;--osx-accent: #1594d6;--osx-accent-ink: #54bced;--osx-accent-light: #54bced;--osx-success: #42ae67;--osx-warning: #dfa23b;--osx-danger: #e16059;--osx-focus: rgba(59, 177, 233, .38);--osx-shadow: 0 16px 42px rgba(0, 0, 0, .52), 0 2px 7px rgba(0, 0, 0, .46);--osx-highlight: rgba(255, 255, 255, .13);color-scheme:dark}
|
package/dist/osx-components.js
CHANGED
|
@@ -6923,7 +6923,7 @@ const Up = ["value", "rows", "placeholder", "disabled"], Gp = { key: 0 }, Jp = [
|
|
|
6923
6923
|
])
|
|
6924
6924
|
], 8, kf));
|
|
6925
6925
|
}
|
|
6926
|
-
}), Pf = ":host{display:block;min-width:0;color:var(--osx-text);font-family:var(--osx-font)}article{min-width:0;overflow:hidden;border:1px solid var(--osx-border);border-radius:9px;background:var(--osx-surface-raised);box-shadow:0 1px var(--osx-highlight) inset,0 2px 7px #0000001a}header{min-height:61px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--osx-border-soft);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface))}.icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:7px;color:var(--osx-accent);background:var(--osx-surface-sunken)}.identity{min-width:0;display:grid;gap:3px}.identity strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.identity small,.identity code{overflow:hidden;color:var(--osx-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.identity code{font-family:ui-monospace,monospace}.metadata{display:grid;justify-items:end;gap:3px}.metadata b,.metadata i{color:var(--osx-muted);font-size:12px;font-style:normal}.metadata i{text-transform:capitalize}.metadata b{padding:2px 7px;border:1px solid var(--osx-border);border-radius:999px;background:var(--osx-surface-sunken)}.preview{min-height:84px;max-height:320px;overflow:auto;padding:14px;color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:13px;line-height:1.55}.preview pre{margin:0;color:var(--osx-text);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.preview p{margin:0}.preview.document{background:color-mix(in srgb,var(--osx-surface-raised)
|
|
6926
|
+
}), Pf = ":host{display:block;min-width:0;color:var(--osx-text);font-family:var(--osx-font)}article{min-width:0;overflow:hidden;border:1px solid var(--osx-border);border-radius:9px;background:var(--osx-surface-raised);box-shadow:0 1px var(--osx-highlight) inset,0 2px 7px #0000001a}header{min-height:61px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--osx-border-soft);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface))}.icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:7px;color:var(--osx-accent);background:var(--osx-surface-sunken)}.identity{min-width:0;display:grid;gap:3px}.identity strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.identity small,.identity code{overflow:hidden;color:var(--osx-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.identity code{font-family:ui-monospace,monospace}.metadata{display:grid;justify-items:end;gap:3px}.metadata b,.metadata i{color:var(--osx-muted);font-size:12px;font-style:normal}.metadata i{text-transform:capitalize}.metadata b{padding:2px 7px;border:1px solid var(--osx-border);border-radius:999px;background:var(--osx-surface-sunken)}.preview{min-height:84px;max-height:320px;overflow:auto;padding:14px;color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:13px;line-height:1.55}.preview pre{margin:0;color:var(--osx-text);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.preview p{margin:0}.preview.document{background:color-mix(in srgb,var(--osx-surface-raised) 88%,var(--osx-surface))}footer{min-height:45px;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:7px 9px 7px 12px;border-top:1px solid var(--osx-border-soft)}.preview+footer>span{min-width:0;display:flex;gap:8px;align-items:center}.preview+footer code{overflow:hidden;font:12px ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap}.preview+footer small{color:var(--osx-muted);font-size:12px}.preview+footer div{display:flex;gap:5px}button{min-height:29px;display:inline-flex;gap:5px;align-items:center;padding:4px 8px;border:1px solid var(--osx-border);border-radius:6px;color:var(--osx-text);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface-sunken));font:700 12px var(--osx-font);cursor:pointer}button:hover{border-color:var(--osx-accent)}button:focus-visible{outline:3px solid var(--osx-focus);outline-offset:1px}@media(max-width:540px){footer{align-items:stretch;flex-direction:column}.preview+footer div{display:grid;grid-template-columns:repeat(3,1fr)}button{justify-content:center}.metadata i{display:none}}", Rf = /* @__PURE__ */ te(Tf, [["styles", [Pf]]]), If = ["aria-label"], jf = ["src"], Lf = {
|
|
6927
6927
|
key: 1,
|
|
6928
6928
|
"aria-hidden": "true"
|
|
6929
6929
|
}, Bf = /* @__PURE__ */ Z({
|
|
@@ -7830,7 +7830,7 @@ const Up = ["value", "rows", "placeholder", "disabled"], Gp = { key: 0 }, Jp = [
|
|
|
7830
7830
|
])) : (f(), x("div", xx, "No changes to display"))
|
|
7831
7831
|
], 8, lx));
|
|
7832
7832
|
}
|
|
7833
|
-
}), Nx = ":host{display:block;min-width:0;color:var(--osx-text);font-family:var(--osx-font)}.viewer{min-width:0;overflow:hidden;border:1px solid var(--osx-border);border-radius:8px;background:var(--osx-surface-sunken)}header{min-height:43px;display:flex;gap:12px;align-items:center;padding:7px 9px;border-bottom:1px solid var(--osx-border);background:linear-gradient(var(--osx-title-start),var(--osx-title-end));box-shadow:0 1px var(--osx-highlight) inset}.file{min-width:0;display:flex;gap:7px;align-items:center}.file strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.file small{color:var(--osx-muted);font-size:12px}.stats{display:flex;gap:7px;margin-left:auto;font-size:12px}.stats b{color:var(--osx-success)}.stats i{color:var(--osx-danger);font-style:normal;font-weight:700}.actions{display:flex;gap:7px;align-items:center}.segments{display:flex;overflow:hidden;border:1px solid var(--osx-border);border-radius:6px}.segments button{border:0;border-right:1px solid var(--osx-border);border-radius:0}.segments button:last-child{border-right:0}.segments button.active{color:#fff;background:linear-gradient(var(--osx-accent-light),var(--osx-accent))}button{min-height:25px;display:inline-flex;gap:5px;align-items:center;padding:3px 8px;border:1px solid var(--osx-border);border-radius:6px;color:var(--osx-text);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface-sunken));font:700 12px var(--osx-font);cursor:pointer}button:focus-visible{outline:3px solid var(--osx-focus);outline-offset:1px}.code{max-height:360px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.line{min-width:max-content;display:grid;grid-template-columns:42px 42px 24px minmax(400px,1fr)}.line>*{padding-block:2px}.number{padding-inline:7px;color:var(--osx-muted);background:color-mix(in srgb,var(--osx-surface-sunken) 86%,transparent);text-align:right;-webkit-user-select:none;user-select:none}.marker{text-align:center;-webkit-user-select:none;user-select:none}.line code{padding-inline:8px 18px;white-space:pre}.line.add,.split code.add{background:color-mix(in srgb,var(--osx-success) 16%,var(--osx-surface))}.line.remove,.split code.remove{background:color-mix(in srgb,var(--osx-danger) 15%,var(--osx-surface))}.line.add .marker{color:var(--osx-success)}.line.remove .marker{color:var(--osx-danger)}.line.hunk{grid-template-columns:42px 42px 24px minmax(400px,1fr);color:var(--osx-accent);background:color-mix(in srgb,var(--osx-accent) 10%,var(--osx-surface))}.split-row{min-width:760px;display:grid;grid-template-columns:42px minmax(330px,1fr) 42px minmax(330px,1fr);border-bottom:1px solid color-mix(in srgb,var(--osx-border-soft) 55%,transparent)}.split-row>*{padding-block:2px}.split-row code{padding-inline:8px;white-space:pre}.hunk-cell{grid-column:1 / -1;color:var(--osx-accent);background:color-mix(in srgb,var(--osx-accent) 10%,var(--osx-surface))}.empty{padding:38px 16px;color:var(--osx-muted);font-size:12px;text-align:center}@media(max-width:620px){header{align-items:flex-start;flex-wrap:wrap}.file{flex:1 1 180px}.stats{margin-left:0}.actions{width:100%;justify-content:space-between}.code{max-height:300px}}", Sx = /* @__PURE__ */ te($x, [["styles", [Nx]]]), Ox = ["aria-label"], Cx = { key: 0 }, Dx = { class: "content" }, Vx = /* @__PURE__ */ Z({
|
|
7833
|
+
}), Nx = ":host{display:block;min-width:0;color:var(--osx-text);font-family:var(--osx-font)}.viewer{min-width:0;overflow:hidden;border:1px solid var(--osx-border);border-radius:8px;background:var(--osx-surface-sunken)}header{min-height:43px;display:flex;gap:12px;align-items:center;padding:7px 9px;border-bottom:1px solid var(--osx-border);background:linear-gradient(var(--osx-title-start),var(--osx-title-end));box-shadow:0 1px var(--osx-highlight) inset}.file{min-width:0;display:flex;gap:7px;align-items:center}.file strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.file small{color:var(--osx-muted);font-size:12px}.stats{display:flex;gap:7px;margin-left:auto;font-size:12px}.stats b{color:var(--osx-success)}.stats i{color:var(--osx-danger);font-style:normal;font-weight:700}.actions{display:flex;gap:7px;align-items:center}.segments{display:flex;overflow:hidden;border:1px solid var(--osx-border);border-radius:6px}.segments button{border:0;border-right:1px solid var(--osx-border);border-radius:0}.segments button:last-child{border-right:0}.segments button.active{color:#fff;background:linear-gradient(var(--osx-accent-light),var(--osx-accent))}button{min-height:25px;display:inline-flex;gap:5px;align-items:center;padding:3px 8px;border:1px solid var(--osx-border);border-radius:6px;color:var(--osx-text);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface-sunken));font:700 12px var(--osx-font);cursor:pointer}button:focus-visible{outline:3px solid var(--osx-focus);outline-offset:1px}.code{max-height:360px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.line{min-width:max-content;display:grid;grid-template-columns:42px 42px 24px minmax(400px,1fr)}.line>*{padding-block:2px}.number{padding-inline:7px;color:var(--osx-muted);background:color-mix(in srgb,var(--osx-surface-sunken) 86%,transparent);text-align:right;-webkit-user-select:none;user-select:none}.marker{text-align:center;-webkit-user-select:none;user-select:none}.line code{padding-inline:8px 18px;white-space:pre}.line.add,.split code.add{background:color-mix(in srgb,var(--osx-success) 16%,var(--osx-surface))}.line.remove,.split code.remove{background:color-mix(in srgb,var(--osx-danger) 15%,var(--osx-surface))}.line.add .marker{color:var(--osx-success)}.line.remove .marker{color:var(--osx-danger)}.line.hunk{grid-template-columns:42px 42px 24px minmax(400px,1fr);color:var(--osx-accent-ink);background:color-mix(in srgb,var(--osx-accent) 10%,var(--osx-surface))}.split-row{min-width:760px;display:grid;grid-template-columns:42px minmax(330px,1fr) 42px minmax(330px,1fr);border-bottom:1px solid color-mix(in srgb,var(--osx-border-soft) 55%,transparent)}.split-row>*{padding-block:2px}.split-row code{padding-inline:8px;white-space:pre}.hunk-cell{grid-column:1 / -1;color:var(--osx-accent-ink);background:color-mix(in srgb,var(--osx-accent) 10%,var(--osx-surface))}.empty{padding:38px 16px;color:var(--osx-muted);font-size:12px;text-align:center}@media(max-width:620px){header{align-items:flex-start;flex-wrap:wrap}.file{flex:1 1 180px}.stats{margin-left:0}.actions{width:100%;justify-content:space-between}.code{max-height:300px}}", Sx = /* @__PURE__ */ te($x, [["styles", [Nx]]]), Ox = ["aria-label"], Cx = { key: 0 }, Dx = { class: "content" }, Vx = /* @__PURE__ */ Z({
|
|
7834
7834
|
__name: "OsxDialog.ce",
|
|
7835
7835
|
props: {
|
|
7836
7836
|
open: { type: Boolean, default: !1 },
|
|
@@ -7927,7 +7927,7 @@ const Up = ["value", "rows", "placeholder", "disabled"], Gp = { key: 0 }, Jp = [
|
|
|
7927
7927
|
href: { default: "", type: String },
|
|
7928
7928
|
actionLabel: { default: "Explore product", type: String },
|
|
7929
7929
|
mark: { default: "", type: String },
|
|
7930
|
-
provenance: { default: "Built with
|
|
7930
|
+
provenance: { default: "Built with osx Components", type: String },
|
|
7931
7931
|
trackingId: { default: "", type: String },
|
|
7932
7932
|
tone: { default: "info", type: String },
|
|
7933
7933
|
compact: { type: Boolean, default: !1 },
|
|
@@ -8626,7 +8626,7 @@ const Up = ["value", "rows", "placeholder", "disabled"], Gp = { key: 0 }, Jp = [
|
|
|
8626
8626
|
]))
|
|
8627
8627
|
], 10, im));
|
|
8628
8628
|
}
|
|
8629
|
-
}), mm = ':host{display:block;color:var(--osx-text);font-family:var(--osx-font)}section{overflow:hidden;border:1px solid var(--osx-border-soft);border-radius:8px;background:var(--osx-surface-raised)}header{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 12px;border-bottom:1px solid var(--osx-border-soft);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface))}header div{display:flex;align-items:center;gap:8px;color:var(--osx-accent)}header strong{color:var(--osx-text);font-size:13px}header>span{min-width:34px;padding:2px 7px;border:1px solid var(--osx-border);border-radius:999px;color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:12px;font-weight:700;text-align:center}ol{margin:0;padding:5px 0;list-style:none}li{min-height:51px;display:grid;grid-template-columns:29px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 12px;position:relative}li:not(:last-child) .rail:after{width:1px;position:absolute;top:34px;bottom:-17px;left:14px;background:var(--osx-border-soft);content:""}.rail{height:29px;position:relative;display:grid;place-items:center}.state{width:24px;height:24px;position:relative;z-index:1;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:50%;color:var(--osx-muted);background:var(--osx-surface-sunken)}.copy{min-width:0;display:grid;gap:3px}.copy strong{font-size:13px;line-height:1.35}.copy small,.state-label{color:var(--osx-muted);font-size:12px;line-height:1.35}.state-label{text-transform:capitalize}.active{background:color-mix(in srgb,var(--osx-accent) 8%,transparent)}.active .state{color:var(--osx-accent);border-color:var(--osx-accent);animation:pulse 1.25s ease-in-out infinite}.active .state-label{color:var(--osx-accent);font-weight:700}.done .state{color:var(--osx-success);border-color:var(--osx-success)}.failed .state{color:var(--osx-danger);border-color:var(--osx-danger)}.failed .state-label{color:var(--osx-danger)}.skipped{opacity:.72}.skipped .copy strong{text-decoration:line-through;text-decoration-thickness:1px}.empty{margin:0;padding:20px 12px;color:var(--osx-muted);font-size:12px;text-align:center}.compact li{min-height:42px}.compact .copy small,.compact .state-label{display:none}@keyframes pulse{50%{opacity:.45;transform:scale(.9)}}@media(prefers-reduced-motion:reduce){.active .state{animation:none}}@media(max-width:480px){li{grid-template-columns:29px minmax(0,1fr)}.state-label{grid-column:2}}', bm = /* @__PURE__ */ te(gm, [["styles", [mm]]]), vm = ["aria-label"], ym = /* @__PURE__ */ Z({
|
|
8629
|
+
}), mm = ':host{display:block;color:var(--osx-text);font-family:var(--osx-font)}section{overflow:hidden;border:1px solid var(--osx-border-soft);border-radius:8px;background:var(--osx-surface-raised)}header{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 12px;border-bottom:1px solid var(--osx-border-soft);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface))}header div{display:flex;align-items:center;gap:8px;color:var(--osx-accent-ink)}header strong{color:var(--osx-text);font-size:13px}header>span{min-width:34px;padding:2px 7px;border:1px solid var(--osx-border);border-radius:999px;color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:12px;font-weight:700;text-align:center}ol{margin:0;padding:5px 0;list-style:none}li{min-height:51px;display:grid;grid-template-columns:29px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 12px;position:relative}li:not(:last-child) .rail:after{width:1px;position:absolute;top:34px;bottom:-17px;left:14px;background:var(--osx-border-soft);content:""}.rail{height:29px;position:relative;display:grid;place-items:center}.state{width:24px;height:24px;position:relative;z-index:1;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:50%;color:var(--osx-muted);background:var(--osx-surface-sunken)}.copy{min-width:0;display:grid;gap:3px}.copy strong{font-size:13px;line-height:1.35}.copy small,.state-label{color:var(--osx-muted);font-size:12px;line-height:1.35}.state-label{text-transform:capitalize}.active{background:color-mix(in srgb,var(--osx-accent) 8%,transparent)}.active .state{color:var(--osx-accent-ink);border-color:var(--osx-accent);animation:pulse 1.25s ease-in-out infinite}.active .state-label{color:var(--osx-accent-ink);font-weight:700}.done .state{color:var(--osx-success);border-color:var(--osx-success)}.failed .state{color:var(--osx-danger);border-color:var(--osx-danger)}.failed .state-label{color:var(--osx-danger)}.skipped{opacity:.72}.skipped .copy strong{text-decoration:line-through;text-decoration-thickness:1px}.empty{margin:0;padding:20px 12px;color:var(--osx-muted);font-size:12px;text-align:center}.compact li{min-height:42px}.compact .copy small,.compact .state-label{display:none}@keyframes pulse{50%{opacity:.45;transform:scale(.9)}}@media(prefers-reduced-motion:reduce){.active .state{animation:none}}@media(max-width:480px){li{grid-template-columns:29px minmax(0,1fr)}.state-label{grid-column:2}}', bm = /* @__PURE__ */ te(gm, [["styles", [mm]]]), vm = ["aria-label"], ym = /* @__PURE__ */ Z({
|
|
8630
8630
|
__name: "OsxPopover.ce",
|
|
8631
8631
|
props: {
|
|
8632
8632
|
open: { type: Boolean, default: !1 },
|
|
@@ -9151,7 +9151,7 @@ const Up = ["value", "rows", "placeholder", "disabled"], Gp = { key: 0 }, Jp = [
|
|
|
9151
9151
|
]))
|
|
9152
9152
|
], 10, _b));
|
|
9153
9153
|
}
|
|
9154
|
-
}), Mb = ":host{display:block;color:var(--osx-text);font-family:var(--osx-font)}aside{overflow:hidden;border:1px solid var(--osx-border-soft);border-radius:8px;background:var(--osx-surface-raised)}header{min-height:43px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 11px;border-bottom:1px solid var(--osx-border-soft);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface))}header div{display:flex;gap:8px;align-items:center;color:var(--osx-accent)}header strong{color:var(--osx-text);font-size:13px}header>span{min-width:27px;padding:2px 7px;border:1px solid var(--osx-border);border-radius:999px;color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:12px;font-weight:700;text-align:center}ol{margin:0;padding:0;list-style:none}li+li{border-top:1px solid var(--osx-border-soft)}button{width:100%;min-height:68px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px 11px;border:0;color:var(--osx-text);background:transparent;font-family:var(--osx-font);text-align:left;cursor:pointer}button:hover{background:color-mix(in srgb,var(--osx-accent) 8%,transparent)}button:focus-visible{outline:3px solid var(--osx-focus);outline-offset:-3px}.selected button{background:color-mix(in srgb,var(--osx-accent) 13%,transparent)}.index{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:50%;color:var(--osx-accent);background:var(--osx-surface-sunken);font-size:12px;font-weight:800}.copy{min-width:0;display:grid;gap:3px}.copy strong{font-size:13px;line-height:1.35}.copy small{color:var(--osx-accent);font-size:12px}.copy p{display:-webkit-box;margin:2px 0 0;overflow:hidden;color:var(--osx-muted);font-size:12px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.empty{margin:0;padding:22px 12px;color:var(--osx-muted);font-size:12px;text-align:center}.compact .copy p{display:none}.compact button{min-height:48px;align-items:center}", Ab = /* @__PURE__ */ te(Vb, [["styles", [Mb]]]), zb = ["aria-label"], Tb = { class: "primary" }, Pb = { class: "secondary" }, Rb = /* @__PURE__ */ Z({
|
|
9154
|
+
}), Mb = ":host{display:block;color:var(--osx-text);font-family:var(--osx-font)}aside{overflow:hidden;border:1px solid var(--osx-border-soft);border-radius:8px;background:var(--osx-surface-raised)}header{min-height:43px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 11px;border-bottom:1px solid var(--osx-border-soft);background:linear-gradient(var(--osx-surface-raised),var(--osx-surface))}header div{display:flex;gap:8px;align-items:center;color:var(--osx-accent-ink)}header strong{color:var(--osx-text);font-size:13px}header>span{min-width:27px;padding:2px 7px;border:1px solid var(--osx-border);border-radius:999px;color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:12px;font-weight:700;text-align:center}ol{margin:0;padding:0;list-style:none}li+li{border-top:1px solid var(--osx-border-soft)}button{width:100%;min-height:68px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px 11px;border:0;color:var(--osx-text);background:transparent;font-family:var(--osx-font);text-align:left;cursor:pointer}button:hover{background:color-mix(in srgb,var(--osx-accent) 8%,transparent)}button:focus-visible{outline:3px solid var(--osx-focus);outline-offset:-3px}.selected button{background:color-mix(in srgb,var(--osx-accent) 13%,transparent)}.index{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:50%;color:var(--osx-accent-ink);background:var(--osx-surface-sunken);font-size:12px;font-weight:800}.copy{min-width:0;display:grid;gap:3px}.copy strong{font-size:13px;line-height:1.35}.copy small{color:var(--osx-accent-ink);font-size:12px}.copy p{display:-webkit-box;margin:2px 0 0;overflow:hidden;color:var(--osx-muted);font-size:12px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.empty{margin:0;padding:22px 12px;color:var(--osx-muted);font-size:12px;text-align:center}.compact .copy p{display:none}.compact button{min-height:48px;align-items:center}", Ab = /* @__PURE__ */ te(Vb, [["styles", [Mb]]]), zb = ["aria-label"], Tb = { class: "primary" }, Pb = { class: "secondary" }, Rb = /* @__PURE__ */ Z({
|
|
9155
9155
|
__name: "OsxSplitView.ce",
|
|
9156
9156
|
props: {
|
|
9157
9157
|
orientation: { default: "horizontal", type: String },
|
|
@@ -9507,7 +9507,7 @@ const Up = ["value", "rows", "placeholder", "disabled"], Gp = { key: 0 }, Jp = [
|
|
|
9507
9507
|
])
|
|
9508
9508
|
], 42, uv));
|
|
9509
9509
|
}
|
|
9510
|
-
}), bv = ":host{display:block;color:var(--osx-text);font-family:var(--osx-font)}details{overflow:hidden;border:1px solid var(--osx-border-soft);border-radius:8px;background:color-mix(in srgb,var(--osx-accent) 4%,var(--osx-surface-raised))}summary{min-height:46px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:8px 11px;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary:focus-visible{outline:3px solid var(--osx-focus);outline-offset:-3px}.state{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:50%;color:var(--osx-accent);background:var(--osx-surface-sunken)}.streaming .state{animation:pulse 1.35s ease-in-out infinite}.complete .state{color:var(--osx-success);border-color:color-mix(in srgb,var(--osx-success) 65%,var(--osx-border))}.error .state{color:var(--osx-danger);border-color:color-mix(in srgb,var(--osx-danger) 65%,var(--osx-border))}.copy{min-width:0;display:grid;gap:2px}.copy strong{font-size:13px}.copy small,.stream-label{overflow:hidden;color:var(--osx-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.stream-label{color:var(--osx-accent);font-weight:700}.chevron{color:var(--osx-muted);transition:transform .16s ease}details[open] .chevron{transform:rotate(180deg)}.content{padding:12px 14px 14px 47px;border-top:1px solid var(--osx-border-soft);color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:13px;line-height:1.58;overflow-wrap:anywhere}@keyframes pulse{50%{opacity:.45;transform:scale(.9)}}@media(prefers-reduced-motion:reduce){.streaming .state{animation:none}.chevron{transition:none}}@media(max-width:480px){summary{grid-template-columns:auto minmax(0,1fr) auto}.stream-label{display:none}.content{padding-left:14px}}", vv = /* @__PURE__ */ te(mv, [["styles", [bv]]]), yv = ["aria-label"], wv = { key: 0 }, kv = { class: "actions" }, _v = ["disabled"], Ev = ["disabled"], $v = {
|
|
9510
|
+
}), bv = ":host{display:block;color:var(--osx-text);font-family:var(--osx-font)}details{overflow:hidden;border:1px solid var(--osx-border-soft);border-radius:8px;background:color-mix(in srgb,var(--osx-accent) 4%,var(--osx-surface-raised))}summary{min-height:46px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:8px 11px;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary:focus-visible{outline:3px solid var(--osx-focus);outline-offset:-3px}.state{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--osx-border);border-radius:50%;color:var(--osx-accent-ink);background:var(--osx-surface-sunken)}.streaming .state{animation:pulse 1.35s ease-in-out infinite}.complete .state{color:var(--osx-success);border-color:color-mix(in srgb,var(--osx-success) 65%,var(--osx-border))}.error .state{color:var(--osx-danger);border-color:color-mix(in srgb,var(--osx-danger) 65%,var(--osx-border))}.copy{min-width:0;display:grid;gap:2px}.copy strong{font-size:13px}.copy small,.stream-label{overflow:hidden;color:var(--osx-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.stream-label{color:var(--osx-accent-ink);font-weight:700}.chevron{color:var(--osx-muted);transition:transform .16s ease}details[open] .chevron{transform:rotate(180deg)}.content{padding:12px 14px 14px 47px;border-top:1px solid var(--osx-border-soft);color:var(--osx-muted);background:var(--osx-surface-sunken);font-size:13px;line-height:1.58;overflow-wrap:anywhere}@keyframes pulse{50%{opacity:.45;transform:scale(.9)}}@media(prefers-reduced-motion:reduce){.streaming .state{animation:none}.chevron{transition:none}}@media(max-width:480px){summary{grid-template-columns:auto minmax(0,1fr) auto}.stream-label{display:none}.content{padding-left:14px}}", vv = /* @__PURE__ */ te(mv, [["styles", [bv]]]), yv = ["aria-label"], wv = { key: 0 }, kv = { class: "actions" }, _v = ["disabled"], Ev = ["disabled"], $v = {
|
|
9511
9511
|
key: 0,
|
|
9512
9512
|
class: "command"
|
|
9513
9513
|
}, Nv = { key: 0 }, Sv = ["aria-live"], Ov = {
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: build-with-osx-components
|
|
3
|
-
description: Build, refactor, or review web interfaces that use the @vraxis/osx-components package and its OS X-inspired custom elements. Use for application shells, dashboards, settings, data tables, agent workbenches, feedback, typography, theming, icons, responsive layouts, accessibility, or migrations from bespoke controls to
|
|
3
|
+
description: Build, refactor, or review web interfaces that use the @vraxis/osx-components package and its OS X-inspired custom elements. Use for application shells, dashboards, settings, data tables, agent workbenches, feedback, typography, theming, icons, responsive layouts, accessibility, or migrations from bespoke controls to osx Components in HTML, Vue, React, Svelte, Astro, and other web projects.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
# Build with
|
|
6
|
+
# Build with osx Components
|
|
7
7
|
|
|
8
8
|
Build cohesive interfaces from the published primitives before creating custom UI. Treat the package as a framework-neutral Custom Elements design system: the host owns application state, data, routing, model calls, tool execution, persistence, and analytics.
|
|
9
9
|
|
|
@@ -11,7 +11,7 @@ Build cohesive interfaces from the published primitives before creating custom U
|
|
|
11
11
|
|
|
12
12
|
1. Inspect the host project before editing.
|
|
13
13
|
- Identify its framework, package manager, entry point, theme root, and existing `@vraxis/osx-components` version.
|
|
14
|
-
- Search for existing
|
|
14
|
+
- Search for existing osx Components usage and preserve established composition patterns.
|
|
15
15
|
- Do not install, upgrade, or replace dependencies unless the task authorizes it.
|
|
16
16
|
2. Choose primitives before writing markup.
|
|
17
17
|
- Read [references/component-selection.md](references/component-selection.md) when selecting or combining components.
|
|
@@ -54,4 +54,4 @@ Assign arrays and objects as DOM properties when possible. JSON attributes remai
|
|
|
54
54
|
|
|
55
55
|
## Completion report
|
|
56
56
|
|
|
57
|
-
State which
|
|
57
|
+
State which osx Components were used, any intentional custom CSS or missing primitive, the theme verified, and the checks run. Mention unresolved accessibility, mobile, or API uncertainty explicitly.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
interface:
|
|
2
|
-
display_name: "Build with
|
|
3
|
-
short_description: "Build consistent interfaces with
|
|
4
|
-
default_prompt: "Use $build-with-osx-components to build this interface from accessible
|
|
2
|
+
display_name: "Build with osx Components"
|
|
3
|
+
short_description: "Build consistent interfaces with osx Components"
|
|
4
|
+
default_prompt: "Use $build-with-osx-components to build this interface from accessible osx Components primitives."
|
|
@@ -66,6 +66,6 @@ const warnings = findings.filter((finding) => finding.severity === "warning");
|
|
|
66
66
|
if (json) console.log(JSON.stringify({ target, errors: errors.length, warnings: warnings.length, findings }, null, 2));
|
|
67
67
|
else {
|
|
68
68
|
for (const finding of findings) console.log(`${finding.severity.toUpperCase()} ${finding.file}:${finding.line} [${finding.rule}] ${finding.message}`);
|
|
69
|
-
console.log(`
|
|
69
|
+
console.log(`osx Components audit: ${errors.length} error(s), ${warnings.length} warning(s).`);
|
|
70
70
|
}
|
|
71
71
|
process.exitCode = errors.length || (strict && warnings.length) ? 1 : 0;
|