@emuanalytics/flow-rdf-ui 0.0.15 → 0.0.16

package/dist/flow-rdf-ui.js

@@ -26596,7 +26596,7 @@ const translation = {
   toggleColorFormat: "Toggle color format"
 };
 registerTranslation(translation);
-const version = "0.0.15";
+const version = "0.0.16";
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
   border-radius: 2px;

package/dist/flow-rdf-ui.umd.cjs

@@ -26600,7 +26600,7 @@ body > .os-scrollbar {
     toggleColorFormat: "Toggle color format"
   };
   registerTranslation(translation);
-  const version = "0.0.15";
+  const version = "0.0.16";
   const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
   border-radius: 2px;

package/dist/themes/dark.css

@@ -365,11 +365,7 @@
   --flow-ui-line-height-loose: 2.2;
   --flow-ui-line-height-looser: 2.6;
 
-  --flow-ui-input-focus-ring-color: color-mix(
-    in srgb,
-    var(--flow-ui-color-primary-500),
-    transparent 60%
-  );
+  --flow-ui-focus-ring-color: var(--flow-ui-color-primary-700);
   --flow-ui-focus-ring-style: solid;
   --flow-ui-focus-ring-width: 3px;
   --flow-ui-focus-ring: var(--flow-ui-focus-ring-style)
@@ -424,7 +420,11 @@
   --flow-ui-input-spacing-medium: var(--flow-ui-spacing-medium);
   --flow-ui-input-spacing-large: var(--flow-ui-spacing-large);
 
-  --flow-ui-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --flow-ui-input-focus-ring-color: color-mix(
+    in srgb,
+    var(--flow-ui-color-primary-500),
+    transparent 60%
+  );
   --flow-ui-input-focus-ring-offset: 0;
 
   --flow-ui-input-filled-background-color: var(--flow-ui-color-neutral-100);

package/dist/themes/dark.styles.js

@@ -368,11 +368,7 @@ export default css`
     --flow-ui-line-height-loose: 2.2;
     --flow-ui-line-height-looser: 2.6;
 
-    --flow-ui-input-focus-ring-color: color-mix(
-      in srgb,
-      var(--flow-ui-color-primary-500),
-      transparent 60%
-    );
+    --flow-ui-focus-ring-color: var(--flow-ui-color-primary-700);
     --flow-ui-focus-ring-style: solid;
     --flow-ui-focus-ring-width: 3px;
     --flow-ui-focus-ring: var(--flow-ui-focus-ring-style)
@@ -433,7 +429,11 @@ export default css`
     --flow-ui-input-spacing-medium: var(--flow-ui-spacing-medium);
     --flow-ui-input-spacing-large: var(--flow-ui-spacing-large);
 
-    --flow-ui-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+    --flow-ui-input-focus-ring-color: color-mix(
+      in srgb,
+      var(--flow-ui-color-primary-500),
+      transparent 60%
+    );
     --flow-ui-input-focus-ring-offset: 0;
 
     --flow-ui-input-filled-background-color: var(--flow-ui-color-neutral-100);

package/dist/themes/light.css

@@ -366,11 +366,7 @@
   --flow-ui-line-height-loose: 2.2;
   --flow-ui-line-height-looser: 2.6;
 
-  --flow-ui-focus-ring-color: color-mix(
-    in srgb,
-    var(--flow-ui-color-primary-500),
-    transparent 60%
-  );
+  --flow-ui-focus-ring-color: var(--flow-ui-color-primary-600);
   --flow-ui-focus-ring-style: solid;
   --flow-ui-focus-ring-width: 3px;
   --flow-ui-focus-ring: var(--flow-ui-focus-ring-style)
@@ -425,7 +421,11 @@
   --flow-ui-input-spacing-medium: var(--flow-ui-spacing-medium);
   --flow-ui-input-spacing-large: var(--flow-ui-spacing-large);
 
