sol-components 2.1.0

package/web/styles/sol-query-help.css

@@ -0,0 +1,267 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  color: var(--text, #333);
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: var(--bg, #f5f5f5);
+}
+
+.page-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.6rem;
+  margin: 1rem 0 1.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--surface, #fff);
+  border-radius: 6px;
+  box-shadow: 0 1px 3px var(--shadow, rgba(0,0,0,0.08));
+}
+
+.page-nav a, .cell.name a, .attr-table a {
+  color: var(--link, #2980b9);
+  text-decoration: none;
+  font-size: 0.9rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 4px;
+  border: 1px solid var(--link-border, #d0dce8);
+  white-space: nowrap;
+}
+
+.page-nav a:hover, .cell.name a:hover, .attr-table a:hover {
+  background: var(--hover, #eaf2fb);
+  border-color: var(--accent, #3498db);
+}
+
+h1 {
+  color: var(--text, #2c3e50);
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
+}
+
+h2 {
+  color: var(--text, #34495e);
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--accent, #3498db);
+}
+
+h3 {
+  color: var(--text, #555);
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+code {
+  background: var(--code-bg, #f8f8f8);
+  border: 1px solid var(--border, #ddd);
+  border-radius: 3px;
+  padding: 0.2rem 0.4rem;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+  color: var(--text, inherit);
+}
+
+pre {
+  background: var(--pre-bg, #2c3e50);
+  color: var(--pre-fg, #ecf0f1);
+  padding: 1rem;
+  border-radius: 5px;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+}
+
+pre code {
+  background: none;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
+
+.usage-section {
+  background: var(--surface, #fff);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--shadow, rgba(0,0,0,0.1));
+}
+
+.playground {
+  background: var(--surface, #fff);
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px var(--shadow, rgba(0,0,0,0.1));
+  margin-top: 2rem;
+}
+
+.playground textarea {
+  width: 100%;
+  min-height: 150px;
+  padding: 1rem;
+  border: 2px solid var(--border, #ddd);
+  border-radius: 5px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  resize: vertical;
+  margin-bottom: 1rem;
+  background: var(--surface, #fff);
+  color: var(--text, #000);
+}
+
+.playground textarea:focus {
+  outline: none;
+  border-color: var(--accent, #3498db);
+}
+
+.button {
+  background: var(--accent, #3498db);
+  color: #fff;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.button:hover {
+  background: var(--accent-dark, #2980b9);
+}
+
+.button:active {
+  transform: translateY(1px);
+}
+
+.button:focus {
+  outline: 2px solid var(--accent, #3498db);
+  outline-offset: 2px;
+}
+
+.example-btn {
+  background: #95a5a6;
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: inline-block;
+}
+
+.example-btn:hover {
+  background: #7f8c8d;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--scrim, rgba(0,0,0,0.5));
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal.active {
+  display: flex;
+}
+
+.modal-content {
+  background: var(--surface, #fff);
+  color: var(--text, #000);
+  padding: 2rem;
+  border-radius: 8px;
+  max-width: 90%;
+  max-height: 90%;
+  overflow: auto;
+  position: relative;
+  box-shadow: var(--shadow-modal, 0 10px 25px rgba(0,0,0,0.3));
+}
+
+.modal-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: var(--error, #e74c3c);
+  color: #fff;
+  border: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.modal-close:hover {
+  background: #c0392b;
+}
+
+.modal-close:focus {
+  outline: 2px solid var(--error, #e74c3c);
+  outline-offset: 2px;
+}
+
+ul {
+  margin-left: 2rem;
+  margin-bottom: 1rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+.note {
+  background: var(--note-bg, #fff3cd);
+  border-left: 4px solid var(--note-border, #ffc107);
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 4px;
+  color: var(--text, inherit);
+}
+
+.examples-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.result-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1rem;
+}
+
+.result-table th,
+.result-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border: 1px solid var(--border, #dee2e6);
+}
+
+.result-table th {
+  background: var(--th-bg, #f8f9fa);
+  font-weight: 600;
+}
+
+.result-table tr:nth-child(even) {
+  background: var(--hover, #f8f9fa);
+}
+
+.result-table td {
+  word-break: break-all;
+}

package/web/styles/sol-query-one-pager.css

@@ -0,0 +1,67 @@
+* {
+  font-family:var(--font-ui);
+  font-size:var(--font-size);
+}
+h2 {
+  font-size:125%;
+//  display:inline-block;
+}
+.code {
+  margin-left:3rem;
+  margin-top:0.25rem;
+  margin-bottom:0.25rem;
+//  padding:0.5rem;
+//  background:#2C3E51;
+//  color:white;
+  width:fit-content;
+  border-radius:1rem;
+  display:inline-block;
+}
+li {
+  list-style:none;
+}
+li {
+  vertical-align:top;
+//  margin-left:1rem;
+  margin-left:0;
+  margin-bottom:0.5rem;
+  display:inline-block;
+}
+p {
+  font-size:105%;
+  margin-left:1rem;
+}
+sol-query {
+  margin:0.5rem;
+  padding:0.5rem;
+  border:2px solid #666;
+  width:fit-content;
+  border-radius:var(--radius,4px);
+}
+main {
+  display:grid;
+  grid-template-columns:600px 1fr;
+  gap:1%;
+}
+i {color:green;}
+sol-accordion {
+  display:block;
+  width:40ch;
+  border:2px solid #666;
+  border-radius:4px;
+  padding:0.5rem;
+  margin:0.5rem;
+}
+.example {
+  margin-left:1rem;
+}
+pre {
+  margin-left:1rem;
+}
+pre,code {
+  margin-top:0.25rem !important;
+  margin-bottom:0.5rem !important;
+}
+code {
+  color:var(--text-muted,red);
+}

package/web/styles/sol-search-css.js

@@ -0,0 +1,157 @@
+// Styles for <sol-search>'s shadow root. Two layouts share one stylesheet:
+//
+//   :host([data-view="button"])  — icon trigger + floating panel.
+//   :host([data-view="inline"])  — bare form, no trigger, flows inline.
+//
+// The component writes the resolved `view` to `dataset.view` on the host so
+// these :host() selectors can pick the right rules.
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  :host {
+    display: inline-block;
+    font-family: var(--font-ui, system-ui, sans-serif);
+    font-size: var(--font-size, 1rem);
+    color: var(--text, #212121);
+  }
+  /* Inline mode wants to lay out its form normally; the host shouldn't be
+     a stacking context with relative positioning the way the button mode
+     needs (so the floating panel positions against the trigger). */
+  :host([data-view="button"]) { position: relative; }
+  :host([data-view="inline"]) { display: inline-flex; align-items: center; }
+
+  /* ── trigger button (view=button only) ──────────────────────────────── */
+  /* Looks like the host text — a single search glyph that adopts the
+     surrounding colour, so it sits comfortably in a header strip
+     alongside time / weather. */
+  button.icon {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    font-size: 1.2em;
+    line-height: 1;
+    padding: .15rem .35rem;
+    cursor: pointer;
+    border-radius: var(--radius-sm, 4px);
+  }
+  button.icon:hover    { background: var(--hover, rgba(0,0,0,.06)); }
+  button.icon:focus-visible {
+    outline: 2px solid var(--accent, #3498db);
+    outline-offset: 2px;
+  }
+
+  /* ── floating panel (view=button only) ──────────────────────────────── */
+  /* Hidden until [open]; positioning is finalised in JS so the right edge
+     of the panel lines up with the right edge of the trigger. */
+  .panel {
+    position: fixed;
+    z-index: 1000;
+    display: none;
+    min-width: 18rem;
+    padding: .75rem;
+    background: var(--surface, #fff);
+    color: var(--text, #212121);
+    border: 1px solid var(--border, #d0d0d0);
+    border-radius: var(--radius-md, 8px);
+    box-shadow: 0 8px 24px rgba(0,0,0,.18);
+  }
+  .panel[open] { display: block; }
+
+  /* ── form (shared) ──────────────────────────────────────────────────── */
+  /* Inline mode flows the row + engines horizontally; the panel mode wraps
+     them on top of each other inside the floating box. */
+  :host([data-view="inline"]) form.form {
+    display: inline-flex;
+    align-items: center;
+    gap: .6rem;
+    flex-wrap: wrap;
+  }
+
+  .row { display: flex; gap: .35rem; }
+
+  input.q {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: .35rem .5rem;
+    border: 1px solid var(--border, #d0d0d0);
+    border-radius: var(--radius-sm, 4px);
+    background: var(--bg, #fff);
+    color: var(--text, #212121);
+    font: inherit;
+  }
+  input.q:focus-visible {
+    outline: 2px solid var(--accent, #3498db);
+    outline-offset: 0;
+    border-color: var(--accent, #3498db);
+  }
+  /* In inline mode the input expands to fill the host's available row
+     space (the host itself is inline-flex). A small min-width keeps it
+     usable when the host gets squeezed; callers can cap it with their
+     own ::part(input) { max-width: … } rule if they want it narrower. */
+  :host([data-view="inline"]) input.q {
+    flex: 1 1 auto;
+    min-width: 8rem;
+  }
+  /* When the search row is the only content in its column, the form
+     itself should stretch so flex children (the input) have room to grow. */
+  :host([data-view="inline"]) form.form { flex: 1 1 auto; min-width: 0; }
+  :host([data-view="inline"]) .row     { flex: 1 1 auto; min-width: 0; }
+
+  button.go {
+    padding: .35rem .7rem;
+    border: 1px solid var(--accent, #3498db);
+    background: var(--accent, #3498db);
+    color: #fff;
+    border-radius: var(--radius-sm, 4px);
+    font: inherit;
+    cursor: pointer;
+  }
+  button.go:hover {
+    background: var(--accent-dark, #2980b9);
+    border-color: var(--accent-dark, #2980b9);
+  }
+
+  /* .engines is a flex-wrap row of engine radios. When the list is too
+     wide for the available width, items continue on subsequent rows.
+     .engines-line is a single-flex-item wrapper that forces the
+     engines onto their own row below the input + Go row in the
+     inline view. */
+  .engines-line {
+    display: flex;
+    align-items: flex-start;
+    min-width: 0;
+  }
+  .engines {
+    margin-top: .5rem;
+    font-size: .9em;
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    /* Centre each row of engines horizontally — applies on both the
+       first row and any wrapped rows below it, so the engine block
+       reads as a centred cluster under the input. */
+    justify-content: center;
+    gap: .35rem .9rem;
+  }
+  /* Inline view: force the engines line onto its own row below the
+     input + Go row (so a wide input doesn't share its row with the
+     engines). The wrapping itself comes from .engines's flex-wrap. */
+  :host([data-view="inline"]) .engines-line {
+    flex: 1 1 100%;
+    margin-top: 0;
+  }
+  :host([data-view="inline"]) .engines { margin-top: 0; }
+
+  .engine { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
+
+  .sr-only {
+    position: absolute; width: 1px; height: 1px;
+    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
+    white-space: nowrap; border: 0;
+  }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-solidos-css.js

@@ -0,0 +1,7 @@
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  sol-solidos { display: block; width: 100%; height: 100%; overflow: auto; }
+`;
+
+export const sheet = sheetFrom(CSS);

package/web/styles/sol-tabs-css.js

@@ -0,0 +1,114 @@
+// Light-DOM styles for <sol-tabs>. Injected into the element's root
+// (document or shadow) once per root via ensureDocStyle.
+
+export const CSS = `
+  sol-tabs {
+    display: flex; flex-direction: column;
+    flex: 1; min-height: 0; min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  sol-tabs .sol-tab-embed {
+    display: flex; flex-direction: column;
+    flex: 1; min-height: 0; min-width: 0;
+    width: 100%; max-width: 100%;
+    overflow: auto;
+  }
+  sol-tabs > .sol-tabs-content > .sol-tabs-pane {
+    display: flex; flex-direction: column;
+    flex: 1; min-height: 0; min-width: 0;
+    width: 100%; max-width: 100%;
+  }
+  sol-tabs > .sol-tabs-content > .sol-tabs-pane[hidden] { display: none; }
+  sol-tabs[orientation="vertical"] {
+    flex-direction: row;
+  }
+  sol-tabs > .sol-tabs-bar {
+    display: flex; flex-shrink: 0;
+    border-bottom: 1px solid var(--border, #e0e0e0);
+    padding: 0 12px; gap: 2px;
+    overflow-x: auto; overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+  /* Page-level action launchers (slot="actions"), grouped at the right of the bar. */
+  sol-tabs > .sol-tabs-bar > .sol-tabs-launch {
+    margin-left: auto; flex-shrink: 0;
+    display: flex; align-items: center; gap: 6px;
+  }
+  sol-tabs[orientation="vertical"] > .sol-tabs-bar {
+    flex-direction: column;
+    border-bottom: none;
+    border-right: 1px solid var(--border, #e0e0e0);
+    padding: 8px; gap: 2px;
+    min-width: 140px; max-width: 260px;
+    overflow-x: hidden; overflow-y: auto;
+  }
+  sol-tabs[orientation="vertical"] > .sol-tabs-bar > button {
+    text-align: left;
+    border-bottom: none;
+    border-left: 3px solid transparent;
+    border-radius: 4px;
+    padding: 8px 12px;
+    margin-bottom: 0;
+    overflow: hidden; text-overflow: ellipsis;
+  }
+  sol-tabs[orientation="vertical"] > .sol-tabs-bar > button.active {
+    border-bottom-color: transparent;
+    border-left-color: var(--accent-dark, #1976d2);
+    background: var(--focus-bg, #e3f2fd);
+  }
+  sol-tabs[variant="sub"] > .sol-tabs-bar {
+    padding: 0; gap: 0; margin-bottom: 12px;
+  }
+  sol-tabs > .sol-tabs-bar > button {
+    background: none; border: none;
+    border-bottom: 3px solid transparent;
+    border-radius: 0;
+    padding: 1rem;
+    font-size: 105%;
+    color: var(--text-muted, #666);
+    cursor: pointer; margin-bottom: -1px; font-family: inherit;
+    white-space: nowrap; flex-shrink: 0;
+  }
+  sol-tabs[variant="sub"] > .sol-tabs-bar > button {
+    padding: 8px 14px; font-size: 18px;
+    border-bottom-width: 2px;
+  }
+  sol-tabs > .sol-tabs-bar > button:hover { color: var(--accent-dark, #1976d2); }
+  sol-tabs > .sol-tabs-bar > button.active {
+    color: var(--accent-dark, #1976d2);
+    border-bottom-color: var(--accent-dark, #1976d2);
+    font-weight: 600;
+  }
+  sol-tabs > .sol-tabs-actions {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 20px;
+    font-size: 1em;
+    font-family: inherit;
+  }
+  sol-tabs > .sol-tabs-actions:empty { display: none; }
+  sol-tabs > .sol-tabs-content {
+    flex: 1 1 auto; min-height: 0; min-width: 0;
+    max-width: 100%;
+    display: flex; flex-direction: column; gap: 12px;
+    overflow: auto;
+    padding: 16px 20px;
+    box-sizing: border-box;
+  }
+  sol-tabs[variant="sub"] > .sol-tabs-content { padding: 0; }
+  sol-tabs > .sol-tabs-content > * {
+    min-width: 0; max-width: 100%;
+  }
+  sol-tabs > .sol-tabs-content img,
+  sol-tabs > .sol-tabs-content video,
+  sol-tabs > .sol-tabs-content iframe,
+  sol-tabs > .sol-tabs-content table,
+  sol-tabs > .sol-tabs-content pre {
+    max-width: 100%;
+  }
+`;

package/web/styles/sol-time-css.js

@@ -0,0 +1,30 @@
+// Styles for <sol-time>'s shadow root. Exports the raw `CSS` string plus a
+// constructable `sheet`. Variables reference the shared design tokens so the
+// component themes with the rest of the suite.
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  :host {
+    display: inline-block;
+    font-family: var(--font-ui, system-ui, sans-serif);
+    font-size: var(--font-size, 1rem);
+    color: var(--text, #212121);
+  }
+  .sol-time {
+    display: inline-flex;
+    align-items: baseline;
+    gap: .35rem;
+    white-space: nowrap;
+    padding: .25rem 0;
+  }
+  .label {
+    color: var(--text-muted, #7f8c8d);
+    font-size: .8em;
+    text-transform: lowercase;
+  }
+  .value { font-variant-numeric: tabular-nums; }
+  .sep   { color: var(--text-muted, #7f8c8d); opacity: .6; }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-wac-css.js

@@ -0,0 +1,73 @@
+// Styles for <sol-wac>. Injected via ensureDocStyle into whichever root
+// hosts the element (document body for light-DOM, shadow root when sol-wac
+// is rendered inside <sol-modal>).
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  .acl-role-form { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px; }
+  .acl-role-row {
+    display: flex; align-items: center; gap: 8px;
+    padding: 7px 10px; border-radius: 6px;
+    background: var(--surface-2, #f9f9f9);
+  }
+  .acl-role-row:hover { background: var(--focus-bg, #e3f2fd); }
+  .acl-role-name { font-size: 0.88em; font-weight: 600; color: var(--text, #212121); width: 68px; flex-shrink: 0; }
+  .acl-grant-select {
+    font-size: 0.88em; padding: 4px 8px;
+    border: 1px solid var(--border, #e0e0e0); border-radius: 4px;
+    background: var(--surface, #fff); color: var(--text, #212121);
+    cursor: pointer; font-family: inherit;
+  }
+  .acl-save-btn { margin-left: auto; flex-shrink: 0; }
+  .acl-specific-count {
+    font-size: 0.72em; font-weight: 700;
+    background: var(--accent, #2196f3); color: #fff;
+    border-radius: 10px; padding: 1px 7px; min-width: 18px;
+    text-align: center; flex-shrink: 0;
+  }
+  .acl-default-wrap {
+    display: flex; align-items: center; gap: 4px;
+    font-size: 0.78em; color: var(--text-muted, #666);
+    cursor: pointer; white-space: nowrap; flex-shrink: 0;
+  }
+  .acl-default-wrap input { cursor: pointer; accent-color: var(--accent, #2196f3); }
+  .acl-default-global { margin-top: 6px; padding: 6px 10px; font-size: 0.85em; color: var(--text, #212121); }
+  .acl-section-label { font-size: 0.82em; font-weight: 600; color: var(--text-muted, #666); text-transform: uppercase; letter-spacing: 0.04em; }
+  .acl-agents-input {
+    font-family: 'Fira Mono', monospace; font-size: 0.82em;
+    width: 100%; border: 1px solid var(--border, #e0e0e0);
+    border-radius: 4px; padding: 6px 8px; resize: vertical;
+    background: var(--surface, #fff); color: var(--text, #212121);
+  }
+  .acl-specific-panel {
+    display: flex; flex-direction: column; gap: 6px;
+    padding: 8px 10px 10px 78px;
+    background: var(--surface, #fff);
+    border-top: 1px solid var(--border, #e0e0e0);
+    margin-top: -1px;
+  }
+  .acl-banner {
+    padding: 8px 12px; margin-bottom: 6px;
+    font-size: 0.85em; color: var(--text, #212121);
+    background: var(--focus-bg, #e3f2fd);
+    border-left: 3px solid var(--accent, #2196f3);
+    border-radius: 4px;
+  }
+  .acl-rdf-editor {
+    font-family: 'Fira Mono', 'Consolas', monospace;
+    font-size: 0.85em; flex: 1; min-height: 200px;
+    width: 100%; resize: vertical;
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: 4px; padding: 10px;
+    background: var(--surface, #fff); color: var(--text, #212121);
+  }
+  .acl-rdf-editor:focus { outline: none; border-color: var(--accent, #2196f3); }
+  .acl-error {
+    padding: 8px 12px; color: var(--error, #c62828);
+    background: var(--error-bg, #ffebee); border-radius: 4px;
+    font-size: 0.9em;
+  }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;