@telepath-computer/television 0.1.177 → 0.1.179

package/dist/canonical/v1/components.js

@@ -158,6 +158,15 @@ const DEFAULT_ICON_SIZE = 16;
 const MEDIUM_ICON_SIZE = 24;
 const LARGE_ICON_SIZE = 32;
 const ICONS = {
+    check: {
+        regular: `<path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/>`,
+    },
+    "copy-simple": {
+        regular: `<path d="M184,64H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H184a8,8,0,0,0,8-8V72A8,8,0,0,0,184,64Zm-8,144H48V80H176ZM224,40V184a8,8,0,0,1-16,0V48H72a8,8,0,0,1,0-16H216A8,8,0,0,1,224,40Z"/>`,
+    },
+    "bell-ringing": {
+        regular: `<path d="M224,71.1a8,8,0,0,1-10.78-3.42,94.13,94.13,0,0,0-33.46-36.91,8,8,0,1,1,8.54-13.54,111.46,111.46,0,0,1,39.12,43.09A8,8,0,0,1,224,71.1ZM35.71,72a8,8,0,0,0,7.1-4.32A94.13,94.13,0,0,1,76.27,30.77a8,8,0,1,0-8.54-13.54A111.46,111.46,0,0,0,28.61,60.32,8,8,0,0,0,35.71,72Zm186.1,103.94A16,16,0,0,1,208,200H167.2a40,40,0,0,1-78.4,0H48a16,16,0,0,1-13.79-24.06C43.22,160.39,48,138.28,48,112a80,80,0,0,1,160,0C208,138.27,212.78,160.38,221.81,175.94ZM150.62,200H105.38a24,24,0,0,0,45.24,0ZM208,184c-10.64-18.27-16-42.49-16-72a64,64,0,0,0-128,0c0,29.52-5.38,53.74-16,72Z"/>`,
+    },
     plus: {
         regular: `<path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/>`,
         bold: `<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"/>`,
@@ -173,14 +182,23 @@ const ICONS = {
         regular: `<path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/>`,
         duotone: `<path d="M112,56v48a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8h48A8,8,0,0,1,112,56Zm88-8H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V56A8,8,0,0,0,200,48Zm-96,96H56a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,104,144Zm96,0H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,200,144Z" opacity="0.2"/><path d="M200,136H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48ZM104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Z"/>`,
     },
+    shapes: {
+        regular: `<path fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" d="M24 184L64 64L104 184H24Z"/><circle cx="156" cy="76" r="44" fill="none" stroke="currentColor" stroke-width="16"/><rect x="136" y="152" width="88" height="56" rx="8" fill="none" stroke="currentColor" stroke-width="16" stroke-linejoin="round"/>`,
+    },
+    "calendar-blank": {
+        regular: `<path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/>`,
+    },
+    hash: {
+        regular: `<path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"/>`,
+    },
 };
 const STYLES = `
   :host {
     display: inline-flex;
-    width: var(--ui-icon-size, 1em);
-    height: var(--ui-icon-size, 1em);
+    width: var(--tv-icon-size, 1em);
+    height: var(--tv-icon-size, 1em);
     vertical-align: -0.125em;
-    color: var(--ui-icon-color, currentColor);
+    color: var(--tv-icon-color, currentColor);
   }
 
   svg {
@@ -191,7 +209,7 @@ const STYLES = `
   }
 `;
 function isIconName(value) {
-    return value === "plus" || value === "subtract-square" || value === "squares-four" || value === "television";
+    return value !== null && Object.hasOwn(ICONS, value);
 }
 function isIconWeight(value) {
     return value === "regular" || value === "bold" || value === "duotone";
@@ -219,7 +237,7 @@ export class IconElement extends HTMLElement {
       <style>${STYLES}</style>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true" focusable="false">${source}</svg>
     `;
-        this.style.setProperty("--ui-icon-size", `${size}px`);
+        this.style.setProperty("--tv-icon-size", `${size}px`);
     }
     #name() {
         const value = this.getAttribute("name");
@@ -234,7 +252,7 @@ export class IconElement extends HTMLElement {
         return value === MEDIUM_ICON_SIZE || value === LARGE_ICON_SIZE ? value : DEFAULT_ICON_SIZE;
     }
 }
-if (!customElements.get("ui-icon")) {
-    customElements.define("ui-icon", IconElement);
+if (!customElements.get("tv-icon")) {
+    customElements.define("tv-icon", IconElement);
 }
 

package/dist/canonical/v1/styles.css

@@ -327,7 +327,11 @@ body {
   line-height: var(--leading-base);
   letter-spacing: 0.015em;
   color: var(--color-text);
-  background: var(--color-bg);
+  /* The artifact page is the card surface — Television's artifact-view frames
+     the whole document as a card, so the default page background is the
+     surface color. A muted backdrop (--color-bg) is something an artifact
+     opts into, not the default. */
+  background: var(--color-surface);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -378,6 +382,18 @@ table {
   margin-top: var(--space-8);
 }
 
+/* Page-header idiom: a <header> holds a heading and optionally one <p>
+   subtitle — a date line, a description. A paragraph inside any header is a
+   subtitle: slightly smaller than body prose, at body weight, hugging its
+   heading — proximity and the heading above do the differentiating. */
+header p {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-body);
+}
+header :is(h1, h2, h3, h4, h5, h6) + p {
+  margin-top: var(--space-2);
+}
+
 ul,
 ol {
   padding-left: var(--space-24);