@k2b/ui 0.7.0 → 0.9.0

package/dist/browser/surfaces/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/Placeholder.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Paper } from \"./Paper\";\n\nexport type PlaceholderAlign = \"center\" | \"left\";\nexport type PlaceholderSurface = \"none\" | \"paper\";\nexport type PlaceholderState = \"empty\" | \"loading\" | \"error\";\nexport type PlaceholderVariant = \"compact\" | \"panel\";\n\nexport type PlaceholderProps = {\n  title?: JSX.Element;\n  description?: JSX.Element;\n  icon?: string;\n  action?: JSX.Element;\n  align?: PlaceholderAlign;\n  surface?: PlaceholderSurface;\n  state?: PlaceholderState;\n  variant?: PlaceholderVariant;\n  class?: string;\n};\n\nexport default function Placeholder(props: PlaceholderProps): JSX.Element {\n  const align = () => props.align ?? \"center\";\n  const state = () => props.state ?? \"empty\";\n  const variant = () => props.variant ?? \"compact\";\n  const icon = () => props.icon ?? (state() === \"loading\" ? \"ti ti-loader-2\" : state() === \"error\" ? \"ti ti-alert-circle\" : undefined);\n\n  return (\n    <Dynamic\n      component={props.surface === \"paper\" ? Paper : \"div\"}\n      class={`k2b-placeholder ${props.class ?? \"\"}`}\n      data-align={align()}\n      data-state={state()}\n      data-surface={props.surface ?? \"none\"}\n      data-variant={variant()}\n      role={state() === \"error\" ? \"alert\" : state() === \"loading\" ? \"status\" : undefined}\n      aria-live={state() === \"loading\" ? \"polite\" : undefined}\n      aria-busy={state() === \"loading\" ? \"true\" : undefined}\n    >\n      <Show when={icon()}>\n        {(iconClass) => (\n          <span class=\"k2b-placeholder__icon\">\n            <i class={iconClass()} aria-hidden=\"true\" />\n          </span>\n        )}\n      </Show>\n      <Show when={props.title}>\n        <p class=\"k2b-placeholder__title\">{props.title}</p>\n      </Show>\n      <Show when={props.description}>\n        <div class=\"k2b-placeholder__description\">{props.description}</div>\n      </Show>\n      <Show when={props.action}>\n        <div class=\"k2b-placeholder__action\">{props.action}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,SAAS,OAAO,QAAQ,cAAc;AACtC,SAAS,KAAK,QAAQ,SAAS;AAmB/B,eAAe,SAAS,WAAW,CAAC,KAAuB,EAAe;EACxE,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,QAAQ;EAC3C,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,OAAO;EAC1C,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,IAAI,SAAS;EAChD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,gBAAgB,GAAG,KAAK,CAAC,CAAC,KAAK,OAAO,GAAG,oBAAoB,GAAG,SAAS,CAAC;EAEpI,yBACG,OAAO;IAAA,IACN,SAAS;MAAA,OAAE,KAAK,CAAC,OAAO,KAAK,OAAO,GAAG,KAAK,GAAG,KAAK;IAAA;IAAA;MAAA,OAC7C,mBAAmB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;IAAA;IAAA;MAAA,OACjC,KAAK,CAAC,CAAC;IAAA;IAAA;MAAA,OACP,KAAK,CAAC,CAAC;IAAA;IAAA;MAAA,OACL,KAAK,CAAC,OAAO,IAAI,MAAM;IAAA;IAAA;MAAA,OACvB,OAAO,CAAC,CAAC;IAAA;IAAA,IACvB,IAAI;MAAA,OAAE,kBAAK,CAAC,CAAC,KAAK,OAAO,MAAG,OAAO,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;IAAA;IAAA;MAAA,OACvE,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;IAAA;IAAA;MAAA,OAC5C,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS;IAAA;IAAA;MAAA,0BAEpD,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,IAAI,CAAC,CAAC;QAAA;QAAA,UACd,SAAS;UAAA;YAAA;UAAA,kCAEG,SAAS,CAAC,CAAC;UAAA;QAAA;MAExB,sBAEF,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,KAAK;QAAA;QAAA;UAAA;UAAA,qBACc,KAAK,CAAC,KAAK;UAAA;QAAA;MAAA,sBAE/C,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,WAAW;QAAA;QAAA;UAAA;UAAA,sBACgB,KAAK,CAAC,WAAW;UAAA;QAAA;MAAA,sBAE7D,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM;QAAA;QAAA;UAAA;UAAA,sBACgB,KAAK,CAAC,MAAM;UAAA;QAAA;MAAA;IAAA;EAAA;AAI1D","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/Placeholder.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Paper } from \"./Paper\";\n\nexport type PlaceholderAlign = \"center\" | \"left\";\nexport type PlaceholderSurface = \"none\" | \"paper\";\nexport type PlaceholderState = \"empty\" | \"loading\" | \"error\";\n/** `compact` stacks inside a section, `inline` is one row in a list or sidebar, `panel` fills a work area. */\nexport type PlaceholderVariant = \"compact\" | \"inline\" | \"panel\";\n\nexport type PlaceholderProps = {\n  title?: JSX.Element;\n  description?: JSX.Element;\n  icon?: string;\n  action?: JSX.Element;\n  align?: PlaceholderAlign;\n  surface?: PlaceholderSurface;\n  state?: PlaceholderState;\n  variant?: PlaceholderVariant;\n  class?: string;\n};\n\nexport default function Placeholder(props: PlaceholderProps): JSX.Element {\n  const align = () => props.align ?? \"center\";\n  const state = () => props.state ?? \"empty\";\n  const variant = () => props.variant ?? \"compact\";\n  const icon = () => props.icon ?? (state() === \"loading\" ? \"ti ti-loader-2\" : state() === \"error\" ? \"ti ti-alert-circle\" : undefined);\n\n  return (\n    <Dynamic\n      component={props.surface === \"paper\" ? Paper : \"div\"}\n      class={`k2b-placeholder ${props.class ?? \"\"}`}\n      data-align={align()}\n      data-state={state()}\n      data-surface={props.surface ?? \"none\"}\n      data-variant={variant()}\n      role={state() === \"error\" ? \"alert\" : state() === \"loading\" ? \"status\" : undefined}\n      aria-live={state() === \"loading\" ? \"polite\" : undefined}\n      aria-busy={state() === \"loading\" ? \"true\" : undefined}\n    >\n      <Show when={icon()}>\n        {(iconClass) => (\n          <span class=\"k2b-placeholder__icon\">\n            <i class={iconClass()} aria-hidden=\"true\" />\n          </span>\n        )}\n      </Show>\n      <Show when={props.title}>\n        <p class=\"k2b-placeholder__title\">{props.title}</p>\n      </Show>\n      <Show when={props.description}>\n        <div class=\"k2b-placeholder__description\">{props.description}</div>\n      </Show>\n      <Show when={props.action}>\n        <div class=\"k2b-placeholder__action\">{props.action}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,SAAS,OAAO,QAAQ,cAAc;AACtC,SAAS,KAAK,QAAQ,SAAS;;AAK/B;;AAeA,eAAe,SAAS,WAAW,CAAC,KAAuB,EAAe;EACxE,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,QAAQ;EAC3C,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,KAAK,IAAI,OAAO;EAC1C,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,IAAI,SAAS;EAChD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,gBAAgB,GAAG,KAAK,CAAC,CAAC,KAAK,OAAO,GAAG,oBAAoB,GAAG,SAAS,CAAC;EAEpI,yBACG,OAAO;IAAA,IACN,SAAS;MAAA,OAAE,KAAK,CAAC,OAAO,KAAK,OAAO,GAAG,KAAK,GAAG,KAAK;IAAA;IAAA;MAAA,OAC7C,mBAAmB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;IAAA;IAAA;MAAA,OACjC,KAAK,CAAC,CAAC;IAAA;IAAA;MAAA,OACP,KAAK,CAAC,CAAC;IAAA;IAAA;MAAA,OACL,KAAK,CAAC,OAAO,IAAI,MAAM;IAAA;IAAA;MAAA,OACvB,OAAO,CAAC,CAAC;IAAA;IAAA,IACvB,IAAI;MAAA,OAAE,kBAAK,CAAC,CAAC,KAAK,OAAO,MAAG,OAAO,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;IAAA;IAAA;MAAA,OACvE,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;IAAA;IAAA;MAAA,OAC5C,KAAK,CAAC,CAAC,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS;IAAA;IAAA;MAAA,0BAEpD,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,IAAI,CAAC,CAAC;QAAA;QAAA,UACd,SAAS;UAAA;YAAA;UAAA,kCAEG,SAAS,CAAC,CAAC;UAAA;QAAA;MAExB,sBAEF,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,KAAK;QAAA;QAAA;UAAA;UAAA,qBACc,KAAK,CAAC,KAAK;UAAA;QAAA;MAAA,sBAE/C,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,WAAW;QAAA;QAAA;UAAA;UAAA,sBACgB,KAAK,CAAC,WAAW;UAAA;QAAA;MAAA,sBAE7D,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM;QAAA;QAAA;UAAA;UAAA,sBACgB,KAAK,CAAC,MAAM;UAAA;QAAA;MAAA;IAAA;EAAA;AAI1D","ignoreList":[]}

