@inkra/react 0.2.0 → 0.4.3

package/dist/styles/steps.css

@@ -0,0 +1,27 @@
+.inkra-steps { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--inkra-ink); }
+.inkra-steps__item { position: relative; flex: 1 1 0; min-width: 0; }
+.inkra-steps__control { position: relative; display: flex; align-items: flex-start; gap: var(--inkra-space-3); width: 100%; min-height: var(--inkra-touch-target); padding: var(--inkra-space-2); border: 0; border-radius: var(--inkra-radius-md); background: transparent; color: inherit; font: inherit; text-align: start; }
+button.inkra-steps__control { cursor: pointer; }
+.inkra-steps__control:focus-visible { outline: var(--inkra-focus-width) solid var(--inkra-focus); outline-offset: var(--inkra-focus-offset); }
+.inkra-steps__selection { position: absolute !important; inset: 0; pointer-events: none; }
+.inkra-steps__marker { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: 32px; height: 32px; color: var(--inkra-ink-muted); }
+.inkra-steps__copy { position: relative; z-index: 1; display: grid; min-width: 0; gap: var(--inkra-space-1); }
+.inkra-steps__title, .inkra-steps__description { overflow-wrap: anywhere; }
+.inkra-steps__description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
+.inkra-steps__item[data-status="current"] { color: var(--inkra-selection-foreground); }
+.inkra-steps__item[data-status="complete"] .inkra-steps__marker { color: var(--inkra-success-foreground); }
+.inkra-steps__item[data-status="error"] .inkra-steps__marker,
+.inkra-steps__item[data-status="error"] .inkra-steps__title { color: var(--inkra-danger-foreground); }
+.inkra-steps__item[data-disabled] { opacity: 0.5; }
+.inkra-steps__connector { position: absolute; color: var(--inkra-border-strong); pointer-events: none; }
+.inkra-steps[data-orientation="horizontal"] { overflow-x: auto; padding-block-end: var(--inkra-space-2); }
+.inkra-steps[data-orientation="horizontal"] .inkra-steps__item { min-width: 180px; padding-inline-end: var(--inkra-space-4); }
+.inkra-steps[data-orientation="horizontal"] .inkra-steps__connector { inset-inline-start: 44px; inset-inline-end: 4px; top: 24px; height: 8px; width: auto; }
+.inkra-steps[data-orientation="vertical"] { flex-direction: column; }
+.inkra-steps[data-orientation="vertical"] .inkra-steps__item { min-height: 84px; padding-block-end: var(--inkra-space-4); }
+.inkra-steps[data-orientation="vertical"] .inkra-steps__connector { inset-inline-start: 20px; top: 44px; bottom: 0; width: 8px; height: auto; }
+@media (forced-colors: active) {
+  .inkra-steps__selection { display: none !important; }
+  .inkra-steps__item[data-status="current"] .inkra-steps__control { outline: 2px solid Highlight; color: Highlight; }
+  .inkra-steps__item[data-status="error"] .inkra-steps__control { border-inline-start: 3px solid Mark; }
+}

package/dist/styles/tabs.css

