@realmorg/ui 0.0.0-stage → 2.0.0-alpha.3

package/components/avatar.html

@@ -0,0 +1,149 @@
+<custom-element name="ui-avatar">
+  <script>
+    defineProps({
+      size: prop.enum(["sm", "default", "lg"]).default("default"),
+      shape: prop.enum(["circle", "square"]).default("circle"),
+    });
+
+    const image = useState({ failed: false, loaded: false });
+
+    function loaded() {
+      image.loaded = true;
+      image.failed = false;
+    }
+
+    function failed() {
+      image.failed = true;
+    }
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 0;
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      overflow: hidden;
+      border-radius: var(--radius-full);
+      font-size: var(--text-sm);
+      vertical-align: middle;
+    }
+    :host(:state(attr-size-is-sm)) {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+      font-size: var(--text-xs);
+    }
+    :host(:state(attr-size-is-lg)) {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+    }
+    :host(:state(attr-shape-is-square)) {
+      border-radius: var(--radius-md);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-avatar-image">
+  <script>
+    defineProps({
+      src: prop.string(),
+      alt: prop.string().default(""),
+    });
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: contents;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  </style>
+
+  <is-hidden when="#image.failed">
+    <img part="image" _src="@src" _alt="@alt" _hidden="!#image.loaded" onload="loaded()" onerror="failed()">
+  </is-hidden>
+</custom-element>
+
+<custom-element name="ui-avatar-fallback">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: contents;
+    }
+    span {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      background: var(--muted);
+    }
+  </style>
+
+  <is-hidden when="#image.loaded">
+    <span part="fallback"><slot></slot></span>
+  </is-hidden>
+</custom-element>
+
+<custom-element name="ui-avatar-group" role="group">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      align-items: center;
+    }
+    ::slotted(*) {
+      box-shadow: 0 0 0 calc(var(--spacing) * 0.5) var(--background);
+    }
+    ::slotted(:not(:first-child)) {
+      margin-inline-start: calc(var(--spacing) * -2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-avatar-group-count">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      border-radius: var(--radius-full);
+      background: var(--muted);
+      color: var(--muted-foreground);
+      font-size: var(--text-sm);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/badge.html

@@ -0,0 +1,62 @@
+<custom-element name="ui-badge">
+  <script>
+    defineProps({
+      variant: prop.enum(["default", "secondary", "destructive", "outline"]).default("default"),
+      shape: prop.enum(["default", "pill", "round"]).default("default"),
+    });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 1);
+      width: fit-content;
+      padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      font-size: var(--text-xs);
+      font-weight: var(--font-weight-medium);
+      white-space: nowrap;
+      background: var(--primary);
+      color: var(--primary-foreground);
+    }
+    :host(:state(attr-variant-is-secondary)) {
+      background: var(--secondary);
+      color: var(--secondary-foreground);
+    }
+    :host(:state(attr-variant-is-destructive)) {
+      background: var(--destructive);
+      color: var(--destructive-foreground);
+    }
+    :host(:state(attr-variant-is-outline)) {
+      background: transparent;
+      border-color: var(--border);
+      color: var(--foreground);
+    }
+    :host(:state(attr-shape-is-pill)) {
+      border-radius: var(--radius-full);
+    }
+    :host(:state(attr-shape-is-round)) {
+      box-sizing: border-box;
+      min-width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+      padding: 0 calc(var(--spacing) * 1);
+      border-radius: var(--radius-full);
+      font-variant-numeric: tabular-nums;
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/breadcrumb.html

@@ -0,0 +1,159 @@
+<custom-element name="ui-breadcrumb">
+  <script>
+    defineProps({ label: prop.string().default("Breadcrumb") });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+  </style>
+
+  <nav _aria-label="@label"><slot></slot></nav>
+</custom-element>
+
+<custom-element name="ui-breadcrumb-list">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: calc(var(--spacing) * 1.5);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+      overflow-wrap: anywhere;
+    }
+  </style>
+
+  <ol part="list"><slot></slot></ol>
+</custom-element>
+
+<custom-element name="ui-breadcrumb-item" role="listitem">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 1.5);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-breadcrumb-link">
+  <script>
+    defineProps({ href: prop.string() });
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    a {
+      color: inherit;
+      text-decoration: none;
+      border-radius: var(--radius-xs);
+      outline: none;
+      transition: color var(--default-transition-duration);
+    }
+    a:hover {
+      color: var(--foreground);
+    }
+    a:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+  </style>
+
+  <a part="link" _href="@href"><slot></slot></a>
+</custom-element>
+
+<custom-element name="ui-breadcrumb-page">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    span {
+      font-weight: var(--font-weight-normal);
+      color: var(--foreground);
+    }
+  </style>
+
+  <span part="page" role="link" aria-disabled="true" aria-current="page"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-breadcrumb-separator" role="presentation">
+  <script>
+    internals.ariaHidden = "true";
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+    ::slotted(svg),
+    svg {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+  </style>
+
+  <slot><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg></slot>
+</custom-element>
+
+<custom-element name="ui-breadcrumb-ellipsis">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: calc(var(--spacing) * 9);
+      height: calc(var(--spacing) * 9);
+    }
+    svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+    span {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  </style>
+
+  <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" /></svg>
+  <span part="label"><slot>More</slot></span>
+</custom-element>

package/components/bubble.html

@@ -0,0 +1,77 @@
+<custom-element name="ui-bubble">
+  <script>
+    defineProps({
+      variant: prop.enum(["default", "secondary", "muted", "outline", "ghost"]).default("default"),
+      align: prop.enum(["start", "end"]).default("start"),
+    });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 1);
+      width: fit-content;
+      max-width: 80%;
+      min-width: 0;
+    }
+    :host(:state(attr-align-is-end)) {
+      align-self: flex-end;
+    }
+    .content {
+      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+      border: 1px solid transparent;
+      border-radius: var(--radius-2xl);
+      font-size: var(--text-sm);
+      overflow-wrap: anywhere;
+      background: var(--primary);
+      color: var(--primary-foreground);
+    }
+    :host(:state(attr-variant-is-secondary)) .content {
+      background: var(--secondary);
+      color: var(--secondary-foreground);
+    }
+    :host(:state(attr-variant-is-muted)) .content {
+      background: var(--muted);
+      color: var(--foreground);
+    }
+    :host(:state(attr-variant-is-outline)) .content {
+      border-color: var(--border);
+      background: var(--background);
+      color: var(--foreground);
+    }
+    :host(:state(attr-variant-is-ghost)) {
+      max-width: 100%;
+    }
+    :host(:state(attr-variant-is-ghost)) .content {
+      padding: 0;
+      background: transparent;
+      color: var(--foreground);
+    }
+  </style>
+
+  <div class="content" part="content"><slot></slot></div>
+  <slot name="reactions"></slot>
+</custom-element>
+
+<custom-element name="ui-bubble-reactions" slot="reactions">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc(var(--spacing) * 1);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/button-group.html

