@liuk123/insui 0.0.1-alpha.1

package/styles/components/icon.less

@@ -0,0 +1,43 @@
+@import '../ui-local.less';
+
+/**
+ * @name Icon
+ * @selector ins-icon
+ *
+ * @description
+ * Container for displaying icons colored with CSS (color/background) using mask
+ *
+ * @vars
+ * --t-icon — mask for the icon
+ * --t-icon-bg — mask for the background
+ *
+ * @example
+ * <ins-icon style="--t-icon: url('icon.svg')"></ins-icon>
+ *
+ * @see-also
+ * Icons
+ */
+ins-icon {
+    position: relative;
+    display: inline-block;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    vertical-align: middle;
+    box-sizing: border-box;
+    mask: var(--t-icon) no-repeat center/contain;
+
+    @media @ins-mouse {
+        &[data-appearance='icon']:hover {
+            color: var(--ins-text-secondary);
+        }
+    }
+
+    &::after,
+    &[insIcons]::after {
+        .fullsize();
+        content: '';
+        background: currentColor;
+    }
+}

package/styles/components/icons.less

@@ -0,0 +1,38 @@
+/**
+ * @name Icons
+ * @selector [insIcons]
+ *
+ * @description
+ * Icons directive applies CSS mask to ::before and ::after pseudo elements
+ *
+ * @vars
+ * --t-icon-start — mask for ::before element
+ * --t-icon-end — mask for ::after element
+ *
+ * @example
+ * <button insIcons style="--t-icon-start: url('icon.svg')"></button>
+ *
+ * @see-also
+ * Button, Icon, Link
+ */
+[insIcons] {
+    --t-icon-start: none;
+    --t-icon-end: none;
+
+    &::before,
+    &::after {
+        content: '';
+        display: var(--t-icon-start);
+        inline-size: 1em;
+        block-size: 1em;
+        font-size: 1.5rem;
+        flex-shrink: 0;
+        background: currentColor;
+        mask: var(--t-icon-start) no-repeat center/contain;
+    }
+
+    &::after {
+        display: var(--t-icon-end);
+        mask: var(--t-icon-end) no-repeat center/contain;
+    }
+}

package/styles/components/label.less

@@ -0,0 +1,44 @@
+@import '../ui-local.less';
+
+/**
+ * @name Label
+ * @selector [insLabel]
+ *
+ * @description
+ * Easy to use label ready for horizontal orientation for checkbox/radio/switch
+ * and vertical for input, select and textarea
+ *
+ * @example
+ * <label insLabel><input type="checkbox" /> Click me</ins-icon>
+ *
+ * @see-also
+ * Checkbox, Radio, Title
+ */
+[insLabel] {
+    display: flex;
+    gap: 0.25rem;
+    flex-direction: column;
+    // font: var(--ins-font-text-m);
+    // color: var(--ins-text-primary);
+
+    &:not([data-orientation='vertical']) {
+        flex-direction: row;
+        align-items: center;
+        // inline-size: fit-content;
+        // font: var(--ins-font-text-m);
+    }
+
+    small {
+        font: var(--ins-font-text-s);
+    }
+
+    input[type='checkbox'],
+    input[type='radio'] {
+        margin-inline-end: 0.5rem;
+
+        &[data-size='s'] {
+            margin-inline-end: 0.25rem;
+            margin-block-start: 0.125rem;
+        }
+    }
+}

package/styles/components/link.less

@@ -0,0 +1,55 @@
+@import '../ui-local.less';
+
+/**
+ * @name Link
+ * @selector [insLink]
+ *
+ * @description
+ * Plain link design, applicable to both links and buttons
+ *
+ * @example
+ * <a insLink>Click me</a>
+ *
+ * @see-also
+ * Icons, Appearance, Button
+ */
+[insLink] {
+
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    text-decoration: none dashed currentColor;
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 0.7px;
+    text-decoration-color: color-mix(in lch, currentColor, transparent);
+
+    &:hover {
+        --ins-text-secondary: var(--ins-text-primary);
+    }
+
+    &::before {
+        margin-inline-end: 0.25rem;
+    }
+
+    &::after {
+        margin-inline-start: 0.25rem;
+    }
+
+    &[insIcons]::before,
+    &[insIcons]::after {
+        content: '\2060';
+        padding: calc(var(--ins-icon-size, 1rem) / 2);
+        vertical-align: super;
+        font-size: 0;
+        line-height: 0;
+        box-sizing: border-box;
+    }
+
+    .appearance-focus({
+        outline: none;
+        background: color-mix(in lch, currentColor 12%, transparent);
+    });
+}

package/styles/components/notification.less

@@ -0,0 +1,156 @@
+@import '../ui-local.less';
+
+/**
+ * @name Notification
+ * @selector ins-notification, [insNotification]
+ *
+ * @description
+ * A colored rounded block of information with optional icon, title, subtitle and actions
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('s' | 'm' | 'l')
+ *
+ * @example
+ * <ins-notification insAppearance data-appearance="negative">
+ *   <div insTitle>
+ *     Error
+ *     <span insSubtitle>Something went wrong</span>
+ *   </div>
+
+ * </ins-notification>
+ *
+ * @see-also
+ * Icons, Appearance
+ */
+ins-notification,
+[insNotification] {
+    .button-clear();
+
+    position: relative;
+    display: block;
+    max-block-size: 100%;
+    color: var(--ins-text-primary);
+    
+    padding: 0.75rem;
+    font: var(--ins-font-text-m);
+    line-height: 1.25rem;
+    border-radius: var(--ins-radius-m);
+    box-sizing: border-box;
+    text-align: start;
+    text-decoration: none;
+    border-inline-start: var(--t-left) solid transparent;
+    border-inline-end: var(--t-right) solid transparent;
+
+    --t-left: 0;
+    --t-right: 0;
+
+    &[style*='--t-icon-start:'] {
+        --t-left: 1.625rem;
+    }
+
+    &[style*='--t-icon-end:'] {
+        --t-right: 1.5rem;
+    }
+
+    &::before {
+        position: absolute;
+        left: -0.975rem;
+        top: 0.875rem;
+    }
+    &::after {
+        .center-top();
+
+        right: -0.5rem;
+        font-size: 1rem;
+        margin: 0 -0.25rem 0 auto;
+        color: var(--ins-text-tertiary) !important;
+    }
+
+    &[data-size='s'] {
+        padding: 0.375rem 0.625rem;
+        font: var(--ins-font-text-s);
+        line-height: 1rem;
+        border-radius: var(--ins-radius-s);
+
+        &[style*='--t-icon-start:'] {
+            --t-left: 1.5rem;
+        }
+
+        &::before {
+            top: 0.5rem;
+            left: -0.875rem;
+            font-size: 1rem;
+        }
+
+        &::after {
+            right: -0.875rem;
+        }
+        ins-icon {
+            font-size: 1rem;
+        }
+
+        > [insIconButton] {
+            top: 0;
+            right: 0;
+        }
+    }
+
+    &[data-size='l'] {
+        padding: 1rem;
+        font: var(--ins-font-text-l);
+        line-height: 1.5rem;
+        border-radius: var(--ins-radius-l);
+
+        &[style*='--t-icon-start:'] {
+            --t-left: 2rem;
+        }
+
+        &::before {
+            left: -1rem;
+            font-size: 1.5rem;
+        }
+
+        &::after {
+            right: -0.75rem;
+        }
+        ins-icon {
+            font-size: 1.25rem;
+        }
+
+
+        > [insIconButton] {
+            top: 0.375rem;
+            right: 0.5rem;
+        }
+    }
+
+    // .notification-title {
+    //     gap: 0.125rem;
+    //     font: var(--ins-font-text-l);
+    //     font-weight: bold;
+    // }
+
+    // .notification-content {
+    //     font: var(--ins-font-text-m);
+
+    //     // + * {
+    //     //     display: flex;
+    //     //     align-items: center;
+    //     //     gap: 1.25rem;
+    //     //     margin-top: 0.625rem;
+    //     //     font: var(--ins-font-text-s);
+    //     // }
+    // }
+
+    > [insIconButton] {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+        box-shadow: none !important;
+        background: transparent !important;
+    }
+}
+
+[insNotification] {
+    cursor: pointer;
+}

package/styles/components/radio.less

@@ -0,0 +1,58 @@
+@import '../ui-local.less';
+
+/**
+ * @name Radio
+ * @selector [insRadio]
+ *
+ * @description
+ * A stylized input type="radio"
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('s' | 'm')
+ *
+ * @example
+ * <input type="radio" insRadio />
+ *
+ * @see-also
+ * Checkbox, Switch, Appearance
+ */
+[insRadio] {
+    --t-size: 1.5rem;
+
+    .transition(~'background, box-shadow');
+
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+    border-radius: 100%;
+    color: var(--ins-text-primary-on-accent);
+
+    &:disabled._readonly {
+        opacity: 1;
+    }
+
+    &::before {
+        .fullsize(absolute);
+        .transition(transform);
+
+        content: '';
+        border-radius: 100%;
+        background: currentColor;
+        transform: scale(0);
+    }
+
+    &:checked::before {
+        transform: scale(0.5);
+    }
+
+    &[data-size='s'] {
+        --t-size: 1rem;
+    }
+
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        color: #fff;
+    }
+}