@cocoar/vue-ui 0.1.0-beta.25 → 1.0.0

package/package.json

@@ -1,9 +1,28 @@
 {
   "name": "@cocoar/vue-ui",
-  "version": "0.1.0-beta.25",
+  "version": "1.0.0",
+  "description": "Cocoar Design System — a touch-first Vue 3 component library with 30+ accessible, themeable components",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cocoar-dev/cocoar-ui-vue.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://docs.cocoar.dev/cocoar-ui-vue/",
+  "bugs": "https://github.com/cocoar-dev/cocoar-ui-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "component-library",
+    "design-system",
+    "ui",
+    "accessible",
+    "typescript"
+  ],
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./src/fonts.ts"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,7 +32,8 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./styles": "./styles/bundle.css"
+    "./styles": "./styles/bundle.css",
+    "./fonts": "./src/fonts.ts"
   },
   "files": [
     "dist",
@@ -25,17 +45,24 @@
     "lint": "eslint src/"
   },
   "dependencies": {
-    "@cocoar/vue-localization": "0.1.0-beta.25",
-    "@cocoar/vue-fragment-parser": "0.1.0-beta.25",
-    "@js-temporal/polyfill": "^0.5.1",
+    "@cocoar/vue-fragment-parser": "1.0.0",
+    "@cocoar/vue-localization": "1.0.0",
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/poppins": "^5.2.7",
     "@maskito/core": "^5.1.1",
     "@maskito/kit": "^5.1.1",
     "@maskito/vue": "^5.1.1",
     "prismjs": "^1.30.0"
   },
   "peerDependencies": {
+    "@js-temporal/polyfill": "^0.5.0",
     "vue": "^3.5.0"
   },