@@ -0,0 +1,98 @@
+<custom-element name="ui-button-group" role="group">
+  <script>
+    defineProps({ orientation: prop.enum(["horizontal", "vertical"]).default("horizontal") });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+      align-items: stretch;
+      width: fit-content;
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      flex-direction: column;
+    }
+    :host(:not(:state(attr-orientation-is-vertical))) ::slotted(:not(:first-child)) {
+      --ui-radius-start: 0;
+      margin-inline-start: -1px;
+    }
+    :host(:not(:state(attr-orientation-is-vertical))) ::slotted(:not(:last-child)) {
+      --ui-radius-end: 0;
+    }
+    :host(:state(attr-orientation-is-vertical)) ::slotted(:not(:first-child)) {
+      --ui-radius-block-start: 0;
+      margin-block-start: -1px;
+    }
+    :host(:state(attr-orientation-is-vertical)) ::slotted(:not(:last-child)) {
+      --ui-radius-block-end: 0;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-button-group-text">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      padding: 0 calc(var(--spacing) * 4);
+      border: 1px solid var(--border);
+      border-start-start-radius: var(--ui-radius-block-start, var(--ui-radius-start, var(--radius-md)));
+      border-end-start-radius: var(--ui-radius-block-end, var(--ui-radius-start, var(--radius-md)));
+      border-start-end-radius: var(--ui-radius-block-start, var(--ui-radius-end, var(--radius-md)));
+      border-end-end-radius: var(--ui-radius-block-end, var(--ui-radius-end, var(--radius-md)));
+      background: var(--muted);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      white-space: nowrap;
+      box-shadow: var(--shadow-xs);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      flex-shrink: 0;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-button-group-separator" role="separator">
+  <script>
+    const props = defineProps({ orientation: prop.enum(["vertical", "horizontal"]).default("vertical") });
+
+    observe(() => {
+      internals.ariaOrientation = props.orientation;
+    });
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      position: relative;
+      z-index: 1;
+      align-self: stretch;
+      inline-size: 1px;
+      background: var(--input);
+    }
+    :host(:state(attr-orientation-is-horizontal)) {
+      inline-size: auto;
+      block-size: 1px;
+    }
+  </style>
+</custom-element>