@telepath-computer/television 0.1.205 → 0.1.208

package/dist/skills/tv-tasks/SKILL.md

@@ -70,15 +70,15 @@ Author this shape — a page header, then a list of sections and rows:
 
 ### `<tv-task-list>`
 The list root. One per view, holding the sections (or bare rows). It draws no
-frame of its own — the page is the surface, and Television supplies the card
-chrome around the artifact.
+frame of its own — the page is the surface, and Television's artifact frame
+provides the chrome around the document.
 
 ### Headers — `<header>` + `<h1>`/`<h2>` + optional `<p>`
 
-A page title is optional — the Television card already names the artifact, so
+A page title is optional — Television's frame already names the artifact, so
 a bare list is fine. Add one when the list benefits from its own masthead: a
-date line ("Today" lists usually carry the date), a person, a context the
-card name doesn't say. When you do, use the house header idiom *above*
+date line ("Today" lists usually carry the date), a person, or context the
+frame title doesn't say. When you do, use the house header idiom *above*
 `<tv-task-list>` (not inside it): a `<header>` with an `<h1>` and optionally
 a `<p>` subtitle. House styles own its look; the skill only aligns it with
 the list. Title each section with an `<h2>` inside the section's own
@@ -231,11 +231,12 @@ them light):
 ## Guidelines
 
 - **Icons are always `<tv-icon name="…">`** — never a span or inline SVG. In
-  metadata use `calendar-blank` (handled by the due component) and `hash`
+  metadata use `calendar` (handled by the due component) and `hash`
   (project); for other `tv-task-meta-item`s pick from the canonical icon
-  catalog (listed in the main `television` skill) — names outside it render
-  a broken-looking fallback.
-- **Sizing is `size="16|24|32"`** on `<tv-icon>` — no em or inline sizes.
+  catalog listed in the main `television` skill. Names outside that closed
+  catalog render no glyph.
+- **Standalone sizing is `size="sm|md|lg|xl"`** on `<tv-icon>`; an icon beside
+  text omits `size` and follows that text.
 - **Rows are flat by default** — no backdrop, no dividers; whitespace does
   the separating. If you restyle rows (background, radius, spacing), keep
   that model in mind — deliberate, list-wide changes, not per-row chrome.

package/dist/skills/tv-tasks/task.css

@@ -50,8 +50,8 @@ tv-task:has(tv-task-checkbox[checked]) tv-task-title {
   color: var(--color-text-muted);
   text-decoration: line-through;
 }
-/* A completed task's due date no longer matters — always mute it, overriding
-   the today/overdue emphasis. */
+/* A completed task's due date is always muted, overriding the today/overdue
+   emphasis. */
 tv-task:has(tv-task-checkbox[checked]) tv-task-meta-due {
   color: var(--task-meta-text);
 }
@@ -100,7 +100,7 @@ tv-task-meta-tag {
   padding: 0 5px;
   padding-bottom: 1px;
   border-radius: 6px;
-  background: var(--color-bg-muted);
+  background: var(--color-surface-muted);
   color: var(--task-meta-text);
   font-size: var(--text-sm);
   line-height: 1.5;
@@ -113,7 +113,7 @@ tv-task:has(tv-task-checkbox[disabled]) tv-task-title {
 
 /* ---- List container ----
    No frame of its own: the artifact page is the surface, and Television's
-   artifact-view supplies the card chrome around the document. */
+   artifact frame supplies the chrome around the document. */
 
 tv-task-list {
   display: block;
@@ -191,9 +191,8 @@ tv-task[highlighted] {
    The canonical theme is light-only, so the skill carries its own dark token
    set, applied when the document has data-theme="dark". */
 [data-theme="dark"] {
-  --color-bg: var(--neutral-950);
-  --color-bg-muted: var(--neutral-900);
   --color-surface: var(--neutral-800);
+  --color-surface-muted: var(--neutral-900);
   --color-text: var(--neutral-50);
   --color-text-muted: var(--neutral-400);
   /* Re-derive: custom properties resolve where declared, so without this the

package/dist/skills/tv-tasks/task.js

@@ -178,7 +178,7 @@ const CHECKBOX_STYLES = `
   }
   input:active ~ .mark { transform: scale(0.9); }
   input:focus-visible ~ .mark {
-    outline: 2px solid var(--color-focus-ring);
+    outline: 2px solid var(--color-primary);
     outline-offset: 2px;
   }
 
@@ -253,7 +253,7 @@ __publicField(TaskCheckboxElement, "observedAttributes", ["checked", "disabled"]
 if (!customElements.get("tv-task-checkbox")) {
   customElements.define("tv-task-checkbox", TaskCheckboxElement);
 }
-const CALENDAR_ICON = `<tv-icon name="calendar-blank" size="16" aria-hidden="true"></tv-icon>`;
+const CALENDAR_ICON = `<tv-icon name="calendar" size="sm" aria-hidden="true"></tv-icon>`;
 const DUE_STYLES = `
   :host {
     display: inline-flex;
@@ -261,9 +261,6 @@ const DUE_STYLES = `
     gap: 4px;
     color: currentColor;
   }
-  tv-icon {
-    flex: none;
-  }
 `;
 class TaskMetaDueElement extends HTMLElement {
   constructor() {