@skewedaspect/sleekspace-ui 0.3.0 → 0.4.0

package/dist/components/Alert/SkAlert.vue.d.ts

@@ -2,19 +2,28 @@ import { SkAlertKind } from './types';
 import { ComponentCustomColors } from '../../types';
 export interface SkAlertComponentProps extends ComponentCustomColors {
     /**
-     * Semantic kind that determines the alert's color scheme and default icon. Each kind
-     * conveys a different meaning: 'info' for general information, 'success' for positive
-     * confirmations, 'warning' for cautionary messages, and 'danger' for errors or critical issues.
+     * Semantic kind that determines the alert's color scheme and default icon. Supports all
+     * semantic kinds (neutral, primary, accent, info, success, warning, danger) as well as
+     * direct color kinds (neon-blue, neon-purple, etc.). Default icons are provided for the
+     * four feedback kinds (info, success, warning, danger).
      * @default 'info'
      */
     kind?: SkAlertKind;
     /**
-     * When true, applies prominent styling with a more vivid background color and stronger
-     * visual presence. Use prominent alerts for critical messages that require immediate
-     * user attention, such as errors or important warnings.
+     * When true, applies subdued styling with a lighter, semi-transparent background.
+     * Use subtle alerts for less critical messages that shouldn't dominate the visual
+     * hierarchy, such as tips or supplementary information.
      * @default false
      */
-    prominent?: boolean;
+    subtle?: boolean;
+    /**
+     * Controls visibility of the icon container. When undefined (default), the icon is shown
+     * automatically if there's a default icon for the kind (info, success, warning, danger)
+     * or if custom content is provided via the icon slot. Set to false to force-hide the icon,
+     * or true to force-show the container even when empty.
+     * @default undefined
+     */
+    showIcon?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -27,8 +36,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkAlertComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkAlertComponentProps> & Readonly<{}>, {
+    subtle: boolean;
     kind: SkAlertKind;
-    prominent: boolean;
+    showIcon: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Alert/types.d.ts

@@ -1,4 +1,5 @@
+import { ComponentKind } from '../../types';
 /**
- * Alert semantic kinds (feedback-focused subset)
+ * Alert kind - supports all semantic and color kinds
  */
-export type SkAlertKind = 'info' | 'success' | 'warning' | 'danger';
+export type SkAlertKind = ComponentKind;

package/dist/sleekspace-ui.css

@@ -1658,7 +1658,7 @@
   .sk-alert .sk-alert-content > *:last-child {
     margin-bottom: 0;
   }
-  .sk-alert.sk-prominent {
+  .sk-alert:not(.sk-subtle) {
     --sk-alert-padding: 1rem;
     --sk-alert-icon-size: 1.5rem;
     --sk-alert-cut-size: 1rem;
@@ -1675,7 +1675,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neutral.sk-prominent {
+  .sk-alert.sk-neutral:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neutral-text);
   }
   .sk-alert.sk-primary {
@@ -1686,7 +1686,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-primary.sk-prominent {
+  .sk-alert.sk-primary:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-primary-text);
   }
   .sk-alert.sk-accent {
@@ -1697,7 +1697,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-accent.sk-prominent {
+  .sk-alert.sk-accent:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-accent-text);
   }
   .sk-alert.sk-info {
@@ -1708,7 +1708,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-info.sk-prominent {
+  .sk-alert.sk-info:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-info-text);
   }
   .sk-alert.sk-success {
@@ -1719,7 +1719,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-success.sk-prominent {
+  .sk-alert.sk-success:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-success-text);
   }
   .sk-alert.sk-warning {
@@ -1730,7 +1730,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-warning.sk-prominent {
+  .sk-alert.sk-warning:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-warning-text);
   }
   .sk-alert.sk-danger {
@@ -1741,7 +1741,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-danger.sk-prominent {
+  .sk-alert.sk-danger:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-danger-text);
   }
   .sk-alert.sk-boulder {
@@ -1752,7 +1752,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-boulder.sk-prominent {
+  .sk-alert.sk-boulder:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-boulder-text);
   }
   .sk-alert.sk-neon-blue {
@@ -1763,7 +1763,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-blue.sk-prominent {
+  .sk-alert.sk-neon-blue:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-blue-text);
   }
   .sk-alert.sk-light-blue {
@@ -1774,7 +1774,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-light-blue.sk-prominent {
+  .sk-alert.sk-light-blue:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-light-blue-text);
   }
   .sk-alert.sk-neon-orange {
@@ -1785,7 +1785,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-orange.sk-prominent {
+  .sk-alert.sk-neon-orange:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-orange-text);
   }
   .sk-alert.sk-neon-purple {
@@ -1796,7 +1796,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-purple.sk-prominent {
+  .sk-alert.sk-neon-purple:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-purple-text);
   }
   .sk-alert.sk-neon-green {
@@ -1807,7 +1807,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-green.sk-prominent {
+  .sk-alert.sk-neon-green:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-green-text);
   }
   .sk-alert.sk-neon-mint {
@@ -1818,7 +1818,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-mint.sk-prominent {
+  .sk-alert.sk-neon-mint:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-mint-text);
   }
   .sk-alert.sk-neon-pink {
@@ -1829,7 +1829,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-neon-pink.sk-prominent {
+  .sk-alert.sk-neon-pink:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-neon-pink-text);
   }
   .sk-alert.sk-yellow {
@@ -1840,7 +1840,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-yellow.sk-prominent {
+  .sk-alert.sk-yellow:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-yellow-text);
   }
   .sk-alert.sk-red {
@@ -1851,7 +1851,7 @@
     color: var(--sk-alert-fg);
     border-color: var(--sk-alert-border-color);
   }
-  .sk-alert.sk-red.sk-prominent {
+  .sk-alert.sk-red:not(.sk-subtle) {
     --sk-alert-fg: var(--sk-red-text);
   }
   .sk-avatar {

package/dist/sleekspace-ui.es.js

@@ -15205,7 +15205,10 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 const SkAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5e73d91f"]]);
-const _hoisted_1$w = { class: "sk-alert-icon" };
+const _hoisted_1$w = {
+  key: 0,
+  class: "sk-alert-icon"
+};
 const _hoisted_2$h = {
   key: 0,
   viewBox: "0 0 24 24",
@@ -15239,19 +15242,30 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "SkAlert",
   props: {
     kind: { default: "info" },
-    prominent: { type: Boolean, default: false },
+    subtle: { type: Boolean, default: false },
+    showIcon: { type: Boolean, default: void 0 },
     baseColor: {},
     textColor: {}
   },
   setup(__props) {
+    const FEEDBACK_KINDS = ["info", "success", "warning", "danger"];
     const props = __props;
+    const slots = useSlots();
     const classes = computed(() => {
       return {
         "sk-alert": true,
         [`sk-${props.kind}`]: true,
-        "sk-prominent": props.prominent
+        "sk-subtle": props.subtle
       };
     });
+    const shouldShowIcon = computed(() => {
+      if (props.showIcon !== void 0) {
+        return props.showIcon;
+      }
+      const hasDefaultIcon = FEEDBACK_KINDS.includes(props.kind);
+      const hasSlotContent = !!slots.icon;
+      return hasDefaultIcon || hasSlotContent;
+    });
     const customColorStyles = useCustomColors(
       "alert",
       toRef(() => props.baseColor),
@@ -15263,7 +15277,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(unref(customColorStyles)),
         role: "alert"
       }, [
-        createElementVNode("div", _hoisted_1$w, [
+        shouldShowIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$w, [
           renderSlot(_ctx.$slots, "icon", {}, () => [
             __props.kind === "info" ? (openBlock(), createElementBlock("svg", _hoisted_2$h, [..._cache[0] || (_cache[0] = [
               createElementVNode("circle", {
@@ -15320,7 +15334,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               }, null, -1)
             ])])) : createCommentVNode("", true)
           ])
-        ]),
+        ])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_6$3, [
           renderSlot(_ctx.$slots, "default")
         ])

package/dist/sleekspace-ui.umd.js

@@ -15224,7 +15224,10 @@ Defaulting to \`null\`.`);
     }
   });
   const SkAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5e73d91f"]]);
-  const _hoisted_1$w = { class: "sk-alert-icon" };
+  const _hoisted_1$w = {
+    key: 0,
+    class: "sk-alert-icon"
+  };
   const _hoisted_2$h = {
     key: 0,
     viewBox: "0 0 24 24",
@@ -15258,19 +15261,30 @@ Defaulting to \`null\`.`);
     __name: "SkAlert",
     props: {
       kind: { default: "info" },
-      prominent: { type: Boolean, default: false },
+      subtle: { type: Boolean, default: false },
+      showIcon: { type: Boolean, default: void 0 },
       baseColor: {},
       textColor: {}
     },
     setup(__props) {
+      const FEEDBACK_KINDS = ["info", "success", "warning", "danger"];
       const props = __props;
+      const slots = vue.useSlots();
       const classes = vue.computed(() => {
         return {
           "sk-alert": true,
           [`sk-${props.kind}`]: true,
-          "sk-prominent": props.prominent
+          "sk-subtle": props.subtle
         };
       });
+      const shouldShowIcon = vue.computed(() => {
+        if (props.showIcon !== void 0) {
+          return props.showIcon;
+        }
+        const hasDefaultIcon = FEEDBACK_KINDS.includes(props.kind);
+        const hasSlotContent = !!slots.icon;
+        return hasDefaultIcon || hasSlotContent;
+      });
       const customColorStyles = useCustomColors(
         "alert",
         vue.toRef(() => props.baseColor),
@@ -15282,7 +15296,7 @@ Defaulting to \`null\`.`);
           style: vue.normalizeStyle(vue.unref(customColorStyles)),
           role: "alert"
         }, [
-          vue.createElementVNode("div", _hoisted_1$w, [
+          shouldShowIcon.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
             vue.renderSlot(_ctx.$slots, "icon", {}, () => [
               __props.kind === "info" ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$h, [..._cache[0] || (_cache[0] = [
                 vue.createElementVNode("circle", {
@@ -15339,7 +15353,7 @@ Defaulting to \`null\`.`);
                 }, null, -1)
               ])])) : vue.createCommentVNode("", true)
             ])
-          ]),
+          ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_6$3, [
             vue.renderSlot(_ctx.$slots, "default")
           ])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system",
   "type": "module",
   "main": "dist/sleekspace-ui.umd.js",
