@astronox/core 0.2.0 → 0.2.2

package/src/components/forms/ChoiceGroup/ChoiceGroup.css

@@ -0,0 +1,108 @@
+.choice-group {
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.choice-group__legend {
+  margin-block-end: var(--nox-space-2);
+  padding: 0;
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: var(--nox-line-height-tight);
+  text-transform: uppercase;
+}
+
+.choice-group__options {
+  display: grid;
+  min-inline-size: 0;
+  grid-template-columns: repeat(
+    var(--choice-group-columns),
+    minmax(0, 1fr)
+  );
+  gap: var(--nox-space-2);
+}
+
+.choice-group__option {
+  position: relative;
+  display: flex;
+  min-inline-size: 0;
+  block-size: var(--nox-field-control-block-size);
+  align-items: center;
+  justify-content: center;
+  gap: var(--nox-space-2);
+  padding: var(--nox-space-2) var(--nox-space-3);
+  overflow: hidden;
+  border: var(--nox-border-width) solid var(--nox-field-border);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-field-background);
+  color: var(--nox-text);
+  cursor: pointer;
+}
+
+.choice-group__input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.choice-group__icon {
+  flex: 0 0 auto;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: var(--nox-tone-color);
+}
+
+.choice-group__label {
+  min-inline-size: 0;
+  overflow: hidden;
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.choice-group__option:not(:has(.choice-group__input:checked)) {
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  opacity: 0.58;
+}
+
+.choice-group__option:has(.choice-group__input:checked) {
+  border-color: var(--nox-tone-color);
+  background: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 12%,
+    var(--nox-mix-light)
+  );
+  color: var(--nox-tone-text);
+}
+
+.choice-group__option:has(.choice-group__input:focus-visible) {
+  border-color: var(--nox-tone-color);
+  box-shadow: var(--nox-field-focus-shadow);
+}
+
+.choice-group:disabled .choice-group__option {
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+.choice-group:disabled .choice-group__input {
+  cursor: not-allowed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .choice-group:not(:disabled) .choice-group__option:hover {
+    border-color: var(--nox-tone-color);
+  }
+}

package/src/components/forms/ChoiceGroup/contracts.ts

@@ -0,0 +1,9 @@
+import type { AstroComponent } from '../../widgetTypes';
+import type { Tone } from '../../../theme/contracts';
+
+export type ChoiceOption = {
+  icon?: AstroComponent;
+  label: string;
+  tone?: Tone;
+  value: string;
+};

package/src/components/forms/DateTimeInput/DateTimeInput.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import TextInput from '../TextInput/TextInput.astro';
+
+type Props = Omit<HTMLAttributes<'input'>, 'type'> & {
+  invalid?: boolean;
+  tone?: Tone;
+};
+
+const props: Props = Astro.props;
+---
+
+<TextInput {...props} type="datetime-local" clearable={false} />

package/src/components/forms/FieldGroup/FieldGroup.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = Omit<HTMLAttributes<'fieldset'>, 'disabled'> & {
+  label: string;
+  disabled?: boolean;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  disabled = false,
+  label,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<fieldset
+  {...attrs}
+  class:list={['field-group', className]}
+  disabled={disabled}
+  data-disabled={disabled ? true : undefined}
+  data-tone={resolvedTone}
+  data-widget="field-group"
+>
+  <legend class="field-group__label">{label}</legend>
+  <div class="field-group__content">
+    <slot />
+  </div>
+</fieldset>

package/src/components/forms/FieldGroup/FieldGroup.css

@@ -0,0 +1,30 @@
+.field-group {
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.field-group__label {
+  display: inline-flex;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.field-group__content {
+  min-inline-size: 0;
+  margin-block-start: var(--nox-space-2);
+}
+
+.field-group[data-disabled] .field-group__label {
+  color: var(--nox-text-disabled);
+}

package/src/components/forms/TextInput/TextInput.astro

@@ -1,10 +1,11 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type { PreferenceBinding } from '../../../client/preferences';
 import type { Tone } from '../../../theme/contracts';
 import CloseIcon from '../../icons/CloseIcon.astro';
 
 type TextInputFraming = 'embedded' | 'standalone';
-type TextInputType = 'search' | 'text';
+type TextInputType = 'datetime-local' | 'search' | 'text';
 type TextInputAutofocus = boolean | 'desktop';
 
 type Props = Omit<HTMLAttributes<'input'>, 'autofocus' | 'type'> & {
@@ -13,6 +14,7 @@ type Props = Omit<HTMLAttributes<'input'>, 'autofocus' | 'type'> & {
   clearLabel?: string;
   framing?: TextInputFraming;
   invalid?: boolean;
+  preference?: PreferenceBinding;
   tone?: Tone;
   type?: TextInputType;
 };
@@ -26,6 +28,7 @@ const {
   'data-tone': dataTone,
   framing = 'standalone',
   invalid = false,
+  preference,
   tone,
   type = 'text',
   ...attrs
@@ -43,6 +46,9 @@ const resolvedTone = tone ?? dataTone;
   data-tone={resolvedTone}
   data-text-input-autofocus={autofocus === 'desktop' ? 'desktop' : undefined}
   data-text-input-field
+  data-preference-id={preference?.id}
+  data-preference-path={preference?.path}
+  data-preference-control={preference ? 'text' : undefined}
 >
   <input
     {...attrs}

package/src/components/forms/Textarea/Textarea.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'textarea'> & {
+  invalid?: boolean;
+  tone?: Tone;
+  value?: string;
+};
+
+const {
+  'aria-invalid': ariaInvalid,
+  class: className,
+  'data-tone': dataTone,
+  invalid = false,
+  tone,
+  value = '',
+  ...attrs
+}: Props = Astro.props;
+const resolvedInvalid =
+  invalid || ariaInvalid === true || ariaInvalid === 'true';
+const resolvedTone = tone ?? dataTone;
+---
+
+<textarea
+  {...attrs}
+  class:list={['textarea', className]}
+  data-widget="textarea"
+  data-invalid={resolvedInvalid ? true : undefined}
+  data-tone={resolvedTone}
+  aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}
+>{value}</textarea>

package/src/components/forms/Textarea/Textarea.css

@@ -0,0 +1,54 @@
+.textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 28rem;
+  resize: vertical;
+  padding: var(--nox-field-control-padding-inline);
+  border: var(--nox-border-width) solid var(--nox-field-border);
+  border-radius: var(--nox-radius-sm);
+  outline: 0;
+  background: var(--nox-field-background);
+  color: var(--nox-field-color);
+  font-family: inherit;
+  font-size: var(--nox-field-control-font-size);
+  font-weight: var(--nox-font-weight-regular);
+  letter-spacing: 0;
+  line-height: 1.5;
+  transition:
+    border-color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    box-shadow var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+}
+
+.textarea::placeholder {
+  color: var(--nox-field-placeholder);
+  opacity: 1;
+}
+
+.textarea:focus {
+  border-color: var(--nox-field-border-active);
+  box-shadow: var(--nox-field-focus-shadow);
+}
+
+.textarea[data-invalid] {
+  border-color: var(--nox-field-border-invalid);
+}
+
+.textarea:disabled {
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .textarea:not(:disabled):not(:focus):not([data-invalid]):hover {
+    border-color: var(--nox-field-border-hover);
+  }
+}
+
+@media (width < 48rem), (hover: none) and (pointer: coarse) {
+  .textarea {
+    min-height: 20rem;
+    font-size: var(--nox-font-size-md);
+  }
+}

package/src/components/icons/BackIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="M13 8 6 15l7 7M7 15h10c5 0 8 3 8 8"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/CheckIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M7 16.5L13 22.5L25 9.5"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/DeleteIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M9 10H23M13 10V7H19V10M11 10L12 25H20L21 10M14.5 14V21M17.5 14V21"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/StatusIndicatorIcon.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <circle cx="16" cy="16" r="8" fill="currentColor"></circle>
+</svg>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as ActionListItem } from './actions/ActionListItem/ActionListItem.astro';
 export { default as Button } from './actions/Button/Button.astro';
 export { default as CardAction } from './actions/CardAction/CardAction.astro';
+export { default as IdentityProviderAction } from './actions/IdentityProviderAction/IdentityProviderAction.astro';
 export { default as MediaTrigger } from './actions/MediaTrigger/MediaTrigger.astro';
 export { default as ScrollToTop } from './actions/ScrollToTop/ScrollToTop.astro';
 export { default as CardBody } from './content/CardBody/CardBody.astro';
@@ -15,10 +16,17 @@ export { default as IconList } from './data-display/IconList/IconList.astro';
 export { default as MetricTile } from './data-display/MetricTile/MetricTile.astro';
 export { default as Tag } from './data-display/Tag/Tag.astro';
 export { default as TextPair } from './data-display/TextPair/TextPair.astro';
+export { default as Checkbox } from './forms/Checkbox/Checkbox.astro';
+export { default as ChoiceGroup } from './forms/ChoiceGroup/ChoiceGroup.astro';
+export type { ChoiceOption } from './forms/ChoiceGroup/contracts';
+export { default as DateTimeInput } from './forms/DateTimeInput/DateTimeInput.astro';
 export { default as FieldError } from './forms/FieldError/FieldError.astro';
+export { default as FieldGroup } from './forms/FieldGroup/FieldGroup.astro';
 export { default as FieldLabel } from './forms/FieldLabel/FieldLabel.astro';
 export { default as TextInput } from './forms/TextInput/TextInput.astro';
+export { default as Textarea } from './forms/Textarea/Textarea.astro';
 export { default as Spinner } from './feedback/Spinner/Spinner.astro';
+export { default as PreferenceBootstrap } from './feedback/PreferenceBootstrap/PreferenceBootstrap.astro';
 export { default as Tooltip } from './feedback/Tooltip/Tooltip.astro';
 export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
 export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';
@@ -53,12 +61,15 @@ export { default as ArrowLeftIcon } from './icons/ArrowLeftIcon.astro';
 export { default as ArrowRightIcon } from './icons/ArrowRightIcon.astro';
 export { default as ArrowUpDownIcon } from './icons/ArrowUpDownIcon.astro';
 export { default as ArrowUpIcon } from './icons/ArrowUpIcon.astro';
+export { default as BackIcon } from './icons/BackIcon.astro';
 export { default as BulletIcon } from './icons/BulletIcon.astro';
 export { default as BurnIcon } from './icons/BurnIcon.astro';
+export { default as CheckIcon } from './icons/CheckIcon.astro';
 export { default as ClearIcon } from './icons/ClearIcon.astro';
 export { default as CloseIcon } from './icons/CloseIcon.astro';
 export { default as CopyIcon } from './icons/CopyIcon.astro';
 export { default as DayIcon } from './icons/DayIcon.astro';
+export { default as DeleteIcon } from './icons/DeleteIcon.astro';
 export { default as DollarIcon } from './icons/DollarIcon.astro';
 export { default as DownloadIcon } from './icons/DownloadIcon.astro';
 export { default as EnterFullscreenIcon } from './icons/EnterFullscreenIcon.astro';
@@ -78,6 +89,7 @@ export { default as RibbonIcon } from './icons/RibbonIcon.astro';
 export { default as SlashIcon } from './icons/SlashIcon.astro';
 export { default as SlowIcon } from './icons/SlowIcon.astro';
 export { default as StarIcon } from './icons/StarIcon.astro';
+export { default as StatusIndicatorIcon } from './icons/StatusIndicatorIcon.astro';
 export { default as StunIcon } from './icons/StunIcon.astro';
 export { default as TableSortIcon } from './icons/TableSortIcon.astro';
 export { default as WaterIcon } from './icons/WaterIcon.astro';

package/src/components/media/CanvasFrame/CanvasFrame.astro

@@ -3,24 +3,18 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import Button from '../../actions/Button/Button.astro';
 import Spinner from '../../feedback/Spinner/Spinner.astro';
-import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
 
 type CanvasAspectRatio = '16/9' | '4/3';
 type CanvasActivation = 'immediate' | 'manual';
 type CanvasWheelInput = 'canvas' | 'page';
 
-type CanvasFullscreen = {
-  enterLabel: string;
-  exitLabel: string;
-};
-
 type Props = HTMLAttributes<'div'> & {
   activation?: CanvasActivation;
   activationLabel?: string;
   aspectRatio?: CanvasAspectRatio;
   canvasId?: string;
   frameId: string;
-  fullscreen?: CanvasFullscreen;
+  fullscreen?: boolean;
   loadingLabel: string;
   title: string;
   tone?: Tone;
@@ -95,16 +89,6 @@ const resolvedCanvasId = canvasId ?? `${frameId}-canvas`;
     role="alert"
     hidden
   ></span>
-  {
-    fullscreen ? (
-      <FullscreenControl
-        targetId={frameId}
-        enterLabel={fullscreen.enterLabel}
-        exitLabel={fullscreen.exitLabel}
-        placement="overlay"
-      />
-    ) : null
-  }
 </nox-canvas-frame>
 
 <script>

package/src/components/media/EmbedFrame/EmbedFrame.astro

@@ -3,19 +3,12 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import Button from '../../actions/Button/Button.astro';
 import Spinner from '../../feedback/Spinner/Spinner.astro';
-import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
 
 type EmbedAspectRatio = '16/9' | '4/3';
 type EmbedActivation = 'immediate' | 'manual';
 type EmbedLoading = 'eager' | 'lazy';
 type EmbedLoadingIndicator = 'none' | 'spinner';
 
-type EmbedFullscreen = {
-  enterLabel: string;
-  exitLabel: string;
-  overlayOffset?: 'default' | 'native-controls';
-};
-
 type Props = Omit<
   HTMLAttributes<'iframe'>,
   'height' | 'loading' | 'src' | 'title' | 'width'
@@ -24,7 +17,7 @@ type Props = Omit<
   activationLabel?: string;
   aspectRatio?: EmbedAspectRatio;
   frameId?: string;
-  fullscreen?: EmbedFullscreen;
+  fullscreen?: boolean;
   loading?: EmbedLoading;
   loadingIndicator?: EmbedLoadingIndicator;
   loadingLabel: string;
@@ -111,17 +104,6 @@ const resolvedTone = tone ?? dataTone;
       </span>
     ) : null
   }
-  {
-    fullscreen ? (
-      <FullscreenControl
-        targetId={frameId ?? ''}
-        enterLabel={fullscreen.enterLabel}
-        exitLabel={fullscreen.exitLabel}
-        placement="overlay"
-        overlayOffset={fullscreen.overlayOffset}
-      />
-    ) : null
-  }
 </nox-embed-frame>
 
 <script>

package/src/components/media/EmbedFrame/EmbedFrame.css

@@ -1,6 +1,4 @@
 .embed-frame {
-  --nox-fullscreen-native-controls-block-size: 2.5rem;
-
   position: relative;
   display: block;
   inline-size: 100%;

package/src/components/navigation/SubNavigation/SubNavigation.css

@@ -194,11 +194,6 @@
     row-gap: 0;
   }
 
-  .sub-navigation__visual--media {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
   .sub-navigation__label--with-visual {
     position: absolute;
     overflow: hidden;

package/src/composition/Grid/Grid.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 
 type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type GridColumns = 1 | 2 | 3 | 4 | 'content-sidebar';
+type GridFlow = 'row' | 'column';
 type GridRows = 1 | 2 | 3 | 4;
 type GridItemAlignment = 'start' | 'center' | 'end' | 'stretch';
 type GridCollapseAt = 'none' | 'sm' | 'md' | 'lg' | 'xl';
@@ -14,8 +15,10 @@ type Props = Omit<HTMLAttributes<'div'>, 'class' | 'style'> & {
   collapseAt?: GridCollapseAt;
   class?: string;
   compactColumns?: 1 | 2 | 3 | 4;
+  compactFlow?: GridFlow;
   gap?: GridGap;
   columns?: GridColumns;
+  flow?: GridFlow;
   justifyItems?: GridItemAlignment;
   lastRow?: GridLastRow;
   minTrackWidth?: string;
@@ -28,8 +31,10 @@ const {
   collapseAt = 'md',
   class: className,
   compactColumns,
+  compactFlow,
   gap = 'md',
   columns,
+  flow = 'row',
   justifyItems = 'stretch',
   lastRow = 'preserve',
   minTrackWidth = '16rem',
@@ -52,6 +57,8 @@ const gridVariables = {
   ...(compactColumns
     ? { '--grid-compact-columns': String(compactColumns) }
     : {}),
+  '--grid-compact-flow': compactFlow ?? flow,
+  '--grid-flow': flow,
   ...(rows ? { '--grid-rows': String(rows) } : {}),
   '--grid-align-items': alignItems,
   '--grid-justify-items': justifyItems,
@@ -69,7 +76,9 @@ const gridStyle = Object.entries(gridVariables)
     data-align-items={alignItems}
     data-collapse-at={collapseMode}
     data-compact-columns={compactColumns}
+    data-compact-flow={compactFlow}
     data-columns={typeof columns === 'number' ? columns : undefined}
+    data-flow={flow}
     data-gap={gap}
     data-justify-items={justifyItems}
     data-layout={layout}