@astronox/core 0.1.0

package/src/components/data-display/Tag/Tag.astro

@@ -0,0 +1,67 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { DisplayTag } from '../../../display/contracts';
+import CloseIcon from '../../icons/CloseIcon.astro';
+import TagAffix from './TagAffix.astro';
+
+type TagSize = 'md' | 'sm';
+
+type Props = Omit<HTMLAttributes<'span'>, 'size'> &
+  DisplayTag & {
+    removable?: boolean;
+    removeLabel?: string;
+    size?: TagSize;
+  };
+
+const {
+  active = false,
+  class: className,
+  'data-tone': dataTone,
+  href,
+  label,
+  leading,
+  removable = false,
+  removeLabel,
+  size = 'md',
+  tone,
+  trailing,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+if (href && removable) {
+  throw new Error('A Tag cannot be both linked and removable');
+}
+if (removable && !removeLabel) {
+  throw new Error('A removable Tag requires removeLabel');
+}
+const Root = removable ? 'button' : href ? 'a' : 'span';
+const interactive = removable || Boolean(href);
+---
+
+<Root
+  {...attrs}
+  href={href}
+  type={removable ? 'button' : undefined}
+  aria-current={active && href ? 'page' : undefined}
+  aria-label={removable ? removeLabel : undefined}
+  class:list={['tag', className]}
+  data-widget="tag"
+  data-interactive={interactive ? true : undefined}
+  data-active={active ? true : undefined}
+  data-linked={href ? true : undefined}
+  data-removable={removable ? true : undefined}
+  data-size={size}
+  data-tag-remove={removable ? true : undefined}
+  data-tone={resolvedTone}
+>
+  {leading ? <TagAffix affix={leading} position="leading" /> : null}
+  <span class="tag__label" data-tag-label>{label}</span>
+  {trailing ? <TagAffix affix={trailing} position="trailing" /> : null}
+  {
+    removable ? (
+      <span class="tag__remove" aria-hidden="true">
+        <CloseIcon class="tag__remove-icon" />
+      </span>
+    ) : null
+  }
+</Root>

package/src/components/data-display/Tag/Tag.css

@@ -0,0 +1,134 @@
+.tag {
+  --tag-affix-visual-size: 1rem;
+
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  align-items: stretch;
+  overflow: hidden;
+  border: var(--nox-border-width) solid var(--nox-field-border);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-surface);
+  color: var(--nox-text);
+  font-family: inherit;
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-medium);
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+.tag[data-interactive] {
+  padding: 0;
+  color: var(--nox-text);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    border-color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    background-color var(--nox-motion-duration-sm)
+      var(--nox-motion-easing-standard);
+}
+
+.tag[data-size='sm'] {
+  min-height: 1.5rem;
+}
+
+.tag[data-size='md'] {
+  min-height: 1.75rem;
+}
+
+.tag__affix {
+  display: grid;
+  min-width: 0;
+  grid-auto-flow: column;
+  gap: var(--nox-space-1);
+  place-items: center;
+  padding-inline: var(--nox-space-1);
+  background: var(--nox-tone-background-strong);
+}
+
+.tag__affix[data-position='leading'] {
+  border-inline-end: var(--nox-border-width) solid var(--nox-field-border);
+}
+
+.tag__affix[data-position='trailing'] {
+  border-inline-start: var(--nox-border-width) solid var(--nox-field-border);
+}
+
+.tag__affix-value {
+  font-weight: var(--nox-font-weight-medium);
+  white-space: nowrap;
+}
+
+.tag__image {
+  --media-object-inline-size: 100%;
+  --media-object-block-size: 100%;
+  --media-object-max-inline-size: 100%;
+  --media-object-max-block-size: 100%;
+
+  inline-size: var(--tag-affix-visual-size);
+  block-size: var(--tag-affix-visual-size);
+}
+
+.tag__icon {
+  display: block;
+  inline-size: var(--tag-affix-visual-size);
+  block-size: var(--tag-affix-visual-size);
+  flex: none;
+}
+
+.tag__icon[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+.tag__label {
+  min-width: 0;
+  align-self: center;
+  padding: var(--nox-space-1) var(--nox-space-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tag__remove {
+  display: grid;
+  min-width: 1.25rem;
+  padding: 0 var(--nox-space-2) 0 var(--nox-space-1);
+  place-items: center;
+  border-inline-start: var(--nox-border-width) solid var(--nox-field-border);
+  background: transparent;
+  color: var(--nox-tone-color);
+}
+
+.tag__remove-icon {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+.tag[data-interactive]:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: calc(-1 * var(--nox-focus-ring-width));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tag[data-interactive]:hover {
+    border-color: var(--nox-field-border-hover);
+    background: var(--nox-tone-hover-background);
+  }
+
+  .tag[data-removable]:hover .tag__remove {
+    color: var(--nox-tone-text);
+  }
+}
+
+.tag[data-interactive]:active {
+  background: var(--nox-tone-active-background);
+}
+
+.tag[data-active] {
+  border-color: var(--nox-tone-color);
+  background: var(--nox-tone-active-background);
+  color: var(--nox-tone-text);
+}

package/src/components/data-display/Tag/TagAffix.astro

@@ -0,0 +1,33 @@
+---
+import type { DisplayTagAffix } from '../../../display/contracts';
+import Media from '../../../primitives/media/Media/Media.astro';
+
+type Props = {
+  affix: DisplayTagAffix;
+  position: 'leading' | 'trailing';
+};
+
+const { affix, position }: Props = Astro.props;
+const Icon = affix.icon;
+---
+
+<span class="tag__affix" data-position={position} aria-hidden="true">
+  {
+    Icon ? (
+      <Icon class="tag__icon" data-tone={affix.iconTone} />
+    ) : affix.media ? (
+      <Media
+        class="tag__image"
+        media={affix.media}
+        fit="contain"
+        framing="content"
+        size="intrinsic"
+      />
+    ) : null
+  }
+  {
+    affix.value !== undefined ? (
+      <span class="tag__affix-value">{affix.value}</span>
+    ) : null
+  }
+</span>

package/src/components/data-display/TextPair/TextPair.astro

@@ -0,0 +1,63 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type {
+  DisplayTextValue,
+  TextColor,
+  TextPairLayout,
+  TextSize,
+  TextWeight,
+} from '../../../display/contracts';
+
+type Props = HTMLAttributes<'span'> & {
+  primary: DisplayTextValue;
+  primaryColor?: TextColor;
+  primarySize?: TextSize;
+  primaryWeight?: TextWeight;
+  secondary?: DisplayTextValue;
+  secondaryWeight?: TextWeight;
+  layout?: TextPairLayout;
+  truncate?: boolean;
+};
+
+const {
+  class: className,
+  layout = 'stack',
+  primary,
+  primaryColor = 'default',
+  primarySize = 'default',
+  primaryWeight = 'strong',
+  secondary,
+  secondaryWeight = 'medium',
+  truncate = false,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<span
+  {...attrs}
+  class:list={['text-pair', className]}
+  data-widget="text-pair"
+  data-layout={layout}
+  data-truncate={truncate ? true : undefined}
+>
+  <span
+    class="text-pair__primary"
+    data-part="text-pair-primary"
+    data-text-color={primaryColor}
+    data-text-size={primarySize}
+    data-text-weight={primaryWeight}
+  >
+    {primary}
+  </span>
+  {
+    secondary !== undefined ? (
+      <span
+        class="text-pair__secondary"
+        data-part="text-pair-secondary"
+        data-text-weight={secondaryWeight}
+      >
+        {secondary}
+      </span>
+    ) : null
+  }
+</span>

package/src/components/data-display/TextPair/TextPair.css

@@ -0,0 +1,99 @@
+.text-pair {
+  --text-pair-primary-color: var(--nox-text);
+  --text-pair-secondary-color: var(--nox-text-muted);
+
+  display: grid;
+  min-width: 0;
+  gap: var(--nox-space-1);
+  line-height: var(--nox-line-height-tight);
+}
+
+.text-pair[data-layout='inline'] {
+  display: inline-flex;
+  inline-size: max-content;
+  min-inline-size: 0;
+  align-items: baseline;
+  justify-content: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.text-pair[data-layout='split'] {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--nox-space-4);
+}
+
+.text-pair__primary {
+  min-width: 0;
+  color: var(--text-pair-primary-color);
+  font-size: inherit;
+  line-height: inherit;
+  overflow-wrap: anywhere;
+}
+
+.text-pair__primary[data-text-color='muted'] {
+  color: var(--text-pair-secondary-color);
+}
+
+.text-pair__primary[data-text-color='inherit'] {
+  color: inherit;
+}
+
+.text-pair__primary[data-text-size='small'] {
+  font-size: var(--nox-font-size-sm);
+  line-height: 1.35;
+}
+
+.text-pair__primary[data-text-size='large'] {
+  font-size: var(--nox-font-size-md);
+  line-height: var(--nox-line-height-tight);
+}
+
+.text-pair[data-layout='inline'] .text-pair__primary {
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.text-pair__secondary {
+  min-width: 0;
+  color: var(--text-pair-secondary-color);
+  font-size: var(--nox-font-size-sm);
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.text-pair [data-text-weight='regular'] {
+  font-weight: var(--nox-font-weight-regular);
+}
+
+.text-pair [data-text-weight='medium'] {
+  font-weight: var(--nox-font-weight-medium);
+}
+
+.text-pair [data-text-weight='strong'] {
+  font-weight: var(--nox-font-weight-strong);
+}
+
+.text-pair[data-layout='inline'] .text-pair__secondary {
+  line-height: inherit;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.text-pair[data-layout='split'] .text-pair__secondary {
+  text-align: end;
+  white-space: nowrap;
+}
+
+.text-pair[data-truncate] {
+  overflow: var(--text-pair-truncate-overflow, hidden);
+}
+
+.text-pair[data-truncate] .text-pair__primary,
+.text-pair[data-truncate] .text-pair__secondary {
+  overflow: var(--text-pair-truncate-overflow, hidden);
+  overflow-wrap: normal;
+  text-overflow: var(--text-pair-truncate-text-overflow, ellipsis);
+  white-space: nowrap;
+}

package/src/components/feedback/Spinner/Spinner.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type SpinnerSize = 'sm' | 'md' | 'lg';
+
+type Props = HTMLAttributes<'span'> & {
+  label: string;
+  size?: SpinnerSize;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  label,
+  size = 'md',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<span
+  {...attrs}
+  class:list={['spinner', className]}
+  data-size={size}
+  data-tone={resolvedTone}
+  data-widget="spinner"
+  role="status"
+  aria-label={label}
+></span>

package/src/components/feedback/Spinner/Spinner.css

@@ -0,0 +1,37 @@
+.spinner {
+  --spinner-size: 2rem;
+  --spinner-stroke: 0.1875rem;
+
+  display: inline-block;
+  inline-size: var(--spinner-size);
+  block-size: var(--spinner-size);
+  box-sizing: border-box;
+  border: var(--spinner-stroke) solid
+    color-mix(in srgb, var(--nox-tone-color) 24%, transparent);
+  border-block-start-color: var(--nox-tone-color);
+  border-radius: var(--nox-radius-pill);
+  color: var(--nox-tone-color);
+  animation: spinner-rotate 720ms linear infinite;
+}
+
+.spinner[data-size='sm'] {
+  --spinner-size: 1.25rem;
+  --spinner-stroke: 0.125rem;
+}
+
+.spinner[data-size='lg'] {
+  --spinner-size: 3rem;
+  --spinner-stroke: 0.25rem;
+}
+
+@keyframes spinner-rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 1.8s;
+  }
+}

package/src/components/feedback/Tooltip/Tooltip.astro

@@ -0,0 +1,66 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'span'> & {
+  activation?: 'interactive' | 'hover';
+  alignTo?: 'boundary' | 'trigger';
+  content: string;
+  tone?: Tone;
+  triggerScope?: 'ancestor' | 'content';
+};
+
+const {
+  activation = 'interactive',
+  alignTo = 'trigger',
+  class: className,
+  content,
+  'data-tone': dataTone,
+  tone,
+  triggerScope = 'content',
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<nox-tooltip
+  {...attrs}
+  class:list={['tooltip', className]}
+  data-tooltip-activation={activation}
+  data-tooltip-align-to={alignTo}
+  data-tooltip-root
+  data-tooltip-trigger-scope={triggerScope}
+  data-tone={resolvedTone}
+>
+  <slot />
+  <span
+    class="tooltip__panel"
+    data-tooltip-panel
+    hidden
+    popover="manual"
+    role="tooltip"
+  >
+    {content}
+  </span>
+</nox-tooltip>
+
+<script>
+  import { initTooltip } from './tooltipController';
+
+  class NoxTooltipElement extends HTMLElement {
+    cleanup?: () => void;
+
+    connectedCallback() {
+      this.cleanup = initTooltip(this);
+    }
+
+    disconnectedCallback() {
+      this.cleanup?.();
+      this.cleanup = undefined;
+    }
+  }
+
+  if (!customElements.get('nox-tooltip')) {
+    customElements.define('nox-tooltip', NoxTooltipElement);
+  }
+</script>

package/src/components/feedback/Tooltip/Tooltip.css

@@ -0,0 +1,67 @@
+.tooltip {
+  display: contents;
+}
+
+:where([data-tooltip-trigger]) {
+  cursor: help;
+}
+
+:where([data-tooltip-trigger]):focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+.tooltip[data-tooltip-activation='hover'] :where([data-tooltip-trigger]) {
+  cursor: pointer;
+}
+
+.tooltip[data-tooltip-activation='hover'] .tooltip__panel {
+  pointer-events: none;
+}
+
+.tooltip__panel {
+  --tooltip-viewport-gap: var(--nox-space-4);
+  --tooltip-trigger-gap: var(--nox-space-2);
+
+  position: fixed;
+  z-index: 100;
+  inset: auto;
+  inline-size: max-content;
+  max-inline-size: min(22rem, calc(100vw - var(--nox-space-4) * 2));
+  max-block-size: calc(100dvh - var(--nox-space-4) * 2);
+  margin: 0;
+  padding: var(--nox-space-3) var(--nox-space-4);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: var(--nox-border-width) solid var(--nox-tone-border);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-surface);
+  box-shadow: var(--nox-shadow-surface);
+  color: var(--nox-text);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-regular);
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+  text-align: start;
+  white-space: normal;
+}
+
+.tooltip__panel[hidden] {
+  display: none;
+}
+
+@media (width < 30rem) {
+  .tooltip__panel {
+    --tooltip-viewport-gap: var(--nox-space-3);
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .tooltip[data-tooltip-activation='hover'] :where([data-tooltip-trigger]) {
+    cursor: inherit;
+  }
+
+  .tooltip[data-tooltip-activation='hover'] .tooltip__panel {
+    display: none;
+  }
+}