@@ -53,7 +53,7 @@
     "directory": "packages/sleekspace-ui"
   },
   "bugs": "https://gitlab.com/skewedaspect/sleekspace-ui/-/issues",
-  "homepage": "https://gitlab.com/skewedaspect/sleekspace-ui",
+  "homepage": "https://sleekspace.skewedaspect.com",
   "peerDependencies": {
     "vue": "^3.3.0"
   },

package/src/components/Alert/SkAlert.vue

@@ -4,9 +4,9 @@
 
 <template>
     <div :class="classes" :style="customColorStyles" role="alert">
-        <div class="sk-alert-icon">
+        <div v-if="shouldShowIcon" class="sk-alert-icon">
             <slot name="icon">
-                <!-- Default icons for each kind -->
+                <!-- Default icons for feedback kinds -->
                 <svg
                     v-if="kind === 'info'"
                     viewBox="0 0 24 24"
@@ -66,7 +66,7 @@
     /**
      * @component SkAlert
      * @description A contextual feedback component for displaying informational, success, warning, or error messages.
-     * Features automatic icon selection based on alert kind and supports both subtle and prominent visual styles.
+     * Features automatic icon selection based on alert kind and supports prominent (default) and subtle visual styles.
      * Use alerts to communicate important status updates, validation results, or system messages to users.
      *
      * @example
@@ -74,11 +74,10 @@
      * <SkAlert kind="success">Your changes have been saved!</SkAlert>
      * ```
      *
-     * @example Prominent warning with custom icon
+     * @example Subtle info alert
      * ```vue
-     * <SkAlert kind="warning" prominent>
-     *     <template #icon><CustomIcon /></template>
-     *     This action cannot be undone.
+     * <SkAlert kind="info" subtle>
+     *     A helpful tip for the user.
      * </SkAlert>
      * ```
      *
@@ -86,7 +85,7 @@
      * @slot icon - Custom icon to override the default kind-based icon. Receives no slot props.
      */
 
