@liiift-studio/mac-os9-ui 0.2.21 → 0.2.24

package/dist/index.css

@@ -47,16 +47,16 @@
 }
 @font-face {
 	font-family: 'PixelSmall';
-	src: url("fonts/b9e24cd1.woff2") format('woff2'),
-		url("fonts/2bc2468e.woff") format('woff');
+	src: url("fonts/9f492b6d.woff2") format('woff2'),
+		url("fonts/65e59833.woff") format('woff');
 	font-style: normal;
 	font-weight: bold;
 	font-display: swap;
 }
 @font-face {
 	font-family: 'PixelSmall';
-	src: url("fonts/cf596b2d.woff2") format('woff2'),
-		url("fonts/3306dfd5.woff") format('woff');
+	src: url("fonts/e45380e5.woff2") format('woff2'),
+		url("fonts/6fb9ec6b.woff") format('woff');
 	font-style: normal;
 	font-weight: normal;
 	font-display: swap;
@@ -274,32 +274,43 @@
 	box-sizing: border-box;
 }
 html {
-	/* Set base font size for rem calculations */
-	/* Mobile/default: 16px base */
-	font-size: 16px;
+	/* Mobile-first: smaller base for better readability on small screens */
+	/* Mobile/default: 14px base - optimal for mobile devices */
+	font-size: 14px;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
 /* ========================================
  * Responsive Typography
  * Scale base font size at different breakpoints
+ * Following mobile-first best practices:
+ * - Mobile: 14px (better for small screens, maintains Mac OS 9 small text aesthetic)
+ * - Tablet: 16px (standard web default)
+ * - Desktop: 16px (comfortable for productivity)
+ * - Large Desktop: 18px (takes advantage of larger screens)
  * ======================================== */
+/* Small mobile: 480px+ */
+@media (min-width: 480px) {
+	html {
+		font-size: 15px;
+	}
+}
 /* Tablet: 768px+ */
 @media (min-width: 768px) {
 	html {
-		font-size: 17px;
+		font-size: 16px;
 	}
 }
 /* Desktop: 1024px+ */
 @media (min-width: 1024px) {
 	html {
-		font-size: 18px;
+		font-size: 16px;
 	}
 }
 /* Large Desktop/XL: 1440px+ */
 @media (min-width: 1440px) {
 	html {
-		font-size: 20px;
+		font-size: 18px;
 	}
 }
 body {
@@ -2920,6 +2931,11 @@ body {
 	z-index: 1;
 }
 
+.Window-module_window--draggable {
+	/* Draggable window - absolute positioning applied inline */
+	/* Position and coordinates are set via inline styles when dragged */
+}
+
 /* ========================================
  * Title Bar
  * ======================================== */
@@ -3024,6 +3040,18 @@ body {
 	pointer-events: none;
 }
 
+/* Title Bar Draggable States */
+
+.Window-module_titleBar--draggable {
+	/* Draggable title bar - show grab cursor */
+	cursor: grab;
+}
+
+.Window-module_titleBar--dragging {
+	/* Title bar while being dragged - show grabbing cursor */
+	cursor: grabbing;
+}
+
 /* ========================================
  * Window Controls
  * ======================================== */
@@ -3484,6 +3512,11 @@ body {
 	animation: MenuBar-module_menuFadeIn 100ms ease-out;
 }
 
+.MenuBar-module_dropdown--right {
+	left: auto;
+	right: 0;
+}
+
 @keyframes MenuBar-module_menuFadeIn {
 	from {
 		opacity: 0;
@@ -3539,12 +3572,12 @@ body {
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-2);
-	
+
 	/* Layout */
 	width: 100%;
 	padding: var(--spacing-1) var(--spacing-3);
 	min-height: 20px;
-	
+
 	/* Text styling */
 	font-family: var(--font-system);
 	font-size: var(--font-size-md);
@@ -3552,15 +3585,15 @@ body {
 	line-height: var(--line-height-snug);
 	text-align: left;
 	color: var(--color-text);
-	
+
 	/* Remove button defaults */
 	background-color: transparent;
 	border: none;
 	cursor: pointer;
-	
+
 	/* Transitions */
 	transition: background-color 50ms ease;
-	
+
 	/* Prevent text selection */
 	user-select: none;
 }
@@ -3641,6 +3674,42 @@ body {
 	margin-left: var(--spacing-1);
 }
 
+.MenuItem-module_submenu {
+	/* Submenu container */
+	position: absolute;
+	top: -4px;
+	left: 100%;
+	z-index: 1001;
+
+	/* Mac OS 9 menu appearance */
+	background-color: var(--color-gray-100);
+	border: var(--border-width-thin) solid var(--color-black);
+
+	/* Drop shadow */
+	box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
+
+	/* Sizing */
+	min-width: 200px;
+
+	/* Padding */
+	padding: var(--spacing-1) 0;
+
+	/* Animation */
+	animation: MenuItem-module_menuFadeIn 100ms ease-out;
+}
+
+@keyframes MenuItem-module_menuFadeIn {
+	from {
+		opacity: 0;
+		transform: translateX(-4px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
 /* ========================================
  * Separator Line
  * ======================================== */