@@ -0,0 +1,79 @@
+.inkra-tabs { min-width: 0; --inkra-tabs-font-size: var(--inkra-text-md); --inkra-tabs-padding: var(--inkra-space-3); --inkra-tabs-icon-size: 20px; }
+.inkra-tabs[data-size="sm"] { --inkra-tabs-font-size: var(--inkra-text-sm); --inkra-tabs-padding: var(--inkra-space-2); --inkra-tabs-icon-size: 16px; }
+.inkra-tabs[data-size="lg"] { --inkra-tabs-font-size: 17px; --inkra-tabs-padding: var(--inkra-space-4); --inkra-tabs-icon-size: 24px; }
+.inkra-tabs__list {
+  display: flex;
+  gap: var(--inkra-space-2);
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-padding-inline: var(--inkra-focus-offset);
+}
+.inkra-tabs__list[data-orientation="vertical"] { flex-direction: column; }
+.inkra-tabs__list[data-divided] { gap: 24px; }
+.inkra-tabs__divider { position: absolute; color: var(--inkra-ink-muted); opacity: 0.56; }
+.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="vertical"] { inset-inline-start: -16px; top: 8px; width: 8px; height: calc(100% - 16px); }
+.inkra-tabs__trigger > .inkra-tabs__divider[data-orientation="horizontal"] { inset-inline: 8px; top: -16px; width: calc(100% - 16px); height: 8px; }
+.inkra-tabs__trigger:first-child > .inkra-tabs__divider { display: none; }
+.inkra-tabs__list[data-align="center"] { justify-content: safe center; }
+.inkra-tabs__list[data-align="end"] { justify-content: safe end; }
+.inkra-tabs__list[data-full-width] { width: 100%; }
+.inkra-tabs__list[data-full-width] > .inkra-tabs__trigger { flex: 1 0 0; }
+.inkra-tabs__list[data-orientation="vertical"][data-full-width] > .inkra-tabs__trigger { flex: none; width: 100%; }
+.inkra-tabs__trigger {
+  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
+  min-height: var(--inkra-touch-target); min-width: var(--inkra-touch-target);
+  padding: var(--inkra-space-2) var(--inkra-tabs-padding); border: 0; gap: var(--inkra-space-2);
+  background: transparent; color: var(--inkra-ink-muted); font: inherit;
+  white-space: nowrap; cursor: pointer; border-radius: var(--inkra-radius-md);
+  font-size: var(--inkra-tabs-font-size); line-height: var(--inkra-line-ui);
+}
+.inkra-tabs[data-size="lg"] .inkra-tabs__trigger { min-height: 48px; }
+.inkra-tabs__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--inkra-tabs-icon-size); height: var(--inkra-tabs-icon-size); flex: none; pointer-events: none; }
+.inkra-tabs__icon > * { width: 100%; height: 100%; }
+.inkra-tabs__trigger[data-state="active"] { color: var(--inkra-selection-foreground); }
+.inkra-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.55; }
+.inkra-tabs__trigger:focus-visible { outline: 0; }
+.inkra-pencil-surface.inkra-tabs__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+  position: absolute !important;
+  display: block !important;
+  inset: var(--inkra-focus-width);
+  pointer-events: none;
+  opacity: 0;
+  z-index: 2;
+}
+.inkra-tabs__trigger:focus-visible > .inkra-pencil-surface.inkra-tabs__focus-ring { opacity: 1; }
+.inkra-tabs__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: calc(-1 * var(--inkra-focus-width));
+}
+.inkra-pencil-surface.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
+.inkra-tabs__trigger[data-state="active"] > .inkra-pencil-surface.inkra-tabs__selection { opacity: 1; }
+.inkra-tabs__label { position: relative; }
+.inkra-tabs__content { min-width: 0; }
+.inkra-tabs__content[hidden] { display: none !important; }
+.inkra-tabs__overflow { display: flex; align-items: center; min-width: 0; max-width: 100%; position: relative; }
+.inkra-tabs__overflow > .inkra-tabs__list { flex: 1 1 auto; min-width: 0; }
+.inkra-tabs__scroll-button, .inkra-tabs__more { flex: 0 0 44px; }
+.inkra-tabs__overflow-icon { display: inline-flex; width: 32px; height: 32px; position: relative; pointer-events: none; }
+.inkra-tabs__overflow-icon[data-down] { transform: rotate(90deg); }
+.inkra-tabs__overflow-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: none; }
+.inkra-tabs__overflow-icon > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
+.inkra-tabs__list[data-overflow="menu"] { position: relative; overflow: hidden; }
+.inkra-tabs__list[data-overflow="menu"][data-full-width] > .inkra-tabs__trigger { flex: 1 0 auto; }
+.inkra-tabs__trigger[data-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; top: 0; }
+.inkra-tabs__list[data-overflow="buttons"] { scrollbar-width: none; }
+.inkra-tabs__list[data-overflow="buttons"]::-webkit-scrollbar { display: none; }
+@media (forced-colors: active) {
+  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+  .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
+  .inkra-tabs__trigger:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
+  .inkra-pencil-surface.inkra-tabs__selection { display: none !important; }
+  .inkra-tabs__trigger[data-state="active"] { color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
+}
+@media print {
+  .inkra-pencil-surface.inkra-tabs__selection, .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
+  .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
+}

package/dist/styles/tag-input.css

@@ -0,0 +1,213 @@
+.inkra-tag-input {
+  --inkra-field-control-height: var(--inkra-control-md);
+  --inkra-field-control-font-size: var(--inkra-text-md);
+  --inkra-field-control-padding: var(--inkra-space-3);
+  --inkra-tag-input-control-inset: var(--inkra-space-1);
+  --inkra-tag-input-item-height: calc(var(--inkra-field-control-height) - 2 * var(--inkra-tag-input-control-inset));
+  --inkra-tag-input-row-gap: max(
+    var(--inkra-space-1),
+    calc(var(--inkra-touch-target) - var(--inkra-tag-input-item-height))
+  );
+  --inkra-tag-input-tag-inset: var(--inkra-space-1);
+
+  display: inline-grid;
+  inline-size: 24rem;
+  max-inline-size: 100%;
+  gap: var(--inkra-space-2);
+  vertical-align: middle;
+}
+
+.inkra-tag-input[data-size="sm"] {
+  --inkra-field-control-height: var(--inkra-control-sm);
+  --inkra-field-control-font-size: var(--inkra-text-sm);
+  --inkra-field-control-padding: var(--inkra-space-2);
+}
+
+.inkra-tag-input[data-size="lg"] {
+  --inkra-field-control-height: var(--inkra-control-lg);
+  --inkra-field-control-font-size: var(--inkra-text-lg);
+  --inkra-field-control-padding: var(--inkra-space-4);
+}
+
+.inkra-tag-input[data-full-width="true"] { inline-size: 100%; }
+
+.inkra-tag-input__control {
+  position: relative;
+  display: flex !important;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--inkra-field-control-height);
+  block-size: auto;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: var(--inkra-space-1);
+  row-gap: var(--inkra-tag-input-row-gap);
+  padding: var(--inkra-tag-input-control-inset) var(--inkra-field-control-padding);
+  color: var(--inkra-ink);
+  cursor: text;
+}
+
+.inkra-tag-input[data-has-tags="true"] .inkra-tag-input__control {
+  padding-inline: var(--inkra-tag-input-control-inset);
+}
+
+.inkra-tag-input[data-focus-within="true"] .inkra-tag-input__control > :is(.inkra-pencil-surface__ink, .inkra-pencil-surface__border) {
+  filter: contrast(1.28) saturate(1.08);
+}
+
+.inkra-tag-input__list {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  column-gap: var(--inkra-space-1);
+  row-gap: var(--inkra-tag-input-row-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.inkra-tag-input__list:empty { display: none; }
+
+.inkra-tag-input__tag {
+  display: inline-flex !important;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: var(--inkra-tag-input-item-height);
+  align-items: center;
+  gap: var(--inkra-space-1);
+  padding: var(--inkra-tag-input-tag-inset);
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-field-control-font-size);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-tag-input__tag-label {
+  min-inline-size: 0;
+  max-inline-size: min(16rem, 50vw);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inkra-tag-input__remove,
+.inkra-tag-input__clear {
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  inline-size: var(--inkra-touch-target);
+  flex: 0 0 var(--inkra-touch-target);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--inkra-radius-md);
+  background: transparent;
+  color: var(--inkra-ink-muted);
+  cursor: pointer;
+}
+
+.inkra-tag-input__remove { block-size: 18px; }
+.inkra-tag-input__clear { block-size: var(--inkra-tag-input-item-height); }
+
+.inkra-tag-input__remove::before,
+.inkra-tag-input__clear::before {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline: 0;
+  min-block-size: var(--inkra-touch-target);
+  content: "";
+  transform: translateY(-50%);
+}
+
+.inkra-tag-input__remove:hover,
+.inkra-tag-input__clear:hover { color: var(--inkra-ink); }
+
+.inkra-tag-input__remove:focus-visible,
+.inkra-tag-input__clear:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: calc(-1 * var(--inkra-focus-width));
+}
+
+.inkra-tag-input__input {
+  min-inline-size: min(8rem, 100%);
+  min-block-size: var(--inkra-tag-input-item-height);
+  block-size: var(--inkra-tag-input-item-height);
+  flex: 1 1 8rem;
+  padding: 0;
+  color: var(--inkra-ink);
+  font-size: var(--inkra-field-control-font-size);
+}
+
+.inkra-tag-input[data-draft-empty="true"][data-has-tags="true"]:not([data-has-placeholder="true"])
+  .inkra-tag-input__input {
+  min-inline-size: 1px;
+  flex-basis: 1px;
+}
+
+.inkra-tag-input__input::placeholder {
+  color: var(--inkra-ink-subtle);
+  opacity: 1;
+}
+
+.inkra-tag-input__clear { margin-inline-end: 0; }
+
+.inkra-tag-input__underline {
+  position: absolute;
+  z-index: 4;
+  inset-inline: 0;
+  inset-block-end: -2px;
+  inline-size: 100%;
+  block-size: 8px;
+  color: var(--inkra-border-strong);
+  pointer-events: none;
+}
+
+.inkra-tag-input[data-invalid="true"] .inkra-tag-input__underline {
+  color: var(--inkra-danger-foreground, var(--inkra-danger));
+}
+
+.inkra-tag-input__message {
+  color: var(--inkra-danger-foreground, var(--inkra-danger));
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-tag-input[data-readonly="true"] .inkra-tag-input__control { cursor: default; }
+.inkra-tag-input[data-readonly="true"] .inkra-tag-input__input { color: var(--inkra-ink-muted); }
+.inkra-tag-input[data-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
+.inkra-tag-input[data-disabled="true"] .inkra-tag-input__control { cursor: not-allowed; }
+.inkra-tag-input :is(button, input):disabled { cursor: not-allowed; }
+
+@media (max-width: 30rem) {
+  .inkra-tag-input { inline-size: 100%; }
+  .inkra-tag-input__tag-label { max-inline-size: min(12rem, 58vw); }
+}
+
+@media (forced-colors: active) {
+  .inkra-tag-input__control,
+  .inkra-tag-input__tag { border: 1px solid CanvasText; }
+  .inkra-tag-input[data-invalid="true"] .inkra-tag-input__control { border-color: Mark; }
+  .inkra-tag-input__input { color: FieldText; caret-color: FieldText; }
+  .inkra-tag-input__input::placeholder { color: GrayText; }
+  .inkra-tag-input :is(.inkra-tag-input__remove, .inkra-tag-input__clear) { color: ButtonText; }
+  .inkra-tag-input :is(.inkra-tag-input__remove, .inkra-tag-input__clear):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .inkra-tag-input[data-variant="underline"] .inkra-tag-input__control { border: 0; }
+  .inkra-tag-input[data-variant="underline"] .inkra-tag-input__underline {
+    block-size: 1px;
+    background: CanvasText;
+  }
+}
+
+@media print {
+  .inkra-tag-input__remove,
+  .inkra-tag-input__clear { display: none; }
+  .inkra-tag-input__control,
+  .inkra-tag-input__tag { border: 1px solid var(--inkra-border-strong); }
+}

package/dist/styles/time-picker.css

@@ -0,0 +1,66 @@
+.inkra-time-picker {
+  --inkra-time-picker-control-height: var(--inkra-control-md);
+
+  display: flex;
+  align-items: center;
+  gap: var(--inkra-space-2);
+  position: relative;
+  min-height: var(--inkra-touch-target);
+  min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+}
+.inkra-time-picker[data-size="sm"] { --inkra-time-picker-control-height: var(--inkra-control-sm); }
+.inkra-time-picker[data-size="lg"] { --inkra-time-picker-control-height: var(--inkra-control-lg); }
+.inkra-time-picker[data-full-width="true"] { width: 100%; }
+.inkra-button-group.inkra-time-picker__control {
+  align-items: center;
+  block-size: var(--inkra-time-picker-control-height);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: visible;
+}
+.inkra-time-picker__control > .inkra-time-picker__trigger { flex: 1 1 auto; min-width: 0; }
+.inkra-time-picker__control > .inkra-time-picker__clear { flex: 0 0 auto; }
+.inkra-time-picker__clear[aria-hidden="true"] { visibility: hidden; }
+.inkra-time-picker__control .inkra-button-group__divider[data-orientation="vertical"] {
+  block-size: var(--inkra-time-picker-control-height);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+.inkra-time-picker[data-invalid="true"] { color: var(--inkra-danger); }
+.inkra-time-picker__native,
+.inkra-time-picker__accessible-value {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  opacity: 0;
+  clip-path: inset(50%);
+  pointer-events: none;
+}
+.inkra-time-picker__popover {
+  width: min(360px, calc(100vw - 24px));
+  background: var(--inkra-paper);
+  border-radius: var(--inkra-radius-lg);
+}
+.inkra-time-picker__popover .inkra-popover__content-body { display: grid; gap: var(--inkra-space-3); }
+.inkra-time-picker__columns { display: flex; gap: var(--inkra-space-2); min-width: 0; }
+.inkra-time-picker__column { flex: 1; min-width: 0; }
+.inkra-time-picker__column .inkra-radio-group__frame { width: 100%; min-width: 0; }
+.inkra-time-picker__column .inkra-radio-group__items {
+  min-width: 0;
+  max-height: min(264px, 35dvh);
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+.inkra-time-picker__column .inkra-radio-group__label { text-align: center; width: 100%; }
+.inkra-time-picker__column .inkra-radio-group__segment { min-width: 44px; padding-inline: 4px; }
+.inkra-time-picker__column.inkra-radio-group .inkra-radio-group__item { min-width: 0; }
+.inkra-time-picker__footer { display: flex; justify-content: flex-end; gap: var(--inkra-space-2); }
+.inkra-time-picker__error { margin: 0; color: var(--inkra-danger); font-size: var(--inkra-text-sm); }

package/dist/styles/timeline.css

@@ -0,0 +1,24 @@
+.inkra-timeline { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--inkra-ink); }
+.inkra-timeline__item { display: grid; min-width: 0; }
+.inkra-timeline__rail { position: relative; display: flex; align-items: center; justify-content: flex-start; }
+.inkra-timeline__marker { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: 36px; height: 36px; color: var(--inkra-accent-strong); }
+.inkra-timeline__connector { position: absolute; color: var(--inkra-border-strong); }
+.inkra-timeline__body { min-width: 0; }
+.inkra-timeline__date { display: block; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-ui); }
+.inkra-timeline__title { margin-block-start: var(--inkra-space-1); font-size: var(--inkra-text-lg); line-height: var(--inkra-line-ui); overflow-wrap: anywhere; }
+.inkra-timeline__description { margin-block-start: var(--inkra-space-1); color: var(--inkra-ink-muted); line-height: var(--inkra-line-body); overflow-wrap: anywhere; }
+.inkra-timeline__content { margin-block-start: var(--inkra-space-3); min-width: 0; }
+.inkra-timeline[data-orientation="vertical"] { flex-direction: column; }
+.inkra-timeline[data-orientation="vertical"] .inkra-timeline__item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--inkra-space-3); padding-block-end: var(--inkra-space-6); }
+.inkra-timeline[data-orientation="vertical"] .inkra-timeline__rail { align-items: flex-start; }
+.inkra-timeline[data-orientation="vertical"] .inkra-timeline__connector { top: 32px; inset-inline-start: 14px; width: 8px; height: calc(100% + var(--inkra-space-6) - 28px); }
+.inkra-timeline[data-orientation="vertical"] .inkra-timeline__item:last-child { padding-block-end: 0; }
+.inkra-timeline[data-orientation="horizontal"] { gap: 0; overflow-x: auto; padding-block-end: var(--inkra-space-3); }
+.inkra-timeline[data-orientation="horizontal"] .inkra-timeline__item { grid-template-rows: 44px auto; flex: 1 0 min(280px, 78vw); padding-inline-end: var(--inkra-space-6); }
+.inkra-timeline[data-orientation="horizontal"] .inkra-timeline__connector { inset-inline-start: 32px; top: 18px; width: calc(100% + var(--inkra-space-6) - 28px); height: 8px; }
+@media (forced-colors: active) {
+  .inkra-timeline__marker { border: 1px solid CanvasText; }
+  .inkra-timeline__connector { color: CanvasText; }
+  .inkra-timeline[data-orientation="vertical"] .inkra-timeline__connector { width: 1px; inset-inline-start: 17.5px; }
+  .inkra-timeline[data-orientation="horizontal"] .inkra-timeline__connector { height: 1px; top: 21.5px; }
+}

package/dist/styles/toast.css

@@ -0,0 +1,160 @@
+.inkra-toast__theme-anchor { display: none; }
+
+.inkra-toast__viewport {
+  --inkra-toast-enter-x: 0px;
+  --inkra-toast-enter-y: 12px;
+  --inkra-toast-edge: var(--inkra-space-5);
+  --inkra-toast-start: max(var(--inkra-toast-edge), env(safe-area-inset-left));
+  --inkra-toast-end: max(var(--inkra-toast-edge), env(safe-area-inset-right));
+  display: flex;
+  flex-direction: column;
+  gap: var(--inkra-space-3);
+  inset-block: auto max(var(--inkra-toast-edge), env(safe-area-inset-bottom));
+  inset-inline: auto var(--inkra-toast-end);
+  margin: 0;
+  max-height: calc(100dvh - var(--inkra-space-10));
+  max-width: calc(100vw - var(--inkra-space-10));
+  outline: 0;
+  padding: 4px;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: auto;
+  position: fixed;
+  width: min(24rem, calc(100vw - 2 * var(--inkra-toast-edge)));
+  z-index: calc(var(--inkra-z-toast, 50) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-toast__viewport[data-placement^="top"] { inset-block: max(var(--inkra-toast-edge), env(safe-area-inset-top)) auto; --inkra-toast-enter-y: -12px; }
+.inkra-toast__viewport[data-placement^="bottom"] { flex-direction: column-reverse; }
+.inkra-toast__viewport:dir(rtl) { --inkra-toast-start: max(var(--inkra-toast-edge), env(safe-area-inset-right)); --inkra-toast-end: max(var(--inkra-toast-edge), env(safe-area-inset-left)); }
+.inkra-toast__viewport[data-placement$="start"] { inset-inline: var(--inkra-toast-start) auto; align-items: flex-start; }
+.inkra-toast__viewport[data-placement$="end"] { align-items: flex-end; }
+.inkra-toast__viewport:is([data-placement="top-center"], [data-placement="bottom-center"], [data-placement="center"]) {
+  inset-inline: auto;
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.inkra-toast__viewport[data-placement^="center"] { top: 50%; bottom: auto; transform: translateY(-50%); --inkra-toast-enter-y: 0px; }
+.inkra-toast__viewport[data-placement="center"] { transform: translate(-50%, -50%); --inkra-toast-enter-y: 8px; }
+.inkra-toast__viewport[data-placement="center-start"] { --inkra-toast-enter-x: -12px; }
+.inkra-toast__viewport[data-placement="center-end"] { --inkra-toast-enter-x: 12px; }
+.inkra-toast__viewport:dir(rtl)[data-placement="center-start"] { --inkra-toast-enter-x: 12px; }
+.inkra-toast__viewport:dir(rtl)[data-placement="center-end"] { --inkra-toast-enter-x: -12px; }
+
+.inkra-toast__root {
+  --inkra-toast-translate-x: var(--toast-swipe-movement-x, 0px);
+  --inkra-toast-translate-y: var(--toast-swipe-movement-y, 0px);
+  box-sizing: border-box;
+  color: var(--inkra-toast-foreground, var(--inkra-ink));
+  max-width: 100%;
+  min-width: 0;
+  flex: 0 0 auto;
+  width: 100%;
+  pointer-events: auto;
+  position: relative;
+  transform: translate(var(--inkra-toast-translate-x), var(--inkra-toast-translate-y));
+  transition: opacity var(--inkra-motion-normal) var(--inkra-ease), transform var(--inkra-motion-normal) var(--inkra-ease);
+}
+
+.inkra-toast__root[data-starting-style],
+.inkra-toast__root[data-ending-style],
+.inkra-toast__root[data-limited] { opacity: 0; }
+
+.inkra-toast__root[data-limited] { position: absolute; visibility: hidden; pointer-events: none; }
+.inkra-toast__root:focus-visible { outline: 0; }
+.inkra-toast__focus.inkra-pencil-surface { --inkra-accent-strong: var(--inkra-focus); display: none; position: absolute; inset: -3px; pointer-events: none; z-index: 2; }
+.inkra-toast__root:focus-visible > .inkra-toast__focus { display: block; }
+.inkra-toast__root[data-starting-style],
+.inkra-toast__root[data-ending-style] { transform: translate(var(--inkra-toast-enter-x), var(--inkra-toast-enter-y)); }
+.inkra-toast__root[data-ending-style][data-swipe-direction="left"] { transform: translateX(-110%); }
+.inkra-toast__root[data-ending-style][data-swipe-direction="right"] { transform: translateX(110%); }
+.inkra-toast__root[data-ending-style][data-swipe-direction="up"] { transform: translateY(-110%); }
+.inkra-toast__root[data-ending-style][data-swipe-direction="down"] { transform: translateY(110%); }
+
+.inkra-toast__root[data-tone="success"] {
+  --inkra-accent-soft: var(--inkra-success-pigment);
+  --inkra-border-strong: var(--inkra-success-foreground);
+  --inkra-toast-foreground: var(--inkra-success-foreground);
+}
+.inkra-toast__root[data-tone="warning"] {
+  --inkra-accent-soft: var(--inkra-warning-pigment);
+  --inkra-border-strong: var(--inkra-warning-foreground);
+  --inkra-toast-foreground: var(--inkra-warning-foreground);
+}
+.inkra-toast__root[data-tone="danger"] {
+  --inkra-accent-soft: var(--inkra-danger-pigment);
+  --inkra-border-strong: var(--inkra-danger-foreground);
+  --inkra-toast-foreground: var(--inkra-danger-foreground);
+}
+.inkra-toast__root[data-tone="info"] {
+  --inkra-accent-soft: var(--inkra-info-pigment);
+  --inkra-border-strong: var(--inkra-info-foreground);
+  --inkra-toast-foreground: var(--inkra-info-foreground);
+}
+
+.inkra-toast__surface {
+  inset: 0;
+  position: absolute;
+  z-index: 0;
+}
+.inkra-toast__wash { inset: 0; position: absolute; z-index: 0; --inkra-selection-pigment: var(--inkra-accent-soft); }
+.inkra-toast__root[data-tone="neutral"] .inkra-toast__wash { --inkra-selection-pigment: var(--inkra-ink-muted); opacity: .5; }
+
+.inkra-toast__root[data-variant="compact"] { width: fit-content; border-radius: var(--inkra-radius-md); }
+.inkra-toast__root[data-variant="compact"] .inkra-toast__surface { border-radius: inherit; overflow: hidden; }
+.inkra-toast__root[data-variant="compact"] .inkra-toast__surface[data-pencil-fallback="true"] { border: 0; }
+.inkra-toast__root[data-variant="compact"] .inkra-toast__content { align-items: center; padding: var(--inkra-space-1) var(--inkra-space-3); gap: var(--inkra-space-2); }
+.inkra-toast__root[data-variant="compact"] .inkra-toast__title { font-size: var(--inkra-text-md); }
+.inkra-toast__root[data-variant="compact"] .inkra-toast__copy { gap: 2px; flex-basis: 0; }
+.inkra-toast__root[data-variant="card"] .inkra-toast__copy { flex-basis: 120px; }
+
+.inkra-toast__content {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-3);
+  justify-content: space-between;
+  min-height: var(--inkra-control-md);
+  min-width: 0;
+  padding: var(--inkra-space-4);
+  position: relative;
+  z-index: 1;
+}
+
+.inkra-toast__copy { display: grid; flex: 1; gap: var(--inkra-space-1); min-width: 0; }
+.inkra-toast__title { font-size: var(--inkra-text-lg); line-height: var(--inkra-line-ui); margin: 0; overflow-wrap: anywhere; }
+.inkra-toast__description { color: var(--inkra-toast-foreground, var(--inkra-ink-muted)); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); margin: 0; overflow-wrap: anywhere; }
+.inkra-toast__actions { align-items: center; display: flex; flex: none; gap: var(--inkra-space-1); }
+.inkra-toast__actions { max-width: 100%; flex-wrap: wrap; margin-inline-start: auto; }
+.inkra-toast__action { max-width: 100%; }
+.inkra-toast__action .inkra-button__surface { height: auto; min-height: var(--inkra-button-visual-height); max-width: 100%; padding-block: var(--inkra-space-2); }
+.inkra-toast__action > .inkra-button__focus-ring { height: calc(100% + 2 * var(--inkra-focus-offset)); }
+.inkra-toast__action .inkra-button__label,
+.inkra-toast__action .inkra-pencil-text,
+.inkra-toast__action .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
+.inkra-toast__action,
+.inkra-toast__close { position: relative; z-index: 1; }
+
+@media (max-width: 30rem) {
+  .inkra-toast__viewport {
+    --inkra-toast-edge: var(--inkra-space-3);
+    max-width: calc(100vw - 2 * var(--inkra-toast-edge));
+  }
+  .inkra-toast__content { flex-wrap: wrap; }
+  .inkra-toast__copy { flex-basis: 120px; }
+  .inkra-toast__actions { justify-content: flex-end; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-toast__root { transition: none; }
+  .inkra-toast__root[data-starting-style], .inkra-toast__root[data-ending-style] { transform: none; }
+}
+
+@media (forced-colors: active) {
+  .inkra-toast__surface, .inkra-toast__wash, .inkra-toast__focus.inkra-pencil-surface { display: none !important; }
+  .inkra-toast__root { border: 1px solid CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: none; }
+  .inkra-toast__root:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: 0; }
+  .inkra-toast__description { color: CanvasText; }
+}

package/dist/styles/toggle-group.css

@@ -0,0 +1,107 @@
+.inkra-toggle-group {
+  align-items: stretch;
+  display: inline-flex;
+  isolation: isolate;
+  max-width: 100%;
+  min-width: 0;
+  overflow: auto hidden;
+  padding: 2px;
+  position: relative;
+  scrollbar-width: thin;
+}
+
+.inkra-toggle-group[data-orientation="vertical"] {
+  flex-direction: column;
+  overflow: hidden auto;
+}
+
+.inkra-toggle-group__outline {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+}
+
+.inkra-toggle-group__item {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  font: inherit;
+  gap: var(--inkra-space-2);
+  justify-content: center;
+  line-height: var(--inkra-line-ui);
+  min-height: var(--inkra-control-md);
+  min-width: var(--inkra-touch-target);
+  padding: 0 var(--inkra-space-4);
+  position: relative;
+  z-index: 1;
+}
+
+.inkra-toggle-group[data-size="sm"] .inkra-toggle-group__item {
+  font-size: var(--inkra-text-sm);
+  min-height: var(--inkra-touch-target);
+  padding-inline: var(--inkra-space-3);
+}
+.inkra-toggle-group[data-size="md"] .inkra-toggle-group__item { font-size: var(--inkra-text-md); }
+.inkra-toggle-group[data-size="lg"] .inkra-toggle-group__item {
+  font-size: var(--inkra-text-lg);
+  min-height: var(--inkra-control-lg);
+  padding-inline: var(--inkra-space-5);
+}
+
+.inkra-toggle-group__selection,
+.inkra-toggle-group__focus {
+  inset: 2px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: -1;
+}
+
+.inkra-toggle-group__item[aria-pressed="true"] {
+  color: var(--inkra-selection-foreground);
+}
+.inkra-toggle-group__item[aria-pressed="true"] .inkra-toggle-group__selection { opacity: 1; }
+.inkra-toggle-group__item:focus-visible { outline: 0; }
+.inkra-toggle-group__item:focus-visible .inkra-toggle-group__focus { opacity: 1; }
+
+.inkra-toggle-group__divider {
+  inline-size: 8px;
+  inset-block: var(--inkra-space-2);
+  inset-inline-end: -4px;
+  position: absolute;
+  z-index: 2;
+}
+.inkra-toggle-group[data-orientation="vertical"] .inkra-toggle-group__divider {
+  block-size: 8px;
+  inline-size: auto;
+  inset-block: auto -4px;
+  inset-inline: var(--inkra-space-2);
+}
+.inkra-toggle-group__item:last-of-type .inkra-toggle-group__divider { display: none; }
+
+.inkra-toggle-group__icon { display: inline-flex; flex: none; }
+.inkra-toggle-group__label { min-width: 0; overflow-wrap: anywhere; }
+.inkra-toggle-group__item:disabled { color: var(--inkra-ink-subtle); cursor: not-allowed; opacity: .62; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .inkra-toggle-group__selection { transition: opacity var(--inkra-motion-normal) var(--inkra-ease); }
+}
+
+@media (forced-colors: active) {
+  .inkra-toggle-group__outline,
+  .inkra-toggle-group__selection,
+  .inkra-toggle-group__focus { display: none; }
+  .inkra-toggle-group { border: 1px solid ButtonText; }
+  .inkra-toggle-group__item { color: ButtonText; forced-color-adjust: none; }
+  .inkra-toggle-group__item[aria-pressed="true"] { background: Highlight; color: HighlightText; }
+  .inkra-toggle-group__item:focus-visible { outline: 2px solid Highlight; outline-offset: -3px; }
+  .inkra-toggle-group__divider { background: ButtonText; display: block; }
+  .inkra-toggle-group__item:disabled { color: GrayText; opacity: 1; }
+}