-    import { computed, toRef } from 'vue';
+    import { computed, toRef, useSlots } from 'vue';
 
     // Types
     import type { SkAlertKind } from './types';
@@ -97,32 +96,50 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    // Kinds that have default icons
+    const FEEDBACK_KINDS = [ 'info', 'success', 'warning', 'danger' ] as const;
+
+    //------------------------------------------------------------------------------------------------------------------
+
     export interface SkAlertComponentProps extends ComponentCustomColors
     {
         /**
-         * Semantic kind that determines the alert's color scheme and default icon. Each kind
-         * conveys a different meaning: 'info' for general information, 'success' for positive
-         * confirmations, 'warning' for cautionary messages, and 'danger' for errors or critical issues.
+         * Semantic kind that determines the alert's color scheme and default icon. Supports all
+         * semantic kinds (neutral, primary, accent, info, success, warning, danger) as well as
+         * direct color kinds (neon-blue, neon-purple, etc.). Default icons are provided for the
+         * four feedback kinds (info, success, warning, danger).
          * @default 'info'
          */
         kind ?: SkAlertKind;
 
         /**
-         * When true, applies prominent styling with a more vivid background color and stronger
-         * visual presence. Use prominent alerts for critical messages that require immediate
-         * user attention, such as errors or important warnings.
+         * When true, applies subdued styling with a lighter, semi-transparent background.
+         * Use subtle alerts for less critical messages that shouldn't dominate the visual
+         * hierarchy, such as tips or supplementary information.
          * @default false
          */
-        prominent ?: boolean;
+        subtle ?: boolean;
+
+        /**
+         * Controls visibility of the icon container. When undefined (default), the icon is shown
+         * automatically if there's a default icon for the kind (info, success, warning, danger)
+         * or if custom content is provided via the icon slot. Set to false to force-hide the icon,
+         * or true to force-show the container even when empty.
+         * @default undefined
+         */
+        showIcon ?: boolean;
     }
 
     //------------------------------------------------------------------------------------------------------------------
 
     const props = withDefaults(defineProps<SkAlertComponentProps>(), {
         kind: 'info',
-        prominent: false,
+        subtle: false,
+        showIcon: undefined,
     });
 
