sol-components 2.1.0

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

@@ -0,0 +1,59 @@
+// Styles for <sol-weather>'s shadow root. Exports the raw `CSS` string plus
+// a constructable `sheet`. Compact one-line card by default; shows the
+// weather icon, current temperature, and rain probability for the next
+// `hours-window` hours.
+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);
+  }
+
+  .card {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    white-space: nowrap;
+    padding: .25rem 0;
+  }
+
+  .icon  { font-size: 1.4em; line-height: 1; flex: 0 0 auto; }
+  .place {
+    color: var(--text-muted, #7f8c8d);
+    max-width: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .temp  { font-variant-numeric: tabular-nums; }
+  .stat  {
+    color: var(--text-muted, #7f8c8d);
+    font-size: .85em;
+    font-variant-numeric: tabular-nums;
+  }
+  .desc  {
+    color: var(--text-muted, #7f8c8d);
+    font-size: .85em;
+    max-width: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .error {
+    color: var(--error, #c00);
+    font-size: .85em;
+    padding: .25rem .5rem;
+    background: color-mix(in srgb, var(--error, #e74c3c) 10%, transparent);
+    border-radius: var(--radius-sm, 4px);
+  }
+  .error[hidden] { display: none; }
+
+  /* Compact mode (default) hides the verbose textual description; expose
+     it through ::part(desc) { display: inline } if a caller wants it. */
+  .desc { display: none; }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/solid-logo.svg

@@ -0,0 +1,9 @@
+<svg width="352" height="322" xmlns="http://www.w3.org/2000/svg">
+  <g fill-rule="nonzero" fill="none">
+    <path d="M87.97296 282.3527L27.24133 177.02207c-5.62041-9.75765-5.62041-21.77908 0-31.53674L87.97296 40.2328c5.64643-9.78367 16.08061-15.79439 27.32143-15.79439h121.3852c11.26684 0 21.72704 6.01072 27.32143 15.7944l60.75765 105.30458c5.62041 9.75766 5.62041 21.77909 0 31.53674l-60.73163 105.33061c-5.64643 9.78367-16.08061 15.79439-27.32143 15.79439H115.37245c-11.31888-.05204-21.72704-6.08878-27.3995-15.84643z" fill="#FFF"/>
+    <path d="M93.15102 275.19708l-57.1148-99.0597c-5.30816-9.1852-5.30816-20.50408 0-29.66326l57.1148-99.08572c5.33418-9.21122 15.14388-14.85765 25.73418-14.85765h114.2296c10.5903 0 20.42602 5.64643 25.73418 14.85765l57.16684 99.03368c5.30816 9.1852 5.30816 20.50408 0 29.66326L258.875 275.2231c-5.33418 9.21122-15.14388 14.85765-25.73418 14.85765H118.93724c-10.64234 0-20.45204-5.67245-25.78622-14.88367z" fill="#7C4DFF"/>
+    <path d="M118.46888 142.2328h117.53418c1.48316 0 2.65408-1.19695 2.65408-2.65409v-22.03928c0-14.6495-11.89132-26.54085-26.54081-26.54085h-70.56735c-20.5301-.026-37.15722 16.60105-37.15722 37.13115-.02594 7.83214 6.271 14.10306 14.07712 14.10306zM129.99592 239.60116H200.225c21.20663 0 38.43214-17.22551 38.43214-38.43214 0-7.07755-5.72449-12.82806-12.82806-12.82806H106.94184c-1.45715 0-2.55005 1.17091-2.55005 2.55v23.05408c-.02597 14.18112 11.47505 25.65612 25.60413 25.65612z" fill="#F7F7F7"/>
+    <path d="M109.59592 139.3185l87.66275 87.66276c5.80255 5.80255 15.19592 5.80255 20.99847 0l15.19592-15.19592c5.80255-5.80255 5.80255-15.19591 0-20.99847l-87.63673-87.66275c-5.80255-5.80255-15.19592-5.80255-20.99847 0l-15.19592 15.19592c-5.8546 5.80255-5.8546 15.22194-.02602 20.99847z" fill="#F7F7F7"/>
+    <path fill="#444" opacity=".3" d="M198.6898 228.46443l-51.4944-40.12347h11.39695zM144.35918 101.66698l40.56582 40.56581h13.7648z"/>
+  </g>
+</svg>

package/web/styles/view-accordion-css.js

@@ -0,0 +1,66 @@
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  .sol-view-accordion {
+    font-family: var(--font-ui, system-ui, sans-serif);
+    color: var(--text, #212121);
+  }
+  .sol-view-accordion details {
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: 4px;
+    margin-bottom: .35rem;
+    background: var(--surface, #fff);
+  }
+  .sol-view-accordion summary {
+    padding: .5rem .75rem;
+    cursor: pointer;
+    font-weight: 600;
+    background: var(--hover, #f7f7f7);
+    border-radius: 4px;
+    list-style: none;
+  }
+  .sol-view-accordion details[open] summary {
+    border-bottom: 1px solid var(--border, #e0e0e0);
+    border-radius: 4px 4px 0 0;
+  }
+  .sol-view-accordion summary::-webkit-details-marker { display: none; }
+  .sol-view-accordion summary::before {
+    content: '▸';
+    display: inline-block;
+    width: 1em;
+    transition: transform .15s;
+  }
+  .sol-view-accordion details[open] > summary::before {
+    transform: rotate(90deg);
+  }
+  .sol-view-accordion dl {
+    margin: 0;
+    padding: .6rem .85rem;
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: .25rem .75rem;
+    align-items: baseline;
+  }
+  .sol-view-accordion dt,
+  .sol-view-accordion dd {
+    font-size: var(--small-font, 16px);
+    line-height: var(--line-height-base, 1.5);
+  }
+  .sol-view-accordion dt {
+    color: var(--text-muted, #666);
+    font-weight: var(--font-weight-bold, 600);
+  }
+  .sol-view-accordion dd {
+    margin: 0;
+    word-break: break-word;
+  }
+  .sol-view-accordion .accordion-body {
+    padding: .6rem .85rem;
+  }
+  .sol-view-accordion a {
+    color: var(--accent, #0066cc);
+    text-decoration: none;
+  }
+  .sol-view-accordion a:hover { text-decoration: underline; }
+`;
+export const sheet = sheetFrom(CSS);

package/web/styles/view-anchorlist-css.js

@@ -0,0 +1,22 @@
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  .sol-view-anchorlist {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-family: var(--font-ui, system-ui, sans-serif);
+    color: var(--text, #212121);
+  }
+  .sol-view-anchorlist li {
+    padding: .3rem .5rem;
+    border-bottom: 1px solid var(--border, #eee);
+  }
+  .sol-view-anchorlist li:last-child { border-bottom: none; }
+  .sol-view-anchorlist a {
+    color: var(--accent, #0066cc);
+    text-decoration: none;
+  }
+  .sol-view-anchorlist a:hover { text-decoration: underline; }
+`;
+export const sheet = sheetFrom(CSS);

package/web/styles/view-autocomplete-css.js

@@ -0,0 +1,59 @@
+import { sheetFrom } from '../../core/adopt.js';
+import { BTN_CSS } from './buttons-css.js';
+
+export const CSS = BTN_CSS + `
+  .sol-view-autocomplete {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 100%;
+    font-family: var(--font-ui, system-ui, sans-serif);
+    color: var(--text, #212121);
+  }
+  .ac-input-wrapper {
+    width: 100%;
+    display: flex;
+    gap: 0.5rem;
+  }
+  .sol-view-autocomplete input {
+    flex: 1;
+    padding: .5rem .65rem;
+    font: inherit;
+    background: var(--surface, #fff);
+    color: var(--text, #212121);
+    border: 1px solid var(--border, #ccc);
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+  .sol-view-autocomplete input:focus {
+    outline: 2px solid var(--accent, #4a9eff);
+    outline-offset: 1px;
+    border-color: var(--accent, #4a9eff);
+  }
+  .ac-go-button { padding: .5rem 1rem; }
+  .ac-list-wrapper {
+    width: 100%;
+    background: var(--surface, #fff);
+    border: 1px solid var(--border, #ccc);
+    border-radius: 4px;
+    max-height: 220px;
+    overflow-y: auto;
+    box-shadow: 0 4px 12px var(--shadow, rgba(0,0,0,.08));
+  }
+  .sol-view-autocomplete .ac-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sol-view-autocomplete .ac-list li {
+    padding: .4rem .65rem;
+    cursor: pointer;
+    color: var(--text, #000);
+  }
+  .sol-view-autocomplete .ac-list li.active,
+  .sol-view-autocomplete .ac-list li:hover {
+    background: var(--hover, #eaf2fb);
+  }
+`;
+export const sheet = sheetFrom(CSS);

package/web/styles/view-rolodex-css.js

@@ -0,0 +1,102 @@
+import { sheetFrom } from '../../core/adopt.js';
+import { BTN_CSS } from './buttons-css.js';
+
+export const CSS = BTN_CSS + `
+  .sol-view-rolodex {
+    display: inline-block;
+    min-width: 260px;
+    max-width: 100%;
+    outline: none;
+    font-family: var(--font-ui, system-ui, sans-serif);
+    color: var(--text, #212121);
+  }
+  .sol-view-rolodex:focus-visible .rolodex-card {
+    box-shadow: 0 0 0 2px var(--accent, #4a9eff);
+  }
+  .rolodex-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: .5rem;
+    margin-bottom: .4rem;
+  }
+  /* Rolodex nav buttons use .sol-btn .sol-btn-icon. */
+  .rolodex-counter {
+    font-size: .85em;
+    color: var(--text-muted, #666);
+  }
+  .rolodex-card {
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: 6px;
+    background: var(--surface, #fff);
+    padding: .85rem 1rem;
+    box-shadow: 0 1px 3px var(--shadow, rgba(0,0,0,.05));
+    cursor: pointer;
+    transition: box-shadow .15s;
+  }
+  .rolodex-card:hover { box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,.1)); }
+  .rolodex-card dl {
+    margin: 0;
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: .3rem .85rem;
+    align-items: baseline;
+  }
+  .rolodex-card dt,
+  .rolodex-card dd {
+    font-size: var(--small-font, 16px);
+    line-height: var(--line-height-base, 1.5);
+  }
+  .rolodex-card dt {
+    text-transform: uppercase;
+    letter-spacing: .03em;
+    color: var(--text-muted, #888);
+    font-weight: var(--font-weight-bold, 600);
+  }
+  .rolodex-card dd {
+    margin: 0;
+    word-break: break-word;
+  }
+  .rolodex-card a { color: var(--accent, #0066cc); text-decoration: none; }
+  .rolodex-card a:hover { text-decoration: underline; }
+  .rolodex-reorder {
+    display: flex;
+    gap: .25rem;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: .4rem;
+  }
+  .rolodex-reorder-btn[disabled] { opacity: .35; cursor: not-allowed; }
+  .rolodex-pos {
+    min-width: 1.75em;
+    padding: .1em .45em;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    background: var(--focus-bg, #e3f2fd);
+    color: var(--accent-dark, #1976d2);
+    border-radius: var(--radius-sm, 4px);
+    font-size: .9em;
+  }
+  .rolodex-reorder-hint {
+    font-size: .8em;
+    color: var(--text-muted, #888);
+    font-style: italic;
+    margin-right: .35rem;
+  }
+  /* Jump box: full width of the form it sits above; no native datalist caret. */
+  .rolodex-jump { width: 100%; }
+  .rolodex-jump-input {
+    width: 100%;
+    box-sizing: border-box;
+    margin: .25rem 0 .5rem;
+    padding: .4em .6em;
+    border: 1px solid var(--border, #ccc);
+    border-radius: var(--radius-sm, 4px);
+    font: inherit;
+    background: var(--bg, #fff);
+    color: inherit;
+  }
+  .rolodex-jump-input::-webkit-calendar-picker-indicator { display: none !important; }
+  .rolodex-jump-input::-webkit-list-button { display: none !important; }
+`;
+export const sheet = sheetFrom(CSS);

package/web/styles/view-select-css.js

@@ -0,0 +1,21 @@
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  .sol-view-select {
+    padding: .45rem .6rem;
+    font: inherit;
+    font-family: var(--font-ui, system-ui, sans-serif);
+    color: var(--text, #212121);
+    background: var(--surface, #fff);
+    border: 1px solid var(--border, #ccc);
+    border-radius: 4px;
+    min-width: 240px;
+    max-width: 100%;
+  }
+  .sol-view-select:focus {
+    outline: 2px solid var(--accent, #4a9eff);
+    outline-offset: 1px;
+    border-color: var(--accent, #4a9eff);
+  }
+`;
+export const sheet = sheetFrom(CSS);