sol-components 2.1.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/README.md +7 -0
- package/core/activate.js +27 -0
- package/core/adopt.js +71 -0
- package/core/auth-core.js +73 -0
- package/core/auth-fetch.js +154 -0
- package/core/component-mount.js +110 -0
- package/core/defaults.js +48 -0
- package/core/define.js +15 -0
- package/core/display-target.js +166 -0
- package/core/edit-placements.js +28 -0
- package/core/editor-self.js +127 -0
- package/core/editor.js +162 -0
- package/core/events.js +27 -0
- package/core/extension-points.js +189 -0
- package/core/form-utils.js +210 -0
- package/core/from-query.js +138 -0
- package/core/from-rdf.js +52 -0
- package/core/here.js +33 -0
- package/core/include-core.js +73 -0
- package/core/inrupt-global.js +18 -0
- package/core/menu-consumer.js +41 -0
- package/core/menu-rdf.js +154 -0
- package/core/pod-ops.js +392 -0
- package/core/pod-registry.js +82 -0
- package/core/popup-proxy.js +255 -0
- package/core/rdf-core.js +280 -0
- package/core/rdf-render.js +136 -0
- package/core/rdf-utils.js +411 -0
- package/core/rdf.js +154 -0
- package/core/services.js +106 -0
- package/core/shape-to-form.js +741 -0
- package/core/sparql-safety.js +20 -0
- package/core/utils.js +196 -0
- package/dist/importmap-cdn.json +49 -0
- package/dist/importmap-local.json +49 -0
- package/dist/sol-loader.manifest.json +140 -0
- package/dist/vendor/@comunica-query-sparql.js +137851 -0
- package/dist/vendor/@inrupt-solid-client-authn-browser.js +7503 -0
- package/dist/vendor/dompurify.js +1476 -0
- package/dist/vendor/ical.js.js +9739 -0
- package/dist/vendor/marked.js +85 -0
- package/dist/vendor/n3.js +14670 -0
- package/dist/vendor/rdf-validate-shacl.js +6970 -0
- package/dist/vendor/rdflib.js +35172 -0
- package/dist/vendor/solid-logic.js +6819 -0
- package/dist/vendor/solid-ui.js +21945 -0
- package/node/sol-form.js +133 -0
- package/node/sol-include.js +55 -0
- package/node/sol-login.js +632 -0
- package/node/sol-menu.js +639 -0
- package/node/sol-query.js +116 -0
- package/package.json +133 -0
- package/web/menu-from-rdf.js +23 -0
- package/web/scripts/prefs.js +25 -0
- package/web/sol-accordion.js +114 -0
- package/web/sol-basic.js +50 -0
- package/web/sol-breadcrumb.js +131 -0
- package/web/sol-button.js +244 -0
- package/web/sol-calendar.js +465 -0
- package/web/sol-default.js +118 -0
- package/web/sol-dropdown-button.js +222 -0
- package/web/sol-feed.js +1336 -0
- package/web/sol-form.js +949 -0
- package/web/sol-full.js +43 -0
- package/web/sol-gallery.js +303 -0
- package/web/sol-include.js +246 -0
- package/web/sol-live-edit.js +415 -0
- package/web/sol-login.js +856 -0
- package/web/sol-menu.js +593 -0
- package/web/sol-modal.js +377 -0
- package/web/sol-pod-extras.js +17 -0
- package/web/sol-pod-ops.js +680 -0
- package/web/sol-pod.js +1039 -0
- package/web/sol-query.js +546 -0
- package/web/sol-rolodex.js +95 -0
- package/web/sol-search.js +402 -0
- package/web/sol-settings.js +199 -0
- package/web/sol-solidos.js +93 -0
- package/web/sol-tabs.js +445 -0
- package/web/sol-time.js +194 -0
- package/web/sol-tree-edit.js +492 -0
- package/web/sol-wac.js +456 -0
- package/web/sol-weather.js +337 -0
- package/web/sol-window.js +142 -0
- package/web/styles/buttons-css.js +108 -0
- package/web/styles/help.css +242 -0
- package/web/styles/root.css +112 -0
- package/web/styles/sol-accordion-css.js +97 -0
- package/web/styles/sol-calendar-css.js +154 -0
- package/web/styles/sol-feed-css.js +475 -0
- package/web/styles/sol-form-css.js +471 -0
- package/web/styles/sol-gallery-css.js +181 -0
- package/web/styles/sol-include-css.js +95 -0
- package/web/styles/sol-live-edit-css.js +84 -0
- package/web/styles/sol-live-edit.css +101 -0
- package/web/styles/sol-login-css.js +116 -0
- package/web/styles/sol-menu-css.js +145 -0
- package/web/styles/sol-modal-css.js +134 -0
- package/web/styles/sol-pod-css.js +187 -0
- package/web/styles/sol-pod-modal-css.js +203 -0
- package/web/styles/sol-query-css.js +140 -0
- package/web/styles/sol-query-help.css +267 -0
- package/web/styles/sol-query-one-pager.css +67 -0
- package/web/styles/sol-search-css.js +157 -0
- package/web/styles/sol-solidos-css.js +7 -0
- package/web/styles/sol-tabs-css.js +114 -0
- package/web/styles/sol-time-css.js +30 -0
- package/web/styles/sol-wac-css.js +73 -0
- package/web/styles/sol-weather-css.js +59 -0
- package/web/styles/solid-logo.svg +9 -0
- package/web/styles/view-accordion-css.js +66 -0
- package/web/styles/view-anchorlist-css.js +22 -0
- package/web/styles/view-autocomplete-css.js +59 -0
- package/web/styles/view-rolodex-css.js +102 -0
- package/web/styles/view-select-css.js +21 -0
- package/web/utils/calendar-fetch.js +388 -0
- package/web/utils/code-mirror-editor.js +82 -0
- package/web/utils/commons-fetch.js +108 -0
- package/web/utils/feed-edit.js +159 -0
- package/web/utils/feed-edit.smoke.mjs +74 -0
- package/web/utils/feed-fetch.js +573 -0
- package/web/utils/live-edit-help/csv.js +64 -0
- package/web/utils/live-edit-help/graphviz.js +41 -0
- package/web/utils/live-edit-help/jsonld.js +55 -0
- package/web/utils/live-edit-help/markdown.js +52 -0
- package/web/utils/live-edit-help/mermaid.js +48 -0
- package/web/utils/live-edit-help/turtle.js +85 -0
- package/web/utils/rdf-config.js +125 -0
- package/web/utils/renderers/csv.js +124 -0
- package/web/utils/renderers/d3-force.js +82 -0
- package/web/utils/renderers/graphviz.js +13 -0
- package/web/utils/renderers/html.js +10 -0
- package/web/utils/renderers/jsonld.js +63 -0
- package/web/utils/renderers/markdown.js +19 -0
- package/web/utils/renderers/mermaid.js +54 -0
- package/web/utils/renderers/turtle.js +51 -0
- package/web/utils/sol-query-triple-patterns.js +151 -0
- package/web/utils/sol-query-ui.js +250 -0
- package/web/utils/sol-query-views.js +32 -0
- package/web/views/_helpers.js +34 -0
- package/web/views/accordion.js +133 -0
- package/web/views/anchorlist.js +59 -0
- package/web/views/auto-complete.js +183 -0
- package/web/views/dl.js +38 -0
- package/web/views/list.js +19 -0
- package/web/views/menu.js +56 -0
- package/web/views/rolodex.js +126 -0
- package/web/views/select.js +79 -0
- package/web/views/table.js +73 -0
- package/web/views/tabs.js +57 -0
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-size:var(--font-size,20px);
|
|
3
|
+
}
|
|
4
|
+
.api-block { background:var(--surface,#fff); color:var(--text,#000); border-radius:8px; box-shadow:0 2px 4px var(--shadow,rgba(0,0,0,.1)); }
|
|
5
|
+
.attr-table { width:100%; border-collapse:collapse; font-size:.9rem; margin:.5rem 0 1rem; }
|
|
6
|
+
.attr-table th { background:var(--th-bg,#f0f4f8); color:var(--text,#000); text-align:left; padding:.5rem .75rem; border:1px solid var(--border,#d0dce8); }
|
|
7
|
+
.attr-table td { padding:.45rem .75rem; border:1px solid var(--border,#e0e8f0); vertical-align:top; }
|
|
8
|
+
.attr-table td:first-child { font-family:'Courier New',monospace; color:var(--link,#2c6e9e); white-space:nowrap; }
|
|
9
|
+
.attr-table td:nth-child(2) { color:var(--text-muted,#666); white-space:nowrap; }
|
|
10
|
+
.note-box { background:var(--note-bg,#fff8e1); color:var(--text,#000); border-left:4px solid var(--note-border,#f9a825); padding:.75rem 1rem; border-radius:4px; font-size:.9rem; margin:.75rem 0; }
|
|
11
|
+
.warn-box { background:var(--warn-bg,#fdecea); color:var(--text,#000); border-left:4px solid var(--warn-border,#e53935); padding:.75rem 1rem; border-radius:4px; font-size:.9rem; margin:.75rem 0; }
|
|
12
|
+
.tip-box { background:var(--tip-bg,#e8f5e9); color:var(--text,#000); border-left:4px solid var(--tip-border,#43a047); padding:.75rem 1rem; border-radius:4px; font-size:.9rem; margin:.75rem 0; }
|
|
13
|
+
.hero { background:var(--hero-bg,#e3f2fd); color:var(--text,#000); border-left:4px solid var(--hero-border,#1976d2); padding:1rem 1.25rem; border-radius:6px; margin:1rem 0; }
|
|
14
|
+
.hero h2 { margin-top:0; }
|
|
15
|
+
.ex-label { font-size:.78rem; font-weight:600; color:var(--text-muted,#7f8c8d); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; }
|
|
16
|
+
nav a.active { background:var(--hover,#eaf2fb); border-color:var(--accent,#3498db); color:var(--accent,#1a6fad); font-weight:600; }
|
|
17
|
+
#playground textarea { width:100%; min-height:120px; padding:1rem; border:2px solid var(--border,#ddd); border-radius:5px;
|
|
18
|
+
font-family:'Courier New',monospace; font-size:.9rem; resize:vertical; margin-bottom:1rem; background:var(--surface,#fff); color:var(--text,#000); }
|
|
19
|
+
#playground textarea:focus { outline:none; border-color:var(--accent,#3498db); }
|
|
20
|
+
.page-nav,div.usage-section, pre {width:fit-content;}
|
|
21
|
+
div.usage-section {margin-left:2rem; margin-right:2rem;}
|
|
22
|
+
code { border:1px dashed var(--border,#444) !important; }
|
|
23
|
+
body { max-width:960px; }
|
|
24
|
+
li { margin-bottom:1.5rem; }
|
|
25
|
+
ul { margin-bottom:0; margin-top:1rem; }
|
|
26
|
+
|
|
27
|
+
/* ───────────────────────────────────────────────────────────────────────
|
|
28
|
+
* Help-page layouts. Two patterns share most of the styling:
|
|
29
|
+
*
|
|
30
|
+
* body.tabbed-help — full-viewport flex column; header sits up top,
|
|
31
|
+
* a tab bar below it, and the active tab panel
|
|
32
|
+
* takes the remaining height and scrolls inside
|
|
33
|
+
* itself. Used by every component help page that
|
|
34
|
+
* has live-demo tabs.
|
|
35
|
+
*
|
|
36
|
+
* body.scroll-help — the older simple help layout (margin 2rem,
|
|
37
|
+
* max-width 960px). Used by sol-menu-from-rdf
|
|
38
|
+
* and sol-tabs-from-rdf.
|
|
39
|
+
*
|
|
40
|
+
* A page opts in by setting the class on <body>. Page-specific
|
|
41
|
+
* overrides (per-tab widget sizing, demo grids, syntax highlights)
|
|
42
|
+
* live below in #id selectors that only exist on that page, so they
|
|
43
|
+
* don't conflict.
|
|
44
|
+
* ─────────────────────────────────────────────────────────────────── */
|
|
45
|
+
|
|
46
|
+
/* ── tabbed-help: full-viewport tabs layout ────────────────────────── */
|
|
47
|
+
body.tabbed-help { max-width: none; }
|
|
48
|
+
body.tabbed-help, html:has(body.tabbed-help) { height: 100%; }
|
|
49
|
+
body.tabbed-help {
|
|
50
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
51
|
+
margin: 0; padding: 0; color: var(--text, #2c3e50);
|
|
52
|
+
background: var(--bg, transparent); font-size: var(--font-size, 20px);
|
|
53
|
+
display: flex; flex-direction: column; overflow: hidden;
|
|
54
|
+
}
|
|
55
|
+
body.tabbed-help h1 { margin: 0 .9rem .2rem; margin-top: 0; }
|
|
56
|
+
body.tabbed-help h2 { margin-bottom: .5rem; }
|
|
57
|
+
body.tabbed-help i { color: var(--success, green); }
|
|
58
|
+
body.tabbed-help .page-intro { margin: 0 .9rem .6rem; max-width: 960px; }
|
|
59
|
+
body.tabbed-help pre {
|
|
60
|
+
background: var(--code-bg, #f4f6f8); color: var(--text, inherit);
|
|
61
|
+
border: 1px solid var(--border, #d0dce8); border-radius: 6px; padding: 1rem;
|
|
62
|
+
overflow-x: auto; font-size: .9rem; line-height: 1.5; margin: .5rem 0;
|
|
63
|
+
}
|
|
64
|
+
body.tabbed-help code { font-family: 'Fira Code', 'Consolas', monospace; }
|
|
65
|
+
|
|
66
|
+
body.tabbed-help .tabs {
|
|
67
|
+
display: flex; gap: 0; flex-wrap: wrap; flex: 0 0 auto;
|
|
68
|
+
border-bottom: 2px solid var(--border, #d0dce8); margin: 0 .9rem;
|
|
69
|
+
}
|
|
70
|
+
body.tabbed-help .tabs button {
|
|
71
|
+
background: none; border: none; padding: .6rem 1.2rem; cursor: pointer;
|
|
72
|
+
font-size: .95rem; color: var(--text-muted, #7f8c8d);
|
|
73
|
+
border-bottom: 2px solid transparent; margin-bottom: -2px;
|
|
74
|
+
}
|
|
75
|
+
body.tabbed-help .tabs button[aria-selected="true"] {
|
|
76
|
+
color: var(--text, #2c3e50);
|
|
77
|
+
border-bottom-color: var(--accent, #3498db); font-weight: 600;
|
|
78
|
+
}
|
|
79
|
+
body.tabbed-help .tabs button:hover { color: var(--text, #2c3e50); }
|
|
80
|
+
body.tabbed-help .tabs button:focus-visible { outline: 2px solid var(--accent, #3498db); outline-offset: -2px; }
|
|
81
|
+
|
|
82
|
+
body.tabbed-help .tab-panel { display: none; }
|
|
83
|
+
body.tabbed-help .tab-panel.active { display: block; flex: 1 1 auto; overflow: auto; padding: .9rem; }
|
|
84
|
+
|
|
85
|
+
body.tabbed-help .demo-area {
|
|
86
|
+
border: 1px solid var(--border, #d0dce8); border-radius: 6px;
|
|
87
|
+
background: var(--surface, #fff);
|
|
88
|
+
}
|
|
89
|
+
body.tabbed-help .demo-code {
|
|
90
|
+
align-self: flex-start; margin: 0;
|
|
91
|
+
background: var(--pre-bg, #2c3e50); color: var(--pre-fg, #ecf0f1);
|
|
92
|
+
border: none;
|
|
93
|
+
}
|
|
94
|
+
body.tabbed-help .demo-code code { border: none !important; }
|
|
95
|
+
|
|
96
|
+
/* ── scroll-help: simple scrolling page ───────────────────────────── */
|
|
97
|
+
body.scroll-help {
|
|
98
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
99
|
+
margin: 2rem; color: var(--text, #2c3e50);
|
|
100
|
+
background: var(--bg, transparent); max-width: 960px;
|
|
101
|
+
font-size: var(--font-size, 20px);
|
|
102
|
+
}
|
|
103
|
+
body.scroll-help i { color: var(--success, green); }
|
|
104
|
+
body.scroll-help h2 { margin-bottom: .5rem; }
|
|
105
|
+
body.scroll-help h2 + p { margin-bottom: 1.5rem; }
|
|
106
|
+
body.scroll-help pre {
|
|
107
|
+
background: var(--code-bg, #f4f6f8); color: var(--text, inherit);
|
|
108
|
+
border: 1px solid var(--border, #d0dce8); border-radius: 6px;
|
|
109
|
+
padding: 1rem; overflow-x: auto; font-size: .9rem; line-height: 1.5; margin: 0;
|
|
110
|
+
}
|
|
111
|
+
body.scroll-help code { font-family: 'Fira Code', 'Consolas', monospace; }
|
|
112
|
+
body.scroll-help .demo-area {
|
|
113
|
+
border: 1px solid var(--border, #d0dce8); border-radius: 6px;
|
|
114
|
+
padding: 1rem; background: var(--surface, #fff);
|
|
115
|
+
}
|
|
116
|
+
body.scroll-help .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border, #d0dce8); margin-bottom: 1rem; }
|
|
117
|
+
body.scroll-help .tabs button { background: none; border: none; padding: .6rem 1.2rem; cursor: pointer; font-size: .95rem; color: var(--text-muted, #7f8c8d); border-bottom: 2px solid transparent; margin-bottom: -2px; }
|
|
118
|
+
body.scroll-help .tabs button.active { color: var(--text, #2c3e50); border-bottom-color: var(--accent, #3498db); font-weight: 600; }
|
|
119
|
+
body.scroll-help .tabs button:hover { color: var(--text, #2c3e50); }
|
|
120
|
+
body.scroll-help .tab-panel { display: none; }
|
|
121
|
+
body.scroll-help .tab-panel.active { display: block; max-height: 70vh; overflow: auto; }
|
|
122
|
+
|
|
123
|
+
/* ── page-specific selectors (each ID only exists on one page) ────── */
|
|
124
|
+
|
|
125
|
+
/* sol-calendar-help */
|
|
126
|
+
#tab-attr, #tab-providers, #tab-config,
|
|
127
|
+
#tab-multi, #tab-meeting, #tab-theme, #tab-a11y { max-width: 960px; }
|
|
128
|
+
#tab-agenda .demo-area { width: max-content; max-width: 100%; }
|
|
129
|
+
#tab-agenda sol-calendar { width: 460px; max-width: 100%; height: 540px; }
|
|
130
|
+
#tab-agenda.tab-panel.active { display: flex; flex-direction: row; gap: 1rem; }
|
|
131
|
+
|
|
132
|
+
/* sol-feed-help */
|
|
133
|
+
#tab-sources { max-width: 960px; }
|
|
134
|
+
#tab-feed .demo-area,
|
|
135
|
+
#tab-topic .demo-area { width: max-content; max-width: 100%; }
|
|
136
|
+
#tab-feed sol-feed,
|
|
137
|
+
#tab-topic sol-feed { width: 420px; max-width: 100%; }
|
|
138
|
+
#tab-topic .demo-area,
|
|
139
|
+
#tab-all .demo-area { border: none; background: transparent; }
|
|
140
|
+
#tab-feed.tab-panel.active,
|
|
141
|
+
#tab-topic.tab-panel.active { display: flex; flex-direction: row; gap: 1rem; }
|
|
142
|
+
|
|
143
|
+
/* sol-form-help — demo grid + SHACL syntax highlight */
|
|
144
|
+
#tab-modes, #tab-mapping, #tab-script { max-width: 960px; }
|
|
145
|
+
#tab-demo .demo-grid {
|
|
146
|
+
display: grid;
|
|
147
|
+
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
|
148
|
+
gap: 1rem; align-items: start; max-width: 1200px;
|
|
149
|
+
}
|
|
150
|
+
@media (max-width: 880px) { #tab-demo .demo-grid { grid-template-columns: 1fr; } }
|
|
151
|
+
#tab-demo .panel {
|
|
152
|
+
border: 1px solid var(--border, #d0d0d0);
|
|
153
|
+
border-radius: 6px; background: var(--surface, #fff); overflow: hidden;
|
|
154
|
+
}
|
|
155
|
+
#tab-demo .panel-head {
|
|
156
|
+
padding: .6rem 1rem;
|
|
157
|
+
border-bottom: 1px solid var(--border, #d0d0d0);
|
|
158
|
+
background: linear-gradient(to bottom,
|
|
159
|
+
color-mix(in srgb, var(--accent, #1F618D) 4%, var(--surface, #fff)),
|
|
160
|
+
var(--surface, #fff));
|
|
161
|
+
font-weight: 600; font-size: .85rem; letter-spacing: 0.01em;
|
|
162
|
+
display: flex; align-items: baseline; justify-content: space-between;
|
|
163
|
+
}
|
|
164
|
+
#tab-demo .panel-head .label { color: var(--accent, #1F618D); }
|
|
165
|
+
#tab-demo .panel-head .hint { font-weight: 400; color: var(--text-muted, #4d4d4d); font-size: .75rem; }
|
|
166
|
+
#tab-demo .panel-body { padding: 1rem 1.25rem 1.25rem; }
|
|
167
|
+
pre.shacl {
|
|
168
|
+
margin: 0; padding: 1rem 1.25rem;
|
|
169
|
+
font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
|
|
170
|
+
font-size: .78rem; line-height: 1.55;
|
|
171
|
+
background: var(--code-bg, #fdf6e3); color: var(--text, #2c3e50);
|
|
172
|
+
border: 0; border-radius: 0; max-height: 65vh; overflow: auto;
|
|
173
|
+
}
|
|
174
|
+
pre.shacl .kw { color: #859900; }
|
|
175
|
+
pre.shacl .uri { color: #268bd2; }
|
|
176
|
+
pre.shacl .lit { color: #cb4b16; }
|
|
177
|
+
pre.shacl .cmt { color: #93a1a1; font-style: italic; }
|
|
178
|
+
table.mapping {
|
|
179
|
+
border-collapse: collapse; width: 100%; max-width: 880px; font-size: 0.92rem;
|
|
180
|
+
}
|
|
181
|
+
table.mapping th, table.mapping td {
|
|
182
|
+
text-align: left; vertical-align: top;
|
|
183
|
+
padding: 0.45rem 0.75rem;
|
|
184
|
+
border-bottom: 1px solid var(--border-soft, #e0e0e0);
|
|
185
|
+
}
|
|
186
|
+
table.mapping th {
|
|
187
|
+
background: var(--th-bg, #f0f4f8); font-weight: 600;
|
|
188
|
+
font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
|
|
189
|
+
color: var(--text-muted, #4d4d4d);
|
|
190
|
+
}
|
|
191
|
+
table.mapping td:first-child, table.mapping td:nth-child(2) {
|
|
192
|
+
font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
|
|
193
|
+
font-size: 0.85rem; white-space: nowrap;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* sol-login-help — live demo strip */
|
|
197
|
+
.demo-strip {
|
|
198
|
+
display: flex; align-items: center; gap: 1rem;
|
|
199
|
+
padding: .8rem 1rem; margin: .5rem 0 1rem;
|
|
200
|
+
background: var(--surface, #fff);
|
|
201
|
+
border: 1px solid var(--border, #d0dce8); border-radius: 6px;
|
|
202
|
+
}
|
|
203
|
+
.demo-strip-label { color: var(--text-muted, #4d4d4d); font-size: .9rem; flex-shrink: 0; }
|
|
204
|
+
.demo-strip-log {
|
|
205
|
+
flex: 1; min-width: 0; font-family: monospace;
|
|
206
|
+
font-size: .82rem; color: var(--text-muted, #4d4d4d);
|
|
207
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* sol-menu-from-rdf */
|
|
211
|
+
sol-menu nav { --font-size: 80px; }
|
|
212
|
+
#display { padding: 1rem; }
|
|
213
|
+
.scroll-help .demo-area { height: 70vh; }
|
|
214
|
+
|
|
215
|
+
/* sol-pod-demo */
|
|
216
|
+
body.pod-demo #results { padding: 1rem; background: lightgrey; }
|
|
217
|
+
body.pod-demo .container { height: 480px; width: 840px; margin: auto; }
|
|
218
|
+
body.pod-demo sol-pod { font-size: var(--font-size, 20px); }
|
|
219
|
+
|
|
220
|
+
/* sol-query-help */
|
|
221
|
+
body.query-help pre b { color: orange; }
|
|
222
|
+
body.query-help li { display: inline-block; margin-right: 1rem; text-align: top; }
|
|
223
|
+
|
|
224
|
+
/* sol-search-help */
|
|
225
|
+
#tab-engines { max-width: 960px; }
|
|
226
|
+
body.tabbed-help.help-sol-search .demo-area { padding: 1.25rem; }
|
|
227
|
+
#tab-button.tab-panel.active,
|
|
228
|
+
#tab-inline.tab-panel.active {
|
|
229
|
+
display: flex; flex-direction: row; gap: 1rem; align-items: flex-start;
|
|
230
|
+
}
|
|
231
|
+
#tab-button .demo-area { display: inline-block; }
|
|
232
|
+
#tab-inline .demo-area { width: 36rem; max-width: 100%; }
|
|
233
|
+
#tab-inline .demo-area sol-search { display: flex; width: 100%; }
|
|
234
|
+
|
|
235
|
+
/* sol-time-help */
|
|
236
|
+
body.tabbed-help.help-sol-time .demo-area { padding: 1.5rem 2rem; display: inline-block; }
|
|
237
|
+
#tab-clock.tab-panel.active { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; }
|
|
238
|
+
|
|
239
|
+
/* sol-weather-help */
|
|
240
|
+
#tab-data { max-width: 960px; }
|
|
241
|
+
body.tabbed-help.help-sol-weather .demo-area { padding: 1.5rem 2rem; display: inline-block; }
|
|
242
|
+
#tab-card.tab-panel.active { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; }
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #f5f5f5;
|
|
3
|
+
--surface: #ffffff;
|
|
4
|
+
--border: #9e9e9e;
|
|
5
|
+
--text: #000000;
|
|
6
|
+
--text-muted: #4d4d4d;
|
|
7
|
+
--accent: #3498db;
|
|
8
|
+
--accent: #1F618D;
|
|
9
|
+
--accent-dark: #2980b9;
|
|
10
|
+
--hover: #eaf2fb;
|
|
11
|
+
--focus-bg: #ebf5fb;
|
|
12
|
+
--code-bg: #f4f4f4;
|
|
13
|
+
--error: #e74c3c;
|
|
14
|
+
--success: #27ae60;
|
|
15
|
+
--shadow: rgba(0,0,0,0.08);
|
|
16
|
+
--shadow-popup: 0 4px 12px rgba(0,0,0,0.12);
|
|
17
|
+
--shadow-modal: 0 8px 24px rgba(0,0,0,0.25);
|
|
18
|
+
--scrim: rgba(0,0,0,0.4);
|
|
19
|
+
|
|
20
|
+
/* doc-page palette */
|
|
21
|
+
--pre-bg: #2c3e50;
|
|
22
|
+
--pre-fg: #ecf0f1;
|
|
23
|
+
--th-bg: #f0f4f8;
|
|
24
|
+
--link: #2980b9;
|
|
25
|
+
--link-border: #d0dce8;
|
|
26
|
+
--note-bg: #fff8e1; --note-border: #f9a825;
|
|
27
|
+
--warn-bg: #fdecea; --warn-border: #e53935;
|
|
28
|
+
--tip-bg: #e8f5e9; --tip-border: #43a047;
|
|
29
|
+
--hero-bg: #e3f2fd; --hero-border: #1976d2;
|
|
30
|
+
--small-font: 16px;
|
|
31
|
+
--medium-font: 20px;
|
|
32
|
+
--large-font: 24px;
|
|
33
|
+
--font-size: var(--medium-font, 20px);
|
|
34
|
+
--font-ui: 'Segoe UI', Roboto, sans-serif;
|
|
35
|
+
--font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
|
|
36
|
+
--font-weight-normal: 400;
|
|
37
|
+
--font-weight-bold: 600;
|
|
38
|
+
--line-height-tight: 1.25;
|
|
39
|
+
--line-height-base: 1.5;
|
|
40
|
+
|
|
41
|
+
/* spacing scale */
|
|
42
|
+
--space-xs: 2px;
|
|
43
|
+
--space-sm: 4px;
|
|
44
|
+
--space-md: 8px;
|
|
45
|
+
--space-lg: 12px;
|
|
46
|
+
--space-xl: 16px;
|
|
47
|
+
--space-2xl: 24px;
|
|
48
|
+
|
|
49
|
+
/* radius scale */
|
|
50
|
+
--radius-sm: 4px;
|
|
51
|
+
--radius-md: 6px;
|
|
52
|
+
|
|
53
|
+
/* Project-standard section divider — a muted double rule used between
|
|
54
|
+
a control / list area and the content area it labels (dashboard
|
|
55
|
+
header → feed grid, feed top-bar → articles, etc.). Set as a
|
|
56
|
+
single `border` shorthand so a page can override the whole look
|
|
57
|
+
with one custom-property assignment, e.g.
|
|
58
|
+
:root { --divider-line: 1px solid var(--accent); }
|
|
59
|
+
Custom properties cascade through shadow-DOM boundaries, so this
|
|
60
|
+
reaches every component without a per-element selector. */
|
|
61
|
+
--divider-line: 3px double var(--border);
|
|
62
|
+
|
|
63
|
+
/* component sizing */
|
|
64
|
+
--menu-nav-min-width: 140px;
|
|
65
|
+
--menu-nav-max-width: 260px;
|
|
66
|
+
--menu-popup-min-width: 160px;
|
|
67
|
+
--bnode-modal-max-width: min(90vw, 700px);
|
|
68
|
+
--bnode-modal-max-height: 80vh;
|
|
69
|
+
}
|
|
70
|
+
/*
|
|
71
|
+
@media (prefers-color-scheme: dark) {
|
|
72
|
+
:root:not([data-theme="light"]) {
|
|
73
|
+
--bg: #1a1a1a;
|
|
74
|
+
--focus-bg: #e0e0e0;
|
|
75
|
+
--surface: #252525;
|
|
76
|
+
--surface: #909090;
|
|
77
|
+
--border: #3e3e3e;
|
|
78
|
+
--text: #e0e0e0;
|
|
79
|
+
--text:#000;
|
|
80
|
+
--text-muted: #909090;
|
|
81
|
+
--hover: #2e2e2e;
|
|
82
|
+
--focus-bg: #2a2e34;
|
|
83
|
+
--code-bg: #1e1e1e;
|
|
84
|
+
--accent: #4dabf7;
|
|
85
|
+
--accent-dark: #339af0;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
*/
|
|
89
|
+
[data-theme="dark"] {
|
|
90
|
+
--bg: #1a1a1a;
|
|
91
|
+
--surface: #252525;
|
|
92
|
+
--border: #3e3e3e;
|
|
93
|
+
--text: #e0e0e0;
|
|
94
|
+
--text-muted: #909090;
|
|
95
|
+
--hover: #2e2e2e;
|
|
96
|
+
--focus-bg: #2a2e34;
|
|
97
|
+
--code-bg: #1e1e1e;
|
|
98
|
+
--accent: #4dabf7;
|
|
99
|
+
--accent-dark: #339af0;
|
|
100
|
+
|
|
101
|
+
--pre-bg: #0e1620;
|
|
102
|
+
--pre-fg: #cfd9e6;
|
|
103
|
+
--th-bg: #2a2e34;
|
|
104
|
+
--link: #6cc0f5;
|
|
105
|
+
--link-border: #3e4a55;
|
|
106
|
+
--note-bg: #2e2814; --note-border: #d4a020;
|
|
107
|
+
--warn-bg: #2e1817; --warn-border: #e57373;
|
|
108
|
+
--tip-bg: #15281a; --tip-border: #66bb6a;
|
|
109
|
+
--hero-bg: #122a3e; --hero-border: #4dabf7;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
// Light-DOM styles for <sol-accordion>. Injected into the element's
|
|
2
|
+
// ownerDocument once per page (see ensureDocStyle in shared/adopt.js).
|
|
3
|
+
// Includes design tokens plus accordion rules.
|
|
4
|
+
|
|
5
|
+
export const CSS = `
|
|
6
|
+
:root {
|
|
7
|
+
--bg: #f5f5f5;
|
|
8
|
+
--surface: #ffffff;
|
|
9
|
+
--border: #d0d0d0;
|
|
10
|
+
--text: #2c3e50;
|
|
11
|
+
--text-muted: #7f8c8d;
|
|
12
|
+
--accent: #3498db;
|
|
13
|
+
--accent-dark: #2980b9;
|
|
14
|
+
--hover: #eaf2fb;
|
|
15
|
+
--focus-bg: #ebf5fb;
|
|
16
|
+
--code-bg: #f4f4f4;
|
|
17
|
+
--error: #e74c3c;
|
|
18
|
+
--success: #27ae60;
|
|
19
|
+
--shadow: rgba(0,0,0,0.08);
|
|
20
|
+
--font-size: 105%;
|
|
21
|
+
--font-ui: 'Segoe UI', Roboto, sans-serif;
|
|
22
|
+
--font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
|
|
23
|
+
}
|
|
24
|
+
@media (prefers-color-scheme: dark) {
|
|
25
|
+
:root:not([data-theme="light"]) {
|
|
26
|
+
--bg: #1a1a1a;
|
|
27
|
+
--surface: #252525;
|
|
28
|
+
--border: #3e3e3e;
|
|
29
|
+
--text: #e0e0e0;
|
|
30
|
+
--text-muted: #909090;
|
|
31
|
+
--hover: #2e2e2e;
|
|
32
|
+
--focus-bg: #2a2e34;
|
|
33
|
+
--code-bg: #1e1e1e;
|
|
34
|
+
--accent: #4dabf7;
|
|
35
|
+
--accent-dark: #339af0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
[data-theme="dark"] {
|
|
39
|
+
--bg: #1a1a1a;
|
|
40
|
+
--surface: #252525;
|
|
41
|
+
--border: #3e3e3e;
|
|
42
|
+
--text: #e0e0e0;
|
|
43
|
+
--text-muted: #909090;
|
|
44
|
+
--hover: #2e2e2e;
|
|
45
|
+
--focus-bg: #2a2e34;
|
|
46
|
+
--code-bg: #1e1e1e;
|
|
47
|
+
--accent: #4dabf7;
|
|
48
|
+
--accent-dark: #339af0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.sol-accordion-wrapper details {
|
|
52
|
+
border: 1px solid var(--border, #e0e0e0);
|
|
53
|
+
border-radius: 4px;
|
|
54
|
+
margin-bottom: .35rem;
|
|
55
|
+
background: var(--surface, #fff);
|
|
56
|
+
}
|
|
57
|
+
.sol-accordion-wrapper summary {
|
|
58
|
+
padding: .5rem .75rem;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
font-weight: 600;
|
|
61
|
+
background: var(--hover, #f7f7f7);
|
|
62
|
+
border-radius: 4px;
|
|
63
|
+
list-style: none;
|
|
64
|
+
display: flex;
|
|
65
|
+
justify-content: space-between;
|
|
66
|
+
align-items: center;
|
|
67
|
+
}
|
|
68
|
+
.sol-accordion-wrapper details[open] summary {
|
|
69
|
+
border-bottom: 1px solid var(--border, #e0e0e0);
|
|
70
|
+
border-radius: 4px 4px 0 0;
|
|
71
|
+
}
|
|
72
|
+
.sol-accordion-wrapper summary::-webkit-details-marker { display: none; }
|
|
73
|
+
.sol-accordion-wrapper summary::after {
|
|
74
|
+
content: '\\25BC';
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
margin-left: 1em;
|
|
77
|
+
transition: transform .15s;
|
|
78
|
+
}
|
|
79
|
+
.sol-accordion-wrapper details[open] > summary::after {
|
|
80
|
+
transform: rotate(180deg);
|
|
81
|
+
}
|
|
82
|
+
.sol-accordion-wrapper .accordion-body {
|
|
83
|
+
padding: .6rem .85rem;
|
|
84
|
+
}
|
|
85
|
+
.sol-accordion-wrapper .accordion-content-section {
|
|
86
|
+
display: block;
|
|
87
|
+
margin-bottom: .5rem;
|
|
88
|
+
}
|
|
89
|
+
.sol-accordion-wrapper .accordion-content-section:last-child {
|
|
90
|
+
margin-bottom: 0;
|
|
91
|
+
}
|
|
92
|
+
.sol-accordion-wrapper a {
|
|
93
|
+
color: var(--accent, #0066cc);
|
|
94
|
+
text-decoration: none;
|
|
95
|
+
}
|
|
96
|
+
.sol-accordion-wrapper a:hover { text-decoration: underline; }
|
|
97
|
+
`;
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
// Styles for <sol-calendar>'s shadow root. Exports the raw `CSS` string
|
|
2
|
+
// plus a constructable `sheet` — same shape as the other web/styles/*-css.js
|
|
3
|
+
// modules. All colours and metrics reference the shared design tokens so
|
|
4
|
+
// the component themes with the rest of the suite.
|
|
5
|
+
import { sheetFrom } from '../../core/adopt.js';
|
|
6
|
+
|
|
7
|
+
export const CSS = `
|
|
8
|
+
:host {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
/* Respect whatever height the container gives us; with no container
|
|
12
|
+
height, fall back to this viewport cap. Either way the agenda list
|
|
13
|
+
scrolls inside the component and never overflows its container. */
|
|
14
|
+
height: 100%;
|
|
15
|
+
max-height: 100vh;
|
|
16
|
+
font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
|
|
17
|
+
font-size: var(--font-size, 20px);
|
|
18
|
+
color: var(--text, #212121);
|
|
19
|
+
}
|
|
20
|
+
* { box-sizing: border-box; }
|
|
21
|
+
|
|
22
|
+
.sol-calendar {
|
|
23
|
+
flex: 1 1 auto;
|
|
24
|
+
min-height: 0;
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* ── status / loading / empty ───────────────────────────────────────── */
|
|
30
|
+
.sol-calendar-status {
|
|
31
|
+
flex: 0 0 auto;
|
|
32
|
+
padding: .5rem .75rem;
|
|
33
|
+
color: var(--text-muted, #7f8c8d);
|
|
34
|
+
font-size: .85em;
|
|
35
|
+
}
|
|
36
|
+
.sol-calendar-status[data-error] { color: var(--error, #e74c3c); }
|
|
37
|
+
.sol-calendar-empty {
|
|
38
|
+
padding: 1rem .75rem;
|
|
39
|
+
color: var(--text-muted, #7f8c8d);
|
|
40
|
+
font-style: italic;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* ── header (provider label) ────────────────────────────────────────── */
|
|
44
|
+
.cal-header {
|
|
45
|
+
flex: 0 0 auto;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: baseline;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
gap: .75rem;
|
|
50
|
+
padding: .4rem .75rem;
|
|
51
|
+
border-bottom: 1px solid var(--border, #d0d0d0);
|
|
52
|
+
background: var(--surface, #fff);
|
|
53
|
+
}
|
|
54
|
+
.cal-title {
|
|
55
|
+
font-weight: 600;
|
|
56
|
+
font-size: .95em;
|
|
57
|
+
color: var(--text, #212121);
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
text-overflow: ellipsis;
|
|
60
|
+
white-space: nowrap;
|
|
61
|
+
}
|
|
62
|
+
.cal-provider {
|
|
63
|
+
color: var(--text-muted, #7f8c8d);
|
|
64
|
+
font-size: .8em;
|
|
65
|
+
text-transform: lowercase;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* ── agenda list (table-like: date | time | event per row) ──────────── */
|
|
69
|
+
.cal-agenda {
|
|
70
|
+
flex: 1 1 auto;
|
|
71
|
+
min-height: 0;
|
|
72
|
+
overflow: auto;
|
|
73
|
+
background: var(--surface, #fff);
|
|
74
|
+
border: 1px solid var(--border, #d0d0d0);
|
|
75
|
+
border-radius: 6px;
|
|
76
|
+
margin: .5rem;
|
|
77
|
+
}
|
|
78
|
+
/* No day-header rows — each .cal-row is self-contained with its own
|
|
79
|
+
date column, so the agenda reads as one flat table-like list. */
|
|
80
|
+
|
|
81
|
+
.cal-rows {
|
|
82
|
+
list-style: none;
|
|
83
|
+
margin: 0;
|
|
84
|
+
padding: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.cal-row {
|
|
88
|
+
display: grid;
|
|
89
|
+
/* Body column is "auto" (not "1fr") so each row's intrinsic
|
|
90
|
+
width is the actual width of its content. That lets host
|
|
91
|
+
pages size the whole calendar to fit-content via
|
|
92
|
+
"width: max-content" — the fr-based version had no
|
|
93
|
+
well-defined max-content, which collapses fit-width sizing.
|
|
94
|
+
NOTE: Don't use backticks in this comment; the surrounding
|
|
95
|
+
JS template literal uses backticks as its delimiter and any
|
|
96
|
+
stray one in the CSS body terminates the string early. */
|
|
97
|
+
grid-template-columns: 7rem 7rem auto;
|
|
98
|
+
column-gap: .75rem;
|
|
99
|
+
align-items: baseline;
|
|
100
|
+
padding: .35rem .75rem;
|
|
101
|
+
border-top: 1px solid color-mix(in srgb, var(--border, #d0d0d0) 50%, transparent);
|
|
102
|
+
font-size: .9em;
|
|
103
|
+
}
|
|
104
|
+
.cal-row:first-child { border-top: none; }
|
|
105
|
+
/* When the row is "today", give a subtle accent stripe at the left so
|
|
106
|
+
it stands out without changing the column widths or alignment. */
|
|
107
|
+
.cal-row.today {
|
|
108
|
+
background: color-mix(in srgb, var(--accent, #3498db) 8%, transparent);
|
|
109
|
+
box-shadow: inset 3px 0 0 var(--accent, #3498db);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.cal-row-date,
|
|
113
|
+
.cal-row-time {
|
|
114
|
+
color: var(--text-muted, #7f8c8d);
|
|
115
|
+
font-variant-numeric: tabular-nums;
|
|
116
|
+
white-space: nowrap;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
text-overflow: ellipsis;
|
|
119
|
+
}
|
|
120
|
+
/* The date repeats on every row. Don't visually emphasise it — the
|
|
121
|
+
event title is the row's primary content. */
|
|
122
|
+
.cal-row-date { font-size: .9em; }
|
|
123
|
+
/* When a date is the same as the row above, the JS adds .repeat —
|
|
124
|
+
keep the column reserved (no layout shift) but hide the text so a
|
|
125
|
+
run of same-day events reads cleanly. */
|
|
126
|
+
.cal-row-date.repeat { visibility: hidden; }
|
|
127
|
+
|
|
128
|
+
.cal-row-body { min-width: 0; }
|
|
129
|
+
.cal-row-summary {
|
|
130
|
+
color: var(--text, #212121);
|
|
131
|
+
overflow-wrap: anywhere;
|
|
132
|
+
}
|
|
133
|
+
.cal-row-location {
|
|
134
|
+
display: block;
|
|
135
|
+
color: var(--text-muted, #7f8c8d);
|
|
136
|
+
font-size: .85em;
|
|
137
|
+
margin-top: .1rem;
|
|
138
|
+
overflow-wrap: anywhere;
|
|
139
|
+
}
|
|
140
|
+
.cal-row a {
|
|
141
|
+
/* Use the theme's link colour so a clickable event summary reads as
|
|
142
|
+
a real link (Jitsi / Meet / W3C events-page join URLs) — the
|
|
143
|
+
row's plain text events stay in the regular text colour. */
|
|
144
|
+
color: var(--link, var(--accent, #2980b9));
|
|
145
|
+
text-decoration: none;
|
|
146
|
+
}
|
|
147
|
+
.cal-row a:hover,
|
|
148
|
+
.cal-row a:focus-visible {
|
|
149
|
+
text-decoration: underline;
|
|
150
|
+
}
|
|
151
|
+
`;
|
|
152
|
+
|
|
153
|
+
export const sheet = sheetFrom(CSS);
|
|
154
|
+
export default sheet;
|