@frame-ui-ng/components 0.1.0-beta.0

package/navigation-menu/src/styles/navigation-menu.css

@@ -0,0 +1,245 @@
+@import './_vars.css';
+
+[frNavigationMenu],
+frame-navigation-menu {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: max-content;
+  max-width: 100%;
+  color: var(--frame-navigation-menu-color);
+}
+
+[frNavigationMenuList],
+frame-navigation-menu-list {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--frame-navigation-menu-gap);
+  margin: 0;
+  border-radius: var(--frame-navigation-menu-radius);
+  background: var(--frame-navigation-menu-bg);
+  padding: var(--frame-navigation-menu-padding);
+  list-style: none;
+}
+
+[frNavigationMenuItem],
+frame-navigation-menu-item {
+  display: contents;
+}
+
+[frNavigationMenuTrigger],
+.frame-navigation-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-navigation-menu-trigger-gap);
+  min-block-size: var(--frame-navigation-menu-trigger-height);
+  border: 0;
+  border-radius: var(--frame-navigation-menu-trigger-radius);
+  background: var(--frame-navigation-menu-trigger-bg);
+  color: var(--frame-navigation-menu-trigger-color);
+  padding-inline: var(--frame-navigation-menu-trigger-padding-x);
+  font: inherit;
+  font-size: var(--frame-navigation-menu-trigger-font-size);
+  font-weight: var(--frame-navigation-menu-trigger-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+  transition:
+    background-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease;
+}
+
+[frNavigationMenuTrigger]:where(:not(:disabled)):hover,
+.frame-navigation-menu__trigger:where(:not(:disabled)):hover,
+[frNavigationMenuFeature]:hover,
+.frame-navigation-menu__feature:hover,
+[frNavigationMenuTrigger][data-state='open'],
+.frame-navigation-menu__trigger[data-state='open'] {
+  background: var(--frame-navigation-menu-trigger-hover-bg);
+  color: var(--frame-navigation-menu-trigger-hover-color);
+}
+
+[frNavigationMenuTrigger][data-state='open'],
+.frame-navigation-menu__trigger[data-state='open'] {
+  background: var(--frame-navigation-menu-trigger-open-bg);
+  color: var(--frame-navigation-menu-trigger-open-color);
+}
+
+[frNavigationMenuTrigger]:focus-visible,
+.frame-navigation-menu__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--frame-navigation-menu-trigger-focus-shadow);
+}
+
+[frNavigationMenuTrigger]:disabled,
+.frame-navigation-menu__trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-dropdown-menu-item-disabled-opacity, 0.5);
+}
+
+[frNavigationMenuPanel],
+.frame-navigation-menu__content {
+  max-height: 30rem;
+  overflow-y: auto;
+  width: min(var(--frame-navigation-menu-content-width), calc(100vw - 2rem));
+}
+
+[frNavigationMenuGrid],
+.frame-navigation-menu__grid {
+  display: grid;
+  gap: var(--frame-navigation-menu-content-gap);
+}
+
+[frNavigationMenuGrid][data-columns='2'],
+.frame-navigation-menu__grid[data-columns='2'] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+[frNavigationMenuGrid][data-columns='3'],
+.frame-navigation-menu__grid[data-columns='3'] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+[frNavigationMenuGrid][data-columns='2'],
+.frame-navigation-menu__grid[data-columns='2'] [frNavigationMenuFeature] {
+  grid-column: 1 / 2;
+}
+
+[frNavigationMenuGrid][data-columns='3'],
+.frame-navigation-menu__grid[data-columns='3'] [frNavigationMenuFeature] {
+  grid-column: 1 / 4;
+}
+
+[frNavigationMenuLink],
+.frame-navigation-menu__link {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--frame-navigation-menu-link-gap);
+  min-width: 0;
+  border-radius: var(--frame-navigation-menu-link-radius);
+  background: var(--frame-navigation-menu-link-bg);
+  color: var(--frame-navigation-menu-link-color);
+  padding: var(--frame-navigation-menu-link-padding);
+  text-align: start;
+  text-decoration: none;
+  transition:
+    background-color 140ms ease,
+    color 140ms ease;
+}
+
+[frNavigationMenuLink]:where(:hover, :focus-visible),
+.frame-navigation-menu__link:where(:hover, :focus-visible) {
+  background: var(--frame-navigation-menu-link-hover-bg);
+  color: var(--frame-navigation-menu-link-hover-color);
+  outline: none;
+}
+
+[frNavigationMenuLink][data-active],
+.frame-navigation-menu__link[data-active] {
+  background: var(--frame-navigation-menu-link-active-bg);
+  color: var(--frame-navigation-menu-link-active-color);
+}
+
+[frNavigationMenuList] > [frNavigationMenuItem] > [frNavigationMenuLink],
+frame-navigation-menu-list > frame-navigation-menu-item > [frNavigationMenuLink] {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-navigation-menu-trigger-gap);
+  min-block-size: var(--frame-navigation-menu-trigger-height);
+  border-radius: var(--frame-navigation-menu-trigger-radius);
+  padding-block: 0;
+  padding-inline: var(--frame-navigation-menu-trigger-padding-x);
+  font-size: var(--frame-navigation-menu-trigger-font-size);
+  font-weight: var(--frame-navigation-menu-trigger-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+[frNavigationMenuLinkTitle],
+.frame-navigation-menu__link-title {
+  color: inherit;
+  font-size: var(--frame-navigation-menu-link-title-font-size);
+  font-weight: var(--frame-navigation-menu-link-title-font-weight);
+  line-height: 1.25;
+}
+
+[frNavigationMenuLinkDescription],
+.frame-navigation-menu__link-description {
+  color: var(--frame-navigation-menu-link-description-color);
+  font-size: var(--frame-navigation-menu-link-description-font-size);
+  line-height: 1.45;
+}
+
+[frNavigationLinkSeparator],
+.frame-navigation-menu__link-separator {
+  display: block;
+  grid-column: 1 / -1;
+  block-size: 1px;
+  margin-block: var(--frame-navigation-menu-link-separator-margin-y);
+  background: var(--frame-navigation-menu-link-separator-color);
+}
+
+[frNavigationMenuFeature],
+.frame-navigation-menu__feature {
+  min-height: 2rem;
+  align-content: end;
+  background: var(--frame-navigation-menu-feature-bg);
+  color: var(--frame-navigation-menu-feature-color);
+}
+
+[frNavigationMenuIndicator],
+frame-navigation-menu-indicator {
+  position: absolute;
+  inset-block-start: calc(100% - 0.125rem);
+  inset-inline-start: 50%;
+  z-index: 1;
+  display: block;
+  inline-size: var(--frame-navigation-menu-indicator-size);
+  block-size: var(--frame-navigation-menu-indicator-size);
+  background: var(--frame-navigation-menu-indicator-bg);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+[dir='rtl'] [frNavigationMenuIndicator],
+[dir='rtl'] frame-navigation-menu-indicator {
+  transform: translateX(50%) rotate(45deg);
+}
+
+[frNavigationMenuViewport],
+frame-navigation-menu-viewport {
+  display: block;
+  border: 1px solid var(--frame-navigation-menu-viewport-border);
+  border-radius: var(--frame-navigation-menu-viewport-radius);
+  background: var(--frame-navigation-menu-viewport-bg);
+  box-shadow: var(--frame-navigation-menu-viewport-shadow);
+  overflow: hidden;
+}
+
+@media (max-width: 40rem) {
+  [frNavigationMenuList],
+  frame-navigation-menu-list {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  [frNavigationMenuTrigger],
+  .frame-navigation-menu__trigger,
+  [frNavigationMenuLink],
+  .frame-navigation-menu__link {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  [frNavigationMenuGrid],
+  .frame-navigation-menu__grid,
+  [frNavigationMenuGrid][data-columns],
+  .frame-navigation-menu__grid[data-columns] {
+    grid-template-columns: 1fr;
+  }
+}

package/package.json

@@ -0,0 +1,243 @@
+{
+  "name": "@frame-ui-ng/components",
+  "version": "0.1.0-beta.0",
+  "description": "Angular components for FrameUI.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gamekohl/frame-ui.git"
+  },
+  "homepage": "https://frame-ui.com",
+  "bugs": {
+    "url": "https://github.com/gamekohl/frame-ui/issues"
+  },
+  "keywords": [
+    "angular",
+    "components",
+    "design-system",
+    "ui",
+    "frame-ui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/cdk": ">=21.0.0 <22.0.0",
+    "@angular/common": ">=21.0.0 <22.0.0",
+    "@angular/core": ">=21.0.0 <22.0.0",
+    "@angular/forms": ">=21.0.0 <22.0.0",
+    "@frame-ui-ng/foundation": "0.1.0-beta.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "exports": {
+    "./styles.css": {
+      "style": "./styles.css",
+      "default": "./styles.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/frame-ui-ng-components.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components.mjs"
+    },
+    "./accordion": {
+      "types": "./types/frame-ui-ng-components-accordion.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-accordion.mjs"
+    },
+    "./alert": {
+      "types": "./types/frame-ui-ng-components-alert.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-alert.mjs"
+    },
+    "./avatar": {
+      "types": "./types/frame-ui-ng-components-avatar.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-avatar.mjs"
+    },
+    "./badge": {
+      "types": "./types/frame-ui-ng-components-badge.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-badge.mjs"
+    },
+    "./breadcrumb": {
+      "types": "./types/frame-ui-ng-components-breadcrumb.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-breadcrumb.mjs"
+    },
+    "./button": {
+      "types": "./types/frame-ui-ng-components-button.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-button.mjs"
+    },
+    "./button-group": {
+      "types": "./types/frame-ui-ng-components-button-group.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-button-group.mjs"
+    },
+    "./calendar": {
+      "types": "./types/frame-ui-ng-components-calendar.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-calendar.mjs"
+    },
+    "./card": {
+      "types": "./types/frame-ui-ng-components-card.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-card.mjs"
+    },
+    "./carousel": {
+      "types": "./types/frame-ui-ng-components-carousel.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-carousel.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/frame-ui-ng-components-checkbox.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-checkbox.mjs"
+    },
+    "./collapsible": {
+      "types": "./types/frame-ui-ng-components-collapsible.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-collapsible.mjs"
+    },
+    "./combobox": {
+      "types": "./types/frame-ui-ng-components-combobox.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-combobox.mjs"
+    },
+    "./command": {
+      "types": "./types/frame-ui-ng-components-command.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-command.mjs"
+    },
+    "./context-menu": {
+      "types": "./types/frame-ui-ng-components-context-menu.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-context-menu.mjs"
+    },
+    "./date-picker": {
+      "types": "./types/frame-ui-ng-components-date-picker.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-date-picker.mjs"
+    },
+    "./dropdown-menu": {
+      "types": "./types/frame-ui-ng-components-dropdown-menu.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-dropdown-menu.mjs"
+    },
+    "./empty": {
+      "types": "./types/frame-ui-ng-components-empty.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-empty.mjs"
+    },
+    "./field": {
+      "types": "./types/frame-ui-ng-components-field.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-field.mjs"
+    },
+    "./forms": {
+      "types": "./types/frame-ui-ng-components-forms.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-forms.mjs"
+    },
+    "./hover-card": {
+      "types": "./types/frame-ui-ng-components-hover-card.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-hover-card.mjs"
+    },
+    "./input": {
+      "types": "./types/frame-ui-ng-components-input.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-input.mjs"
+    },
+    "./input-otp": {
+      "types": "./types/frame-ui-ng-components-input-otp.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-input-otp.mjs"
+    },
+    "./item": {
+      "types": "./types/frame-ui-ng-components-item.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-item.mjs"
+    },
+    "./menubar": {
+      "types": "./types/frame-ui-ng-components-menubar.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-menubar.mjs"
+    },
+    "./modal": {
+      "types": "./types/frame-ui-ng-components-modal.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-modal.mjs"
+    },
+    "./navigation-menu": {
+      "types": "./types/frame-ui-ng-components-navigation-menu.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-navigation-menu.mjs"
+    },
+    "./pagination": {
+      "types": "./types/frame-ui-ng-components-pagination.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-pagination.mjs"
+    },
+    "./popover": {
+      "types": "./types/frame-ui-ng-components-popover.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-popover.mjs"
+    },
+    "./progress": {
+      "types": "./types/frame-ui-ng-components-progress.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-progress.mjs"
+    },
+    "./radio-group": {
+      "types": "./types/frame-ui-ng-components-radio-group.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-radio-group.mjs"
+    },
+    "./resizable": {
+      "types": "./types/frame-ui-ng-components-resizable.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-resizable.mjs"
+    },
+    "./select": {
+      "types": "./types/frame-ui-ng-components-select.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-select.mjs"
+    },
+    "./separator": {
+      "types": "./types/frame-ui-ng-components-separator.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-separator.mjs"
+    },
+    "./sheet": {
+      "types": "./types/frame-ui-ng-components-sheet.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-sheet.mjs"
+    },
+    "./sidebar": {
+      "types": "./types/frame-ui-ng-components-sidebar.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-sidebar.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/frame-ui-ng-components-skeleton.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-skeleton.mjs"
+    },
+    "./slider": {
+      "types": "./types/frame-ui-ng-components-slider.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-slider.mjs"
+    },
+    "./spinner": {
+      "types": "./types/frame-ui-ng-components-spinner.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-spinner.mjs"
+    },
+    "./switch": {
+      "types": "./types/frame-ui-ng-components-switch.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-switch.mjs"
+    },
+    "./table": {
+      "types": "./types/frame-ui-ng-components-table.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-table.mjs"
+    },
+    "./tabs": {
+      "types": "./types/frame-ui-ng-components-tabs.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-tabs.mjs"
+    },
+    "./textarea": {
+      "types": "./types/frame-ui-ng-components-textarea.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-textarea.mjs"
+    },
+    "./toast": {
+      "types": "./types/frame-ui-ng-components-toast.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-toast.mjs"
+    },
+    "./toggle": {
+      "types": "./types/frame-ui-ng-components-toggle.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-toggle.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/frame-ui-ng-components-tooltip.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-tooltip.mjs"
+    },
+    "./virtual-scroll": {
+      "types": "./types/frame-ui-ng-components-virtual-scroll.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-virtual-scroll.mjs"
+    }
+  },
+  "sideEffects": [
+    "./styles.css",
+    "./styles/components.css"
+  ],
+  "module": "fesm2022/frame-ui-ng-components.mjs",
+  "typings": "types/frame-ui-ng-components.d.ts",
+  "type": "module"
+}

package/pagination/src/styles/_vars.css

@@ -0,0 +1,22 @@
+:root {
+  --frame-pagination-gap: 0.25rem;
+  --frame-pagination-color: var(--frame-foreground);
+  --frame-pagination-link-size: 2.25rem;
+  --frame-pagination-link-min-width: 2.25rem;
+  --frame-pagination-link-padding-x: 0.75rem;
+  --frame-pagination-link-gap: 0.375rem;
+  --frame-pagination-link-radius: var(--frame-radius-md);
+  --frame-pagination-link-bg: transparent;
+  --frame-pagination-link-color: var(--frame-muted-foreground);
+  --frame-pagination-link-border: transparent;
+  --frame-pagination-link-hover-bg: var(--frame-accent);
+  --frame-pagination-link-hover-color: var(--frame-accent-foreground);
+  --frame-pagination-link-active-bg: var(--frame-surface);
+  --frame-pagination-link-active-color: var(--frame-foreground);
+  --frame-pagination-link-active-border: var(--frame-border);
+  --frame-pagination-link-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
+  --frame-pagination-link-disabled-opacity: 0.5;
+  --frame-pagination-font-size: 0.875rem;
+  --frame-pagination-font-weight: 500;
+  --frame-pagination-ellipsis-color: var(--frame-muted-foreground);
+}

package/pagination/src/styles/pagination.css

@@ -0,0 +1,138 @@
+@import './_vars.css';
+
+[frPagination],
+nav[frPagination] {
+  display: flex;
+  justify-content: center;
+  color: var(--frame-pagination-color);
+}
+
+[frPaginationContent] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-pagination-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[frPaginationItem] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[frPaginationLink],
+[frPaginationPrevious],
+[frPaginationNext],
+.frame-pagination__link {
+  box-sizing: border-box;
+  display: inline-flex;
+  min-inline-size: var(--frame-pagination-link-min-width);
+  min-block-size: var(--frame-pagination-link-size);
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-pagination-link-gap);
+  border: 1px solid var(--frame-pagination-link-border);
+  border-radius: var(--frame-pagination-link-radius);
+  background: var(--frame-pagination-link-bg);
+  color: var(--frame-pagination-link-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-pagination-font-size);
+  font-weight: var(--frame-pagination-font-weight);
+  line-height: 1;
+  padding-inline: var(--frame-pagination-link-padding-x);
+  text-decoration: none;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease;
+  user-select: none;
+  white-space: nowrap;
+}
+
+[frPaginationLink]:where(button),
+[frPaginationPrevious]:where(button),
+[frPaginationNext]:where(button) {
+  padding-block: 0;
+}
+
+[frPaginationLink]:where(:not([data-disabled])):hover,
+[frPaginationPrevious]:where(:not([data-disabled])):hover,
+[frPaginationNext]:where(:not([data-disabled])):hover,
+.frame-pagination__link:where(:not([data-disabled])):hover {
+  background: var(--frame-pagination-link-hover-bg);
+  color: var(--frame-pagination-link-hover-color);
+}
+
+[frPaginationLink]:focus-visible,
+[frPaginationPrevious]:focus-visible,
+[frPaginationNext]:focus-visible,
+.frame-pagination__link:focus-visible {
+  outline: none;
+  box-shadow: var(--frame-pagination-link-focus-shadow);
+}
+
+[frPaginationLink][data-active],
+.frame-pagination__link[data-active] {
+  border-color: var(--frame-pagination-link-active-border);
+  background: var(--frame-pagination-link-active-bg);
+  color: var(--frame-pagination-link-active-color);
+}
+
+[frPaginationLink][data-disabled],
+[frPaginationPrevious][data-disabled],
+[frPaginationNext][data-disabled],
+.frame-pagination__link[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-pagination-link-disabled-opacity);
+  pointer-events: none;
+}
+
+[frPaginationPrevious][data-icon-only],
+[frPaginationNext][data-icon-only] {
+  inline-size: var(--frame-pagination-link-size);
+  min-inline-size: var(--frame-pagination-link-size);
+  padding-inline: 0;
+}
+
+.frame-pagination__control-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25em;
+  line-height: 0.75;
+}
+
+[dir='rtl'] .frame-pagination__previous .frame-pagination__control-icon,
+[dir='rtl'] .frame-pagination__next .frame-pagination__control-icon {
+  transform: scaleX(-1);
+}
+
+[frPaginationEllipsis],
+frame-pagination-ellipsis {
+  display: inline-flex;
+  min-inline-size: var(--frame-pagination-link-size);
+  min-block-size: var(--frame-pagination-link-size);
+  align-items: center;
+  justify-content: center;
+  color: var(--frame-pagination-ellipsis-color);
+  letter-spacing: 0.08em;
+  user-select: none;
+}
+
+.frame-pagination__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/popover/src/styles/_vars.css