+  "peerDependenciesMeta": {
+    "@js-temporal/polyfill": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/prismjs": "^1.26.6",
     "overlayscrollbars": "^2.14.0",

package/styles/all.css

@@ -19,4 +19,5 @@
 @import './shared/form-field-message.css' layer(cocoar.components);
 @import './base.css' layer(cocoar.base);
 @import './components.css' layer(cocoar.components);
+@import './transitions.css' layer(cocoar.components);
 @import 'overlayscrollbars/overlayscrollbars.css';

package/styles/tokens/code-block.css

@@ -45,9 +45,9 @@
 :root.dark-mode,
 .dark-mode {
   /* Layout */
-  --coar-code-block-bg: var(--coar-color-gray-100, #27272a);
-  --coar-code-block-header-bg: var(--coar-color-gray-200, #3f3f46);
-  --coar-code-block-border: var(--coar-color-gray-300, #52525b);
+  --coar-code-block-bg: var(--coar-color-gray-100);
+  --coar-code-block-header-bg: var(--coar-color-gray-200);
+  --coar-code-block-border: var(--coar-color-gray-300);
 
   /* Text */
   --coar-code-block-text: #d4d4d4;

package/styles/tokens/colors-primitives-light.css

@@ -1,7 +1,7 @@
 /**
  * Cocoar Design System - Design Tokens
  * Color Primitives - Light Mode
- * Auto-generated from Figma - Do not edit manually
+ * Raw color palette for light mode
  */
 
 :root,

package/styles/tokens/colors-usage.css

@@ -40,6 +40,7 @@
   --coar-border-neutral-primary: var(--coar-color-gray-900);
   --coar-border-neutral-secondary: var(--coar-color-gray-800);
   --coar-border-neutral-tertiary: var(--coar-color-gray-200);
+  --coar-border-neutral-quaternary: var(--coar-color-gray-100);
   --coar-border-neutral: var(--coar-color-gray-200); /* Alias for tertiary - used in dropdowns */
 
   /* Icon */
@@ -88,6 +89,9 @@
   --coar-border-accent-primary: var(--coar-color-accent-500);
   --coar-border-accent-secondary: var(--coar-color-accent-400);
 
+  /* Surface */
+  --coar-surface-accent-secondary: var(--coar-color-accent-100);
+
   /* Icon */
   --coar-icon-accent-primary: var(--coar-color-accent-700);
 
@@ -114,6 +118,7 @@
   --coar-background-semantic-error-subtle: var(--coar-color-red-100);
   --coar-text-semantic-error-bold: var(--coar-color-red-800);
   --coar-text-semantic-error-subtle: var(--coar-color-red-700);
+  --coar-border-semantic-error: var(--coar-color-red-600);
   --coar-border-semantic-error-bold: var(--coar-color-red-800);
   --coar-border-semantic-error-subtle: var(--coar-color-red-200);
   --coar-icon-semantic-error-bold: var(--coar-color-red-800);
@@ -192,6 +197,7 @@
   --coar-border-neutral-primary: var(--coar-color-gray-700);
   --coar-border-neutral-secondary: var(--coar-color-gray-600);
   --coar-border-neutral-tertiary: var(--coar-color-gray-300);
+  --coar-border-neutral-quaternary: var(--coar-color-gray-200);
 
   /* Icon */
   --coar-icon-neutral-primary: var(--coar-color-gray-900);
@@ -214,6 +220,9 @@
   --coar-text-accent-primary: var(--coar-color-accent-500);
   --coar-text-accent-secondary: var(--coar-color-accent-400);
 
+  /* Surface */
+  --coar-surface-accent-secondary: var(--coar-color-accent-200);
+
   /* ==========================================================================
      SEMANTIC - Adjusted for dark backgrounds
      Bold backgrounds are slightly lighter for better contrast
@@ -236,6 +245,7 @@
   --coar-background-semantic-error-subtle: var(--coar-color-red-200);
   --coar-text-semantic-error-bold: var(--coar-color-red-900);
   --coar-text-semantic-error-subtle: var(--coar-color-red-700);
+  --coar-border-semantic-error: var(--coar-color-red-500);
   --coar-border-semantic-error-bold: var(--coar-color-red-600);
   --coar-border-semantic-error-subtle: var(--coar-color-red-300);
   --coar-icon-semantic-error-bold: var(--coar-color-red-900);

package/styles/tokens/menu.css

@@ -1,51 +1,75 @@
 /**
  * Cocoar Design System - Menu Tokens
- * Theming tokens for coar-menu and menu items.
+ * Theming tokens for coar-menu, menu items, headings, and sidebar.
  *
- * Default styling optimized for context menus (overlays).
- * For sidebar navigation, these can be overridden via CSS variables.
+ * All visual properties are controlled via tokens so the entire menu
+ * can be re-themed by overriding CSS custom properties.
  */
 
 :root {
-  /* Menu container background - clean white for context menus */
-  --coar-menu-background: var(--coar-background-neutral-primary, #ffffff);
+  /* --- Typography -------------------------------------------------------- */
+  --coar-menu-item-font-family: var(--coar-body-base-family);
+  --coar-menu-item-font-size: var(--coar-component-m-font-size);
+  --coar-menu-item-font-weight: var(--coar-font-weight-regular);
+  --coar-menu-item-line-height: var(--coar-line-height-relaxed);
 
-  /* Item interactive states - subtle hover, accent for active */
-  --coar-menu-item-background-hover: var(--coar-background-neutral-secondary, #f5f5f5);
-  --coar-menu-item-background-focus: var(--coar-background-neutral-secondary, #f5f5f5);
-  --coar-menu-item-background-open: var(--coar-background-accent-tertiary, #e6f0ff);
-  --coar-menu-item-background-active: var(--coar-background-accent-tertiary, #e6f0ff);
+  --coar-menu-heading-font-family: var(--coar-body-base-family);
+  --coar-menu-heading-font-size: var(--coar-component-xs-font-size);
+  --coar-menu-heading-font-weight: var(--coar-font-weight-semi-bold);
+  --coar-menu-heading-line-height: var(--coar-line-height-normal);
+  --coar-menu-heading-letter-spacing: 0.05em;
+  --coar-menu-heading-text-transform: uppercase;
 
-  /* Text color for active items */
-  --coar-menu-item-text-active: var(--coar-text-accent-primary, #0066cc);
+  /* --- Spacing & Layout -------------------------------------------------- */
+  --coar-menu-item-padding: 0.5rem 0.75rem;
+  --coar-menu-item-gap: 0.75rem;
+  --coar-menu-heading-padding: 0.75rem 0.75rem 0.25rem 0.75rem;
+  --coar-menu-min-width: 12rem;
+  --coar-menu-max-width: 20rem;
+
+  /* --- Icon Slot --------------------------------------------------------- */
+  --coar-menu-icon-slot-display: inline-flex;
+  --coar-menu-item-icon-slot-size: 16px;
+
+  /* --- Sub-Expand -------------------------------------------------------- */
+  --coar-sub-expand-indent-offset: 16px;
+
+  /* --- Colors ------------------------------------------------------------ */
+  --coar-menu-background: var(--coar-background-neutral-primary);
+  --coar-menu-item-color: var(--coar-text-neutral-secondary);
+  --coar-menu-heading-color: var(--coar-text-neutral-tertiary);
+
+  /* Item interactive states */
+  --coar-menu-item-background-hover: var(--coar-background-neutral-secondary);
+  --coar-menu-item-background-focus: var(--coar-background-neutral-secondary);
+  --coar-menu-item-background-open: var(--coar-background-accent-tertiary);
+  --coar-menu-item-background-active: var(--coar-background-accent-tertiary);
+  --coar-menu-item-text-active: var(--coar-text-accent-primary);
 }
 
 :root.dark-mode,
 .dark-mode {
-  /* Menu container background - dark, subtle for context menus */
-  --coar-menu-background: var(--coar-color-gray-100, #27272a);
-
-  /* Item interactive states - subtle hover/active for context menus */
-  --coar-menu-item-background-hover: var(--coar-color-gray-200, #3f3f46);
-  --coar-menu-item-background-focus: var(--coar-color-gray-200, #3f3f46);
-  --coar-menu-item-background-open: var(--coar-color-gray-200, #3f3f46);
-  --coar-menu-item-background-active: var(--coar-color-gray-200, #3f3f46);
+  --coar-menu-background: var(--coar-color-gray-100);
+  --coar-menu-item-background-hover: var(--coar-color-gray-200);
+  --coar-menu-item-background-focus: var(--coar-color-gray-200);
+  --coar-menu-item-background-open: var(--coar-color-gray-200);
+  --coar-menu-item-background-active: var(--coar-color-gray-200);
 }
 
-/* Sidebar variant - darker, more grounded colors for permanent navigation */
+/* Sidebar variant */
 .coar-menu--sidebar {
-  --coar-menu-background: var(--coar-background-neutral-secondary, #ededed);
-  --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary, #d9d9d9);
-  --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary, #d9d9d9);
-  --coar-menu-item-background-open: var(--coar-background-neutral-tertiary, #d9d9d9);
-  --coar-menu-item-background-active: var(--coar-background-neutral-tertiary, #d9d9d9);
+  --coar-menu-background: var(--coar-background-neutral-secondary);
+  --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary);
+  --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary);
+  --coar-menu-item-background-open: var(--coar-background-neutral-tertiary);
+  --coar-menu-item-background-active: var(--coar-background-neutral-tertiary);
 }
 
 :root.dark-mode .coar-menu--sidebar,
 .dark-mode .coar-menu--sidebar {
-  --coar-menu-background: var(--coar-background-neutral-secondary, #27272a);
-  --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary, #3f3f46);
-  --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary, #3f3f46);
-  --coar-menu-item-background-open: var(--coar-background-neutral-tertiary, #3f3f46);
-  --coar-menu-item-background-active: var(--coar-background-neutral-tertiary, #3f3f46);
+  --coar-menu-background: var(--coar-background-neutral-secondary);
+  --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary);
+  --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary);
+  --coar-menu-item-background-open: var(--coar-background-neutral-tertiary);
+  --coar-menu-item-background-active: var(--coar-background-neutral-tertiary);
 }

package/styles/tokens/new-components.css

@@ -24,6 +24,11 @@
   /* Thumb offset from track edge */
   --coar-switch-thumb-offset: 2px;
 
+  /* Current size (set by size variant classes, defaults to medium) */
+  --coar-switch-track-width: var(--coar-switch-m-track-width);
+  --coar-switch-track-height: var(--coar-switch-m-track-height);
+  --coar-switch-thumb-size: var(--coar-switch-m-thumb-size);
+
   /* ==========================================================================
      PROGRESS BAR
      ========================================================================== */
@@ -34,6 +39,12 @@
   --coar-progress-bar-radius: var(--coar-radius-full);
   --coar-progress-bar-background: var(--coar-background-neutral-tertiary);
 
+  /* Current size (set by size variant classes, defaults to medium) */
+  --coar-progress-bar-height: var(--coar-progress-bar-m-height);
+
+  /* Current fill color (set by variant classes, defaults to accent) */
+  --coar-progress-bar-fill-color: var(--coar-background-accent-primary);
+
   /* ==========================================================================
      SPINNER
      ========================================================================== */
@@ -45,6 +56,9 @@
   --coar-spinner-stroke-width: 2.5;
   --coar-spinner-color: var(--coar-background-accent-primary);
 
+  /* Current size (set by size variant classes, defaults to medium) */
+  --coar-spinner-size: var(--coar-spinner-m-size);
+
   /* ==========================================================================
      NAVBAR
      ========================================================================== */
@@ -58,6 +72,7 @@
      BREADCRUMB
      ========================================================================== */
 
+  --coar-breadcrumb-separator: '/';
   --coar-breadcrumb-separator-color: var(--coar-text-neutral-tertiary);
   --coar-breadcrumb-separator-gap: var(--coar-spacing-s);
   --coar-breadcrumb-font-size: var(--coar-component-m-font-size);
@@ -101,4 +116,47 @@
   --coar-toast-stack-gap: var(--coar-spacing-s);
   --coar-toast-progress-height: 3px;
   --coar-toast-max-stack: 5;
+
+  /* ==========================================================================
+     POPOVER
+     ========================================================================== */
+
+  --coar-popover-min-width: 200px;
+  --coar-popover-max-width: 360px;
+  --coar-popover-max-height: 240px;
+
+  /* ==========================================================================
+     CARD
+     ========================================================================== */
+
+  /* Current padding (set by padding variant classes, defaults to medium) */
+  --coar-card-padding: var(--coar-spacing-m);
+
+  /* ==========================================================================
+     NOTE
+     ========================================================================== */
+
+  /* Current variant colors (set by variant classes, defaults to neutral) */
+  --coar-note-bg: var(--coar-background-neutral-secondary);
+  --coar-note-border-color: var(--coar-border-neutral-secondary);
+
+  /* ==========================================================================
+     TAG
+     ========================================================================== */
+
+  /* Current variant colors (set by variant classes, defaults to neutral) */
+  --coar-tag-bg: var(--coar-background-neutral-secondary);
+  --coar-tag-border-color: var(--coar-border-neutral-tertiary);
+
+  /* ==========================================================================
+     AVATAR
+     ========================================================================== */
+
+  --coar-avatar-xl-font-size: 28px;
+
+  /* ==========================================================================
+     BADGE
+     ========================================================================== */
+
+  --coar-badge-xs-font-size: 8px;
 }

package/styles/tokens/select-overlay.css

@@ -11,6 +11,15 @@
    Applied via panelClass on overlay panel
    ======================================== */
 
+/* Default values (M size) — ensures tokens resolve even without a size class */
+:root {
+  --coar-select-option-font-size: var(--coar-body-small-base-size);
+  --coar-select-option-padding: var(--coar-spacing-s) var(--coar-spacing-m);
+  --coar-select-option-gap: var(--coar-spacing-xs);
+  --coar-select-search-height: 32px;
+  --coar-select-checkbox-size: 16px;
+}
+
 /* XS Size */
 .coar-select-dropdown--xs {
   --coar-select-option-font-size: var(--coar-component-xs-font-size);

package/styles/tokens/shadows.css

@@ -13,6 +13,7 @@
   --coar-shadow-xs: 0 1px 2px var(--coar-shadow-color);
   --coar-shadow-s: 0 2px 4px var(--coar-shadow-color), 0 1px 2px var(--coar-shadow-color);
   --coar-shadow-m: 0 4px 8px var(--coar-shadow-color), 0 2px 4px var(--coar-shadow-color);
+  --coar-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
   --coar-shadow-l: 0 8px 16px var(--coar-shadow-color), 0 4px 8px var(--coar-shadow-color);
   --coar-shadow-xl: 0 16px 32px var(--coar-shadow-color-strong), 0 8px 16px var(--coar-shadow-color);
 
@@ -31,6 +32,7 @@
   --coar-shadow-xs: 0 1px 2px var(--coar-shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   --coar-shadow-s: 0 2px 4px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.05);
   --coar-shadow-m: 0 4px 12px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  --coar-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
   --coar-shadow-l: 0 8px 24px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.1);
   --coar-shadow-xl: 0 16px 48px var(--coar-shadow-color-strong), 0 0 0 1px rgba(255, 255, 255, 0.12);
 

package/styles/tokens/spacing.css

@@ -7,6 +7,7 @@
 :root {
   --coar-spacing-3xs: 1px;
   --coar-spacing-xxs: 2px;
+  --coar-spacing-2xs: 2px;
   --coar-spacing-xs: 4px;
   --coar-spacing-s: 8px;
   --coar-spacing-m: 16px;

package/styles/tokens/stroke-width.css

@@ -1,7 +1,7 @@
 /**
  * Cocoar Design System - Design Tokens
  * Stroke Width - Border widths
- * Auto-generated from Figma - Do not edit manually
+ * Border width scale
  */
 
 :root {

package/styles/tokens/tooltip.css

@@ -1,3 +1,8 @@
+/* Tooltip tokens */
+:root {
+  --coar-tooltip-max-width: 320px;
+}
+
 /* Tooltip component styles — injected globally */
 
 .coar-tooltip {
@@ -7,7 +12,7 @@
   border: 1px solid var(--coar-border-neutral);
   border-radius: var(--coar-radius-s);
   box-shadow: var(--coar-shadow-m);
-  max-width: var(--coar-tooltip-max-width, 320px);
+  max-width: var(--coar-tooltip-max-width);
   pointer-events: none !important;
   box-sizing: border-box;
 }

package/styles/tokens/type-primitives.css

@@ -1,7 +1,7 @@
 /**
  * Cocoar Design System - Design Tokens
  * Type Primitives - Font families and base sizes
- * Auto-generated from Figma - Do not edit manually
+ * Font families, sizes, and weight primitives
  */
 
 :root {

package/styles/tokens/typography-responsive.css

@@ -1,11 +1,8 @@
 /**
  * Cocoar Design System - Responsive Typography Extensions
  *
- * This file extends the base typography tokens with responsive variants.
- * These are NOT auto-generated from Figma - they can be edited manually.
- *
- * The base tokens (--coar-titles-display-size, etc.) come from Figma.
- * These responsive variants scale typography for different screen sizes.
+ * Responsive typography extensions.
+ * Scales base typography tokens (--coar-titles-display-size, etc.) for different screen sizes.
  */
 
 :root {

package/styles/tokens/typography.css

@@ -1,7 +1,7 @@
 /**
  * Cocoar Design System - Design Tokens
  * Typography - Font styles and sizes
- * Auto-generated from Figma - Do not edit manually
+ * Semantic typography tokens (family, size, weight per text role)
  */
 
 :root {
@@ -23,6 +23,7 @@
   --coar-body-small-bold-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --coar-body-small-bold-size: 14px;
   --coar-body-small-bold-weight: 700;
+  --coar-body-large-size: 18px;
   --coar-headings-heading-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --coar-headings-heading-size: 24px;
   --coar-headings-heading-weight: 600;

package/styles/transitions.css

@@ -0,0 +1,17 @@
+/**
+ * Cocoar Design System — Transition CSS
+ *
+ * Collapse transition classes (used by CoarCollapse).
+ * Fade, Slide, and Scale use JavaScript hooks and don't need CSS classes.
+ */
+
+.coar-collapse-enter-active,
+.coar-collapse-leave-active {
+  transition: height var(--coar-duration-normal) var(--coar-ease-out),
+              opacity var(--coar-duration-normal) var(--coar-ease-out);
+}
+
+.coar-collapse-enter-from,
+.coar-collapse-leave-to {
+  opacity: 0;
+}