-  --flow-ui-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --flow-ui-input-focus-ring-color: color-mix(
+    in srgb,
+    var(--flow-ui-color-primary-500),
+    transparent 60%
+  );
   --flow-ui-input-focus-ring-offset: 0;
 
   --flow-ui-input-filled-background-color: var(--flow-ui-color-neutral-100);

package/dist/themes/light.styles.js

@@ -369,11 +369,7 @@ export default css`
     --flow-ui-line-height-loose: 2.2;
     --flow-ui-line-height-looser: 2.6;
 
-    --flow-ui-focus-ring-color: color-mix(
-      in srgb,
-      var(--flow-ui-color-primary-500),
-      transparent 60%
-    );
+    --flow-ui-focus-ring-color: var(--flow-ui-color-primary-600);
     --flow-ui-focus-ring-style: solid;
     --flow-ui-focus-ring-width: 3px;
     --flow-ui-focus-ring: var(--flow-ui-focus-ring-style)
@@ -434,7 +430,11 @@ export default css`
     --flow-ui-input-spacing-medium: var(--flow-ui-spacing-medium);
     --flow-ui-input-spacing-large: var(--flow-ui-spacing-large);
 
-    --flow-ui-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+    --flow-ui-input-focus-ring-color: color-mix(
+      in srgb,
+      var(--flow-ui-color-primary-500),
+      transparent 60%
+    );
     --flow-ui-input-focus-ring-offset: 0;
 
     --flow-ui-input-filled-background-color: var(--flow-ui-color-neutral-100);

package/dist/vscode.html-custom-data.json

@@ -34,6 +34,42 @@
       ],
       "references": []
     },
+    {
+      "name": "flow-ui-avatar",
+      "description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
+      "attributes": [
+        {
+          "name": "image",
+          "description": "The image source to use for the avatar.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A label to use to describe the avatar to assistive devices.",
+          "values": []
+        },
+        {
+          "name": "initials",
+          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Indicates how the browser should load the image.",
+          "values": [{ "name": "eager" }, { "name": "lazy" }]
+        },
+        {
+          "name": "shape",
+          "description": "The shape of the avatar.",
+          "values": [
+            { "name": "circle" },
+            { "name": "square" },
+            { "name": "rounded" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "flow-ui-animation",
       "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-cancel** - Emitted when the animation is canceled.\n- **flow-ui-finish** - Emitted when the animation finishes.\n- **flow-ui-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.",
@@ -96,42 +132,6 @@
       ],
       "references": []
     },
-    {
-      "name": "flow-ui-avatar",
-      "description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
-      "attributes": [
-        {
-          "name": "image",
-          "description": "The image source to use for the avatar.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A label to use to describe the avatar to assistive devices.",
-          "values": []
-        },
-        {
-          "name": "initials",
-          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-          "values": []
-        },
-        {
-          "name": "loading",
-          "description": "Indicates how the browser should load the image.",
-          "values": [{ "name": "eager" }, { "name": "lazy" }]
-        },
-        {
-          "name": "shape",
-          "description": "The shape of the avatar.",
-          "values": [
-            { "name": "circle" },
-            { "name": "square" },
-            { "name": "rounded" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-breadcrumb-item",
       "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
@@ -303,19 +303,6 @@
       ],
       "references": []
     },
-    {
-      "name": "flow-ui-button-group",
-      "description": "Button groups can be used to group related buttons into sections.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more `<flow-ui-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        { "name": "label", "values": [] },
-        {
-          "name": "vertical",
-          "description": "Use vertical layout for the button group.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-breadcrumb",
       "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -356,6 +343,19 @@
       ],
       "references": []
     },
+    {
+      "name": "flow-ui-button-group",
+      "description": "Button groups can be used to group related buttons into sections.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more `<flow-ui-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        { "name": "label", "values": [] },
+        {
+          "name": "vertical",
+          "description": "Use vertical layout for the button group.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "flow-ui-card",
       "description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emuanalytics/flow-rdf-ui",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "main": "dist/flow-rdf-ui.umd.cjs",
   "module": "dist/flow-rdf-ui.js",