@greendrake/ui 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/ui",
-    "version": "0.1.0",
+    "version": "0.3.0",
     "description": "Vue 3 component library: form controls, modals, search, tabs, toasts, layout",
     "license": "MIT",
     "author": "Eugene Greendrake <eugene@greendrake.nz>",
@@ -33,9 +33,9 @@
     },
     "prettier": "@greendrake/dev-config/prettier",
     "dependencies": {
-        "@greendrake/domains": "0.1.0",
-        "@greendrake/scss-kit": "0.1.0",
-        "@greendrake/util": "0.1.0",
+        "@greendrake/domains": "0.3.0",
+        "@greendrake/scss-kit": "0.3.0",
+        "@greendrake/util": "0.3.0",
         "vue-tippy": "^6.7.1"
     },
     "peerDependencies": {
@@ -43,7 +43,7 @@
         "vue-router": "^4.6.4"
     },
     "devDependencies": {
-        "@greendrake/dev-config": "0.1.0",
+        "@greendrake/dev-config": "0.3.0",
         "typescript": "6.0.3",
         "vue": "^3.5.34",
         "vue-router": "^4.6.4",

package/src/BottomNav.vue

@@ -67,6 +67,9 @@ const emit = defineEmits<{ select: [id: string] }>()
     border-top: 1px solid var(--border-color-light);
     &__tab {
         flex: 1 1 0;
+        // Holds the tab to its share of the bar however long its label, which
+        // the label's own clipping below depends on.
+        min-width: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -116,6 +119,13 @@ const emit = defineEmits<{ select: [id: string] }>()
     &__label {
         font-size: var(--font-xs);
         line-height: 1;
+        // One line, always: a label that wrapped would lift its icon off the
+        // line the other tabs' icons sit on. One too long for its cell is cut
+        // short instead — visibly only; its accessible name stays whole.
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
         // Follow the tab's own colour (muted when inactive, accent when active).
         // Without this the theme's global `a span` link tint paints every label
         // violet, so the active/inactive distinction collapses to just the icon.

package/src/CurrencyInput.vue

@@ -28,7 +28,7 @@ const ensureDecimals = (n: string, precision: number): string => {
 </script>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
-import { hasFinePointer } from '@greendrake/util'
+import { hasFinePointer } from '@greendrake/util/browser'
 
 const props = withDefaults(
     defineProps<{

package/src/Password.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, nextTick } from 'vue'
-import { hasFinePointer } from '@greendrake/util'
+import { hasFinePointer } from '@greendrake/util/browser'
 import FixAndroidTyping from './FixAndroidTyping'
 
 const showPassword = ref(false)

package/src/SelectBox.vue

@@ -10,7 +10,7 @@ export interface SelectBoxOption<T extends string | number = string | number> {
 </script>
 <script setup lang="ts" generic="T extends string | number">
 import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
-import { hasFinePointer } from '@greendrake/util'
+import { hasFinePointer } from '@greendrake/util/browser'
 import { messages } from './messages'
 
 // Single-select dropdown: string|number values, optional clear button,

package/src/TextField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, inject, type Component } from 'vue'
-import { hasFinePointer } from '@greendrake/util'
+import { hasFinePointer } from '@greendrake/util/browser'
 import FieldTip from './FieldTip'
 import FixAndroidTyping from './FixAndroidTyping'
 import { validationScopeKey } from './validationScope'

package/src/modalStack.ts

@@ -10,7 +10,7 @@
 // engines with partial inert support, with first/last Tab wrapping), initial
 // focus moves into the modal, and closing restores focus to the invoker.
 // Centralised here — not per-modal — so only the top-most modal ever traps.
-import { hasFinePointer } from '@greendrake/util'
+import { hasFinePointer } from '@greendrake/util/browser'
 
 type CloseHandler = () => void