@raylang/vue 0.6.0 → 0.7.0

package/components/icon.js

@@ -4,6 +4,6 @@ import "@raylang/elements/icon";
 import { createComponent } from "../create.js";
 
 export const RayIcon = /*#__PURE__*/ createComponent("RayIcon", "ray-icon", {
-  properties: ["name", "size", "label", "color", "stroke"],
-  booleans: [],
+  properties: ["name", "filled", "size", "label", "color", "stroke"],
+  booleans: ["filled"],
 });

package/components/step-dots.js

@@ -4,6 +4,6 @@ import "@raylang/elements/step-dots";
 import { createComponent } from "../create.js";
 
 export const RayStepDots = /*#__PURE__*/ createComponent("RayStepDots", "ray-step-dots", {
-  properties: ["count", "value", "color", "size", "align", "label"],
+  properties: ["count", "value", "color", "size", "align", "label", "valueText", "doneText"],
   booleans: [],
 });

package/index.d.ts

@@ -1129,8 +1129,8 @@ export interface RayBottomNavItemProps {
   value?: string;
   /** The label. */
   label?: string;
-  /** An icon of the registry (or put one in the icon slot). */
-  icon?: string;
+  /** An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is). */
+  icon?: Ray.IconName;
   /** Makes it a link. */
   href?: string;
   /** A count or a short text on the icon. */
@@ -1659,7 +1659,7 @@ export interface RayBlockquoteProps {
   /** light: tinted background; outline: border and edge only; filled: solid color (a pull quote). */
   variant?: "light" | "outline" | "filled";
   /** Registry icon of the mark, or none. The icon slot replaces it. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** Text size (lg for a pull quote). */
   size?: "sm" | "md" | "lg";
   /** Inner spacing: xs…xl (the spacing scale), px as a number, or a CSS length. Default: md. */
@@ -1736,7 +1736,9 @@ export declare const RayCode: DefineComponent<RayCodeProps>;
 
 export interface RayIconProps {
   /** Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check). */
-  name?: string;
+  name?: Ray.IconName;
+  /** The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle. */
+  filled?: boolean;
   /** xs…xl or any CSS length. Default: 1em. */
   size?: string;
   /** Accessible name; without it the icon is decorative (hidden from screen readers). */
@@ -1870,7 +1872,7 @@ export interface RayTimelineItemProps {
   /** When ("2 h ago", a date). */
   time?: string;
   /** An icon of the registry in the bullet. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** Its own color (a failed step in red). */
   color?: string;
   /** The line to the next item (dashed: not happened yet). */
@@ -1889,7 +1891,7 @@ export interface RayAlertProps {
   /** Corner radius. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl";
   /** A registered icon name, or none. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** A close button; closing hides the alert (cancel ray-close to keep it). */
   closable?: boolean;
   /** Accessible name of the close button. */
@@ -1917,7 +1919,7 @@ export interface RayNotificationProps {
   /** Status color: tints the status icon (and a slotted icon's circle). */
   color?: string;
   /** Status icon from the registry (default: from the color); "none" for no icon. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** Shows a spinner (notify() does not auto-close it). */
   loading?: boolean;
   /** No close button. */
@@ -2034,8 +2036,12 @@ export interface RayStepDotsProps {
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   /** Where the row sits in its width. */
   align?: "start" | "center" | "end";
-  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). */
+  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). In another language, use value-text. */
   label?: string;
+  /** The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text="Asalto {step} de {count}". Default: "<label> {step} of {count}". */
+  valueText?: string;
+  /** The announced text once every step is done (value = count), with {count}. Default: value-text, else "{count} of {count}, done". */
+  doneText?: string;
 }
 /** <ray-step-dots> as a Vue component. */
 export declare const RayStepDots: DefineComponent<RayStepDotsProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/vue",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Vue 3 wrappers (with v-model) of the ray-elements web components",
   "license": "Apache-2.0",
   "keywords": ["web-components", "design-system", "ui", "raylang", "vue"],
@@ -28,7 +28,7 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@raylang/elements": "^0.6.0",
+    "@raylang/elements": "^0.7.0",
     "vue": ">=3.3"
   }
 }