package/dist/ssr/content/Calendar.js

@@ -10,9 +10,9 @@ import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<span class=\"k2b-calendar-event__title\">", "</span>"],
   _tmpl$2 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
   _tmpl$3 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
-  _tmpl$4 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", " aria-label=\"", "\">", "</a>"],
-  _tmpl$5 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\" aria-label=\"", "\">", "</button>"],
-  _tmpl$6 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\" aria-label=\"", "\">", "</div>"],
+  _tmpl$4 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", ">", "</a>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\"", ">", "</button>"],
+  _tmpl$6 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\"", ">", "</div>"],
   _tmpl$7 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
   _tmpl$8 = ["<i class=\"", "\"></i>"],
   _tmpl$9 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
@@ -214,6 +214,7 @@ const timedEventLayouts = events => {
   }));
 };
 const EventChip = props => {
+  const messages = useUiMessages();
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const color = () => props.event.color ?? "blue";
   const selected = () => Boolean(props.owner.selectedEventId) && props.owner.selectedEventId === props.event.id;
@@ -227,6 +228,11 @@ const EventChip = props => {
   const showLocation = () => Boolean(props.event.location && !props.compact && durationHours() >= 1.25);
   const showDescription = () => Boolean(props.event.description?.trim() && props.fill && !props.event.allDay && !props.compact && durationHours() >= 1.5);
   const timeLabel = () => `${formatTime(props.event.startDate, dateConfig())} - ${formatTime(props.event.endDate, dateConfig())}`;
+  const ariaLabel = () => props.event.allDay ? props.event.title : messages().calendarEventTime({
+    title: props.event.title,
+    start: formatTime(props.event.startDate, dateConfig()),
+    end: formatTime(props.event.endDate, dateConfig())
+  });
   const renderedEvent = () => props.owner.renderEvent?.(props.event, {
     compact: props.compact ?? false,
     fill: props.fill ?? false,
@@ -290,7 +296,7 @@ const EventChip = props => {
       suppressClickUntil = performance.now() + 400;
     });
   };
-  return props.href ? _$ssr(_tmpl$4, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content())) : isActionable() ? _$ssr(_tmpl$5, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content())) : _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content()));
+  return props.href ? _$ssr(_tmpl$4, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : isActionable() ? _$ssr(_tmpl$5, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content()));
 };
 const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
   const isSlotChild = event => {
@@ -613,7 +619,7 @@ const MonthView = props => {
     });
   };
   onCleanup(() => cancelInteraction?.());
-  return _$ssr(_tmpl$12, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$12, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return props.owner.withWeekNumbers;
     },
@@ -1348,7 +1354,8 @@ const MobileMonthView = props => {
     },
     get labels() {
       return props.labels;
-    }
+    },
+    compact: true
   })), _$escape(props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
     weekday: "long",
     month: "long",