+    const slots = useSlots();
+
     //------------------------------------------------------------------------------------------------------------------
 
     const classes = computed(() =>
@@ -130,10 +147,26 @@
         return {
             'sk-alert': true,
             [`sk-${ props.kind }`]: true,
-            'sk-prominent': props.prominent,
+            'sk-subtle': props.subtle,
         };
     });
 
+    // Determine if we should show the icon container
+    const shouldShowIcon = computed(() =>
+    {
+        // Explicit override takes precedence
+        if(props.showIcon !== undefined)
+        {
+            return props.showIcon;
+        }
+
+        // Auto-show if kind has a default icon or if slot content is provided
+        const hasDefaultIcon = FEEDBACK_KINDS.includes(props.kind as typeof FEEDBACK_KINDS[number]);
+        const hasSlotContent = !!slots.icon;
+
+        return hasDefaultIcon || hasSlotContent;
+    });
+
     //------------------------------------------------------------------------------------------------------------------
 
     // Custom color styles

package/src/components/Alert/types.ts

@@ -2,9 +2,14 @@
 // Alert Component Types
 //----------------------------------------------------------------------------------------------------------------------
 
+// Types
+import type { ComponentKind } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
 /**
- * Alert semantic kinds (feedback-focused subset)
+ * Alert kind - supports all semantic and color kinds
  */
-export type SkAlertKind = 'info' | 'success' | 'warning' | 'danger';
+export type SkAlertKind = ComponentKind;
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_alert.scss

@@ -37,7 +37,7 @@
     /// Glow effect opacity
     --sk-alert-glow-opacity: 0.3;
 
-    /// Subtle background opacity (for non-prominent alerts)
+    /// Subtle background opacity (for default non-prominent alerts)
     --sk-alert-subtle-opacity: var(--sk-opacity-subtle);
 
     //------------------------------------------------------------------------------------------------------------------
@@ -107,8 +107,8 @@
         color: var(--sk-alert-fg);
         border-color: var(--sk-alert-border-color);
 
-        // Prominent variants get the dark foreground color
-        &.sk-prominent
+        // Non-subtle variants get the dark foreground color
+        &:not(.sk-subtle)
         {
             --sk-alert-fg: var(--sk-#{ $kind }-text);
         }
@@ -185,10 +185,10 @@
     }
 
     //------------------------------------------------------------------------------------------------------------------
-    // Prominent variant
+    // Non-subtle (prominent) variant - applied when NOT subtle
     //------------------------------------------------------------------------------------------------------------------
 
-    &.sk-prominent
+    &:not(.sk-subtle)
     {
         --sk-alert-padding: 1rem;
         --sk-alert-icon-size: 1.5rem;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.2.0-beta.3",
+  "version": "0.3.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -141,7 +141,7 @@
             {
               "name": "kind",
               "required": false,
-              "description": "Semantic kind that determines the alert's color scheme and default icon. Each kind\nconveys a different meaning: 'info' for general information, 'success' for positive\nconfirmations, 'warning' for cautionary messages, and 'danger' for errors or critical issues.",
+              "description": "Semantic kind that determines the alert's color scheme and default icon. Supports all\nsemantic kinds (neutral, primary, accent, info, success, warning, danger) as well as\ndirect color kinds (neon-blue, neon-purple, etc.). Default icons are provided for the\nfour feedback kinds (info, success, warning, danger).",
               "value": {
                 "kind": "expression",
                 "type": "SkAlertKind"
@@ -149,14 +149,24 @@
               "default": "'info'"
             },
             {
-              "name": "prominent",
+              "name": "subtle",
               "required": false,
-              "description": "When true, applies prominent styling with a more vivid background color and stronger\nvisual presence. Use prominent alerts for critical messages that require immediate\nuser attention, such as errors or important warnings.",
+              "description": "When true, applies subdued styling with a lighter, semi-transparent background.\nUse subtle alerts for less critical messages that shouldn't dominate the visual\nhierarchy, such as tips or supplementary information.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "showIcon",
+              "required": false,
+              "description": "Controls visibility of the icon container. When undefined (default), the icon is shown\nautomatically if there's a default icon for the kind (info, success, warning, danger)\nor if custom content is provided via the icon slot. Set to false to force-hide the icon,\nor true to force-show the container even when empty.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "undefined"
             }
           ],
           "slots": [