@liftkit-vue/core 0.1.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@liftkit-vue/core",
+  "version": "0.1.0",
+  "description": "Material Design 3 inspired Vue 3 component library with dynamic theming and golden-ratio design tokens",
+  "type": "module",
+  "license": "MIT",
+  "author": "annrie",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/annrie/liftkit-vue",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/annrie/liftkit-vue/tree/main/packages/core",
+  "bugs": "https://github.com/annrie/liftkit-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "material-design",
+    "md3",
+    "design-system",
+    "components",
+    "theming",
+    "golden-ratio",
+    "css-tokens"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./css/*": "./src/css/*"
+  },
+  "files": ["dist", "src/css"],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@material/material-color-utilities": "^0.3.0",
+    "material-dynamic-colors": "^1.1.2",
+    "@floating-ui/vue": "^1.1.6",
+    "@csstools/normalize.css": "^12.1.1"
+  },
+  "devDependencies": {
+    "vue": "^3.5.0",
+    "vite": "^6.0.0",
+    "typescript": "^5.7.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}

package/src/css/align-items.css

@@ -0,0 +1,21 @@
+/* Item Alignment */
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-baseline {
+  align-items: baseline;
+}

package/src/css/align-self.css

@@ -0,0 +1,24 @@
+.self-auto {
+  align-self: auto;
+}
+
+.self-start {
+  align-self: start;
+}
+
+.self-end {
+  align-self: end;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.self-baseline {
+  align-self: baseline;
+}
+

package/src/css/aspect-ratios.css

@@ -0,0 +1,35 @@
+/*How to use
+
+the aspect-ratio property maintains the proportion of width to height. 
+For it to work, either the width or the height of the element must be set
+to a value besides "auto." It can be fixed-width or responsive, but it must be set.
+
+Either width or height must be set to auto in order for aspect-ratio to work.
+
+Template: aspect-ratio: width / height;
+
+*/
+
+.aspect-16x9 {
+  aspect-ratio: 16 / 9;
+}
+
+.aspect-4x3 {
+  aspect-ratio: 4 / 3;
+}
+
+.aspect-3x2 {
+  aspect-ratio: 3 / 2;
+}
+
+.aspect-9x16 {
+  aspect-ratio: 9 / 16;
+}
+
+.aspect-1x1 {
+  aspect-ratio: 1;
+}
+
+.aspect-2x1 {
+  aspect-ratio: 2 / 1;
+}