@threadlabs/looma 0.10.11 → 0.10.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.10.11",
+  "version": "0.10.12",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-list-item.css

@@ -0,0 +1,146 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-list-item"]) to ([data-component], [data-slotted]) {
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+    :scope {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-list-item-gap, var(--ui-space-3));
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size, 2.5rem);
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope[data-ui-list-item-state~="variant=card"] {
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+    }
+
+    :scope:has(.title a[href]:hover) {
+      background: var(--ui-surface-hover);
+    }
+
+    :scope[data-ui-list-item-state~="variant=card"]:has(.title a[href]:hover) {
+      border-color: var(--ui-border-strong);
+    }
+
+    :scope[data-ui-list-item-state~="current"] {
+      background: var(--ui-surface-hover);
+    }
+
+    :scope:has(.title a[href]:focus-visible) {
+      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+
+    .leading {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+    }
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+    .trailing {
+      position: relative;
+      z-index: 1;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    .content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--ui-space-0-5, 2px);
+      min-inline-size: 0;
+    }
+
+    .title,
+    .description {
+      display: block;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .title {
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .description:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-list-item"]) to ([data-component]) {
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+
+    .title > :where([data-slotted], [data-slotted] *):is(a) {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .title > :where([data-slotted], [data-slotted] *):is(a:focus-visible) {
+      outline: none;
+      box-shadow: none;
+    }
+
+    .title > :where([data-slotted], [data-slotted] *):is(a[href])::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      content: "";
+    }
+
+    /* An unused region takes no space. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-list.css

@@ -0,0 +1,33 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-list"]) to ([data-component], [data-slotted]) {
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+    :scope {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-list-gap, var(--ui-space-1));
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    :scope[data-ui-list-state~="layout=grid"] {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+      gap: var(--ui-list-gap, var(--ui-space-3));
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-list"]) to ([data-component]) {
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/vanilla/UiList.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiListEventMap {
+}
+export interface UiListElement extends HTMLUListElement {
+  addEventListener<K extends keyof UiListEventMap>(type: K, listener: (this: UiListElement, event: UiListEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiListEventMap>(type: K, listener: (this: UiListElement, event: UiListEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiListProps {
+  layout?: "rows" | "grid" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiList(props?: UiListProps): UiListElement;

package/vanilla/UiList.js

@@ -0,0 +1,29 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-list.css";
+
+export function createUiList(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
+  const element = document.createElement("ul");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "list");
+  element.setAttribute("data-component", "ui-list");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageGeneratedProps(element, [
+    { name: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","grid"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiListItem.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiListItemEventMap {
+}
+export interface UiListItemElement extends HTMLLIElement {
+  addEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiListItemProps {
+  current?: boolean | null;
+  variant?: "row" | "card" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiListItem(props?: UiListItemProps): UiListItemElement;

package/vanilla/UiListItem.js

@@ -0,0 +1,77 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-list-item.css";
+
+export function createUiListItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["current"] === undefined ? false : componentProps["current"];
+  const prop1 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
+  const element = document.createElement("li");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = prop0;
+  if (typeof value0 === "boolean") element.setAttribute("aria-current", String(value0));
+  else element.removeAttribute("aria-current");
+  element.setAttribute("data-component", "ui-list-item");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "leading");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "leading"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "content");
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "title");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "description");
+  if (slots["description"] ?? [].length > 0) {
+    for (const child of slots["description"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "description"]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element1.append(element3);
+  element.append(element1);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "trailing");
+  if (slots["trailing"] ?? [].length > 0) {
+    for (const child of slots["trailing"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "trailing"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element.append(element4);
+  manageGeneratedProps(element, [
+    { name: "current", attribute: "data-current", value: componentProps["current"], default: false, type: "boolean", required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "row", type: ["row","card"], required: false },
+  ], (name, value) => {
+    if (name === "current") {
+      if (value === null || value === undefined) element.removeAttribute("aria-current");
+      else element.setAttribute("aria-current", String(value));
+    }
+  });
+  return element;
+}
+

package/vanilla/index.js

@@ -25,6 +25,8 @@ export * from "./UiGrid.js";
 export * from "./UiIcon.js";
 export * from "./UiIconButton.js";
 export * from "./UiInput.js";
+export * from "./UiList.js";
+export * from "./UiListItem.js";
 export * from "./UiMenu.js";
 export * from "./UiMenuItem.js";
 export * from "./UiPopover.js";

package/vue/UiList.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    layout?: 'rows' | 'grid';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    layout: "rows" | "grid";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiList.js

@@ -0,0 +1,2 @@
+import { t as UiList_default } from "./chunks/UiList.js";
+export { UiList_default as default };

package/vue/UiList.vue

@@ -0,0 +1,60 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    layout?: 'rows' | 'grid'
+  }>(),
+  {
+    layout: 'rows',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.layout && `layout layout=${props.layout}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <ul
+    data-component="ui-list"
+    role="list"
+    v-bind="$attrs"
+    :data-ui-list-state="hostState || undefined"
+  >
+    <slot />
+  </ul>
+</template>
+
+<style scoped>
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+[data-component~="ui-list"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-list-gap, var(--ui-space-1));
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-component~="ui-list"][data-ui-list-state~="layout=grid"] {
+  display: grid;
+  grid-template-columns:
+    repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+  gap: var(--ui-list-gap, var(--ui-space-3));
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiListItem.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    current?: boolean;
+    variant?: 'row' | 'card';
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+} & {
+    trailing?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "row" | "card";
+    current: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiListItem.js

@@ -0,0 +1,2 @@
+import { t as UiListItem_default } from "./chunks/UiListItem.js";
+export { UiListItem_default as default };

package/vue/UiListItem.vue

@@ -0,0 +1,171 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    current?: boolean
+    variant?: 'row' | 'card'
+  }>(),
+  {
+    current: false,
+    variant: 'row',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.variant && `variant variant=${props.variant}`,
+    props.current && 'current',
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <li
+    data-component="ui-list-item"
+    v-bind="$attrs"
+    :aria-current="current"
+    :data-ui-list-item-state="hostState || undefined"
+  >
+    <span class="leading"><slot name="leading" /></span>
+    <span class="content"><span class="title"><slot /></span>
+      <span class="description"><slot name="description" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span>
+  </li>
+</template>
+
+<style scoped>
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+[data-component~="ui-list-item"] {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-list-item-gap, var(--ui-space-3));
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size, 2.5rem);
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+}
+
+[data-component~="ui-list-item"]:has(.title a[href]:hover) {
+  background: var(--ui-surface-hover);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:has(.title
+  a[href]:hover) {
+  border-color: var(--ui-border-strong);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
+  background: var(--ui-surface-hover);
+}
+
+[data-component~="ui-list-item"]:has(.title a[href]:focus-visible) {
+  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+}
+
+.leading,
+.trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+.leading {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+}
+
+/* Trailing controls take their own clicks, above the title link's stretched hit area. */
+.trailing {
+  position: relative;
+  z-index: 1;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ui-space-0-5, 2px);
+  min-inline-size: 0;
+}
+
+.title,
+.description {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.title {
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+}
+
+.description {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-tight);
+}
+
+.title > :slotted(a) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.title > :slotted(a:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.title > :slotted(a[href])::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  content: "";
+}
+
+/* An unused region takes no space. */
+.leading:empty,
+.description:empty,
+.trailing:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list-item"][hidden] {
+  display: none;
+}
+</style>

package/vue/chunks/UiList.js

@@ -0,0 +1,24 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-list-state"];
+//#endregion
+//#region .build/vue/UiList.vue
+var UiList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiList",
+	props: { layout: { default: "rows" } },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", mergeProps({
+				"data-component": "ui-list",
+				role: "list"
+			}, _ctx.$attrs, { "data-ui-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-935b1197"]]);
+//#endregion
+export { UiList_default as t };