Refresh UI components and showcase; release updated framework packages

2026-09-20 18:13:24 +05:30
1 parent d800228585
commit c77f5e1cec
@@ -11,98 +11,35 @@ component ListGroup {
    description: string = ""
    items: unknown[] = []
    variant: string = "default"
+    value: string = ""
    class: string = ""
  }
+  state selectedValue = value
+  functions {
+    client function choose(item, index) {
+      if (item.disabled) { return }
+      selectedValue = String(item.value || index)
+      output.select({ value: selectedValue, item: item, index: index })
+      output.change({ value: selectedValue, item: item, index: index })
+    }
+  }
  view {
-    <section class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--list-group wrn-next--variant-{variant} {class}">
-      {#if title}<strong>{title}</strong>{/if}
-      {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wrn-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
-      <slot />
+    <section {...attrs} class="wrn-list-group {class}">
+      {#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}
+      <div class="wrn-list-group__items" role="group" aria-label="{title}">{#each items as item, index}<button type="button" disabled="{item.disabled}" aria-pressed="{selectedValue === String(item.value || index)}" @click="choose(item, index)">{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>{#if item.badge}<span class="wrn-list-group__badge">{item.badge}</span>{/if}</button>{/each}</div><slot />
    </section>
  }

  style {
-    .wrn-next--list-group {
-      display: grid;
-      gap: 0.75rem;
-      padding: 1rem;
-      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius);
-      color: var(--wrn-color-text);
-      background: var(--wrn-color-surface);
-    }
-    .wrn-next--list-group > p { margin: 0; color: var(--wrn-color-muted); }
-    .wrn-next--list-group > .wrn-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
-    .wrn-next--list-group > .wrn-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wrn-radius-sm); background: var(--wrn-color-surface-2); }
-
-    /* Shared component foundation. */
-
-        .wrn-component {
-          --wrn-component-color: var(--wrn-color-primary);
-          --wrn-component-scale: 1;
-          margin: 0;
-          color: var(--wrn-color-text);
-          font-family: var(--wrn-font-sans, inherit);
-        }
-
-        .wrn-component--color-primary {
-          --wrn-component-color: var(--wrn-color-primary);
-        }
-
-        .wrn-component--color-secondary {
-          --wrn-component-color: var(--wrn-color-secondary);
-        }
-
-        .wrn-component--color-success {
-          --wrn-component-color: var(--wrn-color-success);
-        }
-
-        .wrn-component--color-warning {
-          --wrn-component-color: var(--wrn-color-warning);
-        }
-
-        .wrn-component--color-danger {
-          --wrn-component-color: var(--wrn-color-danger);
-        }
-
-        .wrn-component--color-info {
-          --wrn-component-color: var(--wrn-color-info);
-        }
-
-        .wrn-component--size-xs {
-          --wrn-component-scale: 0.78;
-        }
-
-        .wrn-component--size-sm {
-          --wrn-component-scale: 0.88;
-        }
-
-        .wrn-component--size-default,
-        .wrn-component--size-md {
-          --wrn-component-scale: 1;
-        }
-
-        .wrn-component--size-lg {
-          --wrn-component-scale: 1.14;
-        }
-
-        .wrn-component--size-xl {
-          --wrn-component-scale: 1.28;
-        }
-
-        .wrn-component:not(.wrn-btn) {
-          font-size: calc(1em * var(--wrn-component-scale));
-        }
-
-        .wrn-component :is(a, button, input, select, textarea):focus-visible {
-          outline-color: var(--wrn-component-color);
-        }
-
-        .wrn-component p {
-          margin: 0;
-          color: var(--wrn-color-muted);
-          line-height: 1.6;
-        }
+    .wrn-list-group { display:grid; gap:.75rem; color:var(--wrn-color-text); }
+    .wrn-list-group > p { margin:0; font-size:.875rem; color:var(--wrn-color-muted); }
+    .wrn-list-group__items { border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius-md); overflow:hidden; }
+    .wrn-list-group button { display:flex; align-items:center; gap:.75rem; width:100%; padding:.85rem 1rem; text-align:start; border:0; color:inherit; background:var(--wrn-color-surface); font:inherit; font-size:.875rem; cursor:pointer; }
+    .wrn-list-group button + button { border-top:1px solid var(--wrn-color-border); }
+    .wrn-list-group button[aria-pressed="true"] { background:var(--wrn-color-primary-soft); color:var(--wrn-color-primary-text); }
+    .wrn-list-group button > [class*="icon-"] { width:1.1rem; height:1.1rem; flex:none; }
+    .wrn-list-group small { display:block; margin-top:.2rem; color:var(--wrn-color-muted); font-size:.8rem; }
+    .wrn-list-group__badge { margin-inline-start:auto; font-size:.75rem; }
+    .wrn-list-group button:disabled { opacity:.5; cursor:not-allowed; }
  }
 }