imba-localization 0.3.2 → 0.3.4

package/README.md

@@ -182,30 +182,39 @@ css
       bgc:light-dark(#000000/10, #FFFFFF/20) 
       fw:500 fs:13px 
       ead:$ease
+      bd:1px solid transparent
   .main-active 
       bgc:light-dark(#000000/20, #FFFFFF/30)
+      bd:1px solid transparent
   .main-flag 
       mr:10px rd:50% w:20px h:20px
+      bd:1px solid transparent
   .main-name 
       mr:10px
+      bd:1px solid transparent
   .main-arrow 
       w:16px h:16px ml:auto
       fill:light-dark(#000000,#FFFFFF) 
+      bd:1px solid transparent
       transition: transform $ease ease
       scale-y:-1
   .main-arrow-active
+      bd:1px solid transparent
       scale-y:1
   .menu 
       t:100% l:50% x:-50% mt:2px rd:8px rd:8px py:5px zi:999
       fw:500 fs:13px
       backdrop-filter:blur(20px) 
+      bd:1px solid transparent
       bgc:light-dark(#000000/5, #FFFFFF/10) 
       ead:$ease
   .menu-item 
       cursor:pointer
+      bd:1px solid transparent
       d:hflex px:10px py:5px rd:8px m:5px
       bg@hover:light-dark(#000000/10, #FFFFFF/20)
   .menu-item-icon 
+      bd:1px solid transparent
       h:20px w:20px mr:10px rd:50%
   .menu-item-text 
       fs:13px
@@ -243,13 +252,13 @@ global css
     @not(#_) # is needed for higher precedence
       .main
         bgc: #992033
-        bd: 1px solid #992033
+        bc: #992033
       .main-active
         bgc: blue2
-        bd: 1px solid #992033
+        bc: #992033
       .menu
         bgc: #992033
-        bd: 1px solid #992033
+        bc: #992033
       .menu-item
         bgc@hover: orange4
         c@hover: black
@@ -283,10 +292,7 @@ You can use any other collection you prefer, just change the actual country code
 You can use any arrow icon you prefer (or remove it though CSS) by passing a tag of the image to the LanguageSelector `arrow` attribute:
 
 ```imba
-const arrow = 
-  <svg viewBox="..." xmlns="http://www.w3.org/2000/svg">
-    <path d="...">
-
+const arrow = <path d="...">
 
 <language-selector arrow=arrow>
 ```
@@ -296,10 +302,12 @@ const arrow =
 The default arrow icon used in the LocalizationSelector component is available as a separate icon (in case for some reason you don't want to use [imba-phosphor-icons](https://www.npmjs.com/package/imba-phosphor-icons) package by Sindre).
 
 ```imba
-import {svg-arrow-down} from 'imba-localization'
+import {path-arrow-down} from 'imba-localization'
 
 tag App
 	<self>
-		<{svg-arrow-down}>
-			css w:20px h:20px stroke:red
+    <svg viewBox="0 0 256 256">
+      css w:20px h:20px stroke:red
+		  <{svg-arrow-down}>
+			
 ```

package/localization.imba

@@ -51,33 +51,18 @@ export class Localization
 			window.localStorage.setItem('imba-localization', name)
 			onchange(name) if onchange isa Function
 
-export const svg-arrow-down = 
-	<svg viewBox="0 0 256 256">
-		<path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z">
+export const path-arrow-down = <path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z">
 
 tag language-selector
 	state
 	icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
 	#dropdown = false
-	arrow = svg-arrow-down
+	arrow = path-arrow-down
 
 	def onselect key
 		#dropdown = false
 		state.active = key
 
-	css
-		$ease: 0.5s
-		.main rd:8px px:15px py:8px cursor:pointer bgc:light-dark(#000000/10, #FFFFFF/20) fw:500 fs:13px ead:$ease
-		.main-active bgc:light-dark(#000000/20, #FFFFFF/30)
-		.main-flag mr:10px rd:50% w:20px h:20px
-		.main-name mr:10px
-		.main-arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1
-		.main-arrow-active scale-y:1
-		.menu t:100% l:50% x:-50% zi:999 backdrop-filter:blur(20px) mt:2px rd:8px rd:8px py:5px bgc:light-dark(#000000/5, #FFFFFF/10) fw:500 fs:13px ead:$ease
-		.menu-item d:hflex ai:center px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px
-		.menu-item-icon h:20px w:20px mr:10px rd:50%
-		.menu-item-text fs:13px
-
 	def icon country
 		return icons.replace('##',country)
 
@@ -87,11 +72,25 @@ tag language-selector
 		const inside = e.clientY >= menu.bottom || e.clientY <= rect.top || (e.clientX <= rect.left and e.clientY <= rect.bottom) || (e.clientX <= menu.left and e.clientY >= menu.top) || (e.clientX >= rect.right and e.clientY <= rect.bottom) || (e.clientX >= menu.right and e.clientY >= menu.top)
 		#dropdown = !inside
 
-	<self [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
+	css 
+		$ease: 0.5s
+		.main rd:8px px:15px py:8px cursor:pointer bgc:light-dark(#000000/10, #FFFFFF/20) fw:500 fs:13px ead:$ease bd:1px solid transparent
+		.main-active bgc:light-dark(#000000/20, #FFFFFF/30) bd:1px solid transparent
+		.main-flag mr:10px rd:50% w:20px h:20px bd:1px solid transparent
+		.main-name mr:10px bd:1px solid transparent
+		.main-arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1 bd:1px solid transparent
+		.main-arrow-active scale-y:1 bd:1px solid transparent
+		.menu t:100% l:50% x:-50% zi:999 backdrop-filter:blur(20px) mt:2px rd:8px rd:8px py:5px bgc:light-dark(#000000/5, #FFFFFF/10) fw:500 fs:13px ead:$ease bd:1px solid transparent
+		.menu-item d:hflex ai:center px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px bd:1px solid transparent
+		.menu-item-icon h:20px w:20px mr:10px rd:50% bd:1px solid transparent
+		.menu-item-text fs:13px bd:1px solid transparent
+
+	<self.language-selector [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
 		<div.main [pos:rel d:hcc] .main-active=#dropdown>
 			<img.main-flag src=icon(state[state.active].$.flag)>
 			<div.main-name> state.$.name
-			<{arrow}.main-arrow [ead:$ease] .main-arrow-active=#dropdown>
+			<svg.main-arrow [ead:$ease] .main-arrow-active=#dropdown viewBox="0 0 256 256">
+				<{arrow}>
 		
 		if #dropdown
 			<div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imba-localization",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/HeapVoid/imba-localization.git"