@@ -0,0 +1,24 @@
+:root {
+  --frame-popover-content-width: 20rem;
+  --frame-popover-content-padding: 1rem;
+  --frame-popover-content-radius: var(--frame-radius-md);
+  --frame-popover-content-bg: var(--frame-surface);
+  --frame-popover-content-color: var(--frame-surface-foreground);
+  --frame-popover-content-border: var(--frame-border);
+  --frame-popover-content-shadow: var(--frame-shadow-md);
+  --frame-popover-content-gap: 0.875rem;
+  --frame-popover-header-gap: 0.25rem;
+  --frame-popover-title-color: var(--frame-foreground);
+  --frame-popover-title-font-size: 0.875rem;
+  --frame-popover-title-font-weight: 600;
+  --frame-popover-description-color: var(--frame-muted-foreground);
+  --frame-popover-description-font-size: 0.875rem;
+  --frame-popover-body-gap: 0.75rem;
+  --frame-popover-footer-gap: 0.5rem;
+  --frame-popover-close-radius: var(--frame-radius-sm);
+  --frame-popover-close-hover-bg: var(--frame-accent);
+  --frame-popover-motion-duration: 140ms;
+  --frame-popover-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --frame-popover-motion-distance: 0.25rem;
+  --frame-popover-motion-scale: 